8 ms·

Using: Has() as a CSS Parent Selector and much more

214 points by samwillis 4y ago

MrPatan 4y ago
I'll enjoy pointing to this to answer "why is my website slow" questions in 10 years
samwillis 4y ago
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.
Tistron 4y ago
The most surprising thing for me is that Safari is first with this. Am I in a HN bubble where everyone are always complaining about safari, or is that genuinely unusual?
- have_faith 4y ago
  You’re not wrong, Safari is often behind on features. Unless Apple deem that feature important of course.
- akira2501 4y ago
  They're behind on features _and_ you have to work around their aggressive privacy choices. It's my least favorite testing phase in any release.
  - akie 4y ago
    I love their aggressive privacy choices.
    - solardev 4y ago
      It seems so fake... Apple adds "privacy" by crippling their competitors, then turns around and adds a bunch of their own intrusive advertising. They don't care about you, they just want to be the next Google
    - drawfloat 4y ago
      I love them to an extent. There should be some sort of request API available for temporarily disabling the more stringent media restrictions for a session. I worked on a media heavy fashion site a few years ago and dealing with Safari not allowing you to dynamically add new audio/video elements with auto play (or to auto play at all in low battery mode) was a real headache. By default it’s great, just offer the option to get permission for experiences that require it.
      - matheusmoreira 4y ago
have_faith 4y ago
It looks extremely useful. It’s slightly different to what I imagined a parent selector to be many years ago. When I think of “parent selector” I imagine putting the logic with the sibling and not the parent e.g. “if I’m in a hover state make my parent green, regardless of who/what the parent is”. It’s a small difference that in reality can be achieved with :has and collocating logic higher up but it’s an interesting difference.
- uallo 4y ago
  :has() can be described as "elements whose children match some selectors". Your expectation would have been (if I understand it correctly) "match elements with some selectors and get their (direct?) parent". Aside from reversing the logic, it seems to me that it is the exact same thing, isn't it? The selector could have been called "children pseudo-class selector" or similar, though. Personally, I prefer the actual syntax over your expecation. The first thing in the selector are actual elements that will be styled if certain conditions are met. That also matches how the existing pseudo-classes have been applied. > “if I’m in a hover state make my parent green, regardless of who/what the parent is” *:has(> *:hover)
  - samwillis 4y ago
    I think what they are suggesting, to invent some syntax, is this: :hover:parent() So it’s a post fix to go back up the tree. I prefer the flexibility of :has().
oblak 4y ago
About time, though I wonder what's the impact on performance. I realize these are not the jquery days where most people would write stupid selectors over and over again but nothing is free and I feel it's important have performance in mind even when it seems most of the web don't.
- jiggywiggy 4y ago
  Yeah we lost the battle of performance, mac m1 chrome easily runs 2-4gb with few tabs open.
  - rahkiin 4y ago
    Did you try with Safari instead?
    - Cyberdog 4y ago
      As someone who primarily uses Safari on an 8GB Mac mini and 8GB MBA, I've found there's two things which reliably cause memory to spike. One is opening the developer tools. Have more than a couple tabs with the dev tools open and I can easily have Safari itself go over 8GB and I start to feel the thrashing when switching between apps and stuff. Closing dev tools for certain tabs when I no longer need them helps. Two, for whatever reason, is streaming YouTube videos - not playing pre-recorded ones but watching livestreams. I suspect the culprit is actually the chat box but I'm not sure. For now, if I want to watch a YouTube stream for more than a couple minutes, I'll usually pass it to Streamlink which allows me to watch the stream through VLC and bypass the web interface entirely - I don't participate in or care about the chats anyway. https://streamlink.github.io https://streamlink.github.io I even set up a Zsh function I can invoke with "sl" which automatically fires up Streamlink with whatever URL I currently have in my clipboard. https://github.com/GarrettAlbright/Dotfiles/blob/master/.zshrc#L80-L86 https://github.com/GarrettAlbright/Dotfiles/blob/master/.zsh... Incidentally, if you open up Activity Monitor and go to the Memory tab, it'll show you how much memory each Safari tab is using… well, sort of. It uses the domain name of the site as the "Process Name," but that's not very useful if you have more than one tab open with a page from the same domain name. I really wish they'd put the full page title and/or URL in there and/or let you switch directly to the offending tab from Activity Monitor. All that being said… Naturally, Safari is the most well-integrated and performant macOS browser, and it puzzles me why even self-described Mac fans would use anything else for anything other than testing.
