10LOC

#css

Chrome APIsintermediate

text-wrap: balance for balanced headlines with no JS

h1, h2, .card-title {
  text-wrap: balance;
  max-width: 40ch;
}

text-wrap: balance redistributes a heading's line breaks evenly instead of greedy fill — computed by the layout engine, re-balanced on every resize.

Web Platformintermediate

Container queries for component-level responsive design

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

.card {

Let a card switch to a two-column layout based on its own wrapper's width, not the viewport, so it works the same in a sidebar or a full-width column.

Web Platformintermediate

CSS :has() for parent-based styling logic

.empty-state {
  display: none;
}

.results:not(:has(li)) + .empty-state {

Style a table row from its checkbox and swap in an empty-state message when a list has no items, with zero JavaScript.