Page 20 - CSS

object-fit decides whether an image gets stretched, cropped, or shown unchanged inside its container, while object-position sets the focal point of that crop. Together they replace server-side image cropping for most layout cases, and unlike background-size, they still work with real img and video elements, including alt text and loading optimizations.

The Rendering tab in Chrome DevTools is the most powerful tool for CSS performance profiling, and most frontend developers barely touch it. Paint flashing shows in real time which parts of the page are being repainted. The FPS meter gives instant feedback on rendering problems. The layers panel makes compositor layers visible. Together, these tools form the foundation for data driven CSS performance work.

With text-align: justify, the browser stretches every line of a paragraph flush to the left and right edges, with one exception: the last line stays left-aligned by default. text-align-last is the property that controls exactly this one detail independently of the rest of the paragraph, and it resolves one of the most common points of confusion around justified text on the web.

A drop cap, the enlarged initial letter at the start of a paragraph, was built in CSS for years using float, an estimated font-size, and a lot of manual tuning. The initial-letter property now handles the height and alignment calculation natively and allows precise control over how many lines the initial spans.

accent-color and caret-color sound similar but control entirely different things: one colors native controls like checkboxes and radios, the other colors only the blinking caret inside a text field. Used deliberately, both let you build a custom form theme without redrawing every control with appearance: none.

Filter utilities like blur, brightness and grayscale look like cosmetic tricks at first glance, but in Tailwind they solve a technically demanding problem: composing multiple filter functions into a single CSS declaration. Understanding how that composition works, and where backdrop filters hit their limits, lets you build effects that stay smooth even on mobile devices.

position: sticky can pin a table's header row and its first column at the same time using nothing but CSS, but the cell where both meet needs a deliberately staged z-index or it gets overlapped by one axis or the other. Here is the full pattern, including the stacking-context trap that makes z-index silently stop working.

Sometimes a wrapper element gets in the way: it breaks the grid line, prevents a direct flex child relationship, or forces an extra layout level. display: contents makes the element invisible to the layout context, its children step in directly. What sounds simple, however, comes with serious accessibility pitfalls that everyone using this feature in production needs to know.

A sidebar layout made of a fixed side column and a flexible main area sounds like a trivial task, yet it regularly breaks on long words, overflowing content and missing media queries. Flexbox delivers a solution through flex-basis, gap and the sidebar pattern that wraps automatically with no breakpoints at all, and controls visual order independently of the source code.

The CSS Popover API solves a problem that has plagued the web for years: dropdowns, tooltips, and modal overlays always had to be implemented with JavaScript. With the native popover attribute, ::backdrop, and the :popover-open pseudo-class, the browser now provides a complete solution that is accessible, performant, and free of external dependencies.