bawolff 4y ago
The demo where you can have different themes for your site ws pretty cool. I wonder if this will put even more stuff currently in the realm of js into css.
dannyobrien 4y ago
I think it's noteworthy that feature was pursued and implemented by Igalia, an independent open source dev house whose HQ is in Spain, and is run as a co-operative. They've built up quite a powerhouse of core browser experts. https://www.igalia.com/about/values https://www.igalia.com/about/values
- solardev 4y ago
  I wish more places ran as employee-owned coops!
  - julienreszka 4y ago
    Why tho?
    - solardev 4y ago
      Why co-ops? Because the profit goes back to the people who work there instead of shareholders, and they get a say in their own management. It shares control of the company between those who work there. It's a much better environment to work in vs something like Activision or EA where you're just an abused cog in the machine. At least on paper. In reality, the smaller coops don't grow big enough and so can be resourced starved and kinda get stuck in a death spiral as people leave to pursue other alternatives while the remaining members hoard power and control for themselves and make new employees basically not full owners but minions, etc. There's no perfect system but I'd rather take the risks of equality than work under an oppressive hierarchy. Not everyone cares about that though. Some would rather earn the big bucks, be led by execs, and not have to worry about the rest of the business.
      - julienreszka 4y ago
        Thank you for your balanced opinion it's so rare on the internets
      - TingPing 4y ago
        Igalia shares equal ownership and all new employees are expected to become owners eventually. It's been growing faster too lately. WebKit Team is hiring :)
jruz 4y ago
Totally unnecessary feature that will do just harm to slow devices than to move the web forward. Lazy developers rejoice.
- uallo 4y ago
  Can you elaborate or is this just an uninformed rant? The article that you are commenting on explicitly mentions the focus on performance while considering this feature. They even state to have been able to achieve "fantastic performance, even in the presence of large DOM trees and large numbers of :has() selectors".
  - eurasiantiger 4y ago
    Those words are meaningless without the actual benchmark data.
  - oblak 4y ago
    With all due respect, it looks to me you're the one sharing an uninformed opinion. Have you seen any benchmarks, tried some? No? Your claims are based on what the authors say. That is not enough. Never has been. The idea is not new at all. People have been asking for something like this for many years. You know why it never happened? Because it would be slow. Maybe the webkit devs have found a really fast and clever way to do it. But shitting on people for voicing their well founded skepticism is not a good sign. Especially when all we have is their word.
    - uallo 4y ago
      I was neither sharing an opinion nor did I claim anything. I asked OP to elaborate and referred them to content of the article. > You know why it never happened? Yes, I do. > Especially when all we have is their word. Does that mean you don't trust their word? Good. Would you trust their own benchmark? No? The parent selector has been in Safari 15.4 since March, 2022. So feel free to do your own benchmark. There is not just their word. You might also find the lengthy explainer of Igalia, where performance is discussed, interesting: https://github.com/Igalia/explainers/tree/main/css/has https://github.com/Igalia/explainers/tree/main/css/has Being skeptic is not a bad thing. But (uninformed) criticism without any specifics is far from "well founded skepticism". JavaScript interpreters used to be very slow twenty years ago, now they are extremely fast. That can happen to CSS evaluation, too.
