Tree views in CSS
Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.
Pausing a GIF with details/summary | CSS-Tricks
This is such a clever and useful technique! It’s HTML+CSS only, and it’s a far less annoying way to display animated GIFs.
(Does anybody even qualify the word GIF with the adjective “animated” anymore? Does anyone know that there used to be such a thing as non-animated GIFs and that they were everywhere?)
Related links
Add Responsive-Friendly Enhancements to `details` with `details-utils`—zachleat.com
This is how a web component should be designed! Zach has made a custom element that wraps around an existing HTML element, turbocharging its powers. That’s the way to think about web components—as a progressive enhancement.
Why `details` is Not an Accordion - daverupert.com
At the risk of being a broken record; HTML really needs
<accordion>,<tabs>,<dialog>,<dropdown>, and<tooltip>elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements.
Hear, hear!
I wish browsers would prioritize accessibility improvements over things like main thread scheduling optimization to unblock tracking pixels and the Sisyphean task of competing with native.
If we really want to win, let’s make it easy for everyone to access the Web.
github/details-menu-element
Now this is how you design a web component! A great example of progressive enhancement by Mu-An Chiou that’s used all over Github: a details element that gets turbo-charged into a details-menu.
There’s also a slidedeck explaining the whole thing.
daviddarnes/play-button: A Web Component to play audio or video with a button
Isn’t this a lovely little HTML web component? All it does is hook up a button element with an audio or video element: exactly the kind of discrete drudge work that’s good to automate away.
Related posts
Media queries with display-mode
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.
Making the website for Research By The Sea
Having fun with view transitions and scroll-driven animations.
Manual ’till it hurts
Try writing your HTML in HTML, your CSS in CSS, and your JavaScript in JavaScript.
Schooltijd
Going back to school in Amsterdam.
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.