web.dev Community Highlight

As part of Designcember, Rachel Andrew is doing a round of interviews with “people who are doing interesting things in the community with CSS”. I was taken by surprise when Rachel mailed me some time ago, asking if she could ask me a few questions. The result is a Community Highlight on the web.dev website. …

A first look at container-query-polyfill, a polyfill for CSS Container Queries

Surma has been working on container-query-polyfill, a lightweight polyfill for CSS Container Queries. Let’s take a look at how it works and how it differs from cqfill … What Unlike cqfill —which was covered here before— this Polyfill for Container Queries: Does not require you to declare a separate Custom Property –css-contain that duplicates the …

The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)

Just before I left on holiday, the 2nd article I wrote for CSS-Tricks got published. In it, I take a look at the JavaScript side of the Scroll-Linked Animations specification. With WAAPI + ScrollTimeline, a typical “progressbar as you scroll” can be coded like this: const myScrollTimeline = new ScrollTimeline({ source: document.scrollingElement, orientation: 'block', scrollOffsets: …

20 years of Bram.us

Origin story of how bram.us came to be (and more) — a tale about frietkoten, dial-up internet, static HTML, ICQ cracks, a personal blog gradually evolving into a tech blog, … Table of Contents Frietkoten The very first Cyber Frietkot Discovering view-source (1997) Getting started with bramus.be (2001 — 2005) The Middle Ages: Moving to …

CSS Full-Height Slideshow with Centered Slides thanks to grid-auto-rows

Recently I saw this tweet float by: CSS experts, I need your help! 👇 I need a container that vertically centers its children and that can be scrollable if necessary. It should be a single container. Not 2. <div class="container"> <item>Vertically centered</item> <item>Vertically centered</item></div> — Álvaro Trigo 🐦🔥 (@IMAC2) September 24, 2021 Now that sounds …