Safari TP 137 just dropped with unflagged support for :has(). Often dubbed “the parent selector”, :has() is way more than that …
Category Archives: Original Content
The CSS
Broken Hyphens in Chromium 96: An Explanation (and Fix)
In Chrome 96 some fonts render their hyphens as boxes. The fix will ship with Chrome 98, but in the meantime, we can use some CSS to fix it.
Embrace the Platform
Embrace the Platform — My submission for CSS-Tricks’s End of Year series, answering “What is the one thing people can do to make their website better?”
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. …
CSS Custom Properties and !important
What happens when you set !important on a Custom Property? It’s not exactly what you think …
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 …
Continue reading “A first look at container-query-polyfill, a polyfill for CSS Container Queries”
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: …
Continue reading “The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)“
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 …
Gone Diving
As this post gets published I’m on my way to the airport, to go on a 7-day diving holiday in Egypt. Emperor Angelfish, Pomacanthus Imperator, Red Sea, Egypt Under normal conditions about 20 of my buddies from my diving club Bubbledivers would join, but this year is different. Because we were not certain if and …
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 …
Continue reading “CSS Full-Height Slideshow with Centered Slides thanks to grid-auto-rows“