CSS-Tricks Highlights: Tooltips, Grid Vars & Features
CSS-Tricks issue #18 covers delayed tooltips with interest invokers, MicroLighter syntax highlighting, CSS grid variables, and browser updates.
Stock photo for illustration only, not from the actual event
- Abhishek Jakhar and Chris Coyier explain delayed tooltips using interest invokers in Chrome
- Temani Afif demonstrates extracting CSS grid row and column data into custom properties
- Bramus introduces the class prefix selector and @supports named-feature() function
- Firefox 154 and Chrome 152 updates bring new Baseline features like sibling-count() and autocorrect
The web development community receives another batch of modern insights through the 18th edition of What’s !important, kicking off with a deep dive into creating delayed-then-instant tooltips. Abhishek Jakhar explained that adding a delay prevents accidental triggers, while making them disappear instantly when no longer needed, complete with implementation steps. Chris Coyier then responded with a modern approach utilizing interest invokers, which feature interest-delay-start and interest-delay-end properties, currently supported exclusively in Chrome.
For code presentation, Dave Rupert introduced MicroLighter, a compact syntax highlighter built on the new Custom Highlight API using ::highlight(), accompanied by demonstration notes shared alongside Geoff. In layout styling, Temani Afif demonstrated how to pass CSS grid information directly into CSS custom properties. This technique extracts row and column counts as well as cell x and y coordinates, provided the columns maintain equal widths, opening up possibilities for detecting hover proximity.
Stock photo for illustration only, not from the actual event
The ongoing dark mode debate continued as Lea Verou favored a two-state approach while Bramus advocated for three states. Furthermore, Bramus proposed the class prefix selector. Although unsupported anywhere at present, its simplicity and performance benefits over standard attribute selectors point toward a swift adoption path using syntax like .something-*. Bramus also introduced the @supports named-feature() function, supported in Chrome, which queries ultra-specific browser capabilities that were previously untestable, such as transform behaviors during anchor positioning.
Tracking emerging standards like the Custom Highlight API and interest invokers highlights a broader trend: CSS is absorbing complex logic traditionally handled by JavaScript. Developers should embrace progressive enhancement strategies to ensure seamless fallback support on older browsers while leveraging cutting-edge features where available.
Additionally, Chrome introduced flex-wrap: balance, applying the concept of text-wrap: balance to flex items, with Ahmad Shadeed detailing its practical applications. Browser platform updates note that Firefox 154 now includes sibling-count(), sibling-index(), text-box-trim, text-box-edge, and text-box as Baseline features. Meanwhile, Chrome 152 added autocorrect and alpha() support to its latest release cycle.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment