Sitemap Every page on Handoff, grouped by destination and section. There is also an XML sitemap for search engines. Categories Accessibility CSS Accessibility Techniques for Focus, Contrast, and Screen Readers Animation CSS Animation Hub: Transitions, Keyframes, and Compositor-Safe Properties Architecture CSS Architecture: How to Organise Stylesheets So the Next Change Is Safe Color Modern CSS Color Spaces, Functions, and Accessible Palette Systems Design tools Design Tools for Developers Who Receive the Handoff and Build the Output Frameworks CSS Frameworks Compared: What Each One Costs in Bytes and Control JavaScript for CSS JavaScript for CSS Developers: The Smallest JS a Stylesheet Needs Layout CSS Layouts in the Fewest Declarations That Actually Work Across Engines New CSS Modern CSS Features That Have Shipped and What Is Safe to Use Performance CSS Performance and Core Web Vitals What Declarations Cost in Layout Paint Composite Responsive Responsive Design After Container Queries and clamp() Selectors CSS Advanced Selectors Guide for Modern Browser Targeting Tools CSS Generators, Playgrounds and Converters: What They Output and Why Typography Web Typography: Variable Fonts, Performance, and the Spacing That Makes Text Readable ARIA and CSS Using ARIA Attributes with CSS Selectors for Stateful Accessible Styling Accessible color palettes Building Accessible Color Palettes with oklch and WCAG Contrast Ratios Accessible data tables Making Accessible Data Tables with Semantic HTML and Responsive CSS Accessible focus states Designing Accessible Focus States That Meet WCAG 2.4.7 Visible Focus Accessible forms A Guide to Accessible Form Styling with CSS Labels, Errors, and Focus Advanced text effects CSS Advanced Text Effects Without JavaScript: Clipping, Masking, and Paint-Order Animating UI elements Animating UI Elements: Buttons, Toggles and Form Controls That Feel Responsive Animating gradients Animating CSS Gradients with @property and Compositor-Safe Techniques Animation fill mode CSS animation-fill-mode: Controlling What Happens Before and After an Animation Runs Attribute selectors CSS Attribute Selectors Guide for Substring and Value Matching BEM methodology BEM Methodology: Naming Conventions That Prevent CSS Specificity Wars Box model refresher The CSS Box Model Refresher That Names the Hacks It Replaces Box shadow generators What CSS Box-Shadow Generators Emit and the Hand-Written Alternative Building component libraries Building Component Libraries in Design Tools That Export Usable CSS CSS and semantics The Role of CSS in Semantic HTML and the Accessibility Object Model CSS gradients CSS Gradients in 2026: New Color Spaces and Interpolation Methods CSS in JavaScript CSS-in-JS: What the Libraries Emit and What That Costs in the Browser CSS in JavaScript performance What CSS-in-JS Libraries Actually Emit and What That Costs in Render-Blocking Bytes CSS loading best practices Best Practices for Loading CSS Files Without Blocking First Paint or Causing FOUC CSS minifiers CSS Minifier Output Compared: Byte Savings, Identifier Shortening and Risks CSS nesting CSS Nesting in Production What Shipped and the Preprocessor Fallback CSS playgrounds CSS Playground Output: What Browser-Based Editors Emit and What They Hide CSS scope CSS @scope in Production What Shipped and the BEM Fallback CSS to Sass converters CSS to Sass Converter Output: What Gets Lost in Automated Conversion CSS transform guide CSS transform Guide: Scale, Rotate and Skew With Compositor-Safe Performance CUBE CSS intro CUBE CSS: Separating Layout from Visual Treatment So the Cascade Works Centering guide CSS Centering in 2026: The Two Declarations That Replaced Twelve Hacks Choosing pairing fonts How to Choose and Pair Web Fonts: Loading Cost, Fallback Stacks, and the Cascade Clip path makers CSS Clip-Path Maker Output: Stale Prefixes, Absolute Units and Fixes Collaboration tools Collaboration Tools for Design Teams from the Developer Handoff Perspective Color contrast Ensuring High Color Contrast in CSS for WCAG 2.2 AA and AAA Compliance Color gradient generators CSS Gradient Generator Output: Legacy Syntax, Missing Colour Spaces, Fixes Color management tools CSS Color Management Tools That Output Modern Syntax Like oklch and color-mix Color mix function How the CSS color-mix() Function Works With Real Code Examples Color scheme property The CSS color-scheme Property Controls Light and Dark Mode Rendering Combinators explained CSS Combinators Explained with Child Adjacent and Sibling Selectors Combining selectors Combining CSS Selectors for Powerful Specific Element Targeting Complex selectors cost The Performance Cost of Complex CSS Selectors and When Selector Matching Matters Component based CSS Component-Based CSS: Organising Styles When the DOM Is Split into Pieces Container queries Container Queries in Production What Shipped and the Fallback Container queries guide A Practical Guide to Container Queries With Production Fallbacks Content visibility How content-visibility Skips Rendering Work to Improve LCP and INP Contrast ratios Calculating WCAG Color Contrast Ratios in CSS With Live Code Examples Core web vitals How CSS Directly Impacts Largest Contentful Paint, Layout Shift, and Interaction Delay Critical CSS guide Extracting and Inlining Critical CSS to Reduce Largest Contentful Paint by Seconds Cubic bezier easing Understanding cubic-bezier for Custom Easing Curves in CSS Animations and Transitions Cubic bezier tools Cubic Bezier Easing Tools and the CSS They Emit Currentcolor guide Using CSS currentColor for Theming Before and After Custom Properties Custom properties deep dive CSS Custom Properties Deep Dive: Runtime Theming and Cascade Control Customizing frameworks Customizing CSS Frameworks: What You Can Change and What You Cannot Dark light mode Building a Dark and Light Mode Theme With CSS Custom Properties Only Data attributes Using HTML data-* Attributes for CSS Content and State Switching Design system documentation tools Design System Documentation Tools That Export What Developers Need Detecting CSS support Detecting CSS Feature Support with @supports and JavaScript Fallbacks Display properties How CSS Display Properties Change the Accessibility Tree Dynamic theming Dynamic Theming with CSS Custom Properties and a JavaScript Theme Toggle Empty selector Using the CSS :empty Selector to Style Elements Without Content Figma accessibility plugins Figma Accessibility Plugins That Catch What Code Linters Miss Figma auto layout Figma Auto Layout Guide for Developers Who Write the CSS It Generates Figma vs sketch Figma vs Sketch Developer Handoff Comparison for 2025 Flexbox alignment Flexbox Alignment: justify-content and align-items in the Fewest Declarations Flexbox vs grid Flexbox vs CSS Grid: The One-Axis vs Two-Axis Decision That Replaces Guessing Fluid typography clamp Fluid Typography With clamp() Without Breaking the WCAG Zoom Rule Fluid typography guide Fluid Typography with CSS clamp(): Viewport Units, WCAG Zoom, and Fallback Stacks Font face performance @font-face Performance: Self-Hosting, Subsetting, and the font-display Descriptor Font pairing tools Font Pairing Tools and the CSS Font-Face They Generate Font variant The font-variant CSS Property: Small Caps, Numerals, and Ligature Control Fr unit grid How the CSS Grid fr Unit Distributes Space and Replaces Percentage Hacks Framework less systems Framework-Less CSS Systems: What Modern CSS Features Replace Framework Utilities Future responsive Responsive Design with min(), max(), and clamp() Without Media Queries Gap property The CSS gap Property in Flexbox and Grid Replaces Margin Hacks for Spacing Getting started bootstrap Getting Started with Bootstrap 5: What It Ships and What It Costs Grid layout generators CSS Grid Layout Generators and the Code They Actually Emit Holy grail sidebar Holy Grail and Sidebar Layouts with CSS Grid Replace Float and Clearfix Hacks Hsla colors Practical Uses for HSLA Colors in CSS and Why OKLCH Replaces Them ITCSS method ITCSS: The Inverted Triangle CSS Method for Predictable Specificity Order Intersection observer IntersectionObserver for CSS Triggered Animations and Lazy Loading Is tailwind right Is Tailwind CSS Right for Your Project? The Cost in Bytes and Control Lighthouse auditing Performance Auditing CSS with Lighthouse to Find and Fix Render-Blocking and Layout Shift Lightweight frameworks Lightweight CSS Frameworks Compared: Bytes, Features, and the Trade-Offs Magazine layouts grid Building Magazine-Style Editorial Layouts with CSS Grid and Named Areas Managing design assets Managing Design Assets So Developers Receive Build-Ready Files Manipulating classes Manipulating CSS Classes with JavaScript classList and data-* Attributes Marker pseudo element Custom List Markers with the CSS ::marker Pseudo-Element Migrating away Migrating Away from a CSS Framework: Strategy, Cost, and the Escape Hatch Minification compression CSS Minification and Compression Explained: What Each Removes and What That Saves in Bytes Mobile vs desktop first Mobile-First vs Desktop-First Strategy After Container Queries Modern color formats Modern CSS Color Formats LCH and OKLCH Explained With Code Samples Modern media queries Modern Media Queries That Still Earn Their Place After Container Queries Modern pseudo classes CSS :has(), :is(), and :where() Pseudo-Classes Guide for Modern Selectors New color spaces New CSS Color Spaces: oklch(), oklab(), and Wide Gamut Support Not selector Excluding Elements from CSS Rules Using the :not() Pseudo-Class Nth child guide CSS :nth-child and :nth-of-type Selectors for Pattern-Based Styling Open props intro An Introduction to Open Props: Design Tokens as Custom Properties, No Build Step Optimizing custom properties Optimizing CSS Custom Properties for Runtime Performance Without Losing Theming Flexibility Overlapping elements Overlapping Elements with CSS Grid and z-index Replace Absolute Positioning Hacks Performance impact What CSS Frameworks Actually Cost in Bytes, Build Steps and Control Performant animations The Guide to Performant CSS Animations: Compositor-Only Properties and When Paint Is Inevitable Picture element The picture Element for Art Direction With Container Query Fallbacks Prefers reduced motion Using the prefers-reduced-motion Media Query for Accessible Animation Prototyping frameworks CSS Frameworks for Prototyping That Do Not Become Technical Debt Prototyping tools Prototyping Tools That Export CSS Developers Can Actually Use Pseudo elements CSS ::before and ::after Pseudo-Elements for Generated Content and Decoration Queryselector guide Using document.querySelector and CSS Selectors to Find DOM Elements Readability spacing Readability in CSS: line-height, letter-spacing, and the Measure That Makes Text Comfortable Reading CSS variables Reading and Writing CSS Custom Property Values with JavaScript Refactoring legacy CSS Refactoring Legacy CSS Without Breaking a Site That Still Ships Remove unused CSS How to Find and Remove Unused CSS to Improve LCP and Reduce Bytes Resize observer ResizeObserver for Element Size Changes and Container Query Fallbacks Responsive data tables Responsive Data Tables Without Breaking the Semantic Contract Responsive images Responsive Images with object-fit, aspect-ratio, and the Picture Element Responsive navigation Responsive Navigation Menus with Container Queries and CSS-Only Patterns Responsive no media queries Responsive Layouts Without Media Queries Using CSS Grid auto-fit and minmax SVG shape generators SVG Shape and Blob Generators and the CSS They Produce Sass mixins vs extends Sass Mixins vs Extends and What Each One Actually Compiles To Scoped CSS Scoped CSS in 2026 with @scope, CSS Modules, and Shadow DOM Compared Scroll animations On-Scroll Animations with IntersectionObserver and Scroll-Driven Animation Timelines Settings file theming Theming with a Settings File Using Custom Properties Instead of Sass Variables Simple tabs component A Simple Tabs Component With the Minimum JavaScript CSS Needs Staggered animations Staggered Animations with animation-delay and Custom Properties for Cascading Sequences Style queries CSS Style Queries: Component Variant Logic with Custom Properties Styling lists links blockquotes Styling Lists, Links, and Blockquotes in CSS: Markers, Underlines, and Quotation Marks Testing responsive Testing Responsive Designs Across Container Widths and Viewport Conditions Testing with browser tools Testing CSS Accessibility with Browser Developer Tools Text wrap balance CSS text-wrap balance and pretty for native text layout without JavaScript Text wrap balance 2 CSS text-wrap: balance and pretty for Native Typographic Control Top figma plugins Top Figma Plugins for Developer Handoff Productivity in 2025 Transition vs animation CSS Transition vs Animation: When to Use Which and Why It Matters Triggering animations Triggering CSS Animations With the Minimum JavaScript Required Trigonometric functions CSS Trigonometric Functions sin(), cos(), tan() for Angle-Based Layouts Typing effect CSS Typing Effect with Steps: A Typewriter Animation Without JavaScript UI state selectors CSS UI State Selectors for Styling Form Elements Without JavaScript Underlines drop caps CSS underlines and drop caps with text-decoration and initial-letter styling Utility vs component Utility-First Versus Component-Based CSS Frameworks by Output and Cost Variable fonts intro Variable fonts CSS introduction with font-variation-settings and axes control Vector graphics editors Vector Graphics Editors for UI Design That Export Web-Ready SVG View transitions API View Transitions API: Declarative Morphing Between DOM States Viewport units Viewport Units vw, vh, dvh, svh, lvh and When Each One Applies Visually hiding content Visually Hiding Content That Screen Readers Still Announce Z index management Managing z-index in Large Projects with Stacking Context Layers Guides What CSS Can Do in 2026 That It Could Not in 2020 About this site About Handoff Contact How this site is funded Privacy Terms of use