If JS fails to load, a keyframe remove the effect provided by JS in 2 seconds.

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

A version with better support:

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

::selection ans ::backdrop does not inherit from root. So :root does not guarantee the CSS variable. The html selector does not solve this.

There is currently no global context in CSS, but root is the best workaround currently.

This is going to catch a lot of people off-guard because I, like many others, expect CSS Custom properties defined on :root to just be available everywhere.

The following discussion is there https://github.com/w3c/csswg-drafts/issues/6641

To prevent a custom behavior on Safari Mobile

Rather than helping you build a sitewide design, readable.css provides a base default that is both sensible and beautiful.

For MacOS only
-webkit-font-smoothing: antialiased;

A great CSS reset

It's not available in Firefox yet.

CSS styling has no perfect solutions but tradeoffs between the different approaches. Choose the one that fits best to the project

Usages:

1. Circular menus or item lists
2. Wavy layouts (DNA strands, wave)

Fancy animations

A Hz unit in CSS ?

Use them as much as possible.
Exceptions are physical placement (anchor, ...)

Another CSS reset

Drunk theme

With box-shadow and a reset for outline.

If I want to develop fluid type calculations that adapt to local context, I’ll use em and cqi (container inline size) values. If I want my calculations to remain consistent across the entire page, I’ll use rem and vi (viewport inline size) calculations. In either case, I’ll define those values on body or other elements – so that 1rem always refers to the result of our initial negotiation, and doesn’t take on more complex meaning.

For spacing on the y-axis, the line-height (lh) unit is great or the rlh (root line-height). The x-axis can be handled with the vi or cqi units.

The right units for any situation are the ones that express most clearly what we mean – and sometimes what we mean requires a combination of units.

There’s no best unit, no best layout mode, and no best selector. When we use the entire language, we have more tools for clearly expressing our goals.

See Poetic CSS Architecture

A great summary

After 25 years, the zoom property will get a spec.

Zoom affects the box model compared to tranform: scale()