Eric Meyer
As seen in:
Slate,
The Daily Wildcat,
The Next Web,
St. Louis Post-Dispatch,
css-tricks.com,
Bangor Daily News,
Le Progrès,
SHRM HR News,
Law360,
A List Apart
and
Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Eric Meyer
My Interop 2027 Rankings
The proposal period for Interop 2027 closed in late September, which means the Interop team is now in the process of working through all the proposals and ultimately deciding which will be taken on next year. Part of that process is looking at “developer signals”, which is a loose amalgamation of “State of…” survey results, feedback gathered by developer relations teams, blog posts, YouTube videos, and so on.
Chester Theatre Group presents "The Antelope Party"
Published by New Jersey Stage originally published: 09/22/2026 (CHESTER, NJ) -- Chester Theatre Group presents The Antelope Party by Eric John Meyer weekends from October 10-24, 2026. The play centers around a group of bronies [adult fans of the My Little Pony: Friendship is Magic TV show] navigating through the slow creep of American populism, fascism and paranoia. Will the meaning of Friendship remain intact, or shift with new cultural norms?
In situ Syntax Highlighting in macOS Applications Like Keynote
Earlier this month, I returned to CSS Day for the first time since 2018 to deliver my first in-person talk since 2022. “Forging Our Own Paths” should be available at some point; in the meantime, for the six or seven people in my audience who might need to do something similar, I’d like to share a small macOS workflow I developed to make syntax-highlighting code blocks in situ in Keynote a lot simpler.
Eighteen
Today is very much like it was twelve years ago, warm but not hot and cool in the shade, the sky a kind of clear you don’t often get in Cleveland. It felt that way from dawn, and when I went back to check the weather for June 7, 2014, which is a thing you can so easily do now, the feeling was validated. I find myself thinking less of that day and more of the day of her funeral. Sitting with my sister and father, giving them contingency instructions. The masses of people.
Accessible (I Think) Split-Cell Table Headers
My colleague Chris Griffith, with whom I collaborated to put The Effects of Nuclear Weapons, Third Edition (1977) online, is also a spaceflight enthusiast (and an urban trails hiker: check out his new book!). He recently asked me how I would mark up a table with a split diagonal header cell; specifically, this one from the Apollo 16 documentation: The top left corner of the page in question.
Canvas-ing the Web
Over the years, I’ve created an experiment or two that drew stuff to a <canvas> element: a wave function collapse experiment here, a crystallizing palette there. After a while, I found a way to wire up a button so that clicking it would save the canvas’s contents to my computer as a PNG file. Pretty cool, I thought. Can I do the same thing with HTML+CSS structures? First I generated it on a canvas, then I clicked a button to save it. Turns out, no.
Targeting by Reference in the Shadow DOM
I’ve long made it clear that I don’t particularly care for the whole Shadow DOM thing. I believe I understand the problems it tries to solve, and I fully acknowledge that those are problems worth solving. There are just a bunch of things about it that don’t feel right to me, like how it can break accessibility in a number of ways.
Custom Asidenotes
Previously on meyerweb, I crawled through a way to turn parenthetical comments into sidenotes, which I called “asidenotes”. As a recap, these are inline asides in parentheses, which is something I like to do.
Parenthetical Asidenotes
It’s not really a secret I have a thing for sidenotes, and thus for CSS anchored positioning. But a thing I realized about myself is that most of my sidenotes are likely to be tiny asides commenting on the main throughline of the text, as opposed to bibliographic references or other things that usually become actual footnotes or endnotes. The things I would sidenote currently get written as parenthetical inline comments (you know, like this). Asidenotes, if you will.
Bookmarklet: Load All GitHub Comments (take 2)
What happened was, I wrote a bookmarklet in early 2024 that would load all of the comments on a lengthy GitHub issue by auto-clicking any “Load more” buttons in the page, and at some point between then and now GitHub changed their markup in a way that broke it, so I wrote a new one. Here it is: GitHub issue loader (20250913) It totals 258 characters of JavaScript, including the ISO-8601-style void marker, which is smaller than the old version.
No, Google Did Not Unilaterally Decide to Kill XSLT
It’s uncommon, but not unheard of, for a GitHub issue to spark an uproar. That happened over the past month or so as the WHATWG (Web Hypertext Application Technology Working Group, which I still say should have called themselves a Task Force instead) issue “Should we remove XSLT from the web platform?” was opened, debated, and eventually locked once the comment thread started spiraling into personal attacks.
To Infinity… But Not Beyond!
Previously on meyerweb, I explored ways to do strange things with the infinity keyword in CSS calculation functions. There were some great comments on that post, by the way; you should definitely go give them a read.
I was on one of my rounds of social media trawling, just seeing what was floating through the aether, when I came across a toot by Andy P that said: Fun #css trick: width: calc(infinity * 1px); height: calc(infinity * 1px); …and I immediately thought, This is a perfect outer-limits probe! By which I mean, if I hand a browser values that are effectively infinite by way of theinfinity keyword, it will necessarily end up clamping to something finite, thus revealing how far it’s able or willing...
Masonry, Item Flow, and… GULP?
There’s a layout type that web designers have been using for a long time now, and yet can’t be easily done with CSS: “masonry” layout, sometimes called “you know, like Pinterest does it” layout. Masonry sits sort of halfway between flexbox and grid layout, which is a big part of why it’s been so hard to formalize. There are those who think of it as an extension of flexbox, and others who think it’s an extension of grid, and both schools of thought have pretty solid cases.
CSS Naked Day 2025
I’m a little (okay, a lot) late to it, but I’m now participating in CSS Naked Day — I’ve removed the site’s styles, except in cases where pages have embedded CSS, which I’m not going to do a find-and-replace to try to suppress. So if I embedded a one-off CSS Grid layout, like on the Toolbox page, that will still be in force. Also, cached files with CSS links could take a little time to clear out. Otherwise, you should get 1990-style HTML.
CSS Wish List 2025
Back in 2023, I belatedly jumped on the bandwagon of people posting their CSS wish lists for the coming year. This year I’m doing all that again, less belatedly! (I didn’t do it last year because I couldn’t even.
Design for Real Life: Online for Free AND On Sale for Money
Design for Real Life is now available, for free, in its entirety, at dfrlbook.com. If you like what you read and want a personal copy, or just to support Sara and me, print-on-demand and ePub versions are also available from a number of sources. There are some countries where the book is not yet available, which we hope will be fixed soon. We’ll update the “Buy the book” page as appropriate.
Announcing BCD Watch
One of the things I think we all struggle with is keeping up to date with changes in web development. You might hear about a super cool new CSS feature or JavaScript API, but it’s never supported by all the browsers when you hear about it, right? So you think “I’ll have to make sure check in on that again later” and quickly forget about it. Then some time down the road you hear about it again, talked about like it’s been best practice for years.
Design for Real Life News!
If you’re reading this, odds are you’ve at least heard of A Book Apart (ABA), who published Design for Real Life, which I co-wrote with Sara Wachter-Boettcher back in 2016. What you may not have heard is that ABA has closed up shop. There won’t be any more new ABA titles, nor will ABA continue to sell the books in their catalog. That’s the bad news.
A Decade Later, A Decade Lost
I woke up this morning about an hour ahead of my alarm, the sky already light, birds calling. After a few minutes, a brief patter of rain swept across the roof and moved on. I just lay there, not really thinking. Feeling. Remembering. Almost sixteen years to the minute before I awoke, my second daughter was born. Almost ten years to the same minute before, she’d turned six years old, already semi-unconscious, and died not quite twelve hours later. So she won’t be taking her first solo car drive today.
Bookmarklet: Load All GitHub Comments
What happened was, Brian and I were chatting about W3C GitHub issues and Brian mentioned how really long issues are annoying to search and read, because GitHub has this thing where if there are too many comments on an issue, it snips out the middle with a “Load more…” button that’s very tastefully designed and pretty easy to miss if you’re quick-scrolling to try to catch up.
Once Upon a Browser
Once upon a time, there was a movie called Once Upon a Forest. I’ve never seen it. In fact, the only reason I know it exists is because a few years after it was released, Joshua Davis created a site called Once Upon a Forest, which I was doing searches to find again. The movie came up in my search results; the site, long dead, did not. Instead, I found its original URL on Joshua’s Wikipedia page, and the Wayback Machine coughed up snapshots of it, such as this one.
2023 in (Brief) Review
I haven’t generally been one to survey years as they end, but I’m going to make an exception for 2023, because there were three pretty big milestones I’d like to mark. The first is that toward the end of May, the fifth edition of CSS: The Definitive Guide was published. This edition weighs in at a mere 1,126 pages, and covers just about everything in CSS that was widely supported by the end of the 2022, and a bit from the first couple of months in 2023.
Once Upon a Browser
Once upon a time, there was a movie called Once Upon a Forest. I’ve never seen it. In fact, the only reason I know it exists is because a few years after it was released, Joshua Davis created a site called Once Upon a Forest, which I was doing searches to find again. The movie came up in my search results; the site, long dead, did not. Instead, I found its original URL on Joshua’s Wikipedia page, and the Wayback Machine coughed up snapshots of it, such as this one.
Three Decades of HTML
A few days ago was the 30th anniversary of the first time I wrote an HTML document. Back in 1993, I took a Usenet posting of the “Incomplete Mystery Science Theater 3000 Episode Guide” and marked it up. You can see the archived copy here on meyerweb. At some point, the markup got updated for reasons I don’t remember, but I can guarantee you the original had uppercase tag names and I didn’t close any paragraphs.
Mistakes Were Made
Published just now Late last week, I posted a tiny hack related to :has() and Firefox. This was, in some ways, a mistake. Let me explain how. Primarily, I should have filed a bug about it. Someone else did so, and it’s already been fixed. This is all great in the wider view, but I shouldn’t be offloading the work of reporting browser bugs when I know perfectly well how to do that. I got too caught up in the fun of documenting a tiny hack (my favorite kind!) to remember that, which is no excuse.
Prodding Firefox to Update :has() Selection
I’ve been doing some development recently on a tool that lets me quickly produce social-media banners for my work at Igalia. It started out using a vanilla JS script to snarfle up collections of HTML elements like all the range inputs, stick listeners and stuff on them, and then alter CSS variables when the inputs change.
An Anchored Navbar Solution
Not quite a year ago, I published an exploration of how I used layered backgrounds to create the appearance of a single bent line that connected one edge of the design to whichever navbar link corresponded to the current page. It was fairly creative, if I do say so myself, but even then I knew — and said explicitly! — that it was a hack, and that I really wanted to use anchor positioning to do it cleanly.
Memories of Molly
The Web is a little bit darker today, a fair bit poorer: Molly Holzschlag is dead. She lived hard, but I hope she died easy. I am more sparing than most with my use of the word “friend”, and she was absolutely one. To everyone. If you don’t know her name, I’m sorry. Too many didn’t. She was one of the first web gurus, a title she adamantly rejected — “We’re all just people, people!” — but it fit nevertheless. She was a groundbreaker, expanding and explaining the Web at its infancy.
Designing the Igalia Chats Logo
One of the things I’ve been doing at Igalia of late is podcasting with Brian Kardell. It’s called “Igalia Chats”, and last week, I designed it a logo. I tried out a number of different ideas, ran them past the Communication team for feedback, and settled on this one. And there you have it, the first logo I’ve designed in… well, in quite a while. My work this time around was informed by a few things. Podcast apps, sites, etc. expect a square image for the podcast’s logo.
Guest Essay: Democrats’ support of Biden family may do more to help Trump campaign bid
Democrats haven’t learned much since 2016. Recent developments from The White House, the Department of Justice, and party leaders are creating an environment eerily similar to the one which originally propelled Donald Trump to office. With the incumbent President’s approval rating now lower than that of Trump’s during this same period of his term, and as Trump widely leads the Republican primary field, a nightmare scenario for Democrats is brewing. Much of it is the Democrats’ own doing.
First-Person Scrollers
I’ve played a lot of video games over the years, and the thing that just utterly blows my mind about them is how every frame is painted from scratch. So in a game running at 30 frames per second, everything in the scene has to be calculated and drawn every 33 milliseconds, no matter how little or much has changed from one frame to the next. In modern games, users generally demand 60 frames per second.
A quick introduction to the WPE WebKit Project
As mentioned in a previous post here and also in the related post from the WPE WebKit blog, the WPE project is a port of WebKit which, at the time of this writing, is responsible for bringing WebKit to millions of embedded devices around the world: you can find it in set-top-boxes, cars, cooking machines, and smart home appliances, to name a few examples.
From ABC’s to 9999999
The other week I crossed a midpoint, of sorts: as I was driving home from a weekly commitment, my iPhone segued from Rush’s “Mystic Rhythms” to The Seatbelts’ “N.Y. Rush”, which is, lexicographically speaking, the middle of my iTu — oh excuse me, the middle of my Music Dot App Library, where I passed from the “M” songs into the “N” songs. See, about a year or so ago, I took inspiration from Kevin Smokler to set about listening through my entire music library alphabetically by song title.
Ventura Vexations
I’ve been a bit over a month now on my new 14” MacBook Pro, and I have complaints. Not about the hardware, which is solid yet lightweight, super-quiet yet incredibly fast and powerful, long-lived on battery, and decent enough under the fingertips. Plus, all the keyboard keys Just Work™, unlike the MBP it replaced! So that’s nice. No, my complaints are entirely about the user environment.
Echoed Whisper
The two videos I was using Whisper on have been published, so you can see for yourself how the captioning worked out. Designed as trade-show booth reel pieces, they’re below three minutes each, so watching both should take less than ten minutes, even with pauses to scrutinize specific bits of captioning. As I noted in my previous post about this, I only had to make one text correction to the second video, plus a quick find-and-replace to turn “WPE WebKit” into “WPEWebKit”.
County issues formal disaster declaration
By PHYLLIS ZORN and ERIC MEYER Staff writer Last week’s grass fire that consumed 240 acres near 270th and US-56/77 was declared a disaster Monday by county commissioners. The fire, reported at 1:33 p.m. Wednesday, was a controlled burn that got out of control. In all, 10 fire departments — two from outside the county — fought the blaze. Initially, Lincolnville firefighters were called, but none were available for more than an hour. Marion firefighters were summoned instead.
Peerless Whisper
What happened was, I was hanging out in an online chatter channel when a little birdy named Bruce chirped about OpenAI’s Whisper and how he was using it to transcribe audio. And I thought, Hey, I have audio that needs to be transcribed.
An Overview of the Discovery Process in Thai Civil Court Proceedings
For most in-house counsel, the thought of defending a civil case brought against the company is typically an unpleasant proposition—even more so when the matter is proceeding in a foreign or unfamiliar jurisdiction in which the substantive law and court procedures differ from those in one’s home jurisdiction. But different procedures, even if unfamiliar, can sometimes be advantageous to a defendant.
A Leap of Decades
I’ve heard it said there are two kinds of tech power users: the ones who constantly update to stay on the bleeding edge, and the ones who update only when absolutely forced to do so. I’m in the latter camp. If a program, setup, or piece of hardware works for me, I stick by it like it’s the last raft off a sinking island.
A Leap of Decades
I’ve heard it said there are two kinds of tech power users: the ones who constantly update to stay on the bleeding edge, and the ones who update only when absolutely forced to do so. I’m in the latter camp. If a program, setup, or piece of hardware works for me, I stick by it like it’s the last raft off a sinking island.
Playlist Wishes
Last week I published a CSS Wish List, which reminded me I have another wish list rattling around in my head, and I’d like to throw out into the world. This one is for an MP3 player in the vein of WinAmp or Apple Music, but with slightly more DJ-like capabilities in its playlists. To wit: The ability to set the playback volume for a track in a playlist. Right now, if I adjust the playback volume of a track to match the others on a playlist, I’m changing its volume in every context.
CSS Wish List 2023
Dave asked people to share their CSS wish lists for 2023, and even though it’s well into the second month of the year, I’m going to sprint wild-eyed out of the brush along the road, grab the hitch on the back of the departing bandwagon, and try to claw my way aboard. At first I thought I had maybe four or five things to put on my list, but as I worked on it, I kept thinking of one more thing and one more thing until eventually I had a list of (checks notes) SIXTEEN?!?!? What the hell.
Minimal Dark Mode Styling
Spurred by a toot in reply to a goofy dev joke I made, I’ve set up a dirty-rough Dark Mode handler for meyerweb: @media (prefers-color-scheme: dark) { html body {filter: invert(1);} /* the following really should be managed by a cascade layer */ html img, html img.book.cover, html img.book.cover.big, html #archipelago a:hover img {filter: invert(1);} html #thoughts figure.standalone img { box-shadow: 0.25em 0.25em 0.67em #FFF8; } } It’s the work of about five minutes’ thought and typing, so I...
Styling a ‘pre’ that contains a ‘code’
I’ve just committed my first :has() selector to production CSS and want to share it, so I will! But first, a little context that will feel familiar to nerds like me who post snippets of computer code to the Web, and have markup with this kind of tree structure (not raw source; we’d never allow this much formatting whitespace inside a <pre>): <pre> <code> {{content goes here}} </code> </pre> It’s nicely semantic, indicating that the contents of the <pre> are in fact code of some kind, as...
Highlighting Image Accessibility on Mastodon
Some time ago, I published user styles to visually highlight images on Twitter that didn’t have alt text — this was in the time before the “ALT” badge and the much improved accessibility features Twitter deployed in the pre-Musk era. With the mass Mastodon migration currently underway in the circles I frequent, I spend more time there, and I missed the quick visual indication of images having alt text, as well as my de-emphasis styles for those images that don’t have useful alt text.
How to Verify Site Ownership on Mastodon Profiles
Like many of you, I’ve been checking out Mastodon and finding more and more things I like. Including the use of XFN (XHTML Friends Network) semantics to verify ownership of sites you link from your profile’s metadata! What that means is, you can add up to four links in your profile, and if you have an XFN-compliant link on that URL pointing to your Mastodon profile, it will show up as verified as actually being your site. Okay, that probably also comes off a little confusing.
PS Events: The Energy Revolution (Day 1) | by Eric Meyer - Project Syndicate
We hope you're enjoying our PS content Subscribe To have unlimited access to our content including in-depth commentaries, book reviews, exclusive interviews, PS OnPoint and PS The Big Picture, please subscribe
Masked Gradient Dashed Lines
I talked in my last post about how I used linear gradients to recreate dashed lines for the navlinks and navbar of wpewebkit.org, but that wasn’t the last instance of dashing gradients in the design. I had occasion to use that technique again, except this time as a way to create a gradient dash. I mean, a dashed line that has a visible gradient from one color to another, as well as a dashed line that’s constructed using a linear gradient.
A Dashing Navbar Solution
One of the many things Igalia does is maintain an official port of WebKit for embedded devices called WPE WebKit, and as you might expect, it has a web site. The design had gotten a little stale since its launch a few years ago, so we asked Denis Radenković at 38one to come up with a new design, which we launched yesterday. And I got to turn it into HTML and CSS! Which was mostly normal stuff, margins and font sizing and all that, but also had some bits that called for some creativity.
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Eric
Contact Eric, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack