Great post on style invalidation in Blink, written by Byungwoo who implemented :has() in Blink.
How Blink invalidates styles when :has() in use?
Search results for: has()
How Blink invalidates styles when
Sibling Scopes in CSS, thanks to :has() and ~
CSS :has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*)
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.
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.
Magic PostCSS Custom Combinators using :has()
Similar to how you can (ab)use :nth-child() to create “new” CSS selectors, you can leverage :has() to create some typical combinators. Brandon McConnell did just that: y:has(+ x) selects the first preceding y sibling of x: y:has(~ x) selects all preceding y sibling of x: x + y, y:has(+ x) selects the first preceding and …
Continue reading “Magic PostCSS Custom Combinators using :has()“
The CSS :has() selector is way more than a “Parent Selector”
Safari TP 137 just dropped with unflagged support for :has(). Often dubbed “the parent selector”, :has() is way more than that …
What’s new in CSS? (2023.10.12 @ Frontmania)
Style Recalculation Secrets They Don’t Want You To Know | Patrick Brosset | CSS Day 2023
This talk by Patrick Brosset is one of my favorite talks from this year’s CSS Day Conference. How do browsers actually recalculate styles when webpages change? Can the way you write CSS impact the speed of the recalculation process? In this talk, we’ll go through the details of how browser engines react to DOM changes …