CSS has changed more in the last few years than in the decade before. Features that used to need JavaScript, preprocessors or clever hacks are now built into every modern browser.<\/p>\n\n\n\n
Here are eight you can use in production today.<\/p>\n\n\n\n
Media queries respond to the screen<\/em> size. Container queries<\/strong> respond to the size of the parent element<\/em> \u2014 perfect for reusable components that might sit in a wide main column or a narrow sidebar.<\/p>\n\n\n\n The same card now lays itself out correctly wherever you drop it.<\/p>\n\n\n\n For twenty years developers asked for a “parent selector”. Now we have one \u2014 and it’s even more powerful.<\/p>\n\n\n\n You no longer need Sass just to nest selectors:<\/p>\n\n\n\n Notice the Create tints, shades and transparent versions of a brand colour without hard-coding a dozen hex values:<\/p>\n\n\n\n Change Specificity wars are over. Layers let you decide which group of styles wins, regardless of selector strength:<\/p>\n\n\n\n Smooth, app-like animations between page states \u2014 or even between full page loads \u2014 with almost no code:<\/p>\n\n\n\n Add that to a multi-page site and navigating between pages cross-fades automatically, with matching elements morphing into place.<\/p>\n\n\n\n Nested grids can finally align to their parent’s tracks. Card titles, text and buttons line up perfectly across a row, even when content lengths differ:<\/p>\n\n\n\n Two tiny properties that make typography look professionally set:<\/p>\n\n\n\n.card-wrapper {\n container-type: inline-size;\n}\n\n@container (min-width: 480px) {\n .card {\n display: grid;\n grid-template-columns: 200px 1fr;\n }\n}<\/code><\/pre>\n\n\n\n2. The :has() selector<\/h2>\n\n\n\n
\/* Style a card differently if it contains an image *\/\n.card:has(img) { padding: 0; }\n\n\/* Highlight a form field's label when the input is invalid *\/\nlabel:has(+ input:invalid) { color: crimson; }\n\n\/* Dim the page when a dialog is open *\/\nbody:has(dialog[open]) { overflow: hidden; }<\/code><\/pre>\n\n\n\n3. Native nesting<\/h2>\n\n\n\n
.nav {\n display: flex;\n gap: 1rem;\n\n & a {\n color: inherit;\n\n &:hover { color: var(--accent); }\n }\n\n @media (width < 640px) {\n flex-direction: column;\n }\n}<\/code><\/pre>\n\n\n\nwidth < 640px<\/code> syntax? That’s the new media query range syntax<\/strong> \u2014 much easier to read than max-width: 639px<\/code>.<\/p>\n\n\n\n4. color-mix()<\/h2>\n\n\n\n
:root { --brand: #6366f1; }\n\n.badge {\n background: color-mix(in srgb, var(--brand) 12%, transparent);\n border: 1px solid color-mix(in srgb, var(--brand) 30%, white);\n color: var(--brand);\n}<\/code><\/pre>\n\n\n\n--brand<\/code> once and every derived colour updates automatically. (This very blog’s theme uses this trick for its category badges.)<\/p>\n\n\n\n5. Cascade layers (@layer)<\/h2>\n\n\n\n
@layer reset, base, components, utilities;\n\n@layer components {\n .button { padding: 12px 20px; }\n}\n\n@layer utilities {\n .p-0 { padding: 0; } \/* always wins over components *\/\n}<\/code><\/pre>\n\n\n\n6. View transitions<\/h2>\n\n\n\n
@view-transition { navigation: auto; }\n\n.post-title { view-transition-name: post-title; }<\/code><\/pre>\n\n\n\n7. Subgrid<\/h2>\n\n\n\n
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }\n.card {\n display: grid;\n grid-row: span 3;\n grid-template-rows: subgrid;\n}<\/code><\/pre>\n\n\n\n8. text-wrap: balance and pretty<\/h2>\n\n\n\n
h1, h2, h3 { text-wrap: balance; } \/* evenly balanced headline lines *\/\np { text-wrap: pretty; } \/* avoids a lonely last word *\/<\/code><\/pre>\n\n\n\nBrowser support at a glance<\/h2>\n\n\n\n
Feature<\/th> Chrome \/ Edge<\/th> Firefox<\/th> Safari<\/th><\/tr><\/thead> Container queries<\/td> ✅<\/td> ✅<\/td> ✅<\/td><\/tr> :has()<\/td> ✅<\/td> ✅<\/td> ✅<\/td><\/tr> Native nesting<\/td> ✅<\/td> ✅<\/td> ✅<\/td><\/tr> color-mix()<\/td> ✅<\/td> ✅<\/td> ✅<\/td><\/tr> Cascade layers<\/td> ✅<\/td> ✅<\/td> ✅<\/td><\/tr> View transitions (same-document)<\/td> ✅<\/td> ✅<\/td> ✅<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n