#css
Every summary, chronological. Filter by category, tag, or source from the rail.
Exploring CSS Functions and Conditional Logic
CSS is evolving to support custom functions and conditional logic, allowing developers to create reusable, dynamic styles that reduce boilerplate and improve developer experience.
Kevin PowellUsing CSS Style Queries for Conditional Theming
CSS style queries allow components to adapt their appearance based on parent-defined custom properties, enabling cleaner, conditional theming without relying on manual modifier classes or JavaScript.
Kevin PowellSmart Layout Patterns with Modern CSS
Modern CSS container queries and style queries offer a more robust, component-aware alternative to traditional media queries, enabling truly intrinsic and responsive layouts that adapt to their parent containers rather than just the viewport.
Smashing MagazineThree Essential CSS Layout Primitives
Kevin Powell shares three reusable CSS patterns—Stack, Prose, and Pile—that simplify layout management by using flexbox and grid primitives with customizable spacing variables.
Kevin PowellModern Web UI: New CSS and Browser Primitives
The web platform is evolving to support high-quality, native-feeling experiences through new CSS functions like contrast-color(), element-scoped view transitions, and improved accessibility primitives.
Chrome for DevelopersVibe Design: Building Web UIs with CSS and AI Agents
Vibe Design is a workflow that collapses design and development by using CSS vocabulary as a shared language for AI agents to generate production-ready, performant UI components.
Chrome for DevelopersFixing Iframe Transparency Issues on Dark-Mode Sites
Chrome extension iframes often render a white background on dark-mode sites because the browser defaults to a light color-scheme. Setting 'color-scheme: light dark' or 'only light' on the iframe's root element forces the browser to respect your intended transparency.
5 Underrated CSS Properties for Better UI Control
Improve your CSS layouts and typography with these five practical properties: counters for auto-numbering, user-select for interaction control, tabular-nums for data alignment, multi-column for responsive text, and advanced text-decoration styling.
Solving Element Anchoring with the CSS Anchor Positioning API
The CSS Anchor Positioning API provides a robust, native way to tether elements like tooltips to dynamic anchors, replacing fragile absolute positioning hacks that break when elements resize or move.
Smashing MagazineBulletproof CSS Color Systems with contrast-color()
Use contrast-color() to auto-pick white or black text for any background, combined with private custom properties for fallbacks and color-mix() for dynamic hovers that adapt to light/dark modes.
Kevin PowellRecreate CSS Battles 251-253 in 15min with Divs, Shadows, Borders
Kevin Powell solves CSS Battles 251-253 live under time pressure: stacked divs/pseudos (5:40, 100%), ring shadows (4:16, 99.9%), rotated border diamond + cap circles. Measure precisely, center with margin-inline:auto, use body/html pseudos for overlays.
Kevin PowellShowing 12 of 12