Web CSS

A usuful mozilla addition (note that it is a prefix):

@-moz-document url-prefix("https://www.reddit.com/") {
    /* [...] */
}

A few (already working today) somewhat new CSS thingies.

CSS custom properties (or, "CSS Variables"):

:root { --main-color: red; }
div.main { color: var(--main-color); }
div.fallback { color: var(--main-color, red); }

element.style.getPropertyValue("--my-var"); // get variable from inline style
getComputedStyle(element).getPropertyValue("--my-var"); // get variable from wherever
element.style.setProperty("--my-var", jsVar + 4); // set variable on inline style

Info over RGB (and other) colors: now recommanded to use space as sperator (i.e., color: rgb(0 0 0);)

Ratio: height: 100px; aspect-ratio: 16/9;

For check/radio boxes and progress: accent-color: green;

New size units mostly for Android/Apple dumb phones: svh, lvh, dvh: a percentage of Small, Large or Dynamic viewport (Large = fullscreen size, Small = with toolbar)

CSS nesting:

div { .subby { ... } }  /* equals to "& .subby" -- note the space */
div { &.subby { ... } } /* & can be used for more precision       */
div { & td { ... } }    /* & is required for if no other symbol   */

The :is selector:

div > :is(.subby, .fatty) { ... }

Importing:

@import sub.css;
@import sub2.css layer(myLayer);

Layers: group rules without regard to specifity (also, outside of layers has priority over inside of a layer):

@layer layer1 layer2 ... ; /* order           */
@layer layer1 { ... }      /* rules           */
@layer { ... }             /* anonymous layer */

Interesting future CSS

(Do not use, not ready yet, wait a few months/years...)

Color mix: background-color: color-mix(in srgb, #34c9eb 100%, white); (Defaults to 50%, can be in hsl or in lab or..., works very well with custom properties.)

The :has selector: allows you to select an element depending upon its content (also called the parent selector):

h1 { color: red; margin: 0 0 1rem 0; }
h1 :has(h2) { margin: 0 0 0.25rem 0; } /* less margin if a H2 follows it */