Tag: CSS

1. Styling the Native dialog Element: Modals Without a JS Framework

   Jul 14, 2025

   The dialog element already brings backdrop, automatic focus trap, closing via the ESC key and form return values, without a single line of modal library code. With targeted CSS, including starting-style animations for smooth entry and exit, it becomes a fully styled, accessible modal.

   Read more

2. CSS field-sizing: Automatically Resize Textareas Without JavaScript

   Jun 30, 2025

   The new CSS property field-sizing makes the well known JavaScript tricks for auto-growing textareas obsolete. With field-sizing: content, a form field adapts to its content starting from the very first keystroke, natively in the browser, with no event listener and no layout hacks.

   Read more

3. CSS backdrop-filter and Glassmorphism: blur, saturate, performance

   Jun 9, 2025

   Glassmorphism is more than a design trend, it is a stress test for CSS performance. backdrop-filter: blur() can turn into a GPU bottleneck on a mobile device if it is used carelessly. This article shows how to combine blur, saturate, and brightness correctly, where the performance limits sit, and what fallback strategies look like so the effect works in every browser.

   Read more

4. CSS font-display and Layout Shift: Reducing CLS in Core Web Vitals

   Jun 8, 2025

   Webfonts are one of the most common causes of poor Core Web Vitals, especially high CLS (Cumulative Layout Shift) values. CSS font-display controls how and when a browser switches to a loaded font. With size-adjust, the visual jump caused by a font swap can be reduced to nearly zero.

   Read more

5. CSS calc(), min(), max() and clamp(): Arithmetic in the Stylesheet

   Jun 1, 2025

   Responsive typography, adaptive spacing and fluid layouts without a single breakpoint: that is the promise of CSS calc(), min(), max() and clamp(). Anyone who masters these four functions and their nesting writes more maintainable stylesheets with less code and fewer browser conflicts between pixels and viewport.

   Read more

6. CSS Grid: Named Lines and Areas for Readable Layouts

   May 31, 2025

   Numeric grid lines such as line 3 or line minus 2 are unambiguous for the browser, but hard for humans to remember. Named grid lines and grid-template-areas translate the same grid into meaningful labels and ASCII diagrams that document, right inside the code, what happens on screen.

   Read more

7. accent-color: Coloring Form Controls Without JavaScript

   May 29, 2025

   Checkboxes, radio buttons, range sliders and progress bars carry a different default color in every browser, usually some system blue that either matches a brand or does not. The accent-color CSS property solves this with a single line, without native keyboard control, focus rings or screen reader semantics ever getting lost.

   Read more

8. The prefers-contrast Media Feature: Accessible Contrast Levels with CSS

   May 25, 2025

   With prefers-contrast, CSS can detect whether a user has requested more or less contrast in the operating system settings, and adjust colors, borders and focus indicators accordingly. The media feature closes a real accessibility gap that used to be solved awkwardly with separate high contrast stylesheets.

   Read more

9. Relative Color Syntax in Practice: Deriving Color Tones From CSS Variables

   May 22, 2025

   Relative Color Syntax lets you compute an entire palette in the browser from a single brand color, instead of maintaining hover, active and border colors as separate variables. With the from keyword, color space channels and calc(), maintainable color systems emerge directly in native CSS, with no Sass and no build step required.

   Read more

10. CSS Counter: Automatic Numbering Without JavaScript

    May 13, 2025

    Staggered chapter counters, nested lists with mixed styles, custom markers for list items: pure CSS handles all of it with counter-reset, counter-increment, and counter(). Once you understand the system, you can strike JavaScript counters from your toolkit for good.

    Read more