Imaginary CSS

Imaginary CSS

kilian

Member
Gold Member
Local time
18:03
Joined
Oct 7, 2019
Messages
60
Pronouns
he/him

Just came across this article with imaginary CSS:


And was reminded how much fun I had coming up with imaginary CSS to solve issues I had: random css thought | Kilian Valkhof (or actually implementing is using PostCSS: postcss-hocus)

So, If you could get any CSS implemented in browsers with the snap of your fingers, what would you add? Container queries, Easing gradients? Masonry layout?

 

Gummibeer

Astroneer
Moderator
Local time
18:03
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him

Easy masonry grid would be awesome! But also a selector that's, so far I know, is planned for CSS4 - define the element to apply the styles to in a longer chain.

Code:
body #wrapper .card(make-this active) > img
So apply styles to the card if it has a direct image child.

 

kilian

Member
Gold Member
Local time
18:03
Joined
Oct 7, 2019
Messages
60
Pronouns
he/him

Yeah, that's the :has() selector. Style an element only if it has a certain subtree. More info: :has(). Doesn't have browser support yet.

 
Last edited:

Adam

Mr. Webwide
Administrator
Local time
17:03
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

If CSS had nesting support I could happily ditch SCSS. Container queries are on my wish list as well!

 
Top