New blogpost: Style a parent element based on its number of children using CSS :has()
https://www.bram.us/2022/11/17/style-a-parent-element-based-on-its-number-of-children-using-css-has/
Remote
Bramus
@bramus@mastodon.social
mastodon
4.7.0-beta.1
Chrome Web DevRel at Google (CSS + ChromeDevtools). CSSWG Member. PADI Divemaster. Blogs at bram.us
0
Followers
0
Following
9
Posts
Joined April 25, 2022
Posts
Had a task on my todo to write a blog post for a few weeks now, but never got to it. Couldn’t find the right angle, so I kept pushing it forward. – Yes, a writer’s block.
To get the creative juices flowing I started hacking on some code yesterday. Today I wrote the post in 2hrs.
Procrastination works!
Replying to
@bramus@mastodon.social
Looks like we’ve got some questions to ponder about in the CSSWG:
- Should the LVP resize here (and thereby also move the origin for Fixed Positioning)?
- Should Viewport Units cater for scrollbar-gutter, knowing their size is derived from the ICB (which resizes)?
🤔
Replying to
@bramus@mastodon.social
Debugging the viewport units also interesting: both Firefox and Chrome do not take scrollbar-gutter into account, causing overflow.
Replying to
@bramus@mastodon.social
Couldn’t resist and added some new test pages to https://interop-2022-viewport.netlify.app to find things out.
Some early results:
- Chrome reports wrong size for ICB (docElement.clientWidth)
- Chrome cuts off rendering (blue box)
- FixedPos in Firefox is wrong (blue box)
- Safari has no support
Replying to
@bramus@mastodon.social
And now I’m wondering what viewport units will do and how mobile browsers are going to (mis)behave … #CanOfWorms 🙈
You think you’ve got the Viewports thing tackled, but then you suddenly wonder if it all plays nice with `scrollbar-gutter` or not …
Narrator: it doesn’t.