Layouts that hold up across browsers, devices, and the design changes nobody warned you about.
CSS :has() is the parent selector we waited 20 years for: style an element based on what it contains. Now Baseline in every engine. Form rows, quantity queries, the previous-sibling trick, and the @supports gate for old browsers.
Style form validation with pure CSS. :user-valid and :user-invalid only react after the user interacts, so empty required fields stop showing red on page load. Plus :required, :optional, :in-range, :placeholder-shown, :autofill, and :has().
The accessible way to handle focus rings: :focus-visible shows the outline only when someone navigates by keyboard, so you can stop blanket-removing outlines and breaking keyboard users. Native, Baseline, and the old :focus-ring polyfill is dead.
Tint native checkboxes, radio buttons, range sliders, and progress bars to your brand color with one line of CSS. accent-color, the controls it affects, the auto-contrast checkmark, and the graceful fallback for old browsers.
Smooth scroll without JavaScript: one line, html { scroll-behavior: smooth }, animates every anchor jump. Plus the scroll-margin-top fix for sticky headers, the scrollIntoView companion, and the prefers-reduced-motion guard.
:is() and :where() both collapse repetitive grouped selectors into one. The difference that matters: :is() takes the specificity of its most specific argument, :where() always has zero specificity. Both use a forgiving selector list, neither matches pseudo-elements.
Style the Choose File button of input[type=file] with the ::file-selector-button pseudo-element: hover and focus states, why it does not inherit fonts, and the hide-the-input/style-a-label pattern for full control.
Center a div in CSS the modern way: flexbox justify-content + align-items, the grid place-items one-liner, margin:auto, and absolute + transform. Which method to reach for, and the gotchas with each.
fixed pins to the viewport and leaves the flow; sticky scrolls with content until it hits a threshold, then pins inside its scroll container. The difference, and why sticky so often does nothing at all.
The prefers-reduced-motion media query reads the OS reduce-motion setting so you can tone down animation for users who get motion sick. The two patterns, the safe global reset, the matchMedia() check, and pairing it with scroll-behavior.
Stop background-repeat clipping the last tile. round rescales tiles so a whole number fits; space keeps tile size and distributes the gaps. Plus the two-value round space syntax for separate horizontal and vertical control.
Push a logo left and links right in a flexbox nav without an empty spacer div. The three correct tools: justify-content: space-between, margin-left: auto, and gap.
8-digit hex (#RRGGBBAA) adds an alpha channel as a hex byte, 00 transparent to FF opaque. The catch the old guides get wrong: the alpha pair is hex, not a percentage, so 50% opacity is 80, not 50.
Real vertical text in CSS comes from writing-mode: vertical-rl plus text-orientation, not transform: rotate(90deg). writing-mode reflows and wraps the layout; rotate does not. Here is when to use each, with working code.
Make gradient text in CSS by clipping a linear-gradient to the letters with background-clip: text and a transparent fill. The modern unprefixed recipe, an accessible fallback, animation, and clipping to an image.
Add an i before the closing bracket of a CSS attribute selector and the value matches case-insensitively: [href$=".pdf" i] catches .pdf, .PDF, and .Pdf. Plus the rarer s flag that forces case-sensitive matching.
Read and write CSS custom properties from JavaScript: getComputedStyle().getPropertyValue() to read (mind the whitespace), style.setProperty() to write, and the :root trick that re-themes a whole page from one variable.
A practical flexbox guide built around the one idea that makes everything click: the main axis vs the cross axis. justify-content, align-items, the flex shorthand, gap, align-self, order, and the layouts I actually reach for.
How to use CSS @supports feature queries to apply styles only where they work: the not/and/or combinators, the selector() function for gating :has(), and the CSS.supports() JavaScript equivalent. Write a baseline, then enhance.
Responsive images look squished when you pin both a width and a height in CSS. The fix is max-width: 100% with height: auto so the image scales proportionally, plus the width/height HTML attributes for layout stability.
CSS :focus-within styles an element when it or any descendant has focus. Highlight a form field when its input is active, keep a dropdown open while a child link is focused, and combine it with :has().
A practical guide to the CSS filter property: blur, grayscale, brightness, contrast, saturate, sepia, hue-rotate, invert, opacity, and drop-shadow. How to chain them, when drop-shadow beats box-shadow, frosted glass with backdrop-filter, and the performance traps.
Add a CSS ellipsis to truncate text on one line with text-overflow, clamp to a fixed number of lines with line-clamp, and put the dots at the start instead of the end.
How to use the CSS content property with ::before and ::after, and pull text from an HTML attribute with attr(). Tooltips, print URLs, required-field asterisks, counters, and the accessibility caveat that decides where you can use it.
How to pin a background image to the viewport so content scrolls over it (the cheap parallax look), the full cover/center/fixed recipe, why background-attachment is not background-position, and the iOS Safari caveat that breaks it on mobile.
Set a custom cursor in CSS with cursor: url(). The mandatory keyword fallback you cannot omit, hotspot coordinates, the ~128px size cap (use 32px), PNG/SVG support, the keyword cursors, and the usability rules.
Ship responsive images with native HTML: srcset width descriptors plus sizes for resolution switching, picture with media for art direction, and source type for AVIF/WebP fallback. Plus the sizes gotcha that quietly defeats the whole thing.
How CSS calc() mixes units like 100% - 2rem, why the spaces around + and - are mandatory, and how min(), max(), and clamp() give you caps, floors, and fluid type with no media queries.
Fire a JavaScript callback when a CSS transition or animation finishes, using the transitionend and animationend events. The propertyName filtering, the bubbling trap, the cases where the event never fires, and the modern Web Animations API promise alternative.
Every Bootstrap media query breakpoint with exact pixel value, Sass/LESS mixins, container max-widths, and CSS-only equivalents. Covers Bootstrap 5.3 (xxl, CSS variables), Bootstrap 4 (deprecated mixins), and Bootstrap 3.
Two ways to draw a triangle in pure CSS: the classic border trick (a zero-size box with transparent side borders) for tooltip arrows, and clip-path: polygon() for scalable, rotatable shapes. When to use each.