Leverage CSS :has() to select all siblings between two element boundaries.
Author Archives: Bramus!
Sibling Scopes in CSS, thanks to
CSS :has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*)
CSS in 2022 (and beyond) (2022.10.07 @ Full Stack Europe)
Help choose the syntax for CSS Nesting!
The CSS Working Group is continuing a debate over the best way to define nesting in CSS. And if you are someone who writes CSS, we’d like your help.
A :nth-child(An+B [of S]?) polyfill thanks to CSS :has() and :not()
:nth-child(An+B [of S]?) is not available in all browsers, but thanks to :has we can polyfill it (to a certain extent)
Detect “islands of elements” with the same class, thanks to CSS :has()
Leveraging :has() to detect islands of elements that have the same class, and select the first and last one from those islands.
CSS Architecture (2022.12.01 @ Web Directions Summit)
FIX: The provider “cPanel (powered by Sectigo)” cannot currently accept incoming requests. The system will try again later.
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
🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. The contents of this video are mostly correct, yet some minor things have changed. Please refer to https://developer.chrome.com/articles/scroll-driven-animations/ for an article and examples that use the latest version of the syntax. In the latest episode of HTTP 203 I share …
Continue reading “Scroll-Linked Animations with ScrollTimeline and ViewTimeline”