A little while ago, I was busy updating a webpage by translating a Figma design into HTML/CSS. I was doing a restyle of a modal (or popup, how you want to call it) on a website to match the new design. Easy peasy, you would say. But there was one design choice which was impossible to do with CSS alone. So I was thinking how would I do this using CSS. So I come up with the ::has-overflow psuedo.
What are your thoughts about this?
https://microblog.jvdezign.com/the-need-of-the-has-overflow-css-pseudo-element
Top comments (1)
It's a bit confusing. Your JavaScript adds a class to the overflowed element, so the CSS equivalent would be a pseudo-class, not a pseudo-element.
If the proposal is for a pseudo-element, then you need to explain where its box(es) would be generated. At the beginning of its containing element? At the end? Somewhere in the middle?
And
modal:has(.container::has-overflow)wouldn't work. Pseudo-elements are not allowed inside:hasbecause they create cycles. The modal's styling would depend on the overflow, and the overflow would depend on the modal's styling.The same problem would affect a pseudo-class. CSS needs a way to break the circular dependencies. It's not clear how
has-overflowcould do that.