Tree views in CSS
Styling a list of nested details
elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.
Styling a list of nested details
elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.
Nicky Case has made an implementation of Ted Nelson’s StretchText that works across different domains.
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.
On the detail and world-building in 40 years of William Gibson’s work.
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?)
Cassie’s redesign is gorgeous—so much attention to detail! (And performant too)
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.
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.
Hells, yeah! Want to make an accordion widget? Use the details
element as your starting point and progressively enhance from there.
Making low effort/high impact changes to interfaces.
This reminds me of something we talk about at Clearleft a lot called “tiny lessons”—it’s the idea that insights and learnings don’t always have to be big and groundbreaking; there’s a disproportionate value in sharing the small little things you learn along the way.
Suggestions for small interface tweaks.
A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.
I really like the layout of this blog about design details. Nary a dropped shadow and barely a gradient in sight.