eurasiantiger 4y ago
I still think this is a bad idea, because it leads to parent:child combinatorial explosion. Instead, try to avoid the need to define styles that way. Learn to rely on the cascade. Pick an authoring style for sizing, margins and paddings and stick to it. I tend to prefer h-margin and v-padding on containers and v-margins and h-padding on content.
jeroenhd 4y ago
I love having access to the has() selector as a user for custom CSS on shitty websites. Ad blocker cleaning rules can get a lot better with this selector. However, for actual CSS, I don't think this is a good idea. You shouldn't need the has() selector if you write your own CSS and HTML.
- woutr_be 4y ago
  Why not? The figure example seems like a perfectly valid use-case. How else would you do something like that? Edit; I actually had a use case were I was building an expanding menu, without JavaScript, it involved a ~ and > selector on a checkbox to get that to work. The :has selector would’ve made it straight forward.
  - jeroenhd 4y ago
    When you use "has()" you can be pretty sure that you also have the context to just use a class name. Using CSS to traverse a tree of elements rather than structure the elements in a way to make your CSS makes sense just feels like backwards design to me. Your CSS should describe how the HTML looks, it shouldn't be trying to figure out what you did to the poor DOM tree to find the right style to apply.
    - samwillis 4y ago
      I think the article shows brilliant examples of where that isn’t really possible, and uses where it replaces JavaScript. It also stops you needing to repeat yourself, the figure example for example with your suggestion would need both a class and a caption tag. Also going back to the roots of CSS, :has() is ideal for semantic markup where you don’t want or need to use excessive class names. Obviously with class heavy frameworks and methodologies that are in vogue :has() is less relevant. There is more than one way to use CSS. > Your CSS should describe how the HTML looks That’s literally what :has() does, based on the structure of the document.
    - woutr_be 4y ago
      Maybe i’m either misinterpreting you, or misunderstanding the article, but figure:has(figurecaption) perfectly describes a valid DOM tree, it’s not trying to do anything weird. I’m sure it can be abuses, just like anything else.
fomine3 4y ago
Praise for Igalia!
lucideer 4y ago
Many commenters praising this here but parent selectors have been in discussion almost since the creation of CSS and the repeated conclusion has always been that they're a performance nightmare by definition. What's changed in that regard?
- pwdisswordfish9 4y ago
  My guess: nobody cares about performance any more.
  - amichal 4y ago
    True in the sense that you mean and alao in pure CS theory terms but also the TFA also links to some serious documentation on practical solutions to many real world performance problems and browser codebases have most of the underlying complexity for other less obvious performance issues. E.g. https://github.com/Igalia/explainers/blob/main/css/has/has-style-invalidation.md https://github.com/Igalia/explainers/blob/main/css/has/has-s...
    - lucideer 4y ago
      Thanks for the deeplink, I should spend some time digging in. Though as far a pre-existing complexity in modern engines goes: engine performance has regressed (in absolute end-user terms), and engine conplexity is also a barrier to entry for competing/new engines. So this isn't exactly "good".
  - lucideer 4y ago
    That's my sense, though if anyone still does it's been the WebKit team, so this does seem a little unusual at least.
- eyelidlessness 4y ago
  > What's changed in that regard? The CSS WG spent quite a lot of time and effort deliberating on a standard which wouldn’t have a significant performance impact. They only support a subset of selectors as arguments, to minimize their complexity.
beltsazar 4y ago
It's especially useful for blocking ads or unwanted elements of a website that has cryptic and ever-changing IDs and classes. With the :has() selector, you can now block an element by its structure, instead of IDs or classes. Some of my personal uBlock filters that might be useful for others: ! Hide question suggestions www.quora.com##div.qu-borderAll:has(div:has-text(/^Questions for you$/)) ! Hide space suggestions www.quora.com##div.qu-borderAll:has(div:has-text(/^Discover New Spaces$/)) ! Hide 1) left nav bar, 2) footer (clap, comment), 3) right side bar medium.com##div:has(> nav) medium.com##div:has(> div:has(> article)) ~ div:last-child medium.com##div:has(> div:has(> div:has(> div:has(> a[href^="https://help.medium.com"])))) ! Hide non-relevant seach results www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(People also watched)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(For you)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(Previously watched)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(Results for similar searches)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(New for you)) ! Hide unused buttons (useful for vertical monitors) www.youtube.com##ytd-toggle-button-renderer:has(yt-formatted-string:has-text(Dislike)) www.youtube.com##ytd-button-renderer:has(yt-formatted-string:has-text(Share)) www.youtube.com##ytd-button-renderer:has(yt-formatted-string:has-text(Thanks)) www.youtube.com##ytd-button-renderer:has(yt-formatted-string:has-text(Clip))
- deleted 4y ago
  [deleted]
