Leveraging :has() to detect islands of elements that have the same class, and select the first and last one from those islands.
Detect “islands of elements” with the same class, thanks to CSS :has()
Tag Archives: css
Detect “islands of elements” with the same class, thanks to CSS
CSS Architecture (2022.12.01 @ Web Directions Summit)
Style a parent element based on its number of children using CSS :has()
Leverage CSS :has() and :nth-child() to style a parent based on the number of children it has.
Scroll-Linked Animations with ScrollTimeline and ViewTimeline
In the latest episode of HTTP 203 I share my excitement with Jake about Scroll-Linked Animations with ScrollTimeline and ViewTimeline, a feature I’ve been tracking for almost two years now. A lot has changed since I first wrote about it, as the specification has undergone a major rewrite. This episode should get you up to …
Continue reading “Scroll-Linked Animations with ScrollTimeline and ViewTimeline”
CSS Type Grinding: Casting Tokens (sm|md|etc) into Useful Values (aka Style Queries without Style Queries thanks to @property)
My favorite use case for Style Queries is the ability to change a bunch of styles based on the value of a so called “higher-order variable”. You use that variable as a switch to change a bunch of properties. @container style(–theme: dark) { .card { background: royalblue; border-color: navy; color: white; } .card button { …
Container Queries: Style Queries
In CSS, Style Queries which allow querying computed values of a container. Let’s take a look at what that means …
100 Days Of More Or Less Modern CSS
The great Manuel Matuzović: It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite …
Upgrading colors to HD on the web
Let’s take a look at how we can progressively enhance the color experience on the web, accessing color spaces such as display-p3.
CSS in 2022 (and beyond) (2022.09.09 @ Fronteers Conf)
On September 9, I was in Utrecht for Fronteers Conference 2022 – a conference I’ve been attending since back in 2009. This time – after a two year hiatus due to youknowwhat – I was very glad to be back! This time not as an attendee though, but as a speaker. In my talk I …
Continue reading “CSS in 2022 (and beyond) (2022.09.09 @ Fronteers Conf)“
Escaping the sRGB Prison
At the most recent CSS Day, Chris Lilley gave a talk titled “Escaping the sRGB Prison”. Imagine that I told you that you are only allowed to use two-thirds of the colors that your screen can display. All the brightest and most vivid shades are not allowed. Unacceptable, right?! Welcome to Web design for the …