A rather geeky/technical weblog, est. 2001, by Bramus
:is() in complex selectors selects more than you might initially think
Because selector matching in browsers happens from right to left, you might end up with more matches than you expected when using .a :is(.b .c).
:has() and ~
:has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*)
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.
: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)
:has()
Leveraging :has() to detect islands of elements that have the same class, and select the first and last one from those islands.
:has()
Leverage CSS :has() and :nth-child() to style a parent based on the number of children it has.
🚨 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”