Layouts that hold up across browsers, devices, and the design changes nobody warned you about.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
: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.
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.