Best of CSS — October 2025

1
Article
The New Stack·31w
CSS Finally Gets Inline Conditional Logic With New if() Function
CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different property values based on conditional tests using style queries, media queries, or feature queries. The syntax follows JavaScript's if-else pattern and can be used for tasks like theme switching, responsive design, and feature detection. Currently, Chrome and Edge support the function, while Safari and Firefox are still implementing it. This marks the first time CSS offers inline logic processing without requiring separate code blocks.
395
40
2
Article
Chrome Developers·29w
Chrome for Developers
Chrome 142 introduces three major CSS and web platform features: the :target-before and :target-after pseudo-classes for styling scroll markers relative to the active marker, range syntax support for style container queries and the if() function enabling numeric comparisons with operators, and the interestfor attribute for button and anchor elements that triggers actions when users show interest through hover, keyboard shortcuts, or long-press gestures.
212
3
3
Article
The Miners·29w
The 5 UI fundamentals a developer must know
Five essential UI design principles that developers should understand: color theory and application, typography fundamentals including typeface selection and spacing, visual hierarchy through size and contrast, contrast for emphasis and accessibility, and proper alignment for order and readability. Each principle includes practical tips and guidelines for creating better user interfaces without formal design training.
195
4
4
Article
Frontend Masters·30w
The Two Button Problem – Frontend Masters Blog
Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next. The problem is especially pronounced on devices without cursors (TVs, game consoles) where keyboard or remote navigation is required. Solutions include using consistent button styles with additive indicators for the active state, directional arrows, CSS media queries to detect input methods, and pressed/unpressed visual states for toggle buttons. The key principle is making the active state obviously distinct rather than relying on arbitrary style differences.
122
6
5
Article
Ahmad Shadeed·30w
Solved By Modern CSS: Section Layout
A comprehensive guide to building adaptive section layouts using modern CSS features. Demonstrates how to create responsive card grids that automatically adjust based on content quantity using CSS Grid, container queries, the :has() selector, and quantity queries. Covers fluid typography with clamp() and container query units, conditional styling for cards with and without images, featured layout variations, and handling edge cases like orphaned items and long content. Includes practical solutions for common layout challenges and showcases experimental features like CSS random().
118
6
6
Article
Viget·32w
5 Articles That Influenced My Career
A developer reflects on five pivotal articles that shaped their career journey from graphic design to full-time development. Key influences include Ethan Marcotte's responsive design introduction, OOCSS principles for managing CSS specificity, Vim tutorials that opened the door to command-line mastery, CSS Tricks' flexbox guide for modern layouts, and Viget's JavaScript approach for ES6+ development. The piece emphasizes how shared knowledge from the web community creates breadcrumb trails for others to follow.
96
7
Article
Prismic·33w
CSS Alternatives to JavaScript: Sliders, Dialogs & More!
Modern CSS can now handle many UI components that traditionally required JavaScript, including accordions, modals, tooltips, carousels, and dropdown menus. Using CSS-only solutions offers better performance, faster load times, improved maintainability, and fewer dependencies. The guide demonstrates how to build common interactive components using modern CSS features like :has(), :checked, :target selectors, and CSS animations, while comparing them to their JavaScript equivalents. Best practices include checking browser support, ensuring accessibility, using progressive enhancement, and choosing the right tool based on complexity requirements.
77
4
8
Video
Theo - t3․gg·31w
Finally.
Firefox 144 brings significant improvements for web developers, including support for view transitions API, proper gradient dithering (fixing a 15-year-old bug), the element.moveBefore API, and better WebRTC capabilities. These updates address long-standing compatibility issues that have held back modern web development, bringing Firefox closer to Chrome and Safari in supporting current web standards. The view transitions feature enables smooth animations between page states without JavaScript, while gradient rendering fixes eliminate visible banding artifacts.
38
6
9
Article
Bram.us·30w
CSS @starting-style debugging is available in Chrome DevTools!
Chrome DevTools now includes debugging support for CSS @starting-style rules in Canary 143+. The feature adds visual indicators (pills) in the elements tree to identify affected elements, allows toggling elements into their @starting-style state for inspection, and prioritizes showing only active styles by default. The implementation focuses on correctness and discoverability, with a design that differs from other browsers' approaches.
37
3
10
Article
Telerik·32w
The Web Animation API
The Web Animation API (WAAPI) is a browser-native JavaScript API that provides programmatic control over animations without external dependencies. Unlike CSS transitions and animations, WAAPI offers runtime control through methods like play(), pause(), and playbackRate(), plus the ability to chain animations using promises. The tutorial covers keyframes, timing options, interactive controls, and performance considerations—emphasizing that animating transform and opacity properties ensures smooth 60 FPS performance by leveraging GPU compositing instead of triggering expensive layout recalculations.
36
11
Article
CSS Tip·32w
Conditional Border Radius with Modern CSS
Learn how to dynamically toggle border-radius values based on container or screen size using a single line of modern CSS. The technique uses container query units (100cqi) with a fallback to viewport width (100vw) to automatically set border-radius to 0 when an element reaches full width, otherwise maintaining a default radius of 2rem.
34
12
Article
stitcher.io·33w
Vendor locked
A developer reflects on becoming so dependent on Tailwind CSS that they've lost fluency in vanilla CSS. The article explores how Tailwind's naming conventions don't map one-to-one with CSS properties, creating a form of vendor lock-in where switching back to pure CSS feels foreign. The author appreciates Tailwind's component-based approach for keeping styles contained but wishes for a solution that maintains this workflow while using standard CSS syntax.
30
9
13
Article
Josh W Comeau·29w
Springs and Bounces in Native CSS • Josh W. Comeau
The linear() timing function enables physics-based animations like springs and bounces in native CSS without JavaScript libraries. By specifying multiple data points instead of Bézier curves, developers can create smooth, natural motion that runs on the GPU. The article covers implementation techniques, performance testing results showing minimal impact, limitations around time-based constraints and animation interrupts, and best practices for using CSS variables with @supports fallbacks for browser compatibility.
29
1
14
Article
Lonely Programmer·31w
div vs span
26
1
15
Article
CSS-Tricks·32w
Masonry: Watching a CSS Feature Evolve
The CSS Masonry layout feature is evolving through competing proposals from Chrome (display: masonry) and WebKit (grid-based with item-flow). This debate illustrates how CSS features develop through the CSS Working Group's consensus process, where browsers prototype implementations, gather developer feedback, and negotiate technical trade-offs. The article examines lessons from Flexbox and Grid's evolution, explaining how browser politics, technical merit, and developer input shape web standards. Currently, the CSSWG has resolved that masonry will be a new display type including 'grid' in its name, while adopting the item-flow approach for implementation.
25
1
16
Article
CSS-Tricks·30w
Pure CSS Tabs With Details, Grid, and Subgrid
A modern approach to building tabbed interfaces using only HTML and CSS, leveraging the <details> element combined with CSS Grid and Subgrid. The tutorial walks through creating a three-column tab layout where each tab is a <details> element positioned using subgrid, with tab panels displayed in a second grid row. The solution uses the ::details-content pseudo-element for styling panel content and CSS custom properties for positioning tabs dynamically. The <details> element provides built-in accessibility features including keyboard navigation and screen reader support.
23
17
Article
Bram.us·32w
What’s New in View Transitions (2025 Update)
View Transitions have evolved significantly since their initial release in Chrome in 2023. The 2024 updates introduced Cross-Document View Transitions, view-transition-class, and View Transition Types, with Safari joining the support ecosystem. A comprehensive overview of 2025 developments is available on the Chrome developer blog.
19
18
Article
Codrops·29w
Building a Layered Zoom Scroll Effect with GSAP ScrollSmoother and ScrollTrigger
A step-by-step guide to recreating Telescope's cinematic layered zoom scroll animation using GSAP's ScrollSmoother and ScrollTrigger plugins. The tutorial breaks down the effect into three parts: building a floating image grid with Z-axis animations, creating split text that reveals a masked central image, and implementing a trailing zoom effect with multiple scaled and blurred image layers. Demonstrates techniques like animating CSS variables for synchronized motion, using CSS masks for depth illusion, and combining scale and blur animations to create smooth, immersive scroll-based interactions.
15
19
Article
Ahmad Shadeed·29w
Use Cases for Field Sizing
The CSS field-sizing property enables input fields and select menus to automatically resize based on their content, eliminating the need for JavaScript. Currently supported only in Chrome, it works by setting field-sizing: content on form elements. Use cases include conversational forms, pagination controls, URL inputs with prefixes/suffixes, and dynamic hero sections. The property respects placeholder text as minimum width and works well with max-width constraints for responsive layouts. It functions as a progressive enhancement, maintaining normal behavior in unsupported browsers.
14
1
20
Article
CSS-Tricks·29w
Getting Creative With Small Screens
Explores techniques for creating distinctive, magazine-style layouts on mobile devices without collapsing into monotonous single columns. Demonstrates practical implementations using CSS Grid, Flexbox, container queries, horizontal scrolling, shape-outside, and orientation-based layouts to design engaging content experiences that maintain visual hierarchy and storytelling on small screens. Shows how to transform desktop editorial designs into scrollable mini-spreads and orientation-responsive compositions that preserve design personality while adapting to limited space.
10
21
Article
CSS-Tricks·32w
The thing about contrast-color
The CSS contrast-color() function currently only returns pure black or white for maximum contrast, which can create uncomfortably high contrast ratios. Developers like Andy Clarke find this limiting when designing accessible interfaces that need softer contrast levels. The light-dark() function offers more control by allowing custom opacity values, though the spec indicates future versions of contrast-color() may support more nuanced contrast algorithms and color options beyond the black/white binary.
10

See all CSS archives