Series

CSS

How-tos and tips of modern CSS.

Learn CSS Flexbox in 10 Minutes
Flexbox is a powerful module in CSS that provides an efficient way to arrange elements in a container — even when their size is unknown or dynamic. Unlike traditional layouts that rely heavily on floats and positioning, Flexbox focuses on distributin...
Sep 1, 20252 min read6
Practical CSS Tips for Better UX and Accessibility
Focus & Interaction 1. Use :focus-visible for keyboard-only focus outlines /* Outline is shown only for keyboard-only focus */ button:focus-visible { outline: 2px solid blue; outline-offset: 2px; } 2. Never remove outlines without replacement /*...
Aug 10, 20254 min read8