Page 9 - CSS

CSS

AI generated

Modern Print Stylesheets: Optimizing CSS for Print Output

Maxim Mironjuk - April 06, 2025

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.

CSS

AI generated

CSS shape-outside: Wrap Text Around Shapes

Maxim Mironjuk - April 02, 2025

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.

CSS Barrierefreiheit

AI generated

focus-within vs. focus-visible: The Comparison

Maxim Mironjuk - March 30, 2025

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.

CSS Barrierefreiheit

AI generated

text-wrap: balance vs. pretty Compared: Line Breaks Finally Under Control

Maxim Mironjuk - March 21, 2025

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.

CSS

AI generated

CSS :is() and :where(): Simplifying Selectors

Maxim Mironjuk - March 20, 2025

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.

CSS

AI generated

Pseudo-Elements for Inputs: Using ::-webkit- and ::-moz- Precisely

Maxim Mironjuk - March 20, 2025

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.

CSS Web Performance

AI generated

View Transitions Between Pages: Cross-Document Navigation Without a Framework

Maxim Mironjuk - March 15, 2025

Page changes in classic multi-page applications usually feel abrupt: the old page disappears and the new one appears with no transition at all. Cross-Document View Transitions close that gap directly in the browser, with a few lines of CSS, no single-page framework and no extra JavaScript for the basic case.

CSS Design Patterns

AI generated

Intrinsic Web Design: Principles for Layouts Beyond Fixed Breakpoints

Maxim Mironjuk - March 05, 2025

Classic responsive design thinks in fixed device widths and three or four breakpoints. Intrinsic Web Design flips that perspective: the layout reacts directly to its own content and the space actually available, with minmax, clamp, auto-fit and container queries as practical tools for this approach.

CSS

AI generated

CSS Container Queries: Components Instead of Viewport

Maxim Mironjuk - March 02, 2025

CSS Container Queries end the era of viewport-centric responsiveness. A card now knows how wide its container is, and adapts accordingly, whether it appears in a sidebar, a main content area, or a modal. This changes CSS architecture from the ground up.

CSS Web Performance

AI generated

Automating Critical CSS Extraction

Maxim Mironjuk - March 01, 2025

Hand maintained critical CSS goes stale the moment any layout changes, becoming a silent source of frontend bugs. Whoever integrates critical CSS extraction into the build pipeline gets automatically current, correct CSS for the visible area with every deployment, with no developer intervention required.