Css baseline 2022

3D transforms

CSS 3D transforms extend the 2D transform system into the third dimension, allowing elements to be rotated, translated, and scaled along the z-axis. The parent element must establish a 3D rendering context using transform-style: preserve-3d for children to occupy genuine 3D space relative to each other.

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

.scene {
  perspective: 800px; /* Distance from viewer to z=0 plane */
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  backface-visibility: hidden; /* Hide the rear face when rotated away */
}

.card-back {
  transform: rotateY(180deg); /* Pre-rotated to face away initially */
}

The key 3D transform functions are rotateX(), rotateY(), rotateZ(), rotate3d(), translateZ(), translate3d(), scaleZ(), scale3d(), and perspective(). translateZ() moves an element toward or away from the viewer — positive values bring it closer, negative values push it further away.

perspective on a parent element sets the vanishing point depth for all 3D-transformed children. A lower value produces a more dramatic perspective effect; a higher value is subtler. perspective-origin controls the position of the vanishing point, defaulting to the centre of the element.

backface-visibility: hidden prevents the back face of a transformed element from showing through when it is rotated more than 90 degrees away from the viewer — essential for card-flip effects.

Cascade Layers

Cascade layers give you explicit control over the order in which groups of styles are evaluated in the cascade, independently of specificity. Declared with the @layer at-rule, each layer sits in a defined position in the cascade stack, and styles in a higher layer always win over styles in a lower layer — regardless of selector specificity.

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

@layer base, components, utilities;

@layer base {
  a {
    color: #0066cc;
  }
}

@layer components {
  .button {
    color: white;
    background: #0066cc;
  }
}

@layer utilities {
  .text-red {
    color: red;
  }
}

Declaring the layer order upfront with @layer base, components, utilities; establishes the stack before any rules are added, making the intended priority explicit. Styles in utilities will always override those in components, which will always override base — regardless of which selectors are used inside each layer.

Styles declared outside any layer sit above all layers in the cascade, which means unlayered styles take highest priority. This is important when integrating third-party stylesheets: wrapping them in a layer pushes them below your own unlayered styles, preventing specificity conflicts.

1
2

/* Third-party styles wrapped in a layer — your styles will override them */
@import url('third-party.css') layer(vendor);

Layers can also be nested:

1
2
3
4
5
6
7

@layer components {
  @layer forms {
    input {
      border: 1px solid #ccc;
    }
  }
}

Nested layers are referenced with dot notation: components.forms. This allows large codebases to organise styles hierarchically without losing control over cascade order.

Cascade layers are a fundamental tool for managing style architecture at scale, reducing the specificity arms race that commonly arises in large projects and making it practical to integrate external styles without !important overrides.

contain

The contain property allows you to indicate that an element and its subtree are independent from the rest of the document, enabling the browser to limit the scope of layout, style, and paint recalculations to that subtree. This can significantly improve rendering performance in complex pages.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.card {
  contain: layout style paint;
}

.widget {
  contain: strict; /* Equivalent to layout style paint size */
}

.article {
  contain: content; /* Equivalent to layout style paint */
}

The individual containment types can be combined or applied through shorthand keywords:

layout containment isolates the element from the outside layout — changes inside cannot affect elements outside, and vice versa. style containment limits the scope of CSS counters and quotes. paint containment ensures the element’s contents do not visually overflow its box. size containment means the element’s size does not depend on its children.

strict enables all four types simultaneously. content enables layout, style, and paint — the most commonly useful combination, without size containment which requires an explicit size to be set.

1
2
3
4

.isolated-component {
  contain: content;
  /* The browser knows changes here cannot affect the rest of the page */
}

Containment is also the foundation that container queries build on — container-type: inline-size implicitly applies layout and style containment to enable querying. content-visibility: auto uses containment internally to skip rendering off-screen elements.

font-synthesis

The font-synthesis property controls whether the browser is allowed to synthesise bold, italic, small-caps, and subscript/superscript font faces when the requested variant is not available in the font family. Synthesis produces an approximation by algorithmically transforming the regular face — thickening strokes for bold, slanting characters for italic — which is generally considered lower quality than a true designed variant.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.no-fake-bold {
  font-synthesis: none; /* Disable all synthesis */
}

.allow-italic-only {
  font-synthesis: style; /* Allow italic synthesis only */
}

body {
  font-synthesis: weight style; /* Default: allow both */
}

The font-synthesis shorthand accepts a space-separated list of the synthesis types to permit: weight (bold), style (italic/oblique), small-caps, and position (sub/super). Setting font-synthesis: none disables all synthesis; listing specific keywords enables only those.

Disabling synthesis is particularly important when a font family includes only a regular face — if bold is applied without synthesis, the text simply renders at normal weight rather than a fake-bold approximation. This is often preferable for display typefaces where the synthesised result is visually poor.

