Javascript has access to the conditional CSS tools that we have to work when working directly with CSS. This post will cover matchMedia script support for media queries and CSS.Supports programmatic access to CSS' @supports at-rule. We will also discuss some reasons why would you want to use these Javascript functions rather than doing it straight in CSS. When working with CSS in JS, you can leverage these methods as one-time events or inside a changehttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/changeevent event listeners to trigger new tests if the media query matches or not when building interactive web content or we're not certain of what...
The PageVisibility API lets your application know when a page is visible to the user. While this information may seem irrelevant it enables the creation of Web pages that behave differently when they are not being viewed. For example: You can throttle or pause data-intensive activities like data updates when the page is not visible You can pause video/audio content until the user displays the page again You can choose to have your application display notifications to the user only when the tab/window is hidden from view You can choose to pause animations and automatic actions like carrousel navigations until...
What browsers should we support? This is an interesting question: What browsers should we support? This is a deceptively simple question to ask and even harder to answer. This post will try to address this question along with different ways to address browser support issues. Why browser versions don't work We used to say that supporting the last two versions of major browsers was enough to cover our bases. But that is not enough. Unlike the times of monolithic, month-long development cycles, browsers are updated monthly and may or may not contain all the latest CSS and Javascript features. The...
Working with grids on web content can be as simple or as complex as you want it to be. This post will cover different ways to place content on a grid and what would you use them for. The idea is to have this post as a reference. Explicit positioning With the following HTML: html 01 02 03 04 05 06 07 08 09 10 This CSS lays out the grid with six equal columns; it repeats the 1frhttps://css-tricks.com/introduction-fr-css-unit/ value 6 times when defining the columns with grid-template-columns. css .container { width: 60vw; inline-size: 60vw; display: grid; grid-template-columns: repeat6, 1fr;...
We can control the color schemes for light and dark modes through CSS using the prefers-color-scheme media query. These media queries will match the system's color scheme and will allow us to select what colors to use when on each mode. The two possible values for prefers-color-scheme are: light and dark. In the first example below, the default is the light color scheme so we define a dark color scheme inside the media query. css { background: oklch85.05% 0.049 84.53; color: oklch40.9% 0.105 43.91; } @media prefers-color-scheme: dark { { background: oklch47.78% 0.067 65.07; color: oklch85.46% 0.03 67.41; outline: 5px...
New properties and functions will enable you to animate properties that, until now, were not animatable. We'll look at the following properties: transition-behavior calc-size @starting-style used to: Change the height of an element from 0 to auto Change the value of display from none to block The code These are the properties we'll use for these examples. transition-behavior The transition-behavior property specifies whether transitions will be started for properties whose animation behavior is discretehttps://developer.mozilla.org/en-US/docs/Web/CSS/transition-behaviorexamples. Discrete properties' values are not additive, and interpolation swaps from the start value to the end value at 50%. Specifically, denoting p as the progress value:...
There are four properties that I've always been curious and confused about: initial inherit unset revert These values are specified in the Values and Units Module Level 4https://drafts.csswg.org/css-values-4/textual-values specification. Resetting a Property: the initial keyword The initial keyword applies the property's default value to an element. It can be applied to any property, including the all shorthand property. With the property set to initial, all properties can be restored to their respective initial values in one go instead of restoring each one separately. css .demo { all: initial; } The initial value for inherited properties may be unexpected. You should...
Many CSS properties accept numbers as values. Whether these values are whole numbers, decimals, fractions or percentages. Whatever they are, the unit following a number determines its computed lengthhttps://css-tricks.com/computed-values-more-than-meets-the-eye/. So, what does the term length mean in the context of CSS as defined in the CSS Values and Units Module Level 4https://drafts.csswg.org/css-values-4/ specification? “Length” means any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things! Some examples of numbers: css / Unitless numbers / 1 / Pixels / 14px / em...
The gap property has evolved considerably and has become easier to work with. This post will discuss the evolution of creating gaps in content and how to use the gap property. In the early days of CSS, we would use the marginhttps://developer.mozilla.org/en-US/docs/Web/CSS/margin property When one value is specified, it applies the same margin to all four sides When two values are specified, the first margin applies to the top and bottom, and the second to the left and right When three values are specified, the first margin applies to the top, the second to the right and left, and the...
MathJax = { tex: { inlineMath: '$', '$', '\\', '\\' }, }; It's not common but there are times when we need to render math equations in a web page. This post will discuss two strategies for rendering math on web pages: The MathJAX third-party library and MathML, a native way to render math in browsers. We'll discuss the individual tools and why would we choose one over the other. Tools like iMathEQhttps://www.imatheq.com/imatheq/com/imatheq/math-equation-editor-latex-mathml.html allow to you create MathML and LaTeX that you can paste directly on your web content, but these graphical editors still require you to know enough math...
