Modern CSS: variables, clamp, container queries and more

Custom properties (CSS variables)

A custom property is a name that starts with two hyphens and holds a value. You read it with var(). Define them on :root (the html element) to use them everywhere.

:root {
  --brand: #ea580c;
  --text: #1f2937;
  --bg: #ffffff;
  --radius: 12px;
}
.btn {
  background: var(--brand);
  border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) {
  :root { --text: #f3f4f6; --bg: #111827; }
}
body { color: var(--text); background: var(--bg); }

calc(), min(), max() and clamp()

.sidebar { width: calc(100% - 2rem); }
.container { width: min(100% - 2rem, 960px); }   /* the smaller of the two */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

clamp() keeps a value between a minimum and a maximum while letting it grow with the screen in between. It gives fluid headings that never get too small on phones or too big on monitors, without media queries.

Container queries

Media queries look at the whole screen. Container queries look at the space a component actually has. A product card can switch to a side-by-side layout when its container is wide, whether it sits in a narrow sidebar or a wide main area.

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

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

:has(), nesting and friends