The CSS OG Eric Meyer. 1994 CSS, JS in Fridges, Tailwind, and Web Standards

may run.

We'll hire or or companies will hire Igalia to implement features in the different,

Allowed by a, I also managed to get That's the that's a proposal which could let you do a very similar thing, And so, like, different browsers,

JS that how you say it? ESLint

me reading a document. I I I found the the link, by the way, to the oral CSS press release from 1998. I'll link up in the episode so people can give that a a a read. Yeah. There we go. I I wanna keep going on that theme of,

it was many years ago on the podcast, we were talking about,

Often,

there is definitely renewed interest in Please nobody take anything I just said as, oh, CSS is gonna let you change volume and and pitch because maybe that doesn't happen. Clip that. Right. No. You can keep it in because there to sort of be able to keep up. It's like, oh, this week, the working group had 4 resolutions, and they were about these things. And Debate This year, And if you are not in that situation, you still have, you know, support ad supports feature queries coming in JavaScript?

browser vendors

So you work for Agalia.

like, often

And Brian, he's like, hey. Like, we've actually implemented

a machine is this tool good or bad in in a given situation? But like, you're yeah.

I would want Wikipedia pages read to me rather than Me having to sit there

engines because they need it for their product.

And it probably I they're not gonna just revive in the same way that you could you can have before and after So that has to just keep getting it has to be winnowed down, and there are gonna be proposals and, Like, it makes their CSS And then

spaces where CSS

most likely.

where else does WebKit run?

Let's say. Or you could put a little fanfare trumpet before in each one What should it be that comes back to the working group? The working group makes a decision. Usually, then a test Yeah. But, yeah, there were, I mean, there were, So that selector nesting from that meeting, which is a really nice way, leaving that aside, there were people who said, you know, There should always be an ampersand or

like, the amount of

the reason why I first came

is growing. And, Like, what makes sense to you? What lets you, But Style equals, things to tackle ESLint Interop.

which is what I was referred to there, but It's often a matter of Something about What we would now call bug reports, but in those days Wes sending me email saying, oh, this one's wrong. Like, you did not understand how that particular thing worked, So I would fix it, and then Todd Farner created the acid Some people had some really long conversations about it, but Fingers crossed that they nailed it because one of the concerns was Yeah. And the same thing happens at Chrome.

So, proposals.

content that's consumed in that manner of being read And, you know, people look at Google and Apple, and they're like, there's no excuse. They have the money to implement anything they want. Yeah. And that's not how it works. Right? I had to come up with an entire, Yeah.

or whatever.

just like alternative

Not that anybody uses pikas or points, but whatever. That in some ways, that that makes it more sort of dear to my heart because it was completely, But, yes, I think I think that's part of it.

That's

that And almost nothing ever supported it. Like, emacs w three is the only implementation I'm aware of that supported engine makers on the CSS Working Group who participate That's Chrome and JavaScript.

Here's the 5th as Wes,

yeah. The 5th edition is at least 3 of the 1st edition.

I started to create these charts, these tables Right?

This this was, like, 400 pages. This is Style equals like, how do we just make people aware that

They said, yes. Wow. It's wild how that stuff kinda snowballs. Right?

1100 and some. Yeah. And back then, you it was so as Mosaic, which eventually became Netscape Navigator,

but, like, IE wasn't a thing back then. Wes that The only browser at the time? At the point where I encountered CSS,

Now at the time, I was only listing the properties in CSS Yeah. Had very strong opinions on, you know, how to do the syntax in native CSS way back in the day.

For the for anyone who like, the easy way to visualize this is imagine if you had caniuse.com it was and he said, I didn't even know that existed.

but then the guys at Netscape heard about it. And so Netscape Navigator 4, they started to implement stuff, Margin or padding or whatever. Yeah. And I think I think the the the other one that I think for the sole reason of Wes already have these other things.

I color coded them. And I just started publishing this for free because I was like, I have this test Scott, defer on the second question because I don't know that I could Say what all tailwind has.

which is 1996 Etcetera, etcetera, etcetera. It gets very complicated, but this is part of the reason why browsers are so much more consistent,

were having lunch with the web review people and said, do you know anybody who knows anything about the CSS thing? Because we think that maybe we should Write a book, publish a book or something.

Yeah. Not that it was a lot. I mean, but it Sure. Still, they were gonna pay me to write these articles. So There will still be bugs. There will still be refinements.

that that has benefited from that process so that by the time it comes out, it's pretty stable. It's not nothing's perfect. It's not perfect.

You could just tell by the lift.

trying to figure out, like, what browsers And both companies And here, let me show you a visual difference for for those. So here's the 1st edition.

edition.

They're they're gonna pay me for this? from the various stakeholders

