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!

@nhoizey Self-publishing/self-hosting remains the best of course, as you then control the availability yourself.

But currently I haven’t been able to match what slidr.io offers, so keeping that (for now). You win some, you lose some ¯\_(ツ)_/¯

@nhoizey I would suggest people to stay away from Speakerdeck because they convert all slides to images.

While this retains visual correctness, it is also entirely inaccessible, prevents you from copying text from it, does not allow you to click hyperlinks, etc.

The platform I use to publish my decks is slidr.io. It has both visual correctness, allows text selection/links, and also offers the a PDF download.

A pity it‘s not more popular than it is, though.

@mozilla @zcorpan Congrats!

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

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

@kleinfreund @matuzo Also check out this explainer: https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/viewport-units.md