Pro Tips & Tricks
A grab-bag of senior-level moves: accent-color, scroll-snap, :focus-visible, aspect-ratio placeholders and more.
To close out, here's a collection of small, high-leverage techniques that make you look like you've been doing this for years. Each is one or two lines and each solves a real, recurring problem.
Style form controls the easy way
accent-color: #2965f1 recolors checkboxes, radios, range sliders and progress bars in one line — native controls, your brand color, no custom widget rebuild.
Native scroll snapping
A carousel with zero JavaScript: scroll-snap-type: x mandatory on the container and scroll-snap-align: center on each child. The browser handles the snapping.
:focus-visible over :focus
Show focus rings for keyboard users but not on mouse click by styling :focus-visible instead of :focus. You keep accessibility and a clean look — never remove focus outlines without replacing them.
Smooth scrolling and more
scroll-behavior: smooth— animated jumps to in-page anchors, one line.text-wrap: balance— evens out ragged headings so they don't leave one lonely word on the last line.inset: 0— shorthand for top/right/bottom/left all zero; the tidy way to fill a positioned parent.gapworks in flexbox too, not just grid — stop reaching for margins.
Example
When to use it
- A developer uses scroll-snap-type: x mandatory on a carousel wrapper so the scroll always snaps to the nearest card edge.
- A developer uses :focus-visible instead of :focus to show keyboard focus rings only for keyboard users, hiding them for mouse clicks.
- A developer uses accent-color: #2965f1 on the document root to instantly theme native checkboxes, radios, and range sliders.
More examples
Scroll snap carousel
Creates a smooth-snapping carousel using scroll-snap-type on the container and scroll-snap-align on each item.
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
scrollbar-width: none;
}
.carousel-item {
flex: 0 0 80%;
scroll-snap-align: start;
border-radius: 12px;
overflow: hidden;
}focus-visible for accessible outlines
Shows focus rings only for keyboard navigation using :focus-visible, improving aesthetics without hurting accessibility.
/* Remove outline for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* Show clear outline for keyboard users */
:focus-visible {
outline: 3px solid #2965f1;
outline-offset: 3px;
border-radius: 4px;
}accent-color for native form controls
Sets accent-color once on :root to instantly apply the brand color to all native browser form controls with zero extra CSS.
:root {
accent-color: #2965f1;
}
/* Automatically themes these native elements: */
/* input[type=checkbox], input[type=radio], */
/* input[type=range], progress */
Discussion