Tooltip Timing: Delay Entry, Bypass Exit
Abhishek Jakhar has outlined why tooltips should appear on a delay but vanish instantly: this prevents accidental triggers when hovering unintentionally, yet removes the tooltip immediately when the user pulls away. Jakhar’s walkthrough covers implementation details, though there is a caveat—if the hover target is very small, the tooltip may de-trigger by mistake, so keeping the start delay in such cases is advisable.
Chris Coyier followed up with a modern, HTML/CSS-only version that relies on interest invokers, which introduce two key properties: interest-delay-start and interest-delay-end. Since only Chrome currently supports interest invokers, this is best treated as a progressive enhancement.
The <geolocation> Element Today
The Geolocation API has been awkward to use, given its dependence on GPS satellites, Wi-Fi networks, and cellular towers, and the difficulty of changing permission status later. The <geolocation> element addresses several of those issues, though it brings its own quirks—most notably some tight styling restrictions.
Because Chrome is the only browser with support, there’s a guide to pairing <geolocation> with the current Geolocation API to deploy it today.
MicroLighter and the Custom Highlight API
Dave Rupert has built a compact syntax highlighter, MicroLighter, that leverages the Custom Highlight API. He’s also shared usage notes, and Geoff Graham has weighed in with an overview of the tool.
Grid Metrics Into Custom Properties
Temani Afif has demonstrated how to extract CSS grid information—specifically the number of rows and columns, plus each cell’s x/y coordinates—into CSS custom properties. The main constraint is that all columns must have equal widths, though this may become less limiting as CSS continues to evolve.
Afif also showed how that technique can be applied to detect hover proximity, which produces an impressively responsive effect.
Dark Mode: Two States or Three?
A debate is brewing on the right number of states for a dark mode toggle. Lea Verou argues for two states, while Bramus makes the case for three. There is also a middle path: an auto-until-overridden approach that begins with two states but lets the user opt into a firm preference.
Targeting Classes by Prefix
Bramus has also proposed a class prefix selector—simple, useful, and not yet supported anywhere. The selector offers a cleaner, more performant alternative to attribute selectors for matching multiple classes.
.something-* {
/* ... */
}This is the sort of pattern that attribute selectors handle with difficulty:
[class^="something-"] {
/* Matches class="something-xxx" */
}
[class*=" something-"] {
/* Matches class="xxx something-xxx" */
}
[class*="something-"] {
/* Matches class="my-something-xxx" */
}Geoff Graham has shared his own take on the class prefix selector as well.
Feature-Detecting the Undetectable
Another recent proposal from Bramus is the @supports named-feature() function. Supported in Chrome, this function queries support for specific behaviors that otherwise cannot be detected—for example, whether transforms are respected when positioning anchor elements. It aims to make @supports substantially more powerful across the board.
Balancing Wrapped Flex Lines
A new Chrome feature brings flex-wrap: balance, which applies the logic of text-wrap: balance to flex items. Ahmad Shadeed has explained what the property does and how designers might put it to use.
Platform Releases Worth Noting
- Firefox 154
sibling-count()andsibling-index()are now Baseline.text-box-trim,text-box-edge, andtext-boxreach Baseline status.
- Chrome 152
- The
autocorrectattribute is now Baseline. - Support for the
alpha()color function lands, with Safari and Firefox support expected later. - OpaqueRange ships without Safari or Firefox support.
CSSPseudoElementnow works with::backdrop,::scroll-marker, and::view-transition, though only in Chrome.
- The