- ketzu 4y ago
  I used ublock origin for removing recommendations and trending topics on sites like twitter, but it never occured to me how easy I can create them using has().
- azeirah 4y ago
  Is that :has-text psuedoselector a UBlock-specific feature? I can't find anything on it, I would love to have that in regular css
  - js2 4y ago
Wowfunhappy 4y ago
Possibly stupid question, is there a reason they went with parent:has(child) Instead of parent < child Which seems a bit more intuitive to me given that the inverse is a thing.
- henrikeh 4y ago
  The article gives a few examples where a pseudo-class fits better with how CSS normally works. For example, the selector matches the last item in the selector. With ‘<‘ it would match ‘parent’ in your case. You can also match descendants of something with the :has() selector. It really is more than a “parent selector”
  - silvestrov 4y ago
    Example of this: div:has(b) a which matches a link inside a div that also contains bold text. The important part is that 'b' and 'a' can be very different places in the hierachy, they don't need to be same like like a 'b + a' selector.
vnm 4y ago
I wish Safari developers would spend their valuable time on fixing the horror Safari is. It's literally the new Internet Explorer. If you work on building web apps with complex interactions, animations, etc, you get to hate Safari with all your heart in a very short amount of time. There are things they've done that are amazing, and which I respect (like JavaScriptCore), but overall Safari is the worst popular browser. I don't get how people can stand it, but again I don't get how people can stand iOS either.
- wixyu 4y ago
  Uhm this is exactly what :has is, fixing the ‘horror’. This is such an outdated idea, the WebKit team have been killing it the past 12-18 months as evidenced by the efforts on interop 2022. https://wpt.fyi/interop-2022 https://wpt.fyi/interop-2022
- elevaet 4y ago
  It's not literally the new IE, but it is the new IE.
- tannhaeuser 4y ago
  > Safari is [...] literally the new Internet Explorer. > But do you ever see a “Best viewed with Safari” notice? No, you don’t. Another browser takes that special place in web developers’ hearts and minds. > Chrome is the new IE, but in reverse. [1] [1]: https://news.ycombinator.com/item?id=28156818 https://news.ycombinator.com/item?id=28156818
- kitsunesoba 4y ago
  A vanishingly small percentage of the web I make regular use of has any legitimate need for anything beyond what web browsers were capable of 4-6 years ago. In the odd case that I run into a site that’s broken in Safari, I can usually find an alternative that works fine in a few seconds. What has the biggest impact on me as a user isn’t the quantity of bells and whistles the browser’s engine has, but how efficient it is because nobody likes battery vampire apps and how much the browser tilts the balance of control in favor of the user, because third parties on the web are best treated as adversarial until proven otherwise. Chrome provides a nice experience for devs, but its user experience continues to slip.
VPenkov 4y ago
Very exciting. I wonder if :focus-within is on its way out as a result of this. Granted, it would have a lower specificity than, say, .bordered:has(input:focus).
radiojasper 4y ago
I wish firefox `has()` this soon.
- marcosdumay 4y ago
  It's already optional on the nightly. It's coming.
julienreszka 4y ago
LOL this is so cool Check this out ```css figure:has(input[type="checkbox"]:checked) figcaption { /\* if a figure has a checkbox checked, apply this to its figcaption... \*/ font-size: 90%; font-style: italic; margin: 0.6rem 0 0.1rem; } ``` https://codepen.io/julienreszka/pen/yLKZRRX https://codepen.io/julienreszka/pen/yLKZRRX
0x69420 4y ago
stuff like this really brings us closer to the dream we all had back when we served largely-static content with some scripts thrown in -- of being able to say what we meant in the css and keeping the markup ~semantic~ now that we throw our hands in the air, say “fuck it”, and first&foremost serve “apps”, single-page or not, styled with utility class systems like tailwind, it feels a lot less meaningful to the average poor sap hired to make web frontends
- Cyberdog 4y ago
  Oh hell yes. Remember "progressive enhancement?" It feels like the last ten years of web dev has been the entire industry giving up on the idea that web pages are supposed to be pages.

214 points by samwillis 4y ago

I'll enjoy pointing to this to answer "why is my website slow" questions in 10 years

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.

Tistron 4y ago

The most surprising thing for me is that Safari is first with this. Am I in a HN bubble where everyone are always complaining about safari, or is that genuinely unusual?

have_faith 4y ago
You’re not wrong, Safari is often behind on features. Unless Apple deem that feature important of course.
akira2501 4y ago
They're behind on features _and_ you have to work around their aggressive privacy choices. It's my least favorite testing phase in any release.
- akie 4y ago
  I love their aggressive privacy choices.
  - solardev 4y ago
    It seems so fake... Apple adds "privacy" by crippling their competitors, then turns around and adds a bunch of their own intrusive advertising. They don't care about you, they just want to be the next Google
  - drawfloat 4y ago
    I love them to an extent. There should be some sort of request API available for temporarily disabling the more stringent media restrictions for a session. I worked on a media heavy fashion site a few years ago and dealing with Safari not allowing you to dynamically add new audio/video elements with auto play (or to auto play at all in low battery mode) was a real headache. By default it’s great, just offer the option to get permission for experiences that require it.
    - matheusmoreira 4y ago

have_faith 4y ago

It looks extremely useful. It’s slightly different to what I imagined a parent selector to be many years ago. When I think of “parent selector” I imagine putting the logic with the sibling and not the parent e.g. “if I’m in a hover state make my parent green, regardless of who/what the parent is”. It’s a small difference that in reality can be achieved with :has and collocating logic higher up but it’s an interesting difference.

uallo 4y ago
:has() can be described as "elements whose children match some selectors". Your expectation would have been (if I understand it correctly) "match elements with some selectors and get their (direct?) parent". Aside from reversing the logic, it seems to me that it is the exact same thing, isn't it? The selector could have been called "children pseudo-class selector" or similar, though. Personally, I prefer the actual syntax over your expecation. The first thing in the selector are actual elements that will be styled if certain conditions are met. That also matches how the existing pseudo-classes have been applied. > “if I’m in a hover state make my parent green, regardless of who/what the parent is” *:has(> *:hover)
- samwillis 4y ago
  I think what they are suggesting, to invent some syntax, is this: :hover:parent() So it’s a post fix to go back up the tree. I prefer the flexibility of :has().

oblak 4y ago

About time, though I wonder what's the impact on performance. I realize these are not the jquery days where most people would write stupid selectors over and over again but nothing is free and I feel it's important have performance in mind even when it seems most of the web don't.

jiggywiggy 4y ago
Yeah we lost the battle of performance, mac m1 chrome easily runs 2-4gb with few tabs open.
- rahkiin 4y ago
  Did you try with Safari instead?
  - Cyberdog 4y ago
    As someone who primarily uses Safari on an 8GB Mac mini and 8GB MBA, I've found there's two things which reliably cause memory to spike. One is opening the developer tools. Have more than a couple tabs with the dev tools open and I can easily have Safari itself go over 8GB and I start to feel the thrashing when switching between apps and stuff. Closing dev tools for certain tabs when I no longer need them helps. Two, for whatever reason, is streaming YouTube videos - not playing pre-recorded ones but watching livestreams. I suspect the culprit is actually the chat box but I'm not sure. For now, if I want to watch a YouTube stream for more than a couple minutes, I'll usually pass it to Streamlink which allows me to watch the stream through VLC and bypass the web interface entirely - I don't participate in or care about the chats anyway. https://streamlink.github.io https://streamlink.github.io I even set up a Zsh function I can invoke with "sl" which automatically fires up Streamlink with whatever URL I currently have in my clipboard. https://github.com/GarrettAlbright/Dotfiles/blob/master/.zshrc#L80-L86 https://github.com/GarrettAlbright/Dotfiles/blob/master/.zsh... Incidentally, if you open up Activity Monitor and go to the Memory tab, it'll show you how much memory each Safari tab is using… well, sort of. It uses the domain name of the site as the "Process Name," but that's not very useful if you have more than one tab open with a page from the same domain name. I really wish they'd put the full page title and/or URL in there and/or let you switch directly to the offending tab from Activity Monitor. All that being said… Naturally, Safari is the most well-integrated and performant macOS browser, and it puzzles me why even self-described Mac fans would use anything else for anything other than testing.

