CSS

The CSS random() function adds visual variation in the browser, without JavaScript or Sass loops. Brecht De Ruyte demonstrates it with subtly tilted letters, cards animated on scroll, and shadows that respond to card rotation. A caching key can keep multiple properties in sync, while sibling-index() calculates the structure of a fanned-out card stack.

These effects are best suited to decorative elements: the article advises against randomizing grids, body text, or interactive targets. With browser support still rolling out, it recommends a stable baseline enhanced through @supports, and stresses respecting prefers-reduced-motion and screen-reader access.

This Chrome DevTools extension makes CSS animations triggered by scrolling easier to debug: a minimap locates the scroller, element, and subject, while colored markers show activation and active ranges. Values can be edited live; the tool supports ScrollTimeline, ViewTimeline, and elements using position: sticky.

Two limitations come from Chrome: relative units such as 90vh are reduced to computed pixel values, and elements inside an iframe are not supported. The extension fills a gap in DevTools while built-in support remains a possible future improvement.

Lea Verou proposes treating icons as CSS design tokens: custom properties assign them to pseudo-elements, where SVG masks render them without adding markup. Components can then select or override an icon based on state, theme, or context, while keeping definitions centralized in the design system.

There are trade-offs: masking mainly suits monochrome icons, URLs and registered properties behave inconsistently across browsers, and Safari needs workarounds. The post explains these constraints and introduces @nudeui/icons, a package that brings the system together.

Chrome 154 introduces the frame-sizing: content-height CSS property, letting iframes automatically match their content’s height without scripts or message passing. This requires the embedded page to opt in with a meta tag and explicitly allow the parent domain, so adoption depends on both sides cooperating. The article details practical use cases (payments, widgets, dynamic forms), compatibility constraints, and best practices to avoid information leaks or layout shifts.

OriginKit offers a gallery of animated web components to copy or use in Framer. Previews showcase CSS and WebGL effects, with part of the collection available for free.

Tailwind Clamp exposes CSS clamp() values as utility classes. The plugin helps create fluid size or spacing scales without multiplying breakpoints.

This plugin adds Tailwind CSS classes for fluid values across viewport sizes. It keeps responsive typography and spacing adjustments within the project’s utility-class vocabulary.

This example collects Tailwind CSS utilities that enlarge an element’s interactive area without changing its appearance. The technique makes controls easier to tap, especially on mobile.

Subfont analyzes the characters actually used on a page and generates smaller font files. It also adds preload hints to shorten the critical path for text rendering.

This list organizes Stylelint extensions by purpose, from custom syntaxes to editor integrations. It helps assemble a configuration suited to a project’s CSS conventions.

This plugin defines the order of content and properties in stylesheets. Its rules support automatic fixes to apply team conventions consistently.

This Stylelint plugin checks CSS practices that can undermine layout or accessibility. Its configurations integrate these checks into a project’s code quality workflow.

Stylelint SCSS extends standard CSS rules with checks for SCSS syntax. It helps enforce preprocessor conventions within a shared lint configuration.

Utopia defines scales for small and large screens and lets the browser interpolate between them. The approach helps build a coherent type system with fewer breakpoints.

Uiverse collects community-built interface elements with HTML/CSS, Tailwind or React code. It offers examples for studying visual treatments and adapting components to a project.

Ahmad Shadeed explores cases where a container’s children need to participate in its parent’s layout. Examples explain how display: contents enables more flexible compositions.