This site preaches modern CSS. Here's every technique it actually uses, running right now, no jQuery, no Sass, no excuses.
backdrop-filter
Look up
Scroll down. Content blurs behind the nav as you go. No fake background image. No JavaScript scroll listener. One CSS property doing all of it.
More info →light-dark()
Active on :root
light-dark() takes two values. The browser picks based on the user's OS preference. No separate dark mode stylesheet. No class toggling for every color.
clamp()
Resize the window
The homepage heading grows and shrinks with the viewport. clamp() sets a floor, a preferred size, and a ceiling. No breakpoints. No media queries for type.
place-items: center
Used site-wide
The old way was position: absolute with transform: translate(-50%, -50%). Now it's display: grid + place-items: center. The child needs nothing.
font-weight: 100 900
Active on Inter
Inter is a variable font. One .woff2 file covers every weight from 100 to 900. Old approach: nine separate font files, nine separate requests, nine more things to fail.
font-display: swap
No invisible text
font-display: swap tells the browser to render text in a fallback font immediately. When Inter finishes downloading, it swaps in. No blank page while fonts load.
@keyframes
See above
The green dot on this page fades in and out on a loop. One @keyframes rule, two opacity values, applied wherever needed with a single animation property.
color-scheme
Active on :root
color-scheme tells the browser the page's default theme. Scrollbars, form inputs, and system UI elements all adapt. No manual overrides for every browser chrome detail.
--custom-properties
Used everywhere
Colors, radius, and spacing live in custom properties on :root. Changing the accent color means updating one value. Not hunting through 300 lines of stylesheet.
background-clip: text
Homepage heading
The colorful heading on the homepage is a gradient background clipped to the text shape. No image. No SVG. The text itself acts as the mask, and the gradient shows through it.
gap
Nav, cards, grids
gap controls spacing between flex or grid children from the parent. No margin-right on every child. No :last-child { margin: 0 } fixes. The parent handles it.
position: sticky
Look up
Scroll this page. The nav stays at the top. position: sticky keeps it there. The element stays in the document flow, respects its container, and uses zero JavaScript.
scroll-margin-top
Snippet sections
Without this, clicking an anchor link on a sticky-nav page hides the top of the target section behind the nav. scroll-margin-top adds offset. No JavaScript scroll handler.