New CSS Features and Updates
Latest CSS innovations in Chrome and Firefox with practical implementation examples
1Delayed tooltips
Abhishek Jakhar explained how to implement tooltips that start with a delay but disappear instantly, improving user experience by preventing accidental triggers. For small hover areas, maintaining the delay is recommended. Chris Coyier demonstrated a modern approach using 'interest invokers' with two key CSS properties, currently only supported in Chrome but implementable with progressive enhancement.
2New Geolocation API
The updated Geolocation API simplifies permission management but is currently Chrome-exclusive. Despite the complexity of GPS, Wi-Fi and cellular networks, the new API can be used alongside existing systems. While there are some styling limitations, developers can start implementing this feature now. Progressive enhancement ensures backward compatibility with older browsers.
3Syntax highlighting with MicroLighter
Dave Rupert created MicroLighter, a lightweight syntax highlighter using the new Custom Highlight API. This tool allows developers to customize code block highlighting with greater flexibility. With contributions from Geoff, detailed implementation guides were provided. The API's adaptable structure makes it suitable for various programming languages.
4Exporting CSS grid data to variables
Temani Afif demonstrated how to transfer CSS grid information into custom properties, including row/column counts and cell coordinates. Currently requiring equal-width columns, this limitation may change as CSS evolves. The technique can also be used to measure hover proximity between elements, opening new interactive possibilities for UI design.
5The dark mode debate
Lea Verou advocates for two-state (on/off) dark mode while Bramus prefers three-state (on/off/auto) implementation. The 'auto-until-overridden' approach explained by Vale.Rocks is gaining popularity among developers. This method respects user preferences while reducing implementation complexity, offering accessibility benefits without sacrificing design control.
6Class prefix selector
Introduced by Bramus, the class prefix selector (.something-*) isn't yet supported by any browser but promises cleaner and more performant alternative to attribute selectors. This new syntax simplifies targeting all classes with specific prefixes. According to Geoff's analysis, this feature could significantly streamline CSS selector patterns when widely adopted.
7named-feature() function
Bramus's named-feature() function, now supported in Chrome, enables precise feature detection within @supports rules. It can query support for very specific capabilities that were previously untestable, like whether transforms are respected during anchor positioning. This innovation provides more granular browser capability testing for complex CSS scenarios.
8Browser updates roundup
Firefox 154 promoted sibling-count() and sibling-index() to Baseline status. Chrome 152 added autocorrect and alpha() properties. New CSS features like flex-wrap: balance and text-box-trim were introduced in recent updates. These enhancements give frontend developers greater control and flexibility while significantly improving user experience across modern web applications.
Original article: CSS-Tricks — CSS'de Yeni Özellikler ve Güncellemeler