move slow and repair things
06.03.2026 12:06
👍 3539
🔁 1120
💬 5
📌 0
move slow and repair things
It seems we can now customize the select element, right? right?!
Demo: codepen.io/t_afif/pen/P... via @codepen.io
I should do some small screen enhancements next. But I was able to update my multi-thumb range sliders with code samples showing how I vision HTML, styling and custom JS for native workings.
Should probably write an update on it soon. brechtdr.github.io/enhanced-ran...
Wild how far you can push "customizable select" with just #CSS
nerdy.dev/nice-select
Oh, thanks for the mention. It's still very much experimental as I'm trying to make it match the current Open UI spec with fragmentation and entry priority, so that part is not covered yet. Some of the more basic cases are there though, so keep posted 😁
I've been working a bit with Tailwind lately, and without jumping into a rage article, I took some time to gather my thoughts. It's not my favourite tool, but why? Here is an honest article on that:
utilitybend.com/blog/why-tai...
#CSS #Tailwind
A bit of a vulnerable post by me but we need your help to get us through what has been a more difficult period than 2020.
It would be really appreciated if you could read and share in your networks too 💛
bell.bz/its-been-a-v...
`corner-shape: squircle;`
is a very easy progressive enhancement if you want squircles with rounded corners as a fallback (the default today in unsupported browsers)
There are also some accessibility concerns with the current implementation IIRC where text (via content on the pseudo element) on the active track is being read even when the switch is off and vice versa.
Putting text on the thumb or track is a bit of a hassle, but then again that might be too much of an edge case. Some Design Systems use a button as a base for the switch, but <button type="switch"> would likely be less useful because immediate action can be scripted for the checkbox.
It's unnecessarily hard to figure out if an element currently can be focused, respectively participates in the sequential focus navigation or not. `element.focusable` would do the trick, but right now, handstands are necessary to appropriate that functionality.
I had to come up with a custom solution to write an experimental polyfill for the focusgroup proposal (github.com/gfellerph/fo...). It's simplistic and uses basically the API that Lea proposed. Lifecycle hooks are being called when elements enter or leave the DOM and it can be scoped to a subtree.
This November at the Annual W3C Plenary (TPAC) I'll be discussing "Custom Attributes" github.com/w3c/tpac2025.... I'd like to bring the same lifecycle hooks & subclassing of Custom Elements to attributes. I'd _love_ to hear if developers think this is a good or bad idea, and what they'd like to see.
cross-browser liquid toggle 👨🔬
CSS + SVG filter + drag mechanics 🧑🍳
(exploding view 👇)
I’m Not a Robot, a game about solving CAPTCHAs, is out now!
good luck :)
> neal.fun/not-a-robot/
In case you missed it, I wrote about the basics CSS Anchor Positioning.
🔗 ishadeed.com/article/anch...
Anchor positioning is not yet baseline, but you can use it in production with a polyfill - anchor-positioning.oddbird.dev (and in fact, we're using it on oddbird.dev).
If you're curious about anchor positioning, now is a great time to learn, and my email course will help you dive deep!
I take part in these surveys because I'm very interested in the results. They are relevant to my work as a dev to see hypes and get early warnings for fading frameworks and I learn a lot. Making it longer to cover more ground would be a benefit for me (an almost perfectly average respondent).
A rough diagram showing how position-area works, with an anchor in the center of a 3x3 grid, and a positioned element below it inside of a larger containing block.
When you use position-area, you're actually creating a new containing block for your positioned element. Learn more about how this makes anchor positioning just work in many situations in my email course here - oddbird.dev/learn/course...
Hey friends! I did a TEDx talk and it's now up on the TED Conferences YouTube. It's possibly the best and most important talk I've ever done.
I would ask that you watch it, and please SHARE it broadly and widely. Thank you! youtu.be/dVG8W-0p6vg #AI #Tech #TED
The State of HTML 2025 survey is now live! Big thanks to @lea.verou.me for taking the lead on selecting this year's questions and features, as well as suggesting quite a few improvements!
It's the missing piece together with interest invokers for a native html+css floating-ui tooltip replacement. I guess it would even be possible to draw a safe space for cursor movement between the tooltip and the element with this in place.
⚠️ Early-stage spec proposal
Finally we'll be getting the ability to style an anchored element based on its position 🙏
Using container-type: anchored & @container anchored()
Video to learn more: youtu.be/u5-Vuduc9mk
If you code websites, then you KNOW how it’s been to style form controls.
Watch this #cssday talk from @ntim.bsky.social to learn why it’s been so hard, and how we are going to fix it for the future.
www.youtube.com/watch?v=WgSi...
#css #webdev #formcontrols
A screenshot of Firefox Nightly, with the Codepen https://codepen.io/keithamus/pen/wBaZVaX open. The page showing 6 heading levels, showing the CSS, HTML and the rendered page. Each heading is styled differently using the provided CSS selectors, `:heading` (which styles all headers), `:heading(-2n+3)` (styles h1 and h3 elements), `:heading(5, 6)` (styles the h5 and h6 elements). Another Firefox Nightly window is open, showing the `layout.css.heading-selector.enabled` flag is set to `true`, making the rendered page styled using the new selectors.
Hot off the presses! Firefox Nightly (www.mozilla.org/en-GB/firefo...) adds the new :heading pseudo! Easily style all headings, or use nth-child-like AnB syntax to select a range of headings! Needs `layout.css.heading-selector.enabled` flag enabled. Try it out and let me know your thoughts.
You don't necessarily need to say "image of" in your alt text for users to know it's an image. Screen readers will announce that it's an image. But it can help readers to specify the type of image: hand-drawn image, Polaroid, infographic, screenshot, chart, map, diagram, or so on.