just over 70 thing exists? but it's a fair number of people. With CSS, I'm also gonna give, That was because there had been this Snowballing, as you said, 100%, yes.

I think just over a 100 proposed here's what margin is, and here's a property for it. Like, The SpaceX's with actual SaaS websites 3, you have all these tests. Not only do you have the detailed specification, but you have all these tests to test against. And you might, For that matter, Not necessarily ESLint. Really? But it's, yeah, it's it's SVG.

And that's

And then, yeah, like, every you gotta set aside an hour every week or 2 hours or whatever it is to go through those meeting notes. Like the CSS working group, after every call on the blog, they publish the resolutions from that or SaaS driven websites.

or whatever. Well, I I don't think anyone's complaining about,

figure that out. Right? This is not the proof for that. So it was cut down to 71, and then it's been getting winnowed down further because

the rate at which stuff is dropping in the browser these days, it's it seems like every single day Wes get something new. So Well, there's a few people complaining it's coming too fast, which I always Oh, yeah. I kind of appreciate because

they don't have infinite resources.

But they don't have the engineering resources. Like, they don't have an engineer who's debate. And like you say, if you just watch sort of the conversation, you certainly can do that.

Engine teams

Buy in from the various browser vendors, then

a goodly amount of resources, Didn't think off screen Canvas Some of the initial implementations were actually done by Igalia in Chrome.

are tiny parts Yeah. It Wes it wasn't densely technical the way w three c pnpm are now.

Right? If a if a new thing is dropping, or not, if you're just if everything ESLint to me is and Gecko teams implemented it, and Like, a path has already been blazed.

It's kind of an underappreciated to their way of doing things, and so don't use that tool. I mean,

topic a just has more

you know, This would be a really cool technology to implement.

The WebKit styling cues for Auto sharpening knife block with a little LED screen, and it's probably running Wes kit or chrome or whatever, And my spicy take is that a bunch of us Being able to provide But, yeah, there are there The styles is this browser browser just not recognizing what padding is? Just because of where things fell Node development cycles and yada yada yada. Doesn't from various, that could cause breakage I wanna mix that color with opacity element style equals blah blah blah blah blah blah blah. And, like, the main style sheet would have almost nothing in it.

And, you know, they see The web platform tests, which is where most of this lives, is just a technology that there's a there's a And, also, within the working group, for the libraries, things that have been done through preprocessors and through extensions or mix ins or whatever the hell they're called. I don't actually use preprocessors myself, not because I think that they're terrible. I just don't.

and Chromium

doing this stuff, tests are constructed, in an environment, you wanna be able to hear content. You don't wanna be you know, have the monitor strapped to your face Just to read documents,

effort in general, are some form of embedded computer, it's WebKit. There are kitchen appliances in some cases contributed

But, No specification.

Add it to the platform, and all this stuff just works. It it's pretty incredible.

the, hey. If you support container queries, Like, you just you just create these JavaScript based assertions, year and a half ago, manage its tasks. Seriously? Yep.

at the time that it started to, drivers of things so container queries owe a lot to Miriam Suzanne hopefully is coming. It's still being discussed.

or,

The 2 browser team you know, 2 or 3 brow however many browser teams went off and implemented what we decided, but they came to different conclusions or, like, The, you know, the the way

and try to figure out how to duplicate it and to to put it in? It's it's while to

By the time stuff has come out from there, it's already been through this process of And I was like, yeah. Whatever.

which shipped in Right? It's another one of his full enthusiasms. But then relatively like, nobody's ever gonna use this, but we're still, Damn it. We're gonna get it right. Yeah. As part of Could handle all 71 of those topic areas in the space of a Yarn. It's just not feasible.

And, performance of SVG rendering about you Node, Which again, To do I still recall with fondness the time that I explained to an engineer who shall remain nameless At Netscape, that, picas did not mean didn't support at all or whatever.

the the similar flags in in Firefox

it it does feel like container queries

think about all the possible edge cases. And then you have to go into the, like, low level language that the browser rendering engine is written in And figure out how to catch those specific use cases. It's funny because Wes and I were going in a very similar spot. I was just thinking about the conversation around container queries long before they arrived. And how we talked about them existing and potentially existing and then, you know, just kind of disappeared for a little while, and then,

It it just makes me think, like, it's it's kind of a a miracle that anything

sort of iterative

Popped up, and now we can use them, and we ship them on on our site. You know what I mean? It it it just seems like stuff just is just dropping really fast nowadays. Yeah. I think part of it is this. Part of it is that there are

this sort of churn of, Working on a Internet project and you know it turned out that Webreview it doesn't look anything like the same.

grid track sizing It at least for some of them. I'm not gonna say for all of them, but some of the work that Igalia did at one point was Firms like Igalia to implement stuff sometimes.

The person that has to go through this, like, who came up with this edge case

okay, we decided this.

situations, and so we gotta and Byungwoo Lee, who's a a Gaia employee, Not, I think, because Apple

but it's not as, like, awesome as it could be. Is is this the reason why it seems like things are coming a lot faster nowadays? I mean, you know, we

is able like, that complex is able to get

better view transitions in thing, whatever that decision was. And then, yes, it keeps sort of What you know? And there are a lot of places you can go knowledgeable enough to do the thing from the CSS working group. Other CSS working group members contributed Yeah. I agree. Be even more spoken content because where there's not only recently, we're not the same as the other implementation by, like, this little bit.

And

has first demand for, And they can justify it to management. So, you know, they're out in front on view transitions because view transitions

the initial, After it's sort of been through that whole process, in a chair completely unaware of anything around but,

But a test, but there's a reference rendering image Then that's what led to me actually ending up writing the O'Reilly book was Wes the interface is SVG, Implementation and refinement.

And so good. You're paging down through the channels, and you get that, like, old

being a good steward of the web?

the big panels with the interfaces,

Basically, benefit from that was Flexbox, ship or as Grid did and a lot like, container queries is another example of a of a major technology, which has,

Probably not using web technology.

he worked for an elevator company. And, you know, sometimes you visit these fancy The elevators and tells you there's a little screen. Mhmm. And you can select what floor you want to go to. And it tells you which elevator to go to? Yep. Running embedded

Apparently, in doing it, and so Like, Tim Boland at the National Institute of Standards and Technology helped out, Chris Lilly's,

Just because there was someone available especially because then if you're the 3rd or 4th implementer to implement the technology it was a it was it was a very long time where I was I will never complain You could find it if you looked, And that evolved into the CSS one test suite, certainly been revitalized 5th December, I think It was 30 years ago today I marked up my 1st HTML document. Really? Wow. Wait. 3rd 30 years ago? Because Yesterday, December 4th, was the 28th

Yeah. On a spaceship. The James Webb Space Telescope But that And then was you could But, So I feel like the 1st major like, with HAZ, certainly, you can have debates about, you you know, does this tool make this site we gotta do we do exactly that? Each version of the editor's draft to the specification, you you would see that syntax changing, right, in HTML, style equals blah blah blah blah blah.

So a Galio will be hired to implement some of those features. And I'm always curious about that. Like Apple has been killing it in the CSS

Create adblock, adblock plus. So IO, realize what you're envisioning, maybe kitchen knives, ability to style markers, but it's not as Nearly And, yeah, a lot of us still sort of reflexively avoid it because it was so sort of buggy between, some of it incorrectly.

The Sony PlayStation Yeah. And it's mostly in Those are absolutely

they seem to be sort of erratic with, like, being the 1st to implement a lot of stuff. And I often wonder, and I'm curious if you know anything about that. Is that because they're like, oh, we need Largely the case. Yeah. Maybe not print CSS.

I don't think at least. Yeah. Yeah. There's probably probably somebody who shipped, like, at Keyes Western Reserve University in Cleveland, Ohio, which is where I still live, and that's where I graduated from. And I, as soon as I graduated, I managed a job on a theory that I would try to make back all of the money I had given them intuition, Like, automotive and, 1994 JS what I'm talking about here. Yeah. In fact, that run on embedded WebKit.

Right? So, you know, sort of carry major parts of CSS in their heads. And so on strong elements or headings.

the new CSS color profiles

to do the thing.

of late, I think. They've got a lot better Vercel thanks to Jen Simmons.

Mhmm. Because maybe

chrome. Pretty sure.

right, in the in the in the embedded flavor. Yeah. I I had talked to somebody at a conference once, and

The view, I remember. I remember Evan Evan Yu was like,

And, who you referred to earlier. The this challenge Brian and I think about, it's all spelled out like this is what it should do. And if there's a particular algorithm to figure it out, this is what that is, You know, so for, like, grid layout. But at the time, I I would say the same about the Karum team or the Gecko team for that matter. You know? Dude, clearly, you didn't read my book, which I get because it's 1100 pages, but it's in there.

they wanted a parent selector, an ancestor selector, items on it Because then Apple is not the WebKit team. Apple is way more than the WebKit team. Google is not the Chromium team. They're so you know, the the browser

she works for Apple, so good luck. Yeah. It's Yeah. Yeah. Right. Yeah. I I it's specifically, Bruce Lawson one, which is, like, like, discuss, implement,

So I'm curious,

realm a lot lately, and,

a fast food restaurant,

It's

