CSS is a composable language by nature. This composition nature is already built into the cascade. We simply don’t talk about composition as a Big Thing because it’s the nature of the language.
Powered by
DigitalOcean
Color what? Sunkanmi Fafowora explains how an everyday task for CSS can be used to create better colors experiences.
The light-dark() function is currently designed to support just two color schemes. Should it support others? Sunkanmi Fafowora says yes and no.
In this article, author Chris Sabourin walk through how modern CSS features can build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.
Here’s an approach for animating products added to a shopping cart that handles an infinite number of items using a variation of the ol’ Checkbox Hack.
Images in long-form content can (and often should) do more than illustrate. They help set the pace, influence how readers feel, and add character that words alone can’t always convey.
.element { background-image: image-set(url("image.png") 1x, url("image-large.png") 2x);
}
.element { background-image: conic-gradient(from 45deg, white, black, white); }
.element { color: color-mix(in oklab, red 20%, bisque 80%); }
.element { grid-template-columns: 1fr 1fr fit-content(200px); }
.element { animation-timeline: scroll(); }
.element { animation-timeline: view(); }
.triangle { clip-path: shape(from 50% 0%, line by 50% 100%, hline to 0%, line to 50% 0%, close); }
p::target-text { /* ... */ }
.element { text-box: trim-both cap alphabetic; }
ul li { width: calc(100% / sibling-count()); }
.scroll-container { scroll-marker-group: before; }
.element::scroll-marker { content: ""; }
ul li { transform: translateX(calc(sibling-index() * 10px)); }
.carousel::scroll-button(right) { content: "?"; }
