Modern-day samurai kneeling in traditional armor, sword in hand, against a vibrant wall of multicolored paint splashes — symbolizing the fusion of ancient warrior spirit with contemporary creativity.

Articles tagged with "CSS"

Mixins: From Preprocessors to Native CSS

blogComic style representation of Michaël Vanderheyden throwing ninja star representing mixins to shatter code blocks filled with repetitive CSS properties

Native CSS mixins in Chromium: practical examples, runtime differences vs Sass/Less, flag-based testing, DevTools gaps, and where the draft spec goes further.

13 min read • 1,574 words

decoding=async can break multipage view transitions

note

Turns out optimizing for performance can actually harm user experience... Did you know that decoding "async" can break multipage View Transitions? When a view transition is triggered, the browser captures a snapshot of the new page to animate from. If an image is still decoding asynchronously at tha...

headingoffset Is Coming: How to Prepare Today

blogComic-style illustration of Michaël Vanderheyden giving a thumbs-up while holding the Firefox logo. In the background, a flat screen displays HTML code demonstrating how the new headingoffset attribute dynamically shifts nested heading levels.

With headingoffset starting to land in browsers, learn how to prepare now using polyfills, safe CSS fallbacks, and accessibility-first heading styling.

7 min read • 819 words

Grid Lanes, Subgrid, and No Extra Wrappers

blogComic-style illustration of Michaël Vanderheyden slashing the JavaScript logo with a katana

A narrative walkthrough of how grid lanes, subgrid, and anchor positioning let me remove wrapper-heavy CSS workarounds as a progressive enhancement.

11 min read • 1,321 words

Scroll-Driven Animations and Test Automation

blogCartoon-style developer at a standing desk scratching his head in confusion while looking at code on a monitor, struggling to make visual test automation work with scroll-driven animations.

Scroll-driven animations break test automation. Learn why SDAs cause false positives in accessibility testing and discover practical solutions.

11 min read • 1,304 words

You don’t need JS for that

workshopComic-style illustration of Michaël Vanderheyden slashing the JavaScript logo with a katana

An internal 90-minute Atos workshop where live coding demos showed how modern HTML and CSS can replace heavy JavaScript with better a11y and performance.

From Skeletons to Smooth Reveals: A Case for the :complete pseudo-class

blogThe CSS logo in front of a skeleton UI template

Why the web needs a :complete (or resource state) pseudo-class: to replace JS skeleton/loader hacks with declarative CSS for images, avatars & performance.

8 min read • 1,039 words

Mixins: the good, the bad, the ugly…

blogThe less and SCSS logos surrounding the CSS logo

Explore the best practices for using CSS mixins in SCSS and LESS. Learn when to use mixins effectively, common pitfalls to avoid, and modern alternatives.

10 min read • 1,204 words