Modern CSS

Style an element based on the size of its container instead of the whole viewport. A card can switch from stacked to side-by-side wherever it is placed: a sidebar, a grid cell or a full-width row.

.card-slot {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 12px;
}

@container (min-width: 380px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
}

• MDN docs
• Specification
• Browser support

Query the value of a custom property on a container. Set one variable such as --variant: featured on a parent and let every child restyle itself, with no extra classes.

.card {
  --variant: featured;
}

@container style(--variant: featured) {
  .card-title {
    color: var(--accent);
    font-size: 1.5rem;
  }
}

• MDN docs
• Specification
• Browser support

Let a nested element reuse its parent grid's tracks. Titles, body text and buttons in a row of cards line up with each other, however long each card's content is.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

• MDN docs
• Specification
• Browser support

Make inputs, selects and text areas grow and shrink with what is typed into them. Auto-growing text areas no longer need JavaScript.

textarea,
input {
  field-sizing: content;
  min-width: 10ch;
  max-width: 100%;
}

• MDN docs
• Specification
• Browser support

The long-awaited parent selector. Style an element based on what it contains or what follows it, such as a form row with an invalid input or a card that holds an image.

.setting:has(input:checked) {
  border-color: teal;
  background: #ccfbf1;
}

form:has(:user-invalid) .submit {
  opacity: 0.5;
}

• MDN docs
• Specification
• Browser support

Write nested rules directly in CSS, the way Sass and Less made popular. The & selector refers to the parent rule, and media queries can sit inside the rule they change.

.button {
  background: teal;

  &:hover {
    background: darkslategray;
  }

  .icon {
    width: 1em;
  }

  @media (width < 600px) {
    width: 100%;
  }
}

• MDN docs
• Specification
• Browser support

Decide which group of styles wins, independent of selector specificity. Put resets, third-party CSS and components in ordered layers so overrides stay predictable.

@layer reset, vendor, components, utilities;

@import url("library.css") layer(vendor);

@layer components {
  .card { padding: 24px; }
}

@layer utilities {
  .p-0 { padding: 0; }
}

• MDN docs
• Specification
• Browser support

Limit styles to one part of the page, with an optional lower boundary where they stop. Selectors stay short, and the closest scope wins when components are nested.

@scope (.card) to (.card-slot) {
  img {
    border-radius: 12px;
  }

  :scope {
    padding: 24px;
  }
}

• MDN docs
• Specification
• Browser support

OKLCH describes color as lightness, chroma and hue, so changing one value gives an even, predictable result. color-mix() blends two colors in any color space, which makes tints and shades one line each.

:root {
  --brand: oklch(0.6 0.15 185);
  --brand-tint: color-mix(in oklch, var(--brand), white 35%);
  --brand-shade: color-mix(in oklch, var(--brand), black 25%);
}

• MDN docs
• Specification
• Browser support

Build a new color from an existing one by adjusting its channels. Rotate the hue, lighten it or make it translucent, all from a single brand variable.

.badge {
  background: oklch(from var(--brand) l c h / 0.15);
  border-color: oklch(from var(--brand) calc(l - 0.1) c h);
}

.accent {
  color: oklch(from var(--brand) l c calc(h + 60));
}

• MDN docs
• Specification
• Browser support

Give a property its light and dark values in one place. The browser picks one based on the element's color-scheme, which can follow the system setting or a toggle.

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#ffffff, #12141f);
  color: light-dark(#0d0f1a, #e8eaf3);
}

• MDN docs
• Specification
• Browser support

Spread a heading's words evenly across its lines instead of leaving one word stranded on the last line. Use it on headings and short text; text-wrap: pretty (further down) is the paragraph version.

h1,
h2,
h3 {
  text-wrap: balance;
}

• MDN docs
• Specification
• Browser support

Add the popover attribute and a button with popovertarget to get a menu or tooltip that shows above everything else, closes on Escape or an outside click, and handles focus, without writing JavaScript.

<button popovertarget="menu">Menu</button>
<div id="menu" popover>…</div>

[popover] {
  transition: opacity 0.25s, display 0.25s allow-discrete,
    overlay 0.25s allow-discrete;
}

• MDN docs
• Specification
• Browser support

Animate elements as they appear, and as they switch to or from display: none. @starting-style sets the values to transition from, and transition-behavior: allow-discrete lets display and overlay take part.

.dialog {
  opacity: 1;
  transition: opacity 0.3s, display 0.3s allow-discrete;

  @starting-style {
    opacity: 0;
  }
}

.dialog.is-hidden {
  display: none;
  opacity: 0;
}

• MDN docs
• Specification
• Browser support

Animate between two states of a page. The browser captures before and after snapshots and cross-fades them, and elements with a view-transition-name morph from one position to the other.

document.startViewTransition(() => updateTheDom());

.product-photo {
  view-transition-name: hero;
}

::view-transition-group(hero) {
  animation-duration: 0.4s;
}

• MDN docs
• Specification
• Browser support

Tie an animation's progress to scrolling instead of time. Reading-progress bars, parallax and reveal-on-scroll effects run on the compositor without any scroll listeners.

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress {
  transform-origin: left;
  animation: grow linear both;
  animation-timeline: scroll();
}

• MDN docs
• Specification
• Browser support

Register a custom property with a type, an initial value and inheritance rules. Typed properties can be animated, so gradients, angles and colors held in variables transition smoothly.

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ring {
  background: conic-gradient(from var(--angle), teal, indigo, teal);
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to { --angle: 360deg; }
}

• MDN docs
• Specification
• Browser support

Use sin(), cos(), tan(), atan2() and friends in calc(). Lay items out on a circle, build radial menus or draw charts, as Vektor.css does for its radar charts.

.dot {
  --angle: calc(var(--step) * 45deg);
  position: absolute;
  left: calc(50% + cos(var(--angle)) * 60px);
  top: calc(50% + sin(var(--angle)) * 60px);
}

• MDN docs
• Specification
• Browser support

Snap values to a step and take remainders inside calc(). Round fluid sizes to whole pixels or to a spacing scale, and build repeating patterns.

.fluid {
  width: round(down, 50vw, 8px);
  margin-left: mod(100vw, 120px);
  --step: rem(var(--index), 4);
}

• MDN docs
• Specification
• Browser support

Read an element's position among its siblings, and how many siblings there are, as numbers in calc(). Staggered animation delays and fanned-out layouts no longer need an inline --index on every item.

.list li {
  width: calc(sibling-index() * 15%);
  animation-delay: calc(sibling-index() * 80ms);
}

.slice {
  rotate: calc(360deg / sibling-count() * sibling-index());
}

• MDN docs
• Specification
• Browser support