Performance: Active and focus states
MEDIUM IMPACT
This concept affects interaction responsiveness and visual stability during user input.
0
0
Active and focus states in CSS - Performance & Optimization
Styling button active and focus states for user interaction feedback
CSS
button:focus-visible { outline: 2px solid #005fcc; } button:active { background-color: #004a99; }
Uses outline for focus without layout changes and simple background-color change for active state, preserving accessibility and minimizing repaints.
📈 Performance Gainsingle repaint, no reflow, better input responsiveness
Styling button active and focus states for user interaction feedback
CSS
button:focus, button:active { outline: none; box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); border-width: 3px; }
Removing outline harms accessibility; heavy box-shadow and border-width changes cause layout shifts and repaint overhead.
📉 Performance Costtriggers multiple reflows and repaints on every interaction, causing input delay
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Heavy box-shadow and border-width on :active/:focus | None | Multiple reflows per interaction | High paint cost due to shadows | [X] Bad |
| Outline and background-color changes on :focus-visible and :active | None | No reflows | Low paint cost | [OK] Good |
Rendering Pipeline
Active and focus state styles trigger style recalculation and sometimes layout and paint. Complex styles like box-shadow or border-width changes cause layout recalculation and repaint, slowing interaction.
→Style Calculation
→Layout
→Paint
⚠️ BottleneckLayout and Paint stages due to size or shadow changes
Core Web Vital Affected
INP
This concept affects interaction responsiveness and visual stability during user input.
Optimization Tips
1Avoid changing layout-affecting properties (border-width, margin, padding) on active/focus states.
2Prefer outline or background-color changes for focus and active styles to minimize reflows and repaints.
3Use :focus-visible to apply focus styles only when keyboard navigation is used, improving user experience and performance.
Performance Quiz - 3 Questions
Test your performance knowledge
Which CSS property change on :focus or :active is least likely to cause layout shifts?
DevTools: Performance
How to check: Record a performance profile while interacting with buttons. Look for style recalculation, layout, and paint events triggered on focus and active states.
What to look for: Minimal layout and paint times during interaction indicate good performance; large spikes show costly styles.