Handoff
CSS with the CSS in it: the declaration, which browsers ship it, and what to do where they do not.
-
CSS underlines and drop caps with text-decoration and initial-letter styling
-
CSS text-wrap balance and pretty for native text layout without JavaScript
-
Styling Lists, Links, and Blockquotes in CSS: Markers, Underlines, and Quotation Marks
-
Readability in CSS: line-height, letter-spacing, and the Measure That Makes Text Comfortable
-
The font-variant CSS Property: Small Caps, Numerals, and Ligature Control
Guides by category
-
Accessibility
The CSS half of accessibility: focus states a keyboard user can see, contrast that survives dark mode, and the display properties that quietly remove an element from the accessibility tree.
-
Animation
CSS animation spans transitions, keyframes, and scroll-driven timelines—but only transform and opacity animate without triggering layout or paint.
-
Architecture
BEM, ITCSS, CUBE CSS, and native @layer: how CSS architecture methodologies protect against specificity wars, dead code, and the fear of renaming a class.
-
Color
Build accessible, perceptually uniform colour palettes with modern CSS color spaces like oklch, functions like color-mix, and wide-gamut fallback strategies.
-
Design tools
Evaluate design tools from the developer's side: what the design file must contain before it can be built, and which exports produce usable CSS.
-
Frameworks
A cost-first comparison of Tailwind, Bootstrap, Open Props, and framework-less CSS: what each ships, what it costs in bytes after compression, and who should not use it.
-
JavaScript for CSS
The smallest JavaScript a stylesheet needs today, and the modern CSS features—scroll-driven animations, View Transitions, custom properties—that have made JS unnecessary.
-
Layout
The CSS layout hub covering flexbox, grid, and the patterns that replace framework layouts in the fewest declarations that work across engines.
-
New CSS
Which modern CSS features have shipped across all engines and are safe without a fallback: the Baseline widely available status for container queries, nesting, @scope, oklch, and view transitions.
-
Performance
CSS performance affects Core Web Vitals through layout, paint, and composite costs. Learn which declarations trigger each stage and how to measure their impact on LCP, CLS, and INP.
-
Responsive
Responsive design after container queries and clamp(): fluid type, the media queries that still earn their place, and component-level constraints replacing page-level breakpoints.
-
Selectors
The CSS selectors that shipped across all engines since 2021: :has(), :is(), :where(), and how they replace JavaScript DOM traversal patterns.
-
Tools
CSS generators, playgrounds, and converters judged on what they actually emit: stale prefixes, bloated syntax, and missing fallbacks, with hand-written equivalents shown.
-
Typography
The typography hub for handoff.design: variable fonts, pairing, the loading cost of a typeface, and the spacing that decides whether a paragraph is read.
Latest articles
-
@font-face Performance: Self-Hosting, Subsetting, and the font-display Descriptor
Configure @font-face for performance: self-host woff2 subsets, use font-display swap with size-adjust fallbacks, and measure the byte cost of every typeface decision.
-
Fluid Typography with CSS clamp(): Viewport Units, WCAG Zoom, and Fallback Stacks
Implement fluid typography with CSS clamp() that respects WCAG zoom requirements, includes rem fallbacks, and states the loading cost of every typeface.
-
How to Choose and Pair Web Fonts: Loading Cost, Fallback Stacks, and the Cascade
Choose and pair web fonts systematically: match x-height, budget loading cost in bytes, and use size-adjust fallback stacks to prevent layout shift.
-
CSS Advanced Text Effects Without JavaScript: Clipping, Masking, and Paint-Order
Create gradient text, text strokes, and layered shadows with CSS background-clip, mask-image, and paint-order—with fallbacks that work when the effect doesn't.
-
Vector Graphics Editors for UI Design That Export Web-Ready SVG
Compare vector graphics editors by the SVG they emit: which produce clean markup with correct viewBox attributes that CSS can style without manual cleanup.
-
Top Figma Plugins for Developer Handoff Productivity in 2025
Rank Figma plugins by developer handoff output quality: which produce CSS snippets, design tokens, and assets that require no manual cleanup before production.
-
Prototyping Tools That Export CSS Developers Can Actually Use
Evaluate prototyping tools by the CSS they export: which tools produce animation and interaction code that survives the transition to production without a rewrite.
-
Managing Design Assets So Developers Receive Build-Ready Files
Establish the asset handoff contract: naming conventions, export formats, and folder structures that let developers drop design files directly into a CSS codebase.
-
Figma vs Sketch Developer Handoff Comparison for 2025
Compare Figma and Sketch solely on developer handoff output: which tool's CSS snippets, design tokens, and asset exports require fewer manual corrections.
-
Figma Auto Layout Guide for Developers Who Write the CSS It Generates
Audit the CSS that Figma auto layout actually generates: where it produces clean flexbox, where it falls back to absolute positioning, and what a developer must rewrite.