CSS-Tricks

38 articles in the TruthFoundry index. Each links out to the original.

• CSS Writing-Mode Property Controls Text and Layout Direction · The writing-mode CSS property sets horizontal or vertical text layout and block progression direction.
• CSS border-shape Property Enables Decorative Borders on Complex Shapes · New CSS border-shape property allows borders and shadows to follow complex element shapes instead of the box.
• CSS-Tricks Weekly Roundup: Gap Decorations, CSS random(), and New Web Platform Features · Temani Afif and Polypane showcase new CSS capabilities including gap decorations and random() function experiments.
• CSS Pseudo-Classes Mimic JavaScript Event Listeners for State Tracking · CSS pseudo-classes like :hover and :focus track states triggered by JavaScript events, reducing the need for inline JS.
• CSS translateZ() Adds 3D Depth and Boosts Web Performance · CSS translateZ() shifts elements along the Z-axis to create depth and leverage GPU rendering.
• CSS translateY() Function Explained: Syntax, Usage, and Animation Tips · CSS-Tricks explains the translateY() function, its syntax, and practical animation use cases.
• CSS Tricks Explains translateX() Function for Horizontal Element Movement · CSS translateX() shifts elements horizontally using pixels or percentages within the transform property.
• CSS translate() Function Explained: Syntax, Usage, and Diagonal Movement · CSS translate() shifts elements horizontally and vertically using lengths or percentages within the transform property.
• CSS Scroll-Driven Animations Create Opposing Column Effects · Modern CSS animation-timeline and view() functions enable items to scroll in opposite directions within a container.
• Chrome Ships Scroll-Triggered Animations in Version 146 · Chrome 146 introduces scroll-triggered animations as a fixed-duration alternative to scroll-driven animations.
• CSS-Tricks Explains the New ariaNotify() Method for Screen Reader Notifications · The new ariaNotify() method simplifies screen reader notifications by replacing clunky live region workarounds.
• CSS-Tricks Reviews Adam Wathan's Prop For That Live CSS Props Tool · Prop For That enables live CSS variables driven by JavaScript data like cursor position and scroll velocity.
• CSS-Tricks Highlights @function, alpha(), Grid Lanes, and CSS Day 2026 Updates · CSS-Tricks covers new @function, alpha(), Grid Lanes, and <dialog> upgrades in CSS Day 2026 recap.
• CSS-Tricks Explains Fix for Broken 3D View Transitions · Using perspective() in keyframes fixes 3D view transitions that fail with the perspective property.
• CSS-Tricks: Avoid Redundant 'Navigation' in Nav Labels for Accessibility · Mark Underhill advises omitting 'navigation' from <nav> labels to prevent redundancy for screen reader users.
• Modern CSS Toolkit for Creating Memorable Web Experiences · Expert guide to using native CSS, SVG, and animations for accessible, high-performance web design.
• Developer Removes JavaScript to Build Semantic CSS-Only Pie Chart · A developer creates a fully semantic, customizable pie chart using only CSS and HTML attributes, eliminating JavaScript logic.
• CSS offset-path Property Enables Motion Along Custom Paths · The CSS offset-path property defines movement paths for animated elements using SVG or CSS shapes.
• CSS @custom-media At-Rule Simplifies Complex Media Queries · CSS @custom-media allows defining reusable aliases for complex media queries to improve code maintainability.
• CSS @function at-rule Enables Reusable Dynamic Logic in Stylesheets · CSS now supports @function at-rules for creating reusable, argument-taking logic blocks similar to custom properties.
• CSS ::search-text Pseudo-Element Styles Browser Find-in-Page Highlights · CSS ::search-text pseudo-element styles browser find-in-page highlights with limited properties
• Astro Developer Shares Universal Markdown Utility for React, Vue, Svelte · A developer introduces a Markdown utility that handles whitespace correctly across Astro, React, Vue, and Svelte.
• CSS-Tricks Weekly Roundup: Safari Testing, ::checkmark Pseudo-Element, and Anchor Positioning · CSS-Tricks highlights new CSS features including ::checkmark, anchor positioning, and Safari testing strategies.
• Reveal Text with CSS letter-spacing and ::first-letter Pseudo-classes · Techniques to animate text reveals using CSS letter-spacing and color transitions
• CSS-Tricks Author Argues Human Technical Writing Remains Vital Despite AI · CSS-Tricks founder asserts that human technical writing is essential for explaining complex concepts to humans, not just AI.
• CSS Tricks Explains Scaling View Transitions for Hundreds of Elements · CSS Tricks details using view-transition-class to scale view transitions across hundreds of elements without JavaScript.
• CSS-Tricks Debunks Myths About CSS Centering Complexity in 2026 · CSS-Tricks reveals over 100 centering methods but highlights only 15 valid approaches for modern web development.
• Stack Overflow Question Volume Plummets as AI Dominates Developer Problem-Solving · Stack Overflow questions dropped from 200k monthly peaks in 2014 to under 3k in 2026 due to AI and strict moderation.
• CSS Cross-Document View Transitions Gotchas and Debugging Guide · Jake Archibald explains deprecated meta tags, 4-second timeouts, and CSS opt-in for cross-document view transitions
• CSS-Tricks Weekly Roundup: 3D Voxel Scenes, Flying Focus, and New CSS Syntaxes · CSS-Tricks highlights Heerich.js, Polypane snippets, and new CSS selectors in this week's update.