Blue screens of death in hilarious places. I still because I always thought that was really fascinating. But now I'm starting to see it's not blue screens of death.

the web is running

That's SVG.

We've been trying to trying to get her on the on the show. Maybe you can, get us an in. I mean, all of a sudden, you see, like, a little chrome warning on it. There's it just pops up absolutely everywhere. And,

And, you know, being first is often like cable set top boxes Color mixing like you can do in Sass, contacting you and saying Wes would love to publish these at Webreview.

that,

So, you know, I mean, the WebKit team has Trying to select ancestors.

that,

chrome pop ups or the bookmark bar popped down by accident and Death tools bar or something. Yeah. You're at, like,

It's amazing all of the spots that it goes to, and I always love seeing that. Like, I used to collect photos of

my Node is running on a spaceship.

for something So they they throw it in there so that they can use it. Is that why, or it's just because they're

Dragon capsule,

Most, it has now recently, 70 properties or something. It wasn't by the time things come out from behind the the developer flags, the the, like, the experimental web features flag in Chrome, that are just they're not accepted for some people, thing x, tailwind, react, whatever it is, is going to really mesh with how they approach things.

Did that initial sort of prototype implementation of Chrome.

Well, Chromium, technically, because it wasn't shipping in Chrome. But that's, Like, the the prototype implementation, huge, but it was still Right? And then the next year, there were more, and the next year, there were more. We there were over 100 But just trying to keep up with in quotes, you put the period, or at least not without, If we ship it so it looks exactly like SaaS, in 5 years, will we regret that decision? Yeah. Well, Here's another question I have on the same vein is like in JavaScript, we got there's no way that any browser team You probably if you're You know, I have a color, and then for this other, right.

Gaia was hired to do that by the company that, We all need Node have to go away and think about that and don't leave things so

Other than just, like, you sit down in front of your computer or open up a browser on your phone? So many.

you would be able to provide styling information to, like, raise the volume

Not it's not efficient, and it's not I don't think it's maintainable. Now I know that there are people who use Tailwind and say it's the most maintainable my CSS has ever been. And if that's the case, like, I guess, thumbs up. The little that I've done with Tailwind, it just does not work for me. But Jeremy Keith had a really good post a month or 2 ago for the

if you if you make for the sake of argument the assumption that They all have the same performance and weight outcomes, which, of course, they don't, but for the sake of argument. Yeah. Then it really comes down to, like, what works for you? RGBA, builds.

think JS just a fad JS the fact that people like to write Tailwind,

you know, more quickly and more completely? Yeah. And I I think JavaScript is at that point where there's parts of JavaScript you might never use because you prefer not to use it. But I don't think CSS is there. Right? Like, there's most of CSS. Oh, maybe like, do you have any interesting examples of where

oral CSS, that's been

the the thing that people like about it is that you can write it in line Wes you're actually doing your templating.

I'm going to it's not just applied to this subtree. And, yes, AtScope and is also available and isn't already committed to other stuff.

So my question is 2 part to you. A, what do you think about that? And b, do you think we're ever gonna see an Extension of ESLint CSS to do

I I actually wrote a book once, and I did the whole thing in print CSS. So I have a encyclopedic knowledge of all of the print CSS.

of raising the volume, deepen the pitch or you know? And we're not even you know, like, we're not a 100% confident we can even do all of those in the space of a year.

basically, the 1st official w three c test suite.

too heavy? 1 100 and 40 4th of an inch. They were actually, like, long ago,

where everything would be You Node, and kept shepherding it through the And usually using web technology to render of web standard stuff that that's waiting because there's there's so, yeah, I think I think that's the thing that was learned was

to get, what do I think about that? The spicy topic.

I would like to hear your opinion on that. But,

and they like to write their CSS

But on the first part, that sort of thing becomes it's Chrome.

Ouch.

for whatever reason? There's things kept not working the way that I thought they should from reading the pnpm. And so I started setting up these simple test pages a long and contentious

because there there was a there was a fad for a while, This is many years ago help the university get stuff online, and then Which Yeah. Most many of us remember as, oh, Flexbox, that technology that, and I and I think, Not just for grid, for everything. Uh-huh. Yeah.

Right? Or Tolinski Selectors.

Like, does it slow everything down Yeah. And that's Yeah.

essentially got jQuery, right? Like Wes query selector, all of that stuff. And Now we have Sass ish in in CSS.

all that Tailwind has?

Sort of at a at a assuming Runs on WebKit. Really? As an example. Like, what part of it? The browser or the whole thing? see if we can figure out a way CSS for exactly that, like, churn improving the, There's so much detail that when someone goes to implement mix ins or or this is not where you I was working to just figure out, like, do I understand what margin means? We there's some A colleague, who's also a friend, Right? still a big old, like, yes, Node, partial Buggy is how I coded things, and it was YMPB.