Individual longhands — font-synthesis-weight, font-synthesis-style, font-synthesis-small-caps, and font-synthesis-position — each accept auto (allow synthesis) or none (disallow it).

Layout containment

Layout containment, established with contain: layout, isolates the layout of an element’s subtree from the rest of the page. The browser can skip recalculating layout for the contained subtree when changes occur outside it, and vice versa — changes inside cannot trigger layout recalculations outside the boundary.

1
2
3

.card-grid .card {
  contain: layout;
}

Layout containment establishes several formatting context boundaries automatically: the element becomes a block formatting context (similar to overflow: hidden), a new stacking context, and a new absolute positioning containing block. This means:

• Floats inside the element cannot affect content outside it
• Margins do not collapse across the containment boundary
• Absolutely positioned children are contained within the element rather than escaping to a positioned ancestor

1
2
3
4
5
6

.widget {
  contain: layout;
  /* Absolutely positioned children are scoped here */
  /* Floats are contained here */
  /* No margin collapse with siblings */
}

Layout containment is particularly valuable for components that are rendered many times on a page — such as cards, list items, or table rows. When one card’s content changes, the browser only needs to recalculate layout within that card’s containment boundary, rather than the entire page.

It is one of the containment types included in both contain: content and contain: strict.

Paint containment

Paint containment, established with contain: paint, ensures that an element’s descendants do not paint outside its border box. The browser can skip painting the subtree entirely when it is off-screen, and can optimise repaints so that only the contained element’s area is repainted when its content changes.

1
2
3

.card {
  contain: paint;
}

Paint containment has a similar visual effect to overflow: hidden — content that would overflow the element’s box is clipped — but it also provides the performance benefit of containing the paint area. When a card’s content changes, the browser only repaints the pixels within that card’s box rather than potentially invalidating a larger region of the page.

Like layout containment, paint containment establishes a new stacking context and block formatting context, and acts as an absolute positioning containing block for descendants.

1
2
3
4
5

.animation-container {
  contain: paint;
  /* Animations inside are clipped to this box */
  /* Only this area is repainted during animations */
}

Paint containment is included in contain: content and contain: strict. It is particularly effective for elements containing animations or frequently changing content, as it limits how much of the page the browser needs to repaint. Combined with layout containment, it forms the content shorthand — the most commonly useful containment combination.

resolution media query

The resolution media feature queries the pixel density of the output device, allowing different styles or assets to be served to standard and high-resolution displays. It accepts values in dppx (dots per pixel), dpi (dots per inch), or dpcm (dots per centimetre).

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

/* Standard resolution */
.logo {
  background-image: url('logo.png');
}

