3 ms·

Why is Firefox lagging behind on :has support here?

spartanatreyu 4y ago
They're still working out some kinks. Also, the other browsers may have launched a little too early while some weird spec corner cases were getting worked out.
- alwillis 4y ago
  Also, the other browsers may have launched a little too early while some weird spec corner cases were getting worked out. All of that got worked out a while ago; you can read the CSSWG notes and check the bug trackers for WebKit, Firefox and Chrome. It’s not that WebKit, which shipped :has() back in March, was too early but Mozilla had some difficulties with their implementation [1]. It took Google (and Igalia) until the end of August to ship their implementation in Chrome 105 [2]. Even though web developers have been asking for this for nearly 20 years, it only recently got figured out. Based on Apple’s article [3] and Igalia's prototyping document [4], this is easily the most complex CSS selector that’s ever been implemented. I would cut Mozilla some slack. [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=418039 https://bugzilla.mozilla.org/show_bug.cgi?id=418039 [2]: https://developer.chrome.com/blog/new-in-chrome-105/ https://developer.chrome.com/blog/new-in-chrome-105/ [3]: https://webkit.org/blog/13096/css-has-pseudo-class/ https://webkit.org/blog/13096/css-has-pseudo-class/ [4]: https://github.com/Igalia/explainers/blob/main/css/has/prototyping-details.md https://github.com/Igalia/explainers/blob/main/css/has/proto...
hakre 4y ago
Perhaps because it is hidden behind a flag and could benefit from more reports first to get it stable? https://caniuse.com/css-has https://caniuse.com/css-has : > Supported in Firefox behind the `layout.css.has-selector.enabled` flag see https://stackoverflow.com/q/73936048 https://stackoverflow.com/q/73936048 etc. NOTE: it looks like it's not ordinarily working even when switched on.
- sam- 4y ago
  > NOTE: it looks like it's not ordinarily working even when switched on. I find the :has() selector very useful in certain cases, but firefox doesn't support it yet and like you said, it doesn't work very well even when enabled. What I have done for Firefox is use the `@supports selector` query [1] and fallback to some equally functional but not as nicely styled UI with the hope that when Firefox supports it, it will automatically provide the nicer UI. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#function_syntax https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#f...
  - chrisweekly 4y ago
    Nice approach! If you ever blog or tweet about CSS I'd be stoked to read it.
    - alwillis 4y ago
      This approach is called progressive enhancement [1]; it’s been a thing in web development for over a decade. [1]: https://alistapart.com/article/understandingprogressiveenhancement/ https://alistapart.com/article/understandingprogressiveenhan...
  - hakre 4y ago
    Yes, and thinking, that @supports selector is also suggested in one of the examples in the article: /* Warning message about support for :has() */ @supports selector(:has(img)) { body small { display: none; } } And I sure love it when CSS performs according my preference, but I'd never complain about a UA not implementing or a user prefer her own style over agent or author.

They're still working out some kinks. Also, the other browsers may have launched a little too early while some weird spec corner cases were getting worked out.

alwillis 4y ago
Also, the other browsers may have launched a little too early while some weird spec corner cases were getting worked out. All of that got worked out a while ago; you can read the CSSWG notes and check the bug trackers for WebKit, Firefox and Chrome. It’s not that WebKit, which shipped :has() back in March, was too early but Mozilla had some difficulties with their implementation [1]. It took Google (and Igalia) until the end of August to ship their implementation in Chrome 105 [2]. Even though web developers have been asking for this for nearly 20 years, it only recently got figured out. Based on Apple’s article [3] and Igalia's prototyping document [4], this is easily the most complex CSS selector that’s ever been implemented. I would cut Mozilla some slack. [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=418039 https://bugzilla.mozilla.org/show_bug.cgi?id=418039 [2]: https://developer.chrome.com/blog/new-in-chrome-105/ https://developer.chrome.com/blog/new-in-chrome-105/ [3]: https://webkit.org/blog/13096/css-has-pseudo-class/ https://webkit.org/blog/13096/css-has-pseudo-class/ [4]: https://github.com/Igalia/explainers/blob/main/css/has/prototyping-details.md https://github.com/Igalia/explainers/blob/main/css/has/proto...

hakre 4y ago

Perhaps because it is hidden behind a flag and could benefit from more reports first to get it stable? https://caniuse.com/css-has https://caniuse.com/css-has : > Supported in Firefox behind the `layout.css.has-selector.enabled` flag see https://stackoverflow.com/q/73936048 https://stackoverflow.com/q/73936048 etc. NOTE: it looks like it's not ordinarily working even when switched on.

sam- 4y ago
> NOTE: it looks like it's not ordinarily working even when switched on. I find the :has() selector very useful in certain cases, but firefox doesn't support it yet and like you said, it doesn't work very well even when enabled. What I have done for Firefox is use the `@supports selector` query [1] and fallback to some equally functional but not as nicely styled UI with the hope that when Firefox supports it, it will automatically provide the nicer UI. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#function_syntax https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#f...
- chrisweekly 4y ago
  Nice approach! If you ever blog or tweet about CSS I'd be stoked to read it.
  - alwillis 4y ago
    This approach is called progressive enhancement [1]; it’s been a thing in web development for over a decade. [1]: https://alistapart.com/article/understandingprogressiveenhancement/ https://alistapart.com/article/understandingprogressiveenhan...
- hakre 4y ago
  Yes, and thinking, that @supports selector is also suggested in one of the examples in the article: /* Warning message about support for :has() */ @supports selector(:has(img)) { body small { display: none; } } And I sure love it when CSS performs according my preference, but I'd never complain about a UA not implementing or a user prefer her own style over agent or author.