and, Oh, okay. Sorry. Here here's the one that I think is more than a quality of life improvement.

And whatever, and specify the opacity. I can just say, give me that color that I had before

basically, CSS for speech.

Sort of objective measures you can look at and say, That conversation, You could put audio cues before and after something so you could put little dings before and after your hyperlinks, clarify that and etcetera, etcetera, etcetera. But it's not the last of those. And sort of the the last major technology I can think of that didn't, who We're talking this is 1993, And I can see someone saying, yeah. I'm never gonna use animations. Maybe I'll use transitions, but I'm never gonna use animations You know, it can be both.

And one of the big things that's incredibly popular right now that I don't

In line. And I think aside from you don't like the classes and it's too much to muddy up your HTML,

You know, being dragged to it. There's a there's a renewed effort On the Chrome team, I think his most recent one, one One of the things he had in the middle of it was a link to an article about the isolation CSS property,

Okay.

Like, most stuff that gets added to CSS, I go, ah, yeah. I can I can use this? I think certainly,

nested selectors. And it's it's it's sometimes, of those companies that still like, they draw Does it make it nonperformant? for that use case. Wow.

like that.

SAS Yeah. And a lot of that is this this Wes, Implement, test, implement, test, implement, Node.

Like, it's amazing

nobody thought about ESLint selectors.

that the working group a table column, for example, if you have a table column that has a bunch of numbers and some of them have decimals and some don't, you say text align, And then That was quickly cut down to computers and stuff Because each engineer actually, all companies, but since we're talking about Google and Apple, they both hire however long it's been.

or even, like, possible Yeah. I mean, I I and I got some help. Let let me be clear. This is not like a solo, As it turns out, the working group in the case of because some of the proposals were,

authors. Right? Because Yeah. I I appreciate those people doing that, though, because

There is that Node. There's sort of that here's here's a concern, and everyone else says, yeah. That that's a real concern.

The alternative is you ship this thing and everybody goes,

you know, in order to not create future problems or in order to not Dale Doherty at web Webreview and and implement all kinds of, programming team of SAS basically ended up just being in or Uses a 2 uses a 20 year old version of JavaScript to Yeah. He's a lot of pretzies. That's where receipts lies. Nice. Yeah. There are I mean, there are sort of some odd corners.

do we have to go a completely there was, They're already defined. Yeah. But mix, like, mix it to be a little, I've wanted for a really long time. This is gonna seem to fly completely in the face of something I said earlier in this very podcast.

to get exactly the same syntax.

And

The preprocessor Oh. Oh, actually you I do you know everything that the HTML working group has been discussing about HTML in the last year? Do you know? No. Often, we find ourselves pawing through meeting notes just to give updates on things. Yeah. Right. Yeah. So that and that's one way to do it, certainly, is to figure out where the various meeting notes

which is a reflection of that debate.

in preprocessors are there are so many tests, and it's it's interesting. There's a spoken So I know what browsers are doing. Why don't I just put it up there for people? So I did. That led to,

it was shown to be so incredibly popular and powerful So that I shared with a working group. They were super interested. They shared it with browser makers, and it eventually became Right? The the trail has been marked. We may not be able to follow that trail exactly for technical reasons, Yeah.

You Node, one of the voices was and so they were Willing to hire outside. You know, in Chromium, we did the house, and we've done other things as well.

I don't remember exactly, but, like, the SAS community, the actual core Isolation's been there a long time, and it's not Bruce's fault that he didn't know. It's just one of those when I see that, I think, oh, yeah. Isolation.

Yeah. Or Or do we do something that is supposed to be compared to, and they're supposed to be a pixel for pixel match. And you have to be careful which you use and which kind you use. And Some of the older like, the JavaScript tests are more recent, and then sometimes you can't use the JavaScript because it's purely a visual effect, people did start to write, because implementations, but it didn't have this process Which is very similar if, you know, trying to get someone from Google on. That can be a challenge depending on who you're trying to get and what they wanna talk about. But anyway, So they hired Egalia because they wanted, really blew that blew me away. So I got really interested.

no. That it should be As simple as possible, it really used to be a very straightforward syntax, and that was a that was a long yeah, it it keeps going like that.

Very, very similar to that, but it's changed in this one way because of, like, didn't work for half a decade.

you know, the CSS one parsing rules are still in effect. And when they were written 30 year you know, 28 years ago, whatever, we could use that at Google. You know? We can have As a colleague and friend, separate direction? It'll be this completely different syntax that'll have the same result, No working group. Just it would be awesome if browsers did this. It's like, You're in pushing CSS forward. There are

has you can nest your selectors so that instead of having to write out the whole Chain of whatever. You just put your tests

And there were very strong opinions on, not create

forward Right? They're and it's gonna be up to the way they interpret how these particular sentences are put together.

the language itself will have something like nesting of a major deal.

Create problems for past browsers or both. And then there were other people who said, And the problem was always performance, but eventually, the in Interop 2024 the Same way they were in Interop 2023 I I would say, both sides, except I don't think there were just 2 sides.

oh, why didn't they do X, Y, and Z?

Because discussions and the interop A thing that you are interested you that you would be interested in, somebody talks about.

And then people go, like, I'm not actually gonna use the real CSS version because it's not it it doesn't cover these use cases. And I I feel like CSS Nesting nailed it. Like,

if you do your syntax exactly like SAS does It's syntax.

We saw the iterations over the Yarn, and we had a few episodes of, like, oh, yeah, you have to put an ampersand in front, and There's these little gotchas, and all of those gotchas went away to a point where SAS dev can just sit down and start

People,

you know, will create and an engineer who's available and willing in the space of a month in 2017

With maybe, like, a 5 minute little pep talk can start writing nested CSS. That was, I will say,

problems for Right? Yeah. So, And so that's probably a good tool for them. And for other people, it's gonna be some really committed Like SaaS and Wes but that idea JS coming back around as it was called, Except as a single table that listed everything.

inside the section block, you also put h one.

in order to avoid problems you know, installing But or fundamental features.

Like, there's already a reference implementation there that we could look to and say, interacts with the regular box model sizing

advisable There are set top boxes and the quotes can hang out into the did what spits out the section blah blah blah, section h Node blah blah blah. Right? That kind of stuff. That's coming to native CSS and they were able to I I'm sure they were able to justify it to their management.

Right? So you know? But that's recipient of that process was CSS Grid, that will has essentially followed what preprocessors Maybe someone comes across this podcast, and they they're like, WebKit actually shipped what the browser base is gonna be and you know that that browser base is gonna have that container query support, you can just do it.

Kind of like dream

and maybe make that work.

But, you know, what is t c 39 up to? What is I I I don't wanna get into too much details, but, Like, 1st job, McDonald's, Yeah. More more, the interface.

basically reading. He calls them reading notes. They're just Sort of the here are things that caught my eye in the last sort of somebody understood, hey. Here's how we could fix This performance problem or how we could deal with this so that that's being prototyped in CSS. So ideally, it's coming natively

just that, All of all of the things you could possibly try to keep up with, that's nearly a full time job. Yeah. And nobody's paying for that. That's It turns out you can't really make a salary on that unless, so that I don't actually have to say, huge.

probably, always an infinite number of things that could be added to the platform. We've been seeing that with the, correctly or the Safari technology preview That turned out to be really fragile and unmaintainable

you know, I suppose somebody could set up a Patreon But they don't have the full resources of the company. Google does not give all of their revenue to the Chromium team. They probably love it. But Yeah. They would absolutely love it. Node it because they could hire a, you know, a kajillion programmers tea So if you have a speaking browser or screen reader or whatever, to and, hopefully, same reasons that styles are scoped in Shadow DOM. I just I wanna be able to say this snippet it comes out from behind the flags, and you can kinda if you're in a situation where you who, content or for audio content, really. So, you know, another thing that the The audio CSS used to be able to do, You gotta remember the 1st year of interop, there were 5 areas of implementation.

But yeah. Yeah. That's the struggle. And, you know, people listen to podcasts like Syntax

dream features from container queries to the you know, has selector, those types of things.

container I have Node what's container queries? I need to go look that up. Right? And even if they've heard of it, that there's no You know, there's no guarantee they're going to go any further or even use it. We hear all the time from people who I learned Flexbox. I don't have enough time to learn Grid now. Even though Grid is, like, you Node game changing layout technology for CSS,

all of these amazing new Features in CSS. Right?

he occasionally does these, link

There's there's a link to each of the, issues. So if you wanna go, like, read the more detailed You know, one of the conversations we've been having recently is how do you get the word out about new technologies? you know, if an engineer JS implementing margin collapsing, they're gonna bring in assumptions.

so even Node simply hearing about it or knowing about it isn't Even a barrier to knowing how to use it. But that's it. Like, okay. We we've been gifted

a that's a challenge Brian Brian Cardell, my colleague, It was immediately taken. So I quickly became the webmaster there at, a case back when we were called webmasters.

Is there a particular dream feature of CSS that you have that does not exist, or was it one that has been added?

Right? Or do I, like

In the course of trying to learn CSS,

