7 ms·

Although :has still shouldn't be use because the spec isn't finalized (and so it's (rightfully) not supported by Firefox), another incredible post. For the hea

Although :has still shouldn't be use because the spec isn't finalized (and so it's (rightfully) not supported by Firefox), another incredible post. For the header layout code, the SASS example will be valid CSS once the nested CSS spec is approved & live right? (Although that probably won't be widely implemented enough for use for several years in vanilla css) Btw, the video for user avatars isn't loading for me

alwillis 3y ago
> Although :has still shouldn't be use because the spec isn't finalized (and so it's (rightfully) not supported by Firefox) I don't it's reasonable to hold off on using :has(), something web developers have wanted for close to 20 years just because it's not supported by Firefox. It's far too important and useful. Especially when 86.93% of the global web audience uses a browser that supports it [1]. And as much I admire Firefox and what they stand for, it's marketshare is 2.77% [2]. Regarding the spec not being finalized… while that may be technically true, the current draft specification has been stable for several months and is what the browser vendors have agreed to implement. It's been 14 months (March 14, 2022) since :has() first shipped in Safari 15.4 [3]; I think it should be okay to use :has() in production and lets hope Firefox catches up soon. [1]: https://caniuse.com/?search=%3Ahas https://caniuse.com/?search=%3Ahas [2]: https://gs.statcounter.com/browser-market-share https://gs.statcounter.com/browser-market-share [3]: https://www.webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ https://www.webkit.org/blog/12445/new-webkit-features-in-saf...
- RheingoldRiver 3y ago
  > and lets hope Firefox catches up soon. They won't implement it until the spec is finalized (is my guess, given that they haven't done so, so far). By encouraging users to use :has already, you're encouraging Chrome's monopoly on the open internet, in direct contradiction to the W3c standard. caniuse is an important tool, yes, but it's also super important to take into consideration what the literal standard says, which is that :has is not part of the specification. And Chrome directly working in contradiction to that is enormously bad for Internet users. Safari's decision to also implement :has early shouldn't make you bow down to Google in this case imo.
  - magicalist 3y ago
    The standards commentary is disingenuous (albeit I assume unintentionally). :is() is also part of the same CSS Selectors Level 4 draft spec and has been shipping in Firefox since version 78 (from June 2020). There were some open spec questions for :has() a while ago, but those have been resolved for some time. Exact ship date at this point is more a question of relative prioritization by the different browsers. As can be seen in https://bugzilla.mozilla.org/show_bug.cgi?id=418039 https://bugzilla.mozilla.org/show_bug.cgi?id=418039, the remaining work is around correctness and performance.
  - alwillis 3y ago
    > They won't implement it until the spec is finalized (is my guess, given that they haven't done so, so far). Last time I checked their bug tracker, it had nothing to do with the specification—they had some technical implementation problems. My take on the situation: if they didn't get derailed by from what I recall were performance problems, they would have shipped it by now. > but it's also super important to take into consideration what the literal standard says, which is that :has is not part of the specification I'm not sure we're talking about the same thing; :has() is part of the "Selectors Level 4" specification [1] for a while now. I've read many W3C specifications; there's none of the usual warnings and caveats that are par for the course with experimental or unsupported specifications. That's not to say there won't be changes in the future, but that's true for virtually any recent CSS specification. As someone who follows this stuff pretty closely (I even read CSS working group meeting notes sometimes), this is the first time I've heard any objection to :has() at all and certainly nothing regarding the spec not being "done". I don't agree that Safari implemented :has() early; it's been in discussion for nearly 20 years and is something web developers have really wanted for just as long. The WebKit blog has a pretty good description of the back story why it took so long and what the breakthrough was [2]. [1]: https://drafts.csswg.org/selectors-4/#relational https://drafts.csswg.org/selectors-4/#relational [2]: https://www.webkit.org/blog/13096/css-has-pseudo-class/ https://www.webkit.org/blog/13096/css-has-pseudo-class/
- capitainenemo 3y ago
  That browser marketshare is primarily due to mobile. On desktop they are still around 6% on statcounter. Which is admittedly still not great, but not nearly as disastrous as 3%
- chrismorgan 3y ago
  > it's marketshare is 2.77% [2]. Note that Statcounter’s data is based on trackers that are blocked by extremely common configurations. This will lead to undercounting of desktop browsers in general (since ad/content blockers are comparatively unavailable on mobile platforms), and Firefox especially. > Especially when 86.93% of the global web audience uses a browser that supports it [1]. Another point on Statcounter’s methodology (which is what caniuse.com also uses): they don’t track versions for most browsers on Android, instead acting as though everyone’s on the latest version, which is grossly unrealistic. All up, my vague feeling is that the true figure is probably closer to 80% than to 86.93%. Even if Firefox weren’t a factor, I’d recommend most people avoid depending on :has() for another six months or so. Add Firefox into the consideration, and I’d recommend that most people wait for about a year after it ships in Firefox before depending on :has(). (When I say depending on :has(), I mean “the page will be materially broken if it’s not supported”. Use it completely optionally or with only unimportant style regressions—which can even be as significant as the “you get the same single-column layout as mobile devices even on very large screens” approach was for responsive designs when Grid was newer—and that’s fine.)
chrismorgan 3y ago
Implementation and spec finalisation are fairly different things these days—in fact, in at least some parts of the web platform (JS), the spec is not permitted to be finalised until two implementations are shipping. Firefox hasn’t shipped :has() for technical reasons, not because :has() isn’t ready. (Notwithstanding all this, it is bothersome when incomplete implementations are shipped, which is happening fairly regularly in at least small ways and has already happened with :has() with Safari having to fix important bugs and spec changes after their initial release of it. This kind of stuff often makes feature detection much harder and sometimes impossible.)

