4 ms·

I think :has() is probably the most anticipated addition to CSS 25 years (although rounded corners is probably also up there). I’m really looking forward to bei

I think :has() is probably the most anticipated addition to CSS 25 years (although rounded corners is probably also up there). I’m really looking forward to being able to use it. However it’s almost a shame it took so long, I’m not sure how it will fit in with utility class frameworks that are so in vogue. It’s much more closely aligned with the traditional separation of concerns. Also very happy to see Apple and the Safari team push web standards forward!

gkilmain 4y ago
Rounded corners really were all the rage for a while and we needed support for it! I remember in the early days cobbling together elements with top-left, top-right, etc image slices. Want't really too long ago.. maybe 10 years?
- omneity 4y ago
  Maybe try 20ish years? Those are the days of php-nuke and what you described was a common technique for building themes back then.
  - czx4f4bd 4y ago
    MDN says border-radius was added to Chrome in 2010 and Firefox in 2011, and Chrome added the prefixed version in 2008. https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/border-radi...
    - omneity 4y ago
      I am referring to the image slicing technique and rendering fancy buttons and sidebar "blocks" using tables in the likes of PHP-Nuke and other content management systems of the time. > I remember in the early days cobbling together elements with top-left, top-right, etc image slices. Want't really too long ago.. maybe 10 years? To me this is core ajax and php era, so ~2002-2006 which would be about 18 years ago. By the time CSS standards for rounding corners arrived a lot of pain has been inflicted on us developers, but by now it feels as if this era never existed (same with pre/post flex to take another CSS milestone)
    - samwillis 4y ago
      Safari and WebKit had it from 2008 but prefixed. Chrome, back then based on WebKit pre forking it, will have had prefixed support from launch. Firefox had it from 2006, prefixed. IE was the holdout, not having it until v9 in 2011. https://caniuse.com/border-radius https://caniuse.com/border-radius
      - achairapart 4y ago
        Yes, border-radius was available since ~2007/2008 except for IE (I remember using some hack involving HTC files, maybe CSS3PIE[0]). [0]: http://css3pie.com/ http://css3pie.com/
- samwillis 4y ago
  I remember in the late 90s building content boxes with 3x3 tables, outer cells containing image slices for the border, drop shadow and rounded corners. Macromedia Fireworks had brilliant tools for both creating these sort of graphics, but also slicing them up for use in tables. I still miss Fireworks, Adobe killed it though as they perceived that it competed with Photoshop when it really didn’t. It’s the spiritual precursor to all ui/ux design tools like Figma and Sketch.
  - lelandfe 4y ago
    Some classic webmaster nostalgia: Sliding door technique: https://alistapart.com/article/slidingdoors/ https://alistapart.com/article/slidingdoors/ Bulletproof buttons: https://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/ https://www.456bereastreet.com/archive/200705/creating_bulle...
gernb 4y ago
It's already in Chrome Beta meaning "has" will be shipping in Chrome within 1-4 weeks. It's not like Safari are leading with this feature and others are catching up. Leading is when you implement something and no one else as started. Example, Firefox and Chrome shipped WebGL2 and Safari did nothing for 4 years. When multiple browsers are implementing the same standard at the same time and one ships a couple of weeks earlier that's not leading. Leading implies followers. Maybe in this case Firefox will follow both Chrome and Safari since Firefox has (no "has" support in Firefox Nightly)
- samwillis 4y ago
  I didn’t use the word “leading” or imply they were… I’m happy that Safari, who have been at times been criticised for not keeping up, are on this occasion helping to push web standards forward. That has nothing to do with who was “first”, but in this case they happen to have been. If they were two weeks behind I would have made the same comment on a thread about a blog post on their own blog.
