# CSS · Tech watch [Canonical source]() Layout, responsive styling and native presentation features of the Web. ## [MicroKit: 54 React, CSS and Tailwind microinteractions to copy]() MicroKit collects copy-ready interactions—animated buttons, tabs, inputs and hover effects—with React or CSS and Tailwind variants. Each component is copied separately in JavaScript or TypeScript, with no package to install; 26 of the 54 have no dependencies, while 28 use lucide-react. The code is MIT-licensed, and Tailwind variants are designed for versions 3 and 4. In the Next.js App Router, most components work in server components; those using state, refs or event handlers need « use client ». 2026-10-29 · [Markdown]() · [Original resource]() ## [Fontastic Space: compare fonts and their metrics]() Fontastic Space compares Google Fonts side by side, with anatomy overlays, OpenType metrics, and compatibility scores. Its Playfair Display + DM Sans example compares x-height, cap height, and string width, then provides CSS rules ready to reuse. The scores draw on several typographic analysis frameworks, but remain a guide: the tool also lets you inspect the visual result in a paragraph or banner before choosing a pairing. 2026-10-28 · [Markdown]() · [Original resource]() ## [Fallback Font Generator: reduce font-related CLS]() This tool adjusts a system font to more closely match a brand font while it loads. It generates the required `@font-face` rules—including `size-adjust`, `ascent-override`, `descent-override`, and `line-gap-override`—using a visual preview and adjustable controls. The approach targets layout shifts caused by differences in font metrics. The resulting CSS can be copied into a project, though the page notes that the tool is not supported in Safari. 2026-10-27 · [Markdown]() · [Original resource]() ## [Interop 2027: ten CSS proposals, from accessibility to animation]() Josh W. Comeau reviews ten proposals being considered for Interop 2027: CSS functions, custom border shapes, anchor- and scroll-related queries, reading order, intrinsic-size animations, and grid decorations. Several address practical problems: `reading-flow` could align keyboard navigation with a responsive layout, while grid decorations could draw separators without adding empty DOM cells. The proposals are at different stages of maturity. As of October 2026, several are available in Chromium but not yet in Firefox or Safari; `inherit()` is implemented in no browser. The article shows where progressive enhancement is feasible, with safeguards such as `@supports` for height transitions. 2026-10-27 · [Markdown]() · [Original resource]() ## [CSS \`random()\`: Add playful variation without breaking layout]() 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. 2026-10-23 · [Markdown]() · [Original resource]() ## [CSS scroll-triggered animations: visualize and adjust ranges]() 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. 2026-10-22 · [Markdown]() · [Original resource]() ## [CSS icons as design tokens, without extra markup]() 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. 2026-10-22 · [Markdown]() · [Original resource]() ## [Chrome: auto-sizing iframes to their content with CSS]() 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. 2026-10-16 · [Markdown]() · [Original resource]() ## [Browse and reuse animated components with OriginKit]() 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. 2026-07-19 · [Markdown]() · [Original resource]() ## [Use CSS \`clamp()\` through Tailwind Clamp]() Tailwind Clamp exposes CSS `clamp()` values as utility classes. The plugin helps create fluid size or spacing scales without multiplying breakpoints. 2026-03-26 · [Markdown]() · [Original resource]() ## [Build fluid interfaces with Fluid Tailwind CSS]() 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. 2026-03-26 · [Markdown]() · [Original resource]() ## [Expand a control’s hit area with Tailwind CSS]() 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. 2026-03-15 · [Markdown]() · [Original resource]() ## [Subfont: generate font subsets tailored to page content]() 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. 2025-02-25 · [Markdown]() · [Original resource]() ## [The Stylelint ecosystem: configurations, plugins and integrations]() 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. 2024-12-23 · [Markdown]() · [Original resource]() ## [Stylelint Order: standardize CSS declaration order]() This plugin defines the order of content and properties in stylesheets. Its rules support automatic fixes to apply team conventions consistently. 2024-12-23 · [Markdown]() · [Original resource]() ## [Defensive CSS: detect layout pitfalls with Stylelint]() This Stylelint plugin checks CSS practices that can undermine layout or accessibility. Its configurations integrate these checks into a project’s code quality workflow. 2024-12-23 · [Markdown]() · [Original resource]() ## [Stylelint SCSS: add preprocessor-specific lint rules]() Stylelint SCSS extends standard CSS rules with checks for SCSS syntax. It helps enforce preprocessor conventions within a shared lint configuration. 2024-12-23 · [Markdown]() · [Original resource]() ## [Utopia: build fluid type and spacing scales]() 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. 2024-10-15 · [Markdown]() · [Original resource]() ## [Uiverse: explore reusable interface elements]() 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. 2024-10-13 · [Markdown]() · [Original resource]() ## [Use display: contents to compose CSS layouts]() 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. 2024-09-13 · [Markdown]() · [Original resource]() Page 1 / 2 [Next]()