Page 17 - CSS

A well built print stylesheet decides whether a printout is readable or whether navigation, banner ads and cut off tables make the content unusable. With media print, targeted page breaks and visible link targets, a screen view becomes a document that also works on paper.

Text wrap around geometric shapes was long an unfulfilled wish in web design. CSS shape-outside makes it possible: text flows around circles, ellipses, and polygons, using floats, without JavaScript, directly in CSS. shape-margin, shape-image-threshold, and clip-path complete the toolkit for editorial web design.

Masonry layout packs cards of different heights tightly together, subgrid precisely aligns inner elements to the track grid of a parent grid. Combined, the two techniques solve a problem that plain flexbox or a simple grid alone cannot, but only with a clear understanding of what masonry actually supports today and what it does not.

focus-within and focus-visible sound similar but solve fundamentally different problems. One reacts to focus somewhere inside a container, the other distinguishes keyboard from mouse interaction. Confusing the two leads either to noisy focus rings or invisible keyboard navigation.

For years, a transition to or from an auto value in CSS simply did not work, because the browser had no way to compute a numeric intermediate value for auto. calc-size() and the interpolate-size property change that fundamentally: the browser can now resolve a numeric start or end value for auto itself and animate cleanly between them, with no JavaScript measurements and no fixed pixel values.

conic-gradient() produces color transitions that rotate around a center point instead of running linearly or radially, making it a surprisingly precise tool for pie charts, loading animations and color wheels. Combined with custom properties updated by JavaScript, it becomes a dynamic visualization technique that needs no SVG paths and no canvas drawing logic at all.

A complete rewrite of a grown Bootstrap application is rarely realistic. Teams that migrate from Bootstrap to Tailwind without freezing the project for weeks need a phased plan with an audit, a class mapping table and a clean dual running setup that rolls out page by page instead of risking everything at once.

text-wrap balance and text-wrap pretty solve two different line break problems: balance evens out short headings across all lines, pretty prevents single words from being left alone at the end of body text paragraphs. Using both values deliberately instead of interchangeably yields noticeably cleaner typography without any extra JavaScript.

Long selector lists that share the same declarations are a maintenance problem in every sizable stylesheet. CSS :is() and :where() compress such lists into a single rule, with precise control over specificity, and with an error tolerance behavior that classic comma lists simply do not have.

Some parts of a form control can still only be styled through vendor specific pseudo-elements, because there is no standardized selector for them. Anyone who wants range sliders, file upload buttons and autofill backgrounds to look consistent cannot avoid webkit and moz prefixes, but has to use them in a structured, maintainable way.