Css baseline 2023

calc() keywords

CSS now supports named mathematical constants inside calc() and other math functions: e, pi, infinity, -infinity, and NaN. These bring expressive mathematical notation directly into CSS without any JavaScript.

1
2

width:  calc(pi * 100px);   /* ~314.16px */
height: calc(e * 1rem);     /* ~2.72rem  */

pi — Pi (~3.14159)

Useful for circular geometry calculations:

1
2
3
4
5

.dial {
  --radius: 80px;
  --circumference: calc(2 * pi * var(--radius)); /* ~502.65px */
  stroke-dasharray: var(--circumference);
}

e — Euler’s Number (~2.71828)

Useful for exponential scaling curves:

1
2
3

.step-3 {
  font-size: calc(pow(e, 0.5) * 1rem); /* ~1.65rem */
}

infinity and -infinity

1
2

z-index: calc(infinity);   /* effectively the maximum z-index */
width:   calc(infinity);   /* resolves to the largest possible value */

NaN (Not a Number) resolves to 0 when used as a length. It is mostly useful as an intermediate value in complex math expressions where an invalid result needs to be handled gracefully.

These constants compose naturally with pow(), sqrt(), sin(), and cos():

1
2

width:  calc(sqrt(pow(3, 2) + pow(4, 2)) * 1px); /* 5px — Pythagorean theorem */
height: calc(sin(pi / 6) * 200px);               /* 100px — sin(30°) */

:dir()

The :dir() pseudo-class matches elements based on their text directionality — left-to-right or right-to-left — as determined by the document or the dir attribute.

1
2

:dir(ltr) { /* left-to-right elements */ }
:dir(rtl) { /* right-to-left elements */ }

Basic Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

:dir(rtl) .icon {
  transform: scaleX(-1); /* flip arrow icons for RTL */
}

:dir(ltr) blockquote {
  border-left: 4px solid #4f46e5;
}

:dir(rtl) blockquote {
  border-right: 4px solid #4f46e5;
}

:dir() uses the computed directionality from the HTML dir attribute or Unicode bidirectional algorithm — not just a CSS property. This makes it more semantically robust than [dir="rtl"].

Difference from [dir] Attribute Selector

1
2

[dir="rtl"] { }   /* matches only elements with dir="rtl" set explicitly */
:dir(rtl) { }     /* matches all RTL elements, including inherited direction */

When to use

• Flipping directional icons (arrows, carets)
• Swapping border sides for blockquotes and list indents
• Adjusting text alignment in bidirectional documents

:nth-child() of

The of <selector> syntax for :nth-child() lets you count only elements that match a given selector, rather than counting all siblings and then filtering.

1
2
3
4
5

/* Selects even li elements (counts ALL children) */
li:nth-child(even) { }

/* Selects even li.featured elements (counts only .featured) */
li:nth-child(even of .featured) { }

Without of, :nth-child(2) picks the second child regardless of its type or class. With of .featured, it picks the second element that has the .featured class.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* Alternate background on visible cards only, ignoring hidden ones */
.card:not(.hidden):nth-child(odd of :not(.hidden)) {
  background: #f9fafb;
}

/* Syntax */
:nth-child(An+B of selector)
:nth-child(2 of .highlight)
:nth-child(odd of li)
:nth-child(3n+1 of .card)

Cap unit

The cap unit represents the cap height of the current font — that is, the approximate height of uppercase letters. This is distinct from the em unit, which is based on the full em square of the font, and from ex, which approximates the x-height of lowercase letters.

Using cap lets you size elements in relation to the visual height of capital letters rather than the theoretical em square. This makes it particularly useful when you want spacing or sizing to feel optically aligned with uppercase text in a way that em alone cannot guarantee, since cap height varies significantly between typefaces.

1
2
3
4
5

h1 {
  /* An icon sized to match the capital letters beside it */
  width: 1cap;
  height: 1cap;
}

Because cap is a font-relative unit, it responds automatically to changes in font-size and font-family, making it a reliable choice for designs where elements need to stay in proportion with the uppercase letterforms around them.

color-gamut media query