And at one of them, there was a presentation about this newfangled technology called CSS. The browsers didn't support yet, but they were about have done, I think, with a with a tweak here or there, but they So it's so close.

The university just sent me to some conferences to present some papers.

I actually got to try it and was in

on web pages. Like, table markup did not exist. But, anyway, When I was putting a book ESLint,

while I was there, I I I got to, to find this information.

birthday of JavaScript. So this was 2 years before JavaScript was even a thong. Indeed. This was Wow. A at least a year before there were tables

was telling us that we really had to check out this new thing called Mosaic.

to. And, test, which was made part of the test suite. Around about that same time, I started writing the 1st edition of CSS, the definitive guide for O'Reilly, and in order to approach this capability where And so,

at least once. Holy smokes. Round about that time, there was a Text align But

picking up CSS,

but that, I think, is also why so many browsers at the time implemented things, Soon and, I mean, I say that being one of the people who's writing the articles, but,

would do things differently.

Like, interoperable like, entire hour long working group calls that ended up even though there was an agenda that had many, And so maybe that comes back because there are a lot ESLint a lot of years learning why inlining all of your style is a terrible idea And that the cascade is actually your friend and not your Sanity.

We're Right? And then topic And a lot of it is just there's a lot of interest in, that's a that's a thing that I you know, hermit genius kind of whatever.

Yeah.

Case is written to cover that there's a there's a case to be made for implementing that. Yeah. You Node? Here's how which happened it just it goes on for a really long time because

The test suite today is every now and then when a new thing comes to the browser or to CSS.

that It's not been covered, buggies.

Sometimes it it makes sense to just go into the test Scott. You should if if you want to have a fun time, go take a look at the modern test Sanity because,

you know, tutorials and articles

implementations are Deno, and sometimes the implementers discover, Oh, hey. This interacted in this weird way or Wes, like, we made this assumption, and we're you know, if Apple's bet pays off In VisionOS, at the WebKit team, there was an engineer who was really interested

every single possible edge case that they could think of. And then they implement it and find Discrepancies.

And Scott that I think that The way they are now is a bad thing. It's actually a good thing. It does technicality of the specs.

than they used to be. Yeah. Just like weird little edge cases Wes, like, imagine you have an image with an auto width Inside of a container query, which is inside of a grid that has a flexible with, you know, like, there's all this. I do not envy

so much there.

if there is nothing but the spec and you want to see,

I think there's literally over a 1000000 tests in total in web platform tests.

but, there were,

So they write more. It's the same thing with with test driven development. Right? You just write a test that figures out, oh, that was a little edge case and you try to to go at it. It's it's absolutely massive today, isn't it? Yeah.

in a good way, though, in a sense that that we were just talking about,

That opportunity snowballed into the other one. Back So at at that time, when you're

We we were looking at that recently.

like, it's created weirdness. So,

And then there are visual Yes. 1990 like, summer of 90 spring of 96 is was I was at this conference. And, actually, the only browser that at the time was supposed to Support of the CSS was IE

the specs were, You at import URL blah.

But, yeah, there are like you say, there are,

is the only way to learn it via the spec itself, Or was was that it? Yeah. Yep. Pretty much. Certainly, in 96,

like, what does this code actually look like?

there's sort of a dichotomy in within web platform tests. Some of them are very JavaScript driven.

And

The Flexbox and Grid test suite alone is just

Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, we have a guest on, which I am very

is the Syntax supper club.

making sure that they worked and, you know, replacing the RAM when students Stole it, in many cases, Wes able to say, well, here like, clearly, there's a use case. There's a demand for this. We can make it native, and we also have, Google Docs or

amazed that We we get to have on. We have Eric Meyer on who is

like everybody.

Node,

Large things you've been involved in over your career. Gosh. There's been a lot.

I sure hope you're hungry.

so buckle up and grab that old handle because this ride is going to get wild.

Like, the browsers would

which I actually did. It took Yarn, but I managed. Anyway here's a whole bunch of stuff for you. And if you don't, then,

Oh, I'm starving.

extremely prominent figure in CSS world. He's been Responsible for a lot of the stuff that has come to CSS over the the many decades and is author of of many books. I'm pretty sure you wrote the

I was a hardware jockey And But We just don't have room for anymore.

point towards that to make sure they have implemented CSS correct? Yeah. That was the idea anyway. Yeah. Unreal. So

what, testing pnpm? What was that called? Yeah. The CSS one test suite.

I'm sure I'm missing a a lot of the stuff out here, but I'm sure most people already know who who Eric Meyer is. Welcome to the show. Thanks so much for coming on. Yeah. Thanks for having me. It's great to be here. Yeah. So

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food, This

original CSS

why don't you give give the audience a a quick rundown of, who you are, what you do, and and maybe some of the

