A new edition of What’s !important (#18), covering the best content CSS developers have produced over the last couple of weeks.

How to Create Delayed-Then-Instant Tooltips (and Why)

Abhishek Jakhar explained why tooltips should be delayed then instant — basically, so that we don’t trigger them accidentally, and then so that they disappear immediately when we no longer need them. Abhishek also showed how to implement this behavior. One thing worth noting: if the hoverable region is too small, the tooltip can be de-triggered unintentionally, so keeping the delay in that case is worth considering.

Chris Coyier then responded with a modern implementation using 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 applies here.

<geolocation> and How to Use It Today

Speaking of progressive enhancement, the Geolocation API has always been complicated because of all 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 — including some styling restrictions.

Two location permission Chrome dialogs offering options to manage location access settings.

Since only Chrome supports it, how to use <geolocation> alongside the current Geolocation API is covered in detail over at Piccalilli — meaning 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 how to use MicroLighter, and Geoff covered it on CSS-Tricks as well.

A web page for MicroLighter, displaying feature highlights and installation instructions.

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, though with the way CSS has been evolving, that could change.

Temani also showed how to use this to determine hover proximity, which is a particularly clever application of the technique.

Dark Mode: Two-State or Tri-State?

Lea Verou says two-state, but Bramus says tri-state — the auto-until-overridden two-state approach described by Vale.Rocks offers a middle ground worth considering.

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:

.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" */
}

Geoff also weighed in on the class prefix selector over on CSS-Tricks.

…and the named-feature() Function

Bramus also introduced the @supports named-feature() function. This one is supported by Chrome and queries support for very specific things that would otherwise be impossible to detect — such as whether the browser respects transforms when anchor-positioning elements. The hope is that it makes @supports more capable overall.

How to Balance Wrapped Flex Items Across Rows or Columns

Also new to Chrome is flex-wrap: balance, which is essentially text-wrap: balance but for flex items. Ahmad Shadeed explained what flex-wrap: balance does and what it can be used for.

New Web Platform Features and Updates

A busy couple of weeks for the web platform — plenty to experiment with as the season changes.