Well, that’s a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of What’s !important (#18), bringing you the best content that CSS developers have produced over the last couple of weeks or so.
Abhishek Jakhar explained why tooltips should be delayed then instant (basically, so that we don’t trigger them accidentally, and then when we don’t want them anymore, so that they disappear immediately). Abhishek showed us how to implement all of that, too. One thing that I’d like to point out is that if the hover-able region is too small, the tooltip can be de-triggered unintentionally, so I’d keep the delay in that case.
Chris Coyier then responded to that with a modern implementation that utilizes interest invokers, which come with two key CSS properties: interest-delay-start and interest-delay-end. Only Chrome supports interest invokers at the moment, but progressive enhancement, right?
<geolocation> and how to use it today
Speaking of progressive enhancement, the Geolocation API has always been complicated because of all of the external hardware involved (GPS satellites, Wi-Fi networks, cellular towers, etc.) and how frustrating it can be to change the permission status later. <geolocation> fixes a lot of that but introduces a few new quirks. For example, there are some…styling restrictions.
And since only Chrome supports it, I explained how to use <geolocation> alongside the current Geolocation API, which means that you can use it today, essentially.
MicroLighter: a ::highlight()-based syntax highlighter
Dave Rupert made a small syntax highlighter called MicroLighter using the new Custom Highlight API. He also showed us how to use MicroLighter, and Geoff talked a bit about it too.
How to get CSS grid information into CSS variables
Temani Afif demonstrated how to get CSS grid information into CSS custom properties. Specifically, how to get the number of rows and columns, as well as the coordinates (x/y indexes) of each cell. The only condition is that the columns must have equal widths, but with the way that CSS has been evolving lately, that could definitely change.
Temani also showed us how we can use this to determine hover proximity, which is very cool:
Dark mode: two-state or tri-state?
Lea Verou says two-state, but Bramus says tri-state — what do you say? Personally, I like the auto-until-overridden two-state approach, as described by Vale.Rocks:
An introduction to the class prefix selector
Bramus also introduced the class prefix selector, which, even though it isn’t supported anywhere yet, is very simple and very useful (as you can see below), so I’m expecting a quick turnaround on this one.
.something-* {
/* ... */
}This is cleaner and more performant than attribute selectors:
[class^="something-"] {
/* Matches class="something-xxx" */
}
[class*=" something-"] {
/* Matches class="xxx something-xxx" */
}
[class*="something-"] {
/* Matches class="my-something-xxx" */
}Here’s what Geoff had to say about the class prefix selector.
…and the named-feature() function
Bramus (who is kind of on a roll here, to be honest), also introduced the @supports named-feature() function. This one’s supported by Chrome though, and basically queries support for very specific things that would otherwise be impossible to query, such as whether the browser respects transforms when anchor positioning elements, but hopefully it makes @supports more capable all-round.
How to balance wrapped flex items across rows or columns
What’s also new to Chrome is flex-wrap: balance, which is basically text-wrap: balance but for flex items. Ahmad Shadeed explained what flex-wrap: balance does and what we can use it for.
New web platform features and updates
Autumn/fall, here we come!
