Skip to content
rArecoveryArea
  • About
  • Work
  • Tools
  • Blog
Menu
  • About
  • Work
  • Tools
  • Blog

Category

CSS

2 posts in this category.

  1. Home
  2. CSS

Posts

A three-step checkout — Cart, Delivery, Payment — with the progress bar hidden only on Payment via a single reactive .checkout-steps:has(.step:last-child[aria-current=step]) rule

CSS·30 Jun 2026

Hide an element on just one step of a client-side checkout with :has()

An A/B test that had to remove the progress bar on the final checkout step only — on a checkout that re-renders itself. Why the JS approach kept losing, and the one reactive CSS rule that won.

A before/after of a fixed-height label box: all-caps text riding high inside the box, then optically centred with CSS text-box-trim.

CSS·3 Jun 2026

Fix vertical text alignment in a flex box with CSS text-box-trim

A fixed-height label whose all-caps text looked too high — even though getBoundingClientRect() swore it was centred. Why the box lies, how to measure the actual glyph ink, and the text-box-trim property that finally fixed it.

Office

Nijverheidstraat 11-1
7511 JM Enschede
The Netherlands

Mission

Building a more elegant, accessible internet through precise experimentation and performance engineering. Toward an empathic, sustainable future where technology serves people, not the other way round.

Elsewhere

  • GitHub
  • LinkedIn
  • RSS feed
© 2026 Pascal Louwes · reboot. rethink. recoveryArea. ·Privacy