Page 7 - CSS

AI generated

Styling the Native dialog Element: Modals Without a JS Framework

Maxim Mironjuk - July 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.

CSS

AI generated

CSS field-sizing: Automatically Resize Textareas Without JavaScript

Maxim Mironjuk - June 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.

CSS

AI generated

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

Maxim Mironjuk - June 09, 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.

CSS Web Performance

AI generated

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

Maxim Mironjuk - June 08, 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.

CSS

AI generated

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

Maxim Mironjuk - June 01, 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.

CSS Design Patterns

AI generated

CSS Grid: Named Lines and Areas for Readable Layouts

Maxim Mironjuk - 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.

CSS Barrierefreiheit

AI generated

accent-color: Coloring Form Controls Without JavaScript

Maxim Mironjuk - 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.

CSS Barrierefreiheit

AI generated

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

Maxim Mironjuk - 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.

CSS

AI generated

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

Maxim Mironjuk - 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.

CSS

AI generated

CSS Counter: Automatic Numbering Without JavaScript

Maxim Mironjuk - 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.