Browserslist: target usage, not versions

The ">0.25%" value tells [Browserslist] to only [target] browsers that make up more than 0.25% of global usage. This ensures your bundle does not contain unnecessary transpiled code for browsers that are used by a very small percentage of users.

In most cases, this is a better approach than using […] the "last 2 versions" value[, which targets] the last two versions of every browser, which means support is provided for discontinued browsers such as Internet Explorer. This can unnecessarily increase the size of your bundle if you do not expect these browsers to be used to access your application.

Ultimately, you should select the appropriate combination of queries to only target browsers that fit your needs.

line-gap-override, ascent-override and descent-override CSS properties

[T]he line-gap-override, ascent-override and descent-override CSS properties […] allow developers more control over how fonts are displayed. The following snippet shows just how useful these properties are when using a local fallback font:

Code language: CSS

@font-face {
  font-family: web-font;
  src: url("<https://example.com/font.woff>");
@font-face {
  font-family: local-font;
  src: local(Local Font);
  ascent-override: 90%;
  descent-override: 110%;
  line-gap-override: 120%;

These […] properties help to reduce layout shift when fonts are loading, as developers can better match the intricacies of a local font with a web font. They work alongside the size-adjust property[.]

What forces layout/reflow: a comprehensive list by Paul Irish



CSS custom properties are not variables

A screenshot of the CSS spec highlighting the distinction between a custom property and a variable.

CSS custom properties are commonly known as CSS variables, and judging by the main web development blogs and resources, most people likely use the terms “custom property” and “variable” interchangeably[.]


The reason for this could be that the CSS spec itself uses both terms. ”Custom properties” and “variables” both appear in the spec’s text dozens of times and even in the spec’s own title (“CSS Custom Properties for Cascading Variables”).

However, the spec distinguishes the two terms: A custom property is not a variable, but it defines a variable. Any property can use variables with the var() function whose values are defined by their associated custom properties.


This distinction is useful because it allows us to talk about “variables with fallback values” (a custom property like any other property cannot have a fallback value) and “properties using variables” (a property cannot use a custom property) […] as well as “declaring a custom property on an element” (a variable isn’t declared but assigned to a property) and “the computed value of a custom property” (a variable doesn’t have a computed value but draws from the computed value of its associated custom property).


Can I use… is an invaluable resource that we all (hopefully) use on a regular basis, but what if you have an existing codebase that you want to evaluate for browser support? You could go through it manually, but that could be a lot of work. Thankfully, someone has put together an app and a Node.js module that can crawl your CSS and list what will break in what browser.

CSS Motion Path



Code language: CSS

#motion-demo {
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
@keyframes move {
  0% {
    offset-distance: 0%;
  100% {
    offset-distance: 100%;