The color-gamut media feature detects the approximate color gamut of the user’s display, letting you serve enhanced wide-gamut colors to capable screens.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@media (color-gamut: srgb) {
  /* Standard color range — all modern displays */
}

@media (color-gamut: p3) {
  /* Display P3 gamut — most modern phones and laptops */
}

@media (color-gamut: rec2020) {
  /* Very wide gamut — high-end HDR monitors */
}

Values are inclusive — a p3 display also matches srgb.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

:root { --brand: #0055ff; }

@media (color-gamut: p3) {
  :root { --brand: color(display-p3 0.1 0.3 1.0); }
}

@media (color-gamut: rec2020) {
  :root { --brand: color(rec2020 0.05 0.2 0.95); }
}

/* Combining with `dynamic-range` */
@media (color-gamut: p3) and (dynamic-range: high) {
  /* Full HDR P3 treatment */
}

Use for

• Vivid brand colors on capable displays
• Enhanced photography and illustration rendering
• Wide-gamut gradient backgrounds

color-mix()

color-mix() mixes two colors together in a specified color space, producing a new color. It is the CSS equivalent of blending paint.

1

color: color-mix(in oklch, #ff0000 40%, #0000ff 60%);

Arguments: color space, first color + percentage, second color + percentage.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

color: color-mix(in srgb, blue, white);
/* Percentages default to 50% each */

:root { --brand: #4f46e5; }
.light { background: color-mix(in oklch, var(--brand) 30%, white); }
.dark  { background: color-mix(in oklch, var(--brand) 70%, black); }
.muted { background: color-mix(in oklch, var(--brand) 50%, gray); }

/* the colorspace makes a difference */
color-mix(in srgb, red, blue)    /* dull purple */
color-mix(in oklch, red, blue)   /* vivid violet */

oklch and lab produce more perceptually natural results.

1

color-mix(in srgb, rgb(255 0 0 / 0.5), blue)

Alpha values are also mixed proportionally.

Container queries

Container queries let you apply styles based on the size of a parent element rather than the viewport. A component can now respond to its own available space, making it truly reusable across any layout.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* setting up a container */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

/* and using the container in a query */
@container sidebar (width >= 300px) {
  .widget {
    display: flex;
    gap: 1rem;
  }
}

When .sidebar is at least 300px wide, widgets switch to a flex layout — regardless of the viewport width.

1
2
3
4
5
6

/* container don't have to be named - anonymous containers */
.wrapper { container-type: inline-size; }

@container (width >= 400px) {
  .card { flex-direction: row; }
}

Container Units

Inside a container query, use cqi, cqb, cqw, cqh units relative to the container size:

1
2
3

@container (width >= 400px) {
  h2 { font-size: clamp(1rem, 5cqi, 2rem); }
}

CSS typed object model

The CSS Typed Object Model (Typed OM) is a JavaScript API that exposes CSS property values as typed objects rather than plain strings, making programmatic CSS manipulation faster, safer, and easier.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* reading values */
const el = document.querySelector('.box');
const styles = el.computedStyleMap();

const width = styles.get('width');
console.log(width.value); // 200
console.log(width.unit);  // "px"
 
/* writing values */
el.attributeStyleMap.set('width', CSS.px(300));
el.attributeStyleMap.set('opacity', CSS.number(0.5));
el.attributeStyleMap.set('transform', new CSSTranslate(CSS.px(10), CSS.px(20)));

CSS Factory Functions

1
2
3
4

CSS.px(10)        // CSSUnitValue { value: 10, unit: 'px' }
CSS.percent(50)   // CSSUnitValue { value: 50, unit: 'percent' }
CSS.deg(45)       // CSSUnitValue { value: 45, unit: 'deg' }
CSS.number(1.5)   // CSSUnitValue { value: 1.5, unit: 'number' }

Why this is better than getComputedStyle

• No string parsing — values come as typed objects with .value and .unit
• Math is straightforward: width.value + 10 instead of parseFloat(width) + 10
• Errors are caught early with meaningful messages

display animation

Animate To and From display: none

CSS can now animate elements to and from display: none using transition-behavior: allow-discrete combined with @starting-style, enabling true enter and exit animations without JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.dialog {
  /* Exit transition */
  transition:
    display 0.3s allow-discrete,
    opacity 0.3s,
    transform 0.3s;

  opacity: 1;
  transform: scale(1);
  display: block;
}

.dialog.hidden {
  opacity: 0;
  transform: scale(0.95);
  display: none;
}

/* Enter starting state */
@starting-style {
  .dialog {
    opacity: 0;
    transform: scale(0.95);
  }
}

How does this work

Entering

— @starting-style defines where the transition begins when the element first renders

Exiting

— allow-discrete delays display: none until the transition completes

When used on <dialog> and Popovers

1
2
3
4
5
6

dialog[open] {
  transition: display 0.3s allow-discrete, opacity 0.3s;
  opacity: 1;
}
dialog:not([open]) { opacity: 0; display: none; }
@starting-style { dialog[open] { opacity: 0; } }

font-synthesis-small-caps

font-synthesis-small-caps controls whether the browser synthesises small-caps glyphs by scaling down regular capitals when the font has no true small-caps variant.

Faux small caps are regular capitals scaled down ~75%. They look thinner and lighter than the surrounding text because they are not designed at that size — unlike true small-caps, which are drawn with appropriate stroke weights.

1
2
3

:root {
  font-synthesis-small-caps: none;
}

With synthesis disabled, font-variant-small-caps has no effect on fonts without true small caps — preserving typographic integrity.

1
2
3
4
5

font-synthesis-small-caps: auto;

/* shorthand */
font-synthesis: none;          /* disable all synthesis */
font-synthesis: small-caps;    /* allow only small-caps synthesis */

Pair font-synthesis-small-caps: none with a font that includes genuine small-caps, or avoid using font-variant-small-caps on fonts that lack them.

font-synthesis-style

font-synthesis-style controls whether the browser synthesises italic by algorithmically slanting the roman (upright) glyphs when the font has no true italic variant.

Synthesised italic is a geometric shear of the regular glyphs. It lacks the curves, alternate letterforms, and optical corrections of a properly drawn italic, producing a poor typographic result.

1
2
3

:root {
  font-synthesis-style: none;
}

When disabled, font-style: italic renders as upright text if no italic font file is available.

1

font-synthesis-style: auto;

If you load only the regular weight of a variable or web font, disable style synthesis to prevent <em> and <i> elements from rendering a faux slant:

1
2
3
4
5
6
7

body { font-synthesis-style: none; }

em, i { font-style: normal; color: #4f46e5; } /* use color instead */

/* shorthand */
font-synthesis: none;   /* disable all synthesis including style */
font-synthesis: style;  /* allow only style synthesis */

font-synthesis-weight

font-synthesis-weight controls whether the browser synthesises bold by artificially thickening glyphs when the font has no true bold variant available.

Synthesised bold adds uniform stroke weight to the regular font. The result looks uneven — spacing between letters is not adjusted, and the glyphs lack the design refinements of a true bold cut.

1
2
3

:root {
  font-synthesis-weight: none;
}

With synthesis disabled, font-weight: bold on a font without a bold variant renders at normal weight rather than a faux bold.

1

font-synthesis-weight: auto;

font-synthesis-weight is a longhand of font-synthesis:

1
2

font-synthesis: none;     /* disable all: weight, style, small-caps */
font-synthesis: weight;   /* allow only weight synthesis */

Always load the bold font file if your design uses bold text. Use font-synthesis-weight: none to catch cases where the bold variant has not loaded — it will fail visibly rather than silently substituting a degraded faux version.

font-variant-alternates

The font-variant-alternates property enables access to alternate glyph forms defined in OpenType fonts — stylistic sets, swashes, ornaments, annotations, and character variants. These are additional glyphs the type designer has included as alternatives to the standard letterforms.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

@font-feature-values 'MyFont' {
  @styleset { flowing: 1; elegant: 2; }
  @character-variant { alt-a: 1; alt-g: 2; }
  @swash { fancy: 1; }
}

.styleset {
  font-variant-alternates: styleset(flowing);
}

.swash-caps {
  font-variant-alternates: swash(fancy);
}

.ornamental {
  font-variant-alternates: ornaments(1);
}

.annotated {
  font-variant-alternates: annotation(1);
}

The @font-feature-values at-rule maps human-readable names to the numeric feature indices defined in the font, making the code more readable than using raw font-feature-settings values.

The functional values accepted by font-variant-alternates include stylistic() (a single alternate glyph), styleset() (a complete alternate style set), character-variant() (specific character alternates), swash() (decorative letterforms), ornaments() (decorative non-letter glyphs), and annotation() (enclosed or circled numerals and letters).

The availability of these features depends entirely on the font — not all fonts include alternate glyphs. Tools like the browser’s font inspector or applications like Wakamai Fondue help identify which OpenType features a specific font supports.

Hyphenate character

hyphenate-character sets the character displayed at the end of a hyphenated line when hyphens: auto breaks a word. By default, the hyphen-minus (-) is used.

1
2
3
4

p {
  hyphens: auto;
  hyphenate-character: "‐"; /* proper typographic hyphen U+2010 */
}

The Unicode hyphen character (‐, U+2010) is typographically correct for hyphenation — distinct from the hyphen-minus (-) used in code and arithmetic.

1
2
3
4

p { hyphenate-character: "–"; } /* en dash */
p { hyphenate-character: "=";  } /* equals sign — unusual but valid */
 
hyphenate-character: auto; /* browser/language default */

Lets the browser or language setting choose the most appropriate character.

In professional publishing contexts — print stylesheets, ebooks, editorial web typography — the distinction between - and ‐ is typographically meaningful. Most readers will never notice, but the difference is there.

lh unit

The lh unit equals the computed line-height of the element it is used on. It lets you size and space things in terms of text lines, making vertical rhythm much simpler to express.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.pull-quote {
  margin-block: 1lh;       /* one line of space above and below */
  padding-inline: 0.5lh;
}

.icon {
  width: 1lh;
  height: 1lh;             /* icon sized to match line height */
  vertical-align: middle;
}

Before lh, achieving one line of spacing meant calculating 1.5rem (or whatever your line height happened to be), then updating it manually if the line height changed. 1lh always stays in sync.

Difference from em and rem

• 1em = font-size of the current element
• 1lh = line-height of the current element (typically ~1.5× the font-size)
• 1rlh = line-height of the root element

Vertical Rhythm

1
2

p + p { margin-top: 1lh; }
h2    { margin-top: 2lh; }

linear() easing

The linear() easing function lets you define a custom animation timing curve by providing a list of progress points. It is the foundation for recreating spring physics, bounces, and complex custom easings in pure CSS.

1

animation-timing-function: linear(0, 0.5, 1);

Values are output progress (0–1) sampled at evenly spaced input intervals. Three values means: at 0% input → 0 output, at 50% → 0.5, at 100% → 1.

1
2
3
4
5
6

animation-timing-function: linear(
  0, 0.004, 0.016, 0.035, 0.063, 0.099, 0.143 13.6%,
  0.25, 0.39, 0.56, 0.76, 1,
  0.86, 0.77, 0.73, 0.75, 0.83, 0.91, 0.97, 1 78.2%,
  0.96, 1
);

You can specify the input position explicitly for more control:

1
2

linear(0, 0.25 50%, 1)
/* at 50% of the animation duration, progress is 25% */

Tools like the linear() generator let you draw a curve visually and export the linear() function.

Media query range syntax

The range syntax for media queries uses standard comparison operators (<, >, <=, >=) instead of min- and max- prefixes, making breakpoints cleaner and more intuitive.

1
2
3
4
5

/* Old syntax */
@media (min-width: 600px) and (max-width: 1200px) { }

/* New syntax */
@media (600px <= width <= 1200px) { }

1
2
3
4
5
6
7

@media (width >= 768px) { }   /* was: min-width: 768px */
@media (width < 480px)  { }   /* was: max-width: 479px */
@media (height > 600px) { }
@media (resolution >= 2dppx) { }

/* Mixed conditions */
@media (width >= 600px) and (prefers-color-scheme: dark) { }

The old min-width/max-width naming is counterintuitive — “min-width: 600px” means “when the viewport is at least 600px”. The range syntax reads as plain mathematics.

It also removes the off-by-one edge case: max-width: 599px and min-width: 600px left exactly 1px ambiguity. < 600px and >= 600px are unambiguous.

Nesting

CSS now supports native nesting — writing selectors inside other selectors — without any preprocessor like Sass or Less. Nested rules inherit the context of their parent.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.card {
  padding: 1rem;
  border-radius: 8px;

  .title {
    font-size: 1.25rem;
    font-weight: bold;
  }

  p {
    color: #555;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* Parent Selector with `&` */
.button {
  background: #4f46e5;

  &:hover {
    background: #4338ca;
  }

  &.large {
    padding: 1rem 2rem;
  }
}

& refers to the outer selector.

Media Queries Inside Rules

1
2
3
4
5
6
7

.hero {
  font-size: 2rem;

  @media (width < 600px) {
    font-size: 1.25rem;
  }
}

Native nesting reduces repetition, keeps related styles co-located, and makes stylesheets much easier to scan and maintain — previously requiring a build step.

Oklab and OkLCh

oklab() and oklch() are improved perceptually uniform color spaces that fix known issues with the older Lab and LCH spaces — producing more predictable palettes, gradients, and color mixing.

1

color: oklab(0.63 -0.1 0.1);

L (0–1), a (green–red), b (blue–yellow). Range is 0–1 unlike Lab’s 0–100.

1

color: oklch(65% 0.2 140);

L (lightness), C (chroma), H (hue 0–360). The most intuitive of the perceptual spaces.

Because regular LCH produces unwanted hue shifts — especially blues turning purple at high chroma, OkLCh was added to correct this, giving true hue-stable chroma variation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* color palette */
:root {
  --blue-light:  oklch(80% 0.12 250);
  --blue-mid:    oklch(55% 0.20 250);
  --blue-dark:   oklch(35% 0.18 250);
}
/* Changing only `L` gives true tints and shades with a consistent hue. */

/* in gradients */
background: linear-gradient(in oklch, blue, yellow);
/* Produces a vivid, natural transition without the grey midpoint of sRGB. */

Overflow media queries

The overflow-block and overflow-inline media features detect how the device handles content that overflows the viewport — whether it scrolls, paginates, or clips it entirely.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

@media (overflow-block: scroll) {
  /* Normal scrolling screen — most browsers */
}

@media (overflow-block: paged) {
  /* Paginated output — printers, ebooks */
}

@media (overflow-block: optional-paged) {
  /* Can paginate or scroll — presentation slides */
}

@media (overflow-block: none) {
  /* Content is clipped — no scrolling possible */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@media (overflow-inline: scroll) { /* horizontal scroll possible */ }
@media (overflow-inline: none)   { /* horizontal overflow is clipped */ }

/* Disable sticky headers for paged media */
@media (overflow-block: paged) {
  header { position: static; }
}

/* Simplify layout for non-scrolling displays */
@media (overflow-block: none) {
  .sidebar { display: none; }
}

Mostly used for print stylesheets that behave differently from screen.

pow(), sqrt(), hypot(), log(), and exp()

CSS now includes pow(), sqrt(), hypot(), log(), and exp() for use inside calc() and other math contexts, enabling expressive mathematical layouts without JavaScript.

pow(base, exponent)

1

font-size: calc(pow(1.25, 3) * 1rem); /* 1.953rem — modular scale */

sqrt(value)

1

width: calc(sqrt(2) * 100px); /* ~141px — diagonal of a square */

hypot(a, b, ...) — Euclidean Distance

1
2

/* Hypotenuse of a 3×4 right triangle = 5 */
gap: calc(hypot(3, 4) * 1rem); /* 5rem */

log(value, base?) and exp(value)

1
2

--level: 3;
font-size: calc(exp(var(--level) * 0.2) * 1rem);

log() defaults to natural log (base e). exp(x) returns eˣ.

Possible usage:

1
2
3
4

:root { --ratio: 1.25; }
h1 { font-size: calc(pow(var(--ratio), 4) * 1rem); }
h2 { font-size: calc(pow(var(--ratio), 3) * 1rem); }
h3 { font-size: calc(pow(var(--ratio), 2) * 1rem); }

Rlh unit

The rlh unit equals the computed line-height of the root element (<html>). It is the root-relative counterpart to lh, useful for consistent global vertical rhythm.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

:root {
  font-size: 1rem;
  line-height: 1.6;
  /* 1rlh = 1.6rem globally */
}

section {
  margin-block: 2rlh;  /* two global line heights */
  padding: 1rlh;
}

lh vs rlh

• lh = line-height of the current element (changes with font-size overrides)
• rlh = line-height of the root element (constant across the page)

1
2
3
4
5
6
7

.small-text {
  font-size: 0.75rem;
  line-height: 1.4;
  /* 1lh = 0.75rem × 1.4 = 1.05rem */
  /* 1rlh = still the root line-height */
  margin-top: 1rlh; /* consistent with page rhythm */
}

rlh is the natural companion to rem for typographically grounded layout: rem for font-size-relative sizing, rlh for line-height-relative spacing.

scripting media query

The scripting media query detects whether JavaScript is available and enabled in the user’s browser, letting you provide meaningful CSS fallbacks for no-JS environments.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@media (scripting: enabled) {
  /* JavaScript is available */
}

@media (scripting: initial-only) {
  /* JS ran during page load but is now disabled (e.g. printed page) */
}

@media (scripting: none) {
  /* No JavaScript available */
}

1
2
3
4
5
6
7
8
9

/* Hide JS-powered component, show CSS fallback */
@media (scripting: none) {
  .js-accordion { display: none; }
  .no-js-details { display: block; }
}

@media (scripting: enabled) {
  .no-js-details { display: none; }
}

Rather than relying on adding a js class to <html> with JavaScript, scripting lets CSS handle this detection natively.

Use for:

• Showing static content when a JS-powered widget would otherwise be empty
• Adjusting navigation for no-JS users
• Print stylesheets where JS-triggered states may not apply

sin(), cos(), tan(), asin(), acos(), atan(), and atan2()

CSS now supports sin(), cos(), tan(), asin(), acos(), atan(), and atan2() — enabling geometric calculations directly in CSS without JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.box {
  width: calc(100px * cos(30deg));
  height: calc(100px * sin(30deg));
}

/* Placing Items on a Circle */
.item {
  --angle: 60deg;
  --r: 150px;
  transform:
    translateX(calc(var(--r) * cos(var(--angle))))
    translateY(calc(var(--r) * sin(var(--angle))));
}

/* Inverse Functions */
--angle: atan2(4, 3); /* angle whose tangent is 4/3 ≈ 53.13deg */

atan2(y, x) takes two arguments for the correct quadrant handling.

Functions that accept an angle work with deg, rad, turn, and grad. Inverse functions return values in rad — convert with / 1rad * 1deg if needed.

Subgrid

subgrid lets a child grid participate in its parent’s track sizing, so columns and rows automatically align across nested components without any duplication of grid definitions.

The problem without subgrid is that if the parent changes, the child must be manually updated.

1
2

.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; }
.child  { display: grid; grid-template-columns: 1fr 2fr 1fr; } /* repeated! */

With subgrid:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  grid-column: 1 / -1;    /* span all parent columns */
  display: grid;
  grid-template-columns: subgrid;
}

The child’s columns mirror the parent’s exactly — always.

subgrid can be uses on both axes

1
2
3
4
5
6
7

.child {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

Best used for card grids:

1
2

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }

Card images, titles, and footers align across all cards automatically.

Update frequency media query

The update media feature describes how quickly the output device can refresh its display — letting you disable animations for e-ink screens and print output that cannot handle them.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

@media (update: fast) {
  /* Normal screen — animations are fine */
}

@media (update: slow) {
  /* E-ink or slow-refresh display */
}

@media (update: none) {
  /* Printed output — no visual updates */
}

/* Disabling animations for E-Ink */
.spinner {
  animation: spin 1s linear infinite;
}

@media (update: slow), (update: none) {
  .spinner {
    animation: none;
  }
}

update is related to prefers-reduced-motion

• update — hardware capability (can the screen even refresh?)
• prefers-reduced-motion — user preference (do they want reduced motion?)

Check both for the most accessible experience:

1
2
3

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  /* Full animations */
}

:user-valid and :user-invalid

:user-valid and :user-invalid are like :valid and :invalid — but they only apply after the user has interacted with the field, preventing error styles from showing on page load before the user has typed anything.

The problem with :invalid is that users see errors before they’ve done anything.

1
2

/* Shows red border on empty required fields immediately on page load */
input:invalid { border-color: red; }

These styles only activate after the user has interacted with and then left the field.

1
2
3
4
5
6
7
8

input:user-invalid {
  border-color: #dc2626;
  outline: 2px solid #dc2626;
}

input:user-valid {
  border-color: #16a34a;
}

When they trigger

• :user-invalid — after the user edits the field and it fails validation
• :user-valid — after the user edits the field and it passes validation

color()

The color() function lets you specify colors in color spaces beyond standard sRGB — including display-p3, a98-rgb, prophoto-rgb, and more — unlocking richer, more vivid colors on capable displays.

1
2
3

.vivid {
  color: color(display-p3 0.2 0.9 0.4);
}

Values are in the range 0–1 for each channel (red, green, blue in display-p3).

Supported color spaces:

• srgb — standard web colors
• display-p3 — wider gamut, ~25% more colors than sRGB
• a98-rgb — Adobe RGB, used in print workflows
• rec2020 — very wide gamut for HDR video
• xyz, xyz-d50, xyz-d65 — device-independent

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* Progressive enhancement */
.button {
  background: #00cc55;                        /* sRGB fallback */
  background: color(display-p3 0.1 0.8 0.35); /* P3 if supported */
}

/* Or use `@supports`: */
@supports (color: color(display-p3 0 0 0)) {
  .button { background: color(display-p3 0.1 0.8 0.35); }
}

CSS @counter-style

The @counter-style at-rule lets you define entirely custom counter styles for lists, going far beyond the built-in disc, decimal, or lower-roman options.

1
2
3
4
5
6
7
8
9

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

Each list item now gets a 👍 as its marker.

• system — how symbols are cycled (cyclic, numeric, alphabetic, additive)
• symbols — the characters or images used as markers
• suffix — what follows the marker (default is ". ")
• prefix — what precedes the marker
• range — which counter values this style applies to

1
2
3
4

@counter-style bold-decimal {
  system: extends decimal;
  suffix: ") ";
}

extends lets you tweak an existing style rather than building from scratch.

Use it for:

• Emoji bullet points
• Custom legal or academic numbering (1.1, 1.2…)
• Language-specific list conventions

image-set()

image-set() is the CSS equivalent of the HTML srcset attribute — it lets you provide multiple versions of a background image at different resolutions, and the browser picks the most appropriate one.

1
2
3
4
5
6
7

.hero {
  background-image: image-set(
    url("hero.webp") type("image/webp"),
    url("hero.jpg") 1x,
    url("hero@2x.jpg") 2x
  );
}

On a high-DPI screen, the browser uses hero@2x.jpg. On a standard screen, it uses hero.jpg.

Resolution descriptors:

1
2
3
4
5

background-image: image-set(
  "low-res.png" 1x,
  "hi-res.png" 2x,
  "ultra.png" 3x
);

The type() function lets you provide modern formats with fallbacks:

1
2
3
4
5

image-set(
  url("image.avif") type("image/avif"),
  url("image.webp") type("image/webp"),
  url("image.jpg")  1x
)

Include -webkit-image-set() for wider compatibility alongside the standard version.

Lab and LCH

CSS lab() and lch() express colors in perceptually uniform color spaces — meaning equal numerical steps produce equal-looking differences in color, which sRGB does not guarantee.

1
2
3
4
5
6
7
8
9

.element {
  color: lab(50% -40 60);
  /* Three values: `L` (lightness 0–100), `a` (green–red axis), `b` (blue–yellow axis). */
}

.element {
  color: lch(60% 80 120); 
  /* Three values: `L` (lightness), `C` (chroma/saturation), `H` (hue angle 0–360). LCH is often more intuitive than Lab because hue is a simple angle. */
}

Creating color palettes in sRGB can produce steps that look visually uneven — some jumps appear larger than others. Lab and LCH produce palettes that look evenly spaced to the human eye.

oklch() is a newer, improved version of LCH with better perceptual uniformity. Many design systems are adopting it for design tokens.

1

color: oklch(65% 0.2 140);

Two-value display property

CSS now supports a two-value syntax for display that separates the outer display type (how the element participates in layout) from the inner display type (how it lays out its children).

1
2
3
4
5
6

.box {
  display: block flow;       /* same as: block */
  display: inline flex;      /* same as: inline-flex */
  display: block grid;       /* same as: grid */
  display: inline flow-root; /* same as: inline-block */
}

The traditional single-value keywords (block, inline-flex, grid) are shorthand for combined inner and outer values. The two-value syntax makes this explicit and more logical.

Common mappings

Most developers still use the legacy single-value keywords — they are shorter and widely understood. The two-value syntax is more useful for understanding how display works conceptually and when teaching CSS.

CSS contain-intrinsic-size

When you use CSS containment (content-visibility: auto), the browser skips rendering off-screen elements. But without a size hint, it treats them as zero-sized, causing layout jumps. contain-intrinsic-size solves this.

contain-intrinsic-size tells the browser how large a contained element probably is before it has been rendered.

1
2
3
4

.card {
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

Here, the browser reserves 200px of height for each .card even while it is off-screen.

Using auto as a value lets the browser remember the last known rendered size and use it as the hint on subsequent renders — the best of both worlds.

1

contain-intrinsic-size: auto 200px;

• Prevents large scroll position jumps
• Improves Cumulative Layout Shift (CLS) scores
• Pairs perfectly with content-visibility: auto for long pages

CSS counter-set

The counter-set property allows you to assign a specific value to a CSS counter, making it easy to control numbering in lists, chapters, or any sequenced content.

Unlike counter-reset (which always resets to zero or a default) and counter-increment (which adds to a counter), counter-set lets you jump directly to any number you choose.

1
2
3

.chapter {
  counter-set: section 5;
}

This sets the section counter to 5 immediately, so the next increment will produce 6.

Combine counter-set with counter-increment and content in ::before pseudo-elements for fully custom, CSS-driven numbering systems without touching your HTML markup.

Hyphenation

The hyphens property controls whether the browser automatically inserts hyphens when breaking long words across lines. It is a simple but effective way to improve text flow in narrow columns.

1
2
3

p { hyphens: none; }   /* Never hyphenate */
p { hyphens: manual; } /* Only at ­ soft hyphens */
p { hyphens: auto; }   /* Browser hyphenates automatically */

1
2
3
4

p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

The lang attribute on your HTML element is required for auto to work correctly, as the browser uses language-specific hyphenation dictionaries.

1

<html lang="en">

Even with hyphens: manual, you can place soft hyphens in HTML to suggest break points:

1

<p>This is a very long­word that may need breaking.</p>

The soft hyphen (­) is invisible unless the line breaks there.

It’s best for justified text, narrow sidebars, and responsive layouts where long words cause overflow.

Css :has()

The long awaited ‘parent’ selector :has() finally landed in 2023 in all major browsers.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
    <strong>Lorem ipsum dolor sit amet,</strong>
    <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<style>
.box {
    aspect-ratio: 1;
    background-color: oklch(from rebeccapurple calc(l + 0.5) c h / 70%);
    max-width: 240px;
    width: 48%;
    padding: 0.5em;
    &:has(strong) {
        background-color: oklch(from rebeccapurple calc(l - 0.25) c h / 70%); 
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }
}
</style>