alwillis 3y ago

> Although :has still shouldn't be use because the spec isn't finalized (and so it's (rightfully) not supported by Firefox) I don't it's reasonable to hold off on using :has(), something web developers have wanted for close to 20 years just because it's not supported by Firefox. It's far too important and useful. Especially when 86.93% of the global web audience uses a browser that supports it [1]. And as much I admire Firefox and what they stand for, it's marketshare is 2.77% [2]. Regarding the spec not being finalized… while that may be technically true, the current draft specification has been stable for several months and is what the browser vendors have agreed to implement. It's been 14 months (March 14, 2022) since :has() first shipped in Safari 15.4 [3]; I think it should be okay to use :has() in production and lets hope Firefox catches up soon. [1]: https://caniuse.com/?search=%3Ahas https://caniuse.com/?search=%3Ahas [2]: https://gs.statcounter.com/browser-market-share https://gs.statcounter.com/browser-market-share [3]: https://www.webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ https://www.webkit.org/blog/12445/new-webkit-features-in-saf...

RheingoldRiver 3y ago
> and lets hope Firefox catches up soon. They won't implement it until the spec is finalized (is my guess, given that they haven't done so, so far). By encouraging users to use :has already, you're encouraging Chrome's monopoly on the open internet, in direct contradiction to the W3c standard. caniuse is an important tool, yes, but it's also super important to take into consideration what the literal standard says, which is that :has is not part of the specification. And Chrome directly working in contradiction to that is enormously bad for Internet users. Safari's decision to also implement :has early shouldn't make you bow down to Google in this case imo.
- magicalist 3y ago
  The standards commentary is disingenuous (albeit I assume unintentionally). :is() is also part of the same CSS Selectors Level 4 draft spec and has been shipping in Firefox since version 78 (from June 2020). There were some open spec questions for :has() a while ago, but those have been resolved for some time. Exact ship date at this point is more a question of relative prioritization by the different browsers. As can be seen in https://bugzilla.mozilla.org/show_bug.cgi?id=418039 https://bugzilla.mozilla.org/show_bug.cgi?id=418039, the remaining work is around correctness and performance.
- alwillis 3y ago
  > They won't implement it until the spec is finalized (is my guess, given that they haven't done so, so far). Last time I checked their bug tracker, it had nothing to do with the specification—they had some technical implementation problems. My take on the situation: if they didn't get derailed by from what I recall were performance problems, they would have shipped it by now. > but it's also super important to take into consideration what the literal standard says, which is that :has is not part of the specification I'm not sure we're talking about the same thing; :has() is part of the "Selectors Level 4" specification [1] for a while now. I've read many W3C specifications; there's none of the usual warnings and caveats that are par for the course with experimental or unsupported specifications. That's not to say there won't be changes in the future, but that's true for virtually any recent CSS specification. As someone who follows this stuff pretty closely (I even read CSS working group meeting notes sometimes), this is the first time I've heard any objection to :has() at all and certainly nothing regarding the spec not being "done". I don't agree that Safari implemented :has() early; it's been in discussion for nearly 20 years and is something web developers have really wanted for just as long. The WebKit blog has a pretty good description of the back story why it took so long and what the breakthrough was [2]. [1]: https://drafts.csswg.org/selectors-4/#relational https://drafts.csswg.org/selectors-4/#relational [2]: https://www.webkit.org/blog/13096/css-has-pseudo-class/ https://www.webkit.org/blog/13096/css-has-pseudo-class/
capitainenemo 3y ago
That browser marketshare is primarily due to mobile. On desktop they are still around 6% on statcounter. Which is admittedly still not great, but not nearly as disastrous as 3%
chrismorgan 3y ago
> it's marketshare is 2.77% [2]. Note that Statcounter’s data is based on trackers that are blocked by extremely common configurations. This will lead to undercounting of desktop browsers in general (since ad/content blockers are comparatively unavailable on mobile platforms), and Firefox especially. > Especially when 86.93% of the global web audience uses a browser that supports it [1]. Another point on Statcounter’s methodology (which is what caniuse.com also uses): they don’t track versions for most browsers on Android, instead acting as though everyone’s on the latest version, which is grossly unrealistic. All up, my vague feeling is that the true figure is probably closer to 80% than to 86.93%. Even if Firefox weren’t a factor, I’d recommend most people avoid depending on :has() for another six months or so. Add Firefox into the consideration, and I’d recommend that most people wait for about a year after it ships in Firefox before depending on :has(). (When I say depending on :has(), I mean “the page will be materially broken if it’s not supported”. Use it completely optionally or with only unimportant style regressions—which can even be as significant as the “you get the same single-column layout as mobile devices even on very large screens” approach was for responsive designs when Grid was newer—and that’s fine.)

chrismorgan 3y ago

Implementation and spec finalisation are fairly different things these days—in fact, in at least some parts of the web platform (JS), the spec is not permitted to be finalised until two implementations are shipping. Firefox hasn’t shipped :has() for technical reasons, not because :has() isn’t ready. (Notwithstanding all this, it is bothersome when incomplete implementations are shipped, which is happening fairly regularly in at least small ways and has already happened with :has() with Safari having to fix important bugs and spec changes after their initial release of it. This kind of stuff often makes feature detection much harder and sometimes impossible.)