Bramus

@bramus
7 Followers
56 Following
14 Posts
Chrome Web DevRel at Google (CSS + ChromeDevtools). CSSWG Member. PADI Divemaster. Blogs at bram.us
Abouthttps://www.bram.us/about
Bloghttps://www.bram.us/
Birdhttps://twitter.com/bramus

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/

Style a parent element based on its number of children using CSS :has()

Leverage CSS :has() and :nth-child() to style a parent based on the number of children it has.

Bram.us

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!

The recently released Deno 1.28, apart from full compatibility with npm, comes with the equivalent of npx. Sick!

Ps. I am going to add a link to Mastodon later on 🐘💨

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)?

#ItsComplicated

🤔

Debugging the viewport units also interesting: both Firefox and Chrome do not take scrollbar-gutter into account, causing overflow.

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

Interop 2022 Viewport Investigation Effort Demo Pages

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.

Did you know that when you put .rss behind your Mastodon profile URL, you get an RSS feed? 😎

https://mastodon.social/@matthiasott.rss

just setting up my t̶w̶t̶t̶r̶ mastodon