bawolff 4y ago

The demo where you can have different themes for your site ws pretty cool. I wonder if this will put even more stuff currently in the realm of js into css.

dannyobrien 4y ago

I think it's noteworthy that feature was pursued and implemented by Igalia, an independent open source dev house whose HQ is in Spain, and is run as a co-operative. They've built up quite a powerhouse of core browser experts. https://www.igalia.com/about/values https://www.igalia.com/about/values

solardev 4y ago
I wish more places ran as employee-owned coops!
- julienreszka 4y ago
  Why tho?
  - solardev 4y ago
    Why co-ops? Because the profit goes back to the people who work there instead of shareholders, and they get a say in their own management. It shares control of the company between those who work there. It's a much better environment to work in vs something like Activision or EA where you're just an abused cog in the machine. At least on paper. In reality, the smaller coops don't grow big enough and so can be resourced starved and kinda get stuck in a death spiral as people leave to pursue other alternatives while the remaining members hoard power and control for themselves and make new employees basically not full owners but minions, etc. There's no perfect system but I'd rather take the risks of equality than work under an oppressive hierarchy. Not everyone cares about that though. Some would rather earn the big bucks, be led by execs, and not have to worry about the rest of the business.
    - julienreszka 4y ago
      Thank you for your balanced opinion it's so rare on the internets
    - TingPing 4y ago
      Igalia shares equal ownership and all new employees are expected to become owners eventually. It's been growing faster too lately. WebKit Team is hiring :)

jruz 4y ago

Totally unnecessary feature that will do just harm to slow devices than to move the web forward. Lazy developers rejoice.

uallo 4y ago
Can you elaborate or is this just an uninformed rant? The article that you are commenting on explicitly mentions the focus on performance while considering this feature. They even state to have been able to achieve "fantastic performance, even in the presence of large DOM trees and large numbers of :has() selectors".
- eurasiantiger 4y ago
  Those words are meaningless without the actual benchmark data.
- oblak 4y ago
  With all due respect, it looks to me you're the one sharing an uninformed opinion. Have you seen any benchmarks, tried some? No? Your claims are based on what the authors say. That is not enough. Never has been. The idea is not new at all. People have been asking for something like this for many years. You know why it never happened? Because it would be slow. Maybe the webkit devs have found a really fast and clever way to do it. But shitting on people for voicing their well founded skepticism is not a good sign. Especially when all we have is their word.
  - uallo 4y ago
    I was neither sharing an opinion nor did I claim anything. I asked OP to elaborate and referred them to content of the article. > You know why it never happened? Yes, I do. > Especially when all we have is their word. Does that mean you don't trust their word? Good. Would you trust their own benchmark? No? The parent selector has been in Safari 15.4 since March, 2022. So feel free to do your own benchmark. There is not just their word. You might also find the lengthy explainer of Igalia, where performance is discussed, interesting: https://github.com/Igalia/explainers/tree/main/css/has https://github.com/Igalia/explainers/tree/main/css/has Being skeptic is not a bad thing. But (uninformed) criticism without any specifics is far from "well founded skepticism". JavaScript interpreters used to be very slow twenty years ago, now they are extremely fast. That can happen to CSS evaluation, too.

eurasiantiger 4y ago

I still think this is a bad idea, because it leads to parent:child combinatorial explosion. Instead, try to avoid the need to define styles that way. Learn to rely on the cascade. Pick an authoring style for sizing, margins and paddings and stick to it. I tend to prefer h-margin and v-padding on containers and v-margins and h-padding on content.

jeroenhd 4y ago

I love having access to the has() selector as a user for custom CSS on shitty websites. Ad blocker cleaning rules can get a lot better with this selector. However, for actual CSS, I don't think this is a good idea. You shouldn't need the has() selector if you write your own CSS and HTML.