that's another situation where the working group looked at things people were doing in less than SaaS and said, it's clear how that is actually convenient for authors.

which are coming back. Now we have at Scott.

presentation slides using HTML and CSS. Hanging punctuation is super useful because then you can put stuff in quotes Or 3rd Wes% lighter, was useful. They just didn't have someone available,

Yeah.

you know, a bit translucent, like, 50% translucent.

Quality of life improvements testing and had their cubicles right next to the O'Reilly cubicles. And so one day, the O'Reilly people

Scott Styles? Essentially, Wes,

I would like to see mostly how do you you like, how do you keep up? Because there's no way nobody can keep up with everything. Except for Scott and I. Yeah. But even at that, are published, which ones are worth following.

we sort of haven't sort of done is marker styling. So list bullets and and counters and stuff like that.

and then everything is lined up on the decimal. Mhmm.

and, yeah, I would just like to be able to do that. I'm I'm sure there's I'm sure there's something that I'm thinking. Oh, hanging punctuation. Chris Collier just wrote about that recently. But for years, I've been saying, can we please just have hanging punctuation Staggeringly The interop 2024, And recently, in part of the ecosystem, I think, that Ambiguous.

Most of them have been added.

So in Any technology I get.

Yeah. And wouldn't that be great if we could get that with CSS variables, Right?

And then you would import that style sheet, and it would only apply to that subtree.

in more than a Wes kit because it's really nice, especially if you're trying to create your, has, like, these bizarre, So I I started out as a burger flipper,

as complete as it should be. But, I mean, you could tell I'm kind of grasping for the sort of these, like, these little You know, Entertainment displays terrible performance wise, at least at the time. Mhmm. And so for me, instinctively, if you're trying to ESLint everything, whether it's with class names or

Sort of more robust and less sort of weird.

So there's Agalia, we did off screen Canvas implementation in WebKit.

Wes Node than 20 years ago, Danielle Glassman and I proposed yeah, it's really it's so hard to keep up. And, The 4th major engine at that time by the end of that same year because at the time, we had 4 engines.

and then a string.

as opposed to, like,

Another one is and this goes way back.

and the sides of your text block lineup, Like Kryptonite,

there's one that I actually it was much more conceptual. So it was all I mean, they were much more human readable, so incompatibility

in this other place, I I want the color to be 40% darker where you can where you can do a And there were real concerns from the SAS community.

Dynamically updating, right, compared to the on build time. Yeah. Like, I've seen people do the thing where they have Node variable JS to whether or not it's e y e o, but IO.

In the discussions, someone if someone says, yeah. I'm concerned about how this will interact with that. They're, you know, they're able to say, Scott of the iterative loop. And Yeah. All the ideas and feedback cycles. Right. And it had a good design to start with. Right? Like, had this proposal that was a pretty good design. It's, you know, not necessarily exactly what came out the other side, The real question is where is web technology not? we're just we're gonna argue about Yeah. It was pretty much reading the spec, but the spec was, like, 70 pages or something. It was not huge.

drove that process,

But, That's a thing people really like to do, and you know, I would RLCSS, which is, but, be the person who goes through all of the tasks and goes to the specification and and then comes to the working group and says, so I found another situation

I could be wrong about that, you, you know, you don't grind the browsers to a halt You know, you get a non container query version in it. It's okay, yeah, far enough in there. But how How would you even know Node to look? You don't know how to look. And container queries, there are people often Linux, but not always, they have the business case for it. They really do want it implemented quickly, Twelve points. They they had misread it. They thought a pika was a 12th of a point instead of 12 points.

who had a 5th edition.

And then the other part is how do you actually implement it so that it paints to the page? So There it's good to know there's several people on there that I I would say a fair portion. It's not Okay. Probably not a majority.

to implement it? Because it's one thing to think of A design. And that's a very hard thing to do JS how do you design a language?

How many of the people on CSS working group are also people that write the code

Almost since CSS was CSS.

credit to preprocessors,

Oh, good point. Or that's not going to be a problem because of this other thing. Right? I was I was just gonna ask you that. Like, Generate a content? hack around using transforms Would that be okay? And I said that would be awesome. And if you ever need anyone to write anything about CSS, let me know. And he said, actually, we would love to, and here's what we pay per article. And I remember reading that email and thinking, wait.

there have been other things like that. The, the has pseudo class, everything has to be in an at nest block, what do we have a business case for Describing in detail, like, how you should run the calculations to do margin collapsing, and either they pass or fail.

A number of people, Google Maps or whatever.

you know, Scott it with a good design because Miriam is super smart and knows a ton about CSS.

just come out. Like, that's an idea that's been around 3 major engines not 100%.