Menu

Post image 1
Post image 2
Post image 3
Post image 4
1 / 4
0

Chris’ Corner: Modern CSS Features Coming Together

CodePen·@HashtagPLUS·about 1 month ago
#6QVRdvMX
#docs#quantity#card#idea#style#photo
Reading 0:00
15s threshold

I like the term “content aware components” like Eric Bailey uses in the Piccalilli article Making content-aware components using CSS :has(), grid, and quantity queries . Does a card have a photo? Yes, do one thing, no, do another. That sort of thing. Eric has some good examples where a UI component has a bunch more “tags” than another, so the layout adjusts to accommodate them better. Thanks to :has() , the idea of “quantity queries” (e.g. style an element if there are, say, 4 or more of an element) have gotten a lot easier. The way I figure it, we could do like: .card :has(.tag :nth-child(4)) { /* apply styles to the card because there are at least 4 tags */ } Code language: CSS ( css ) Admittedly, the logic gets a little bit more complicated if you want like “3 or less tags”, but that’s exactly what Eric covers in the article, linking up the original ideas and resources, so you’re in luck. At CSS Day the other week, I listened to Ahmad Shadeed have a wonderful idea on stage .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More