woutr_be 4y ago
Why not? The figure example seems like a perfectly valid use-case. How else would you do something like that? Edit; I actually had a use case were I was building an expanding menu, without JavaScript, it involved a ~ and > selector on a checkbox to get that to work. The :has selector would’ve made it straight forward.
- jeroenhd 4y ago
  When you use "has()" you can be pretty sure that you also have the context to just use a class name. Using CSS to traverse a tree of elements rather than structure the elements in a way to make your CSS makes sense just feels like backwards design to me. Your CSS should describe how the HTML looks, it shouldn't be trying to figure out what you did to the poor DOM tree to find the right style to apply.
  - samwillis 4y ago
    I think the article shows brilliant examples of where that isn’t really possible, and uses where it replaces JavaScript. It also stops you needing to repeat yourself, the figure example for example with your suggestion would need both a class and a caption tag. Also going back to the roots of CSS, :has() is ideal for semantic markup where you don’t want or need to use excessive class names. Obviously with class heavy frameworks and methodologies that are in vogue :has() is less relevant. There is more than one way to use CSS. > Your CSS should describe how the HTML looks That’s literally what :has() does, based on the structure of the document.
  - woutr_be 4y ago
    Maybe i’m either misinterpreting you, or misunderstanding the article, but figure:has(figurecaption) perfectly describes a valid DOM tree, it’s not trying to do anything weird. I’m sure it can be abuses, just like anything else.

fomine3 4y ago

Praise for Igalia!

lucideer 4y ago

Many commenters praising this here but parent selectors have been in discussion almost since the creation of CSS and the repeated conclusion has always been that they're a performance nightmare by definition. What's changed in that regard?

pwdisswordfish9 4y ago
My guess: nobody cares about performance any more.
- amichal 4y ago
  True in the sense that you mean and alao in pure CS theory terms but also the TFA also links to some serious documentation on practical solutions to many real world performance problems and browser codebases have most of the underlying complexity for other less obvious performance issues. E.g. https://github.com/Igalia/explainers/blob/main/css/has/has-style-invalidation.md https://github.com/Igalia/explainers/blob/main/css/has/has-s...
  - lucideer 4y ago
    Thanks for the deeplink, I should spend some time digging in. Though as far a pre-existing complexity in modern engines goes: engine performance has regressed (in absolute end-user terms), and engine conplexity is also a barrier to entry for competing/new engines. So this isn't exactly "good".
- lucideer 4y ago
  That's my sense, though if anyone still does it's been the WebKit team, so this does seem a little unusual at least.
eyelidlessness 4y ago
> What's changed in that regard? The CSS WG spent quite a lot of time and effort deliberating on a standard which wouldn’t have a significant performance impact. They only support a subset of selectors as arguments, to minimize their complexity.

beltsazar 4y ago

It's especially useful for blocking ads or unwanted elements of a website that has cryptic and ever-changing IDs and classes. With the :has() selector, you can now block an element by its structure, instead of IDs or classes. Some of my personal uBlock filters that might be useful for others: ! Hide question suggestions www.quora.com##div.qu-borderAll:has(div:has-text(/^Questions for you$/)) ! Hide space suggestions www.quora.com##div.qu-borderAll:has(div:has-text(/^Discover New Spaces$/)) ! Hide 1) left nav bar, 2) footer (clap, comment), 3) right side bar medium.com##div:has(> nav) medium.com##div:has(> div:has(> article)) ~ div:last-child medium.com##div:has(> div:has(> div:has(> div:has(> a[href^="https://help.medium.com"])))) ! Hide non-relevant seach results www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(People also watched)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(For you)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(Previously watched)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(Results for similar searches)) www.youtube.com##ytd-search ytd-shelf-renderer:has(h2:has-text(New for you)) ! Hide unused buttons (useful for vertical monitors) www.youtube.com##ytd-toggle-button-renderer:has(yt-formatted-string:has-text(Dislike)) www.youtube.com##ytd-button-renderer:has(yt-formatted-string:has-text(Share)) www.youtube.com##ytd-button-renderer:has(yt-formatted-string:has-text(Thanks)) www.youtube.com##ytd-button-renderer:has(yt-formatted-string:has-text(Clip))

