CSS-Tricks·20wPrevent a page from scrolling while a dialog is open
Chrome 144 introduces a fix for preventing page scrolling when modal dialogs are open by extending overscroll-behavior to work on non-scrollable containers. By setting overscroll-behavior: contain on both the dialog element and body, and making the dialog a scroll container with overflow: hidden, developers can now solve this long-standing issue without JavaScript workarounds that previously required fixing body positioning.
CSS-Tricks·32wComposition in CSS
CSS has always been composable through the cascade, allowing developers to combine classes and styles naturally. While utility frameworks like Tailwind promote composition, traditional CSS approaches like combining classes or using Sass mixins are equally valid forms of composition. The author argues that CSS composition extends beyond just adding classes in HTML and proposes organizing styles into four categories: layouts, typography, theming, and effects. Rather than focusing on reducing CSS or HTML bloat, developers should prioritize code architecture, structure, and clarity for better maintainability.
CSS-Tricks·51wRevisiting Image Maps
The post explores the use of image maps, an older web design tool, and discusses their advantages, challenges, and alternatives. It highlights a project for Mike Worth that required blending expressive '90s design with modern techniques. While discovering image maps weren't the right fit, the effort led to finding modern solutions by leveraging SVG and anchoring paths for clickable areas, emphasizing accessibility and responsiveness.
CSS-Tricks·1yCSS Carousels
Chrome 135 introduces new features for creating carousel UI patterns, including scroll buttons and scroll markers as defined in the CSS Overflow Module Level 5 specification. This post provides step-by-step notes on implementing these features using CSS Grid and Scroll Snapping. It also covers adding scroll buttons and markers, their styling using pseudo-elements, and the functionality they bring for free, such as improved user experience and accessibility.
CSS-Tricks·1yUsing CSS backdrop-filter for UI Effects
Learn how to use the CSS backdrop-filter property to create sophisticated UI effects. This guide covers layering backdrop filters, combining them with other CSS effects, and crafting designs with various filters such as blur, brightness, and contrast. Examples include applying these techniques to textured backdrops and integrating them with CSS properties like mask and mix-blend-mode.
CSS-Tricks·49wUsing Pages CMS for Static Site Content Management
Pages CMS is an open-source content management system designed for static site generators, offering easy usage, minimal requirements, and customization. With no backend needed, content is stored as flat files in a git repository. It's free to use and supports user authentication via GitHub or email. Pages CMS simplifies content management and collaboration by providing a sleek user interface for editing and organizing content collections using configuration files. It integrates seamlessly with Astro for managing directories of Markdown files, offering flexibility and efficiency for managing static site content.
CSS-Tricks·1yWeb Components Demystified
Explore the fundamentals of web components with Scott Jehl's course, 'Web Components Demystified'. Learn about the creation and behavior of custom HTML elements, usage of HTML templates, encapsulation with Shadow DOM, and lifecycle methods for web components. The content highlights the differences between web components and JavaScript framework components like React. Also discussed are best practices for styling, handling slots, and using custom properties within Shadow DOM.
CSS-Tricks·18wMasonry Layout is Now grid-lanes
The CSS Working Group has officially decided on `display: grid-lanes` as the syntax for triggering masonry layout in CSS. After years of debate starting in 2017, the CSSWG resolved to reuse grid templating and placement properties for masonry. All major browsers (Chrome, Safari, Firefox) had already implemented experimental versions with different syntaxes but are now working on switching to `grid-lanes`. The feature is not yet available in stable browsers, but implementation work is underway across all major browser engines.
CSS-Tricks·31wIs it Time to Un-Sass?
A developer reflects on 13+ years of using Sass and evaluates whether modern CSS features like native nesting, custom properties, and color-mix() function make it time to abandon CSS preprocessors. The analysis covers how native CSS has evolved to include many Sass-like features, discusses the complexity of modern tooling, and concludes that the decision depends on project size and requirements. For personal sites, moving away from Sass makes sense, but larger codebases may not justify the refactoring effort.
CSS-Tricks·1yNext Level CSS Styling for Cursors
Enhance your website's user experience by using JavaScript to create custom cursors with dynamic text, animations, and filters. This guide walks through implementing these features while considering fallbacks for touchscreens and accessibility preferences.
CSS-Tricks·1yFunctions in CSS?!
CSS functions are being prototyped in Chrome Canary, providing new capabilities like arguments, default values, and returns. These functions allow reusable patterns with parameterized custom properties, making CSS more powerful and flexible. While still in early stages, functions can handle type-checking and lists, though early returns and some other functionalities are currently limited. The introduction of functions will significantly enhance the way CSS is written, although more improvements and broader support are needed.
CSS-Tricks·20wHTML Web Components Proposal From 1998
Web components have roots dating back to a 1998 W3C proposal that introduced the concept of componentization for building applications using reusable building blocks. The proposal emphasized breaking down complex applications into manageable chunks without requiring deep understanding of internal implementation details. While often perceived as a recent feature, the idea of style encapsulation and component-based architecture has been evolving for nearly 30 years in web development history.
CSS-Tricks·43wCSS-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.
CSS-Tricks·19wWhat Else Could Container Queries… Query?
Container queries have evolved beyond simple size queries to include scroll-state queries, anchored container queries, and potentially many more types. The article explores current container query capabilities including detecting scrollability, sticky positioning, and anchor position fallbacks. It discusses future possibilities like querying any CSS property value, detecting element wrapping or ellipsing, counting child nodes, and determining flex/grid positions. The author predicts container queries will become increasingly versatile, potentially offering dozens of query types similar to how media queries have expanded.
CSS-Tricks·50wWhy is Nobody Using the hwb() Color Function?
The hwb() color function in CSS, although designed to be intuitive by controlling whiteness and blackness, has seen declining usage due to common familiarity and more intuitive alternatives like hsl(). Newer color functions such as lab() and oklch() offer broader color ranges and perceptual uniformity, making them preferred options over hwb(). Though hwb() had a steep decline in adoption, it's still maintained for backward compatibility.
CSS-Tricks·19wThat Time I Tried Explaining HTML and CSS to My 5-Year Old Niece
Teaching HTML and CSS to a five-year-old using a house-building analogy reveals fundamental insights about web development. HTML acts as the structural bricks that define what exists on a page, while CSS decorates those bricks with colors, sizes, and positioning. The exercise demonstrates how explaining basics forces developers to slow down and appreciate the foundational simplicity of web technologies, reminding us that beneath all the complexity, the web runs on straightforward building blocks.
CSS-Tricks·37wBringing Back Parallax With Scroll-Driven CSS Animations
CSS scroll-driven animations now enable parallax effects without JavaScript, using scroll() and view() timeline functions to control animation progress based on scroll position. The technique includes animation ranges for precise timing control, accessibility considerations with prefers-reduced-motion, and browser support strategies including polyfills for unsupported browsers.
CSS-Tricks·32wWhat’re Your Top 4 CSS Properties?
CSS-Tricks team members share their picks for the top 4 CSS properties they'd choose if limited to only four for building a website. Responses vary from typography-focused selections (font, color, padding) to layout-oriented choices (display, flex-direction, grid). The exercise reveals different developer priorities and approaches to web styling, with most favoring shorthand properties like font and background for maximum versatility within tight constraints.
CSS-Tricks·41wThe Layout Maestro Course
Ahmad Shadeed is developing a new online course called 'The Layout Maestro' focused on CSS layout techniques. The course will cover modern layout methods including Flexbox, CSS Grid, Subgrid, Masonry, and Container Queries. Shadeed is recognized for his expertise in CSS layout through his interactive guides and practical demonstrations. The course is still in development with email signup available for updates.
CSS-Tricks·39wAtomic Design Certification Course
Brad Frost, creator of the Atomic Design methodology from 2013, is launching an online certification course with his brother Ian. The course covers the five-layer design system approach (atoms, molecules, organisms, templates, pages) that emphasizes composable, consistent, and reusable web design components. Currently available for presale at $50 with team discounts.
CSS-Tricks·52wThe Lost CSS Tricks of Cohost.org
Cohost.org, a niche social media site that went public in June 2022 and shut down in September 2024, had a devoted user base of creatives who leveraged its permissive HTML sanitizer to perform unique CSS tricks. Notable techniques included 'width-hacking' using the <details> and <summary> tags, and creative use of SVG animations. Despite its short lifespan, Cohost delivered a unique posting experience free from advertisements and follower counts.
CSS-Tricks·26wBuilding a Honeypot Field That Works
Honeypot fields remain effective for preventing spam form submissions in 2025 without requiring reCAPTCHA. The key is avoiding common detection patterns: use regular text inputs instead of hidden fields, hide them with external CSS rather than inline styles, and use legitimate-sounding names like 'occupation' instead of 'honeypot'. Additional protection includes detecting user interactions through mouse movements, keyboard events, and form completion time using JavaScript. The article provides ready-to-use components for Svelte and Astro, plus vanilla JavaScript utilities for implementing these spam prevention techniques.
CSS-Tricks·40wWhat I Took From the State of Dev 2025 Survey
The 2025 State of Devs survey reveals key insights from 8,717 developers worldwide. Notable findings include increased female participation (15% vs 6% in previous surveys), experience-based salary patterns with diminishing returns after 15 years, and concerning health statistics showing 80% of developers struggle with health issues. The survey highlights ongoing challenges with workplace discrimination (30% report experiencing it), burnout, and job security concerns despite 69% never being laid off. Personal networks remain the most effective job-hunting method, while Bluesky has gained popularity over X among developers.
CSS-Tricks·45wCreating 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.
CSS-Tricks·18wSearch CSS-Tricks Raycast Extension
Jelte Lagendijk created a Raycast extension that enables quick searching of CSS-Tricks articles directly from your desktop. The extension fetches content from the WordPress REST API and provides real-time search results with summaries and browser links, offering a faster alternative to searching the site directly.