Advanced functions & at-rules

Advanced functions & at-rules

The final shelf of CSS functions and rules.

@counter-style

Define your OWN list numbering:

@counter-style star-list {
  system: cyclic;
  symbols: "★";
  suffix: " ";
}
ul { list-style: star-list; }

image-set()

Responsive background images by resolution:

.hero {
  background-image: image-set(
    "hero-1x.png" 1x,
    "hero-2x.png" 2x
  );
}

steps() easing

Snappy, discrete animation steps:

.box {
  transition-timing-function: steps(4, jump-none);
  animation-timing-function: steps(3, end);
}

matrix()

One transform matrix combining translate/scale/rotate:

img {
  transform: matrix(1, 0, 0, 1, 40, 40);   /* translate 40,40 */
}

paint() / element()

Advanced: paint() calls CSS Houdini; element() uses a live element as background.

TL;DR

• @counter-style invents custom markers.
• image-set() serves resolution-aware backgrounds.
• steps() makes discrete step animations.
• matrix() bundles transforms in one call.
• paint()/element() are bleeding-edge tools.