Tag: CSS

1. Modern Print Stylesheets: Optimizing CSS for Print Output

   Apr 6, 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.

   Read more

2. CSS shape-outside: Wrap Text Around Shapes

   Apr 2, 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.

   Read more

3. focus-within vs. focus-visible: The Comparison

   Mar 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.

   Read more

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

   Mar 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.

   Read more

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

   Mar 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.

   Read more

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

   Mar 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.

   Read more

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

   Mar 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.

   Read more

8. Intrinsic Web Design: Principles for Layouts Beyond Fixed Breakpoints

   Mar 5, 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.

   Read more

9. CSS Container Queries: Components Instead of Viewport

   Mar 2, 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.

   Read more

10. Automating Critical CSS Extraction

    Mar 1, 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.

    Read more