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/
| About | https://www.bram.us/about |
| Blog | https://www.bram.us/ |
| Bird | https://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/
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)?
🤔
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
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? 😎