- bobwaycott 4y ago
  > It's not like Safari are leading with this feature and others are catching up. You seem to be reacting with some anti-WebKit bias here, didn’t read the article about the history of this feature, or are taking a very odd view of “leading” to avoid giving credit to the WebKit team. The article gives the history, and links you to it: - eyeo approached Igalia to sponsor work on has:() in early 2021 (Igalia blogged about it May 2021, after having been working on it for a little while) - Igalia worked on early prototypes to collect data and write tests to drive the conversation around :has() forward - the WebKit team at Apple picked it up and started doing the hard work of a real and powerful implementation - they shipped :has() in Safari Technology Preview 137 in December 2021 - they shipped :has() in Safari 15.4 on March 14, 2022 - Igalia did the engineering work to implement :has() in Chromium, which will ship in Chrome 105 on August 30, 2022 - the Chrome issue for :has(), which was created in May, you’ll see it openly references using WebKit’s work and approach - other browsers built on Chromium won’t be far behind - Mozilla is currently working on the Firefox implementation > It's not like Safari are leading with this feature and others are catching up. Leading is when you implement something and no one else as started. I think, given the timeline and everyone who is actively involved referencing WebKit with the real-world proven and shipped implementation, it’s exactly like that. > When multiple browsers are implementing the same standard at the same time and one ships a couple of weeks earlier that's not leading. Leading implies followers. This isn’t a couple-week lag. WebKit has (and continues to) lag in areas—but :has() isn’t one of them, as WebKit is literally the reference implementation here, was in Tech Preview 8 months ago, and has been released in Safari for 5 months. I think it’s fair and accurate to acknowledge that WebKit :has(followers).
geitir 4y ago
The biggest addition to CSS in 25 years imo is container queries
- vehemenz 4y ago
  Preprocessors and CSS methodologies essentially solved that problem already. Container queries are nice, but :has() gives developers novel functionality to CSS that wasn't possible before without JavaScript and DOM traversal.
  - uallo 4y ago
    Is it possible you are confusing container queries with something else? I don't think preprocessors and/or CSS methodologies have anything to do with that. I don't see any way they could solve the problem that container queries are tackling. At least not without JavaScript. But I'm more than eager to learn that I'm wrong about that.
    - vehemenz 4y ago
      Functional classes with pre-established breakpoints solve a lot of the problem that container queries are tackling. It's a nice feature set, but it wasn't impossible to do before, unless I am misunderstanding something.
- pupppet 4y ago
  Can’t come soon enough. The responsive web without it has been a hack.

gkilmain 4y ago

Rounded corners really were all the rage for a while and we needed support for it! I remember in the early days cobbling together elements with top-left, top-right, etc image slices. Want't really too long ago.. maybe 10 years?

omneity 4y ago
Maybe try 20ish years? Those are the days of php-nuke and what you described was a common technique for building themes back then.
- czx4f4bd 4y ago
  MDN says border-radius was added to Chrome in 2010 and Firefox in 2011, and Chrome added the prefixed version in 2008. https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/border-radi...
  - omneity 4y ago
    I am referring to the image slicing technique and rendering fancy buttons and sidebar "blocks" using tables in the likes of PHP-Nuke and other content management systems of the time. > I remember in the early days cobbling together elements with top-left, top-right, etc image slices. Want't really too long ago.. maybe 10 years? To me this is core ajax and php era, so ~2002-2006 which would be about 18 years ago. By the time CSS standards for rounding corners arrived a lot of pain has been inflicted on us developers, but by now it feels as if this era never existed (same with pre/post flex to take another CSS milestone)
  - samwillis 4y ago
    Safari and WebKit had it from 2008 but prefixed. Chrome, back then based on WebKit pre forking it, will have had prefixed support from launch. Firefox had it from 2006, prefixed. IE was the holdout, not having it until v9 in 2011. https://caniuse.com/border-radius https://caniuse.com/border-radius
    - achairapart 4y ago
      Yes, border-radius was available since ~2007/2008 except for IE (I remember using some hack involving HTC files, maybe CSS3PIE[0]). [0]: http://css3pie.com/ http://css3pie.com/
