We don’t NEED JavaScript to adjust tooltip timing displays. Super modern CSS and HTML has this covered simply, and we can do fully successful fallbacks.
Thinking about UX, a slight delay on a simple tooltip can be nice so that mousing over something quickly doesn’t trigger it, but if there are related tooltips nearby, maybe we don’t need to wait.
You can get pretty darn flexible with it.
View Transitions block interactivity (like clicks) while they are running. Maybe you don’t want to do that.
Includes background-clip for masking backgrounds, vertical-align for aligning elements, box-decoration-mode for consistent edge styling, letter-spacing for spacing control, and text-combine-upright for vertical text layouts.
You normally don’t think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually…
Chrome 146 introduced a scoped custom element registry, allowing different versions of custom elements to share the same tag name without using the global namespace.
Nice bookmarkable page with classy examples of two-state transitions from Jakub Antalik.
I had fun with the post about making a link to a random post in just HTML/CSS the other day. But I was almost certainly over-thinking it on the original. Using random() was kind of the point, so we can stick with that.
random()-ly show just one. See here where each refresh shows a different link. That buys you essentially infinite space.animation to determine which one is on top rather than random(). Better support.if() function to only show one of them. That’s kinda what Alex Riviere tried, but it turns out style queries don’t work with random() (???). I’m just learning that the Web Platform Status website offers email alerts when features of your choosing change in support. For instance, I just signed up to hear exactly when Customizable <select> becomes Baseline Newly Available.
The sizes attribute for <img> was maybe the hardest part. It had complicated syntax that always had to be in sync with whatever your CSS was doing. But sizes="auto" support is almost ready for prime time. Jason Grigsby says we can go a step further an remove srcset too, which is nearly just as complex, and requires having a system to produce multiple images. Jason’s thinking is that we can use newfangled Client Hints to send to the server what size image we need, it responds in kind, and we’re back to a pretty basic <img src="" alt=""> situation. Well, do lazy loading too, but you know what I mean.
Developer news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.