4 ms·

:has() basically removes the need for us to use JS to attach classes to parent elements as we can essentially look ahead now, e.g. ".some-component:has(.input-s

:has() basically removes the need for us to use JS to attach classes to parent elements as we can essentially look ahead now, e.g. ".some-component:has(.input-select-all:checked) { background: blue }" whereas we would have to use JS to query the input, then query the parent and attach some css class as a styling hook. Container queries will allow us to fine-tune the not-so-predictable gaps between our predictable breakpoints. Breakpoints will probably still be used for larger-picture layout, but container queries will help with the smaller parts especially in UI that have many moving dynamic parts. The rest are just icing and honestly I wouldn't be surprised if it takes a while for many of them to become mainstream.

lioeters 4y ago
I was curious about current browser compatibility for :has(). The major browsers (Chrome, Edge, Safari, Opera) support it except for Firefox, which has it behind a flag still. ~76% of users are covered. :has() CSS relational pseudo-class - https://caniuse.com/css-has https://caniuse.com/css-has
- BeFlatXIII 4y ago
  I wonder when Firefox will turn on that flag (and why it's still off by default). Is their implementation not yet fully-tested?
  - lioeters 4y ago
    According to Bugzilla: - 4 months ago Chromium enabled :has() selector by default - 3 months ago, CCS Working Group made a small design decision ("resolution") which may affect how Firefox implements it - 22 days ago: "has() implementation is experimental, that's why it's not enabled anywhere by default." I think the good news is that it's in active development, and seems fairly close to release. Bugzilla: Implement the :has() pseudo class - https://bugzilla.mozilla.org/show_bug.cgi?id=418039 https://bugzilla.mozilla.org/show_bug.cgi?id=418039