deleted 4y ago
[deleted]
ketzu 4y ago
I used ublock origin for removing recommendations and trending topics on sites like twitter, but it never occured to me how easy I can create them using has().
azeirah 4y ago
Is that :has-text psuedoselector a UBlock-specific feature? I can't find anything on it, I would love to have that in regular css
- js2 4y ago

Wowfunhappy 4y ago

Possibly stupid question, is there a reason they went with parent:has(child) Instead of parent < child Which seems a bit more intuitive to me given that the inverse is a thing.

henrikeh 4y ago
The article gives a few examples where a pseudo-class fits better with how CSS normally works. For example, the selector matches the last item in the selector. With ‘<‘ it would match ‘parent’ in your case. You can also match descendants of something with the :has() selector. It really is more than a “parent selector”
- silvestrov 4y ago
  Example of this: div:has(b) a which matches a link inside a div that also contains bold text. The important part is that 'b' and 'a' can be very different places in the hierachy, they don't need to be same like like a 'b + a' selector.

vnm 4y ago

I wish Safari developers would spend their valuable time on fixing the horror Safari is. It's literally the new Internet Explorer. If you work on building web apps with complex interactions, animations, etc, you get to hate Safari with all your heart in a very short amount of time. There are things they've done that are amazing, and which I respect (like JavaScriptCore), but overall Safari is the worst popular browser. I don't get how people can stand it, but again I don't get how people can stand iOS either.

wixyu 4y ago
Uhm this is exactly what :has is, fixing the ‘horror’. This is such an outdated idea, the WebKit team have been killing it the past 12-18 months as evidenced by the efforts on interop 2022. https://wpt.fyi/interop-2022 https://wpt.fyi/interop-2022
elevaet 4y ago
It's not literally the new IE, but it is the new IE.
tannhaeuser 4y ago
> Safari is [...] literally the new Internet Explorer. > But do you ever see a “Best viewed with Safari” notice? No, you don’t. Another browser takes that special place in web developers’ hearts and minds. > Chrome is the new IE, but in reverse. [1] [1]: https://news.ycombinator.com/item?id=28156818 https://news.ycombinator.com/item?id=28156818
kitsunesoba 4y ago
A vanishingly small percentage of the web I make regular use of has any legitimate need for anything beyond what web browsers were capable of 4-6 years ago. In the odd case that I run into a site that’s broken in Safari, I can usually find an alternative that works fine in a few seconds. What has the biggest impact on me as a user isn’t the quantity of bells and whistles the browser’s engine has, but how efficient it is because nobody likes battery vampire apps and how much the browser tilts the balance of control in favor of the user, because third parties on the web are best treated as adversarial until proven otherwise. Chrome provides a nice experience for devs, but its user experience continues to slip.

VPenkov 4y ago

Very exciting. I wonder if :focus-within is on its way out as a result of this. Granted, it would have a lower specificity than, say, .bordered:has(input:focus).

radiojasper 4y ago

I wish firefox `has()` this soon.

marcosdumay 4y ago
It's already optional on the nightly. It's coming.

julienreszka 4y ago

LOL this is so cool Check this out ```css figure:has(input[type="checkbox"]:checked) figcaption { /\* if a figure has a checkbox checked, apply this to its figcaption... \*/ font-size: 90%; font-style: italic; margin: 0.6rem 0 0.1rem; } ``` https://codepen.io/julienreszka/pen/yLKZRRX https://codepen.io/julienreszka/pen/yLKZRRX

0x69420 4y ago

stuff like this really brings us closer to the dream we all had back when we served largely-static content with some scripts thrown in -- of being able to say what we meant in the css and keeping the markup ~semantic~ now that we throw our hands in the air, say “fuck it”, and first&foremost serve “apps”, single-page or not, styled with utility class systems like tailwind, it feels a lot less meaningful to the average poor sap hired to make web frontends

Cyberdog 4y ago
Oh hell yes. Remember "progressive enhancement?" It feels like the last ten years of web dev has been the entire industry giving up on the idea that web pages are supposed to be pages.