Modern CSS

This skill provides a reference for writing modern, robust, and efficient CSS.

Layout & Responsive Design

Container Queries

.card {
  container: --my-card / inline-size;
}

@container --my-card (width < 40ch) {
  /* Component-based responsive design */
}

@container (20ch < width < 50ch) {
  /* Range syntax */
}

Container units: cqi, cqb, cqw, cqh - size relative to container dimensions

Anchored container queries: Style positioned elements based on anchor fallback state

.tooltip {
  container-type: anchored;
}

@container anchored(top) {
  /* Styles when positioned at top */
}

Media Query Range Syntax

@media (width <= 1024px) { }
@media (360px < width < 1024px) { }

Grid Enhancements

• Subgrid: Inherit parent grid lines for nested layouts
• Masonry: display: grid-lanes for Pinterest-style layouts with logical tab order. (Previously proposed as grid-template-rows: masonry).

Color & Theming

Color Scheme & Light-Dark Function

:root {
  color-scheme: light dark;
  --surface-1: light-dark(white, #222);
  --text-1: light-dark(#222, #fff);
}

Modern Color Spaces

/* OKLCH: uniform brightness, P3+ colors */
.vibrant {
  background: oklch(72% 75% 330);
}

/* Display-P3 for HDR displays */
@media (dynamic-range: high) {
  .neon {
    --neon-red: color(display-p3 1 0 0);
  }
}

/* Better gradients with in oklch */
.gradient {
  background: linear-gradient(
    to right in oklch,
    color(display-p3 1 0 .5),
    color(display-p3 0 1 1)
  );
}

Color Manipulation

/* color-mix() */
.lighten {
  background: color-mix(in oklab, var(--brand), white);
}

/* Relative color syntax */
.lighter {
  background: oklch(from blue calc(l + .25) c h);
  background: oklch(from blue 75% c h); /* Set to specific lightness */
}

.semi-transparent {
  background: oklch(from var(--color) l c h / 50%);
}

.complementary {
  background: hsl(from blue calc(h + 180) s l);
}

Accent Color

:root {
  accent-color: hotpink; /* Tints checkboxes, radios, range inputs */
}

Typography

Text Wrapping

h1 {
  text-wrap: balance; /* Balanced multi-line headings */
  max-inline-size: 25ch;
}

p {
  text-wrap: pretty; /* No orphans */
  max-inline-size: 50ch;
}

Text Box Trim

h1, p, button {
  text-box: trim-both cap alphabetic; /* Optical vertical centering */
}

Fluid Typography

.heading {
  font-size: clamp(1rem, 1rem + 0.5vw, 2rem); /* Respects user preferences */
}

Dynamic Viewport Units

• dvh / dvw - Dynamic (accounts for mobile browser UI)
• svh / svw - Small (smallest possible viewport)
• lvh / lvw - Large (largest possible viewport)

Animations & Motion

Scroll-Driven Animation

/* Animate on scroll position */
.parallax {
  animation: slide-up linear both;
  animation-timeline: scroll();
}

/* Animate on viewport intersection */
.fade-in {
  animation: fade linear both;
  animation-timeline: view();
  animation-range: cover -75cqi contain 20cqi;
}

View Transitions

Status: Baseline Newly Available (Same-document). Cross-document transitions are in Limited Availability (Chrome/Safari 18.2+).

@view-transition {
  navigation: auto; /* Automatically animate page transitions (MPAs) */
}

nav {
  view-transition-name: --persist-nav; /* Persist specific elements */
  view-transition-class: --site-header; /* Group transitions with classes */
}

/* Style the active transition */
html:active-view-transition {
  overflow: hidden;
}

Nested View Transition Groups: Preserve 3D transforms and clipping during transitions.

Advanced Easing with linear()

.springy {
  --spring: linear(
    0, 0.14 4%, 0.94 17%, 1.15 24% 30%, 1.02 43%, 0.98 51%, 1 77%, 1
  );
  transition: transform 1s var(--spring);
}

@starting-style

.dialog {
  transition: opacity .5