Best of CSS-Tricks — June 2025

1. 1
   Article

   CSS-Tricks·43w

   CSS-Tricks

   KelpUI is a new CSS library by Chris Ferdinandi that combines modern CSS features with Web Components. The library emphasizes base styles, utility classes, CSS variables for customization, and Web Components that keep HTML in the light DOM. It uses CSS Cascade Layers for logical structure, maintains low specificity selectors, includes accessible color palettes, and can be loaded from CDN or downloaded locally. The development process is being openly documented through a series of blog posts.

   78

   7
2. 2
   Article

   CSS-Tricks·45w

   Creating an Auto-Closing Notification With an HTML Popover

   Learn how to create auto-closing notifications using HTML popover attributes combined with CSS transitions and JavaScript ResizeObserver. The technique uses CSS height transitions with @starting-style and transition-delay to visually hide the popover, while ResizeObserver detects when the animation completes to properly close the popover element. Includes fallback strategies for when JavaScript is disabled.

   33
3. 3
   Article

   CSS-Tricks·44w

   A Better API for the Resize Observer

   ResizeObserver, MutationObserver, and IntersectionObserver provide better performance than older alternatives like resize events. The standard observer APIs follow a similar pattern but can be complex to use. This guide demonstrates how to create a cleaner, more intuitive wrapper function for ResizeObserver that simplifies the API by encapsulating the observer creation, providing callback patterns, handling options, and offering convenient unobserve methods. The refactored approach makes the code more readable and easier to maintain while preserving all functionality.

   28