Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: CSS
cssaccessibilityfocuslayout
Avoid layout shift when adding a focus border
Adding a border only on focus shifts surrounding content; use outline, a transparent reserved border, or box-shadow so the focus indicator doesn't change layout.
PR: hegnar-components · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codescss
| 1 | .input:focus { border: 2px solid blue; } /* shifts layout on focus */ |
Explanation (EN)
Adding border thickness on focus can change the box dimensions or available content space.
Objašnjenje (HR)
Good example
New codescss
| 1 | .input { border: 2px solid transparent; } |
| 2 | .input:focus { border-color: blue; } /* or use outline / box-shadow */ |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
For a focus style, compare unfocused/focused box geometry and ensure the visible focus indicator does not shift neighboring content.
Exceptions / Tradeoffs (EN)
Keep a strong visible indicator in forced-colors and keyboard use. A box-shadow alone can disappear in forced-colors; a reserved border or outline may be more robust.