samwillis 4y ago
I remember in the late 90s building content boxes with 3x3 tables, outer cells containing image slices for the border, drop shadow and rounded corners. Macromedia Fireworks had brilliant tools for both creating these sort of graphics, but also slicing them up for use in tables. I still miss Fireworks, Adobe killed it though as they perceived that it competed with Photoshop when it really didn’t. It’s the spiritual precursor to all ui/ux design tools like Figma and Sketch.
- lelandfe 4y ago
  Some classic webmaster nostalgia: Sliding door technique: https://alistapart.com/article/slidingdoors/ https://alistapart.com/article/slidingdoors/ Bulletproof buttons: https://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/ https://www.456bereastreet.com/archive/200705/creating_bulle...

gernb 4y ago

It's already in Chrome Beta meaning "has" will be shipping in Chrome within 1-4 weeks. It's not like Safari are leading with this feature and others are catching up. Leading is when you implement something and no one else as started. Example, Firefox and Chrome shipped WebGL2 and Safari did nothing for 4 years. When multiple browsers are implementing the same standard at the same time and one ships a couple of weeks earlier that's not leading. Leading implies followers. Maybe in this case Firefox will follow both Chrome and Safari since Firefox has (no "has" support in Firefox Nightly)

samwillis 4y ago
I didn’t use the word “leading” or imply they were… I’m happy that Safari, who have been at times been criticised for not keeping up, are on this occasion helping to push web standards forward. That has nothing to do with who was “first”, but in this case they happen to have been. If they were two weeks behind I would have made the same comment on a thread about a blog post on their own blog.
bobwaycott 4y ago
> It's not like Safari are leading with this feature and others are catching up. You seem to be reacting with some anti-WebKit bias here, didn’t read the article about the history of this feature, or are taking a very odd view of “leading” to avoid giving credit to the WebKit team. The article gives the history, and links you to it: - eyeo approached Igalia to sponsor work on has:() in early 2021 (Igalia blogged about it May 2021, after having been working on it for a little while) - Igalia worked on early prototypes to collect data and write tests to drive the conversation around :has() forward - the WebKit team at Apple picked it up and started doing the hard work of a real and powerful implementation - they shipped :has() in Safari Technology Preview 137 in December 2021 - they shipped :has() in Safari 15.4 on March 14, 2022 - Igalia did the engineering work to implement :has() in Chromium, which will ship in Chrome 105 on August 30, 2022 - the Chrome issue for :has(), which was created in May, you’ll see it openly references using WebKit’s work and approach - other browsers built on Chromium won’t be far behind - Mozilla is currently working on the Firefox implementation > It's not like Safari are leading with this feature and others are catching up. Leading is when you implement something and no one else as started. I think, given the timeline and everyone who is actively involved referencing WebKit with the real-world proven and shipped implementation, it’s exactly like that. > When multiple browsers are implementing the same standard at the same time and one ships a couple of weeks earlier that's not leading. Leading implies followers. This isn’t a couple-week lag. WebKit has (and continues to) lag in areas—but :has() isn’t one of them, as WebKit is literally the reference implementation here, was in Tech Preview 8 months ago, and has been released in Safari for 5 months. I think it’s fair and accurate to acknowledge that WebKit :has(followers).

geitir 4y ago

The biggest addition to CSS in 25 years imo is container queries

vehemenz 4y ago
Preprocessors and CSS methodologies essentially solved that problem already. Container queries are nice, but :has() gives developers novel functionality to CSS that wasn't possible before without JavaScript and DOM traversal.
- uallo 4y ago
  Is it possible you are confusing container queries with something else? I don't think preprocessors and/or CSS methodologies have anything to do with that. I don't see any way they could solve the problem that container queries are tackling. At least not without JavaScript. But I'm more than eager to learn that I'm wrong about that.
  - vehemenz 4y ago
    Functional classes with pre-established breakpoints solve a lot of the problem that container queries are tackling. It's a nice feature set, but it wasn't impossible to do before, unless I am misunderstanding something.
pupppet 4y ago
Can’t come soon enough. The responsive web without it has been a hack.