/* High-resolution displays (retina, HiDPI) */
@media (resolution >= 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

@media (resolution >= 3dppx) {
  .logo {
    background-image: url('logo@3x.png');
    background-size: contain;
  }
}

1dppx corresponds to a standard display where one CSS pixel equals one physical pixel. 2dppx matches retina and HiDPI screens where two physical pixels render each CSS pixel, producing sharper images. The dpi unit can also be used — 96dpi is equivalent to 1dppx and 192dpi to 2dppx.

The modern range syntax makes the queries readable: (resolution >= 2dppx) is cleaner than the older (min-resolution: 2dppx). Both forms are supported.

For most modern use cases, serving vector SVG assets eliminates the need for resolution queries entirely — SVGs scale perfectly at any pixel density. Resolution queries remain relevant for raster images (PNG, JPEG, WebP) where separate files at different resolutions are needed for optimal sharpness.

Size containment

Size containment, established with contain: size, means that the element’s size is not influenced by its children. The browser can calculate the element’s size without looking at its content, which allows layout calculations to be skipped for the subtree when sizing the element.

1
2
3
4
5
6

.fixed-card {
  contain: size;
  width: 300px;
  height: 200px;
  /* Size is independent of content — children don't affect these dimensions */
}

Without an explicit size set, size containment causes the element to collapse to zero in both dimensions — because if the element’s size cannot depend on its children, and no size is specified, there is nothing to size it to. This makes size containment almost always require an explicit width and height (or block-size and inline-size) to be useful.

Size containment can be applied to just one axis with contain: inline-size (the inline axis only) or contain: block-size (the block axis only), giving finer control:

1
2
3
4

.container-query-host {
  container-type: inline-size;
  /* container-type implicitly applies inline-size containment */
}

Size containment is included in contain: strict but not contain: content, as it requires an explicit size which is not always desirable. It is the containment type implicitly applied by container-type: inline-size when setting up container queries, which is its most common real-world application.

Style containment

Style containment, established with contain: style, limits the scope of CSS properties that can affect elements outside a containment boundary. Specifically, it scopes CSS counters and quotes properties so that counter values and quote nesting levels do not bleed out of the contained subtree into the rest of the document.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.article {
  contain: style;
  counter-reset: section;
}

.article h2::before {
  counter-increment: section;
  content: counter(section) '. ';
}
/* Counter increments here don't affect counters outside .article */

Without style containment, CSS counters on one component can accidentally affect counter values in sibling components if they share the same counter name. Style containment prevents this by treating each contained element as a new scope for counter inheritance and the open-quote/close-quote nesting level.

Style containment does not affect most CSS properties — it does not isolate layout, painting, or size. It is narrowly focused on the two areas (counters and quotes) where CSS can have unintentional global side effects from within a component.

In practice, style containment is most often applied as part of contain: content or contain: strict rather than on its own, since the broader containment types that include it also bring more significant performance benefits.

text-align-last

The text-align-last property controls the alignment of the last line of a block of text, or of a line that ends with a forced line break. It is particularly useful when text-align: justify is set, since justification does not apply to the last line by default — that line is left-aligned and can appear awkwardly short in some layouts.

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

.justified {
  text-align: justify;
  text-align-last: justify; /* Also justify the last line */
}

.centred-last {
  text-align: left;
  text-align-last: center; /* Centre only the final line */
}

.end-aligned {
  text-align: justify;
  text-align-last: end;
}

The accepted values are the same as text-align: auto, left, right, center, start, end, and justify. The default auto applies the same alignment as text-align to the last line, which for justified text means the last line inherits the fallback alignment (typically left).

text-align-last applies to each line that immediately precedes a forced break — including lines before <br> elements — not just the very last line of the whole block. In practice it is most commonly used in combination with text-align: justify for typographic control over fully-justified text blocks.

text-combine-upright

The text-combine-upright property compresses a sequence of characters into the space of a single character, rotating them upright within a vertical text run. This is used for the typographic feature known as “tate-chuu-yoko” in Japanese — the insertion of horizontal numerals or abbreviations within vertical text so they read naturally without breaking the vertical flow.

1
2
3
4
5
6
7

.year {
  writing-mode: vertical-rl;
}

.year span {
  text-combine-upright: all; /* Compress the year number upright */
}

1
2

<p class="year">令和<span>6</span>年</p>
<!-- The "6" appears upright and compressed within the vertical text -->

Without text-combine-upright, numbers in vertical Japanese text would either be rotated sideways or stack vertically one digit at a time. With it, short sequences of characters (typically two to four digits) are fitted into a single em square, reading horizontally while the surrounding text flows vertically.

The all value compresses all characters in the element. The digits value (with an optional integer for the maximum number of digits) compresses only numeric digit sequences of up to that many digits — for example, text-combine-upright: digits 2 compresses sequences of one or two digits.

This property has no visual effect in horizontal writing modes — it only applies when the element is in a vertical text context established by writing-mode.

HWB

hwb() expresses colors as a hue angle plus amounts of white and black mixed in. Many designers find it more intuitive than HSL for creating tints and shades.

1

color: hwb(200 20% 10%);

• 200 — hue angle (same as in HSL, 0–360)
• 20% — whiteness (how much white is mixed in)
• 10% — blackness (how much black is mixed in)

Creating tints and shades:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* Base color */
color: hwb(200 0% 0%);

/* Tint — add white */
color: hwb(200 40% 0%);

/* Shade — add black */
color: hwb(200 0% 40%);

/* Grey — whiteness + blackness >= 100% */
color: hwb(200 50% 50%);

HSL uses saturation and lightness, which interact in less obvious ways. HWB’s whiteness and blackness are independent additive values that feel more like mixing paint.

With Alpha:

1

color: hwb(200 20% 10% / 0.5);

::backdrop

The ::backdrop pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer, like a dialog or popover.

 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
26
27
28

<button popovertarget="example-pop" popovertargetaction="show">
  Show popover
</button>
<div class="popover" id="example-pop" popover>
  <h2>Popover heading</h2>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
<style>
button {
    width: fit-content;
    border: 1px solid;
    border-radius: 3px;
    padding: 0.5em;
}
.popover {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    padding: 1rem;
    border-radius: 4px;
}
.popover::backdrop {
  backdrop-filter: blur(3px);
}
</style>

Grid Animation

This allows the animation of rows and columns in a grid layout.

Use grid-template-rows to animate from 0 to auto and in combination with a details summary it is possible to show and hide content 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
26
27
28
29
30
31
32
33
34
35
36
37
38

<div class="example-wrapper">
    <details>
        <summary>Click to see...</summary>
    </details>
    <div class="detail-content">
        <div class="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

<style>
    .example-wrapper {
        border: 1px solid;
        border-radius: 4px;
        padding: 1rem;
        margin-block: 1rem;
        max-width: 60ch;

        details {
            cursor: pointer;
        }

        .detail-content {
            display: grid;
            grid-template-rows: 0fr; /* yes, it has to be 0fr */
            transition: grid-template-rows 0.5s ease-out;
        }

        .inner {
            overflow: hidden; /* no parts will be sticking out */
        }

        details[open] + .detail-content {
            grid-template-rows: 1fr;
        }
    }
</style>

Focus visible

The :focus-visible pseudo-class in CSS applies styles to an element when it is focused, but only if the user needs to see a focus indicator, such as when using a keyboard.

1
2
3
4
5
6
7
8
9

<style>
.next-button:focus {
    outline: none;
}
.next-button:focus-visible {
    outline: 3px solid rgb(from var(--theme-main-text-color) r g b / 0.33);
}
</style>
<button class="next-button">Use 'tab' to focus this button</button>

Overflow Clip

overflow: clip clips overflowing content at the element’s edge but, unlike overflow: hidden, it does not create a new block formatting context or a scroll container.

1
2
3
4
5

/* Creates a scroll container — affects stacking and positioning */
.box { overflow: hidden; }

/* Clips content only — no side effects */
.box { overflow: clip; }

This matters because overflow: hidden can trap position: sticky children, while overflow: clip does not. You can clip only horizontally or only vertically:

1
2
3
4

.horizontal-clip {
  overflow-x: clip;
  overflow-y: visible;
}

This is impossible with hidden — setting one axis to hidden forces the other to auto.

Use Cases

• Clipping decorative background elements that bleed out
• Preventing horizontal scroll without breaking sticky headers
• Isolating overflow in card components cleanly

Prefers-contrast media query

prefers-contrast: takes the a11y contrast user settings in account. Various operating systems support such preferences.

1
2
3
4
5

<style>
    @media (prefers-contrast: more) {
       outline-width: 2px;
    }
</style>

Dynamic-range Media Query

The dynamic-range media feature lets your CSS detect whether the user’s screen supports standard or high dynamic range, enabling you to tailor colors and contrast for HDR displays.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@media (dynamic-range: high) {
  :root {
    --brand-color: color(display-p3 0.2 0.6 1.0);
  }
}

@media (dynamic-range: standard) {
  :root {
    --brand-color: #3399ff;
  }
}

HDR users get a wide-gamut display-p3 color; standard users get a regular sRGB color.

• standard — a typical display with standard dynamic range
• high — a display with HDR and wide color gamut (OLED or HDR monitors)

1
2
3
4

/* Pairing with color-gamut */
@media (dynamic-range: high) and (color-gamut: p3) {
  /* Serve premium visuals */
}

• Richer hero images and color palettes on HDR screens
• Enhanced gradients that exceed sRGB gamut
• Logo colors that pop on capable displays

Appearance

Appearance is mostly used to remove vendor styling from form controls, like:

1
2
3

select {
    appearance: none;
}

CSS Motion Path

CSS Motion Path — primarily the offset-path property — allows you to move elements along a defined geometric path using CSS animations. No JavaScript required.

1
2
3
4
5
6
7
8
9

.ball {
  offset-path: path("M 0 0 C 100 -100 200 100 300 0");
  offset-distance: 0%;
  animation: move 2s linear infinite;
}

@keyframes move {
  to { offset-distance: 100%; }
}

The element travels from 0% to 100% along the SVG path curve.

Path Types

• path() — SVG path data string
• ray() — a straight line at a given angle
• circle(), ellipse(), polygon() — CSS shape functions

Auto Rotation

1
2
3
4

.car {
  offset-path: path("M 0 0 L 300 100 L 600 0");
  offset-rotate: auto;
}

offset-rotate: auto makes the element face its direction of travel automatically.

Individual transform properties

The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.

What does that mean?

In supporting browsers you can use translate, scale and rotate without transform: they’re their own properties now.

1
2
3
4
5
6
7
8
9

.old-transform {
    transform: translate(100px, 10px) rotate(35deg) scale(1.5);
}

.new-properties {
    translate: 100px 10px;
    rotate: 35deg;
    scale: 1.5;
}

Forced colors

see: forced-colors

Viewport Unit Variants

These units are relative to the smallest, largest, and current (dynamic) viewport size.

dvh is dynamic viewport height

dvw is dynamic viewport width

svh is smallest viewport height

svw is smallest viewport width

lvh is largest viewport height

lvw is largest viewport width

A good use case for dvh is fullscreen sheets on mobile for menu’s or shopping carts

1
2
3
4

.sheet {
    height: 100dvh;
    ...
}