Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the shed--not moved around with my bookcase yet--Rupert and with me is Chris--comfortable in the booth and the lighting--Coyier. Chris.

Chris Coyier: Yeah. Maybe I'll change the angle of my booth setup, too, and go 45 degrees.

Dave: Oh, yeah. Yeah.

Chris: Yeah.

Dave: Just so many endless hours can be spent optimizing your desk setup. But, Chris, we've got a lot of CSS stuff to talk about here today.

Chris: Yeah, that's more interesting. We took up too much of your minutes last time blabbing about setups, although I could keep going because I have so many things.

Dave: I know.

Chris: Getting a shipment this week. I'll wait for a future episode.

Dave: Uh-oh. Uh-oh.

Chris: This was an interesting thing to me in the CSS world. There is a ton to talk about happening in CSS, actually. I think we're going to grab Mr. Adam Argyle. You know he's just at the forefront of all that stuff.

Dave: Yeah. Works at Chrome.

Chris: He knows all the stuff that's going on. Yeah.

Dave: He's a CSS advocate at Chrome or something. He's the only person that....

Chris: Yeah. I don't know what the title is, but it's a weird role, but it's cool. It's like CSS Guy at Chrome.

Dave: Yeah. Yeah.

Chris: I guess it's dev evangelism, but I wonder who he reports to and what is considered success. Is it tweet likes or what? I don't know. It's hard to say. But I'm happy to increase his success metric by having him on the show because he showed me this spreadsheet where he's just like, this is stuff that just got spec'd and is just dropping, and this is stuff right behind it, and this is the stuff right behind that. It's like, holy what?!

Dave: Yeah.

Chris: He had these huge rows of stuff. Everything is getting talked about recently (nesting and stuff). So cool.

There are a couple that are in that first column that have dropped but not from Chrome, which is so cool to me.

Dave: Hot drama.

Chris: Yeah. I'm eating my words. When Firefox had those last big layoffs and they said, "We're not only laying off these people but we're laying off the Web platform team."

Dave: Yeah.

Chris: To me, that was Firefox saying, "Well, okay. We still have this browser, I guess, or whatever, but we're not going to innovate on it." You know?

Dave: Yeah.

Chris: "We're not going to ship new features. It just is what it is."

That's not true. They've totally been shipping stuff.

Dave: Mm-hmm.

Chris: Including these color functions in CSS that Safari and Firefox have - some of them, anyway. I think Safari has different ones than Firefox has, but some of them have the same that Chrome doesn't have. So, they're kind of running ahead of Chrome for some CSS stuff, which is like, "Okay, Chris. You were just super wrong and enjoy these new, awesome color functions because they are amazing."

One of them is color contrast, that I know you looked at.

Dave: Yeah.

Chris: It's a function, right? It's the value for color. You could say color colon color contrast. What do you give it? How does it work?

00:03:09

Dave: Okay. As I understand it and based on the examples I saw--and this could be the Safari implementation--you say background color, whatever that color is to you (black or white - think light mode, dark mode) versus foreground color one comma foreground color two comma foreground color three. You have that VS character.

Safari seems to require it. It's not in the spec, but maybe I was looking at the wrong spec. That's totally possible. Anyway, so color contrast and then it'll pick the color. It'll go through all those foreground colors and compare to the background color and find the one with the highest contrast and just say that's the new color.

Chris: It's doing this math for you. I've seen JavaScript trickery that does all kinds of calculations to try to figure out whether a color will be visible on a certain background or not. Now you're just like, "Browser, you do it."

Dave: Yeah. "Browser, here's a background color. It's a CSS variable. Somebody will change it. I really don't care. Then it can either be white text or black text. Please choose the appropriate one."

Chris: Right.

Dave: That's what you tell the browser.

Chris: It's amazing. You're saying white or black because that's common.

Dave: Common.

Chris: But it could be a really light gray or a really dark--

Dave: 1A1A1A, 565656, whatever you want to do.

Chris: Right.

Dave: But it just says, "Okay, I'll choose the one with the most contrast." You need maybe two similar colors if you're trying to do the light mode, dark mode thing. That's the immediate benefit here.

CSS, in general, maybe you don't get this as much just working on an app or whatever but, in client services, we'll design the white part of the page. Then you'll go. Then there's the gray part of the page. Then there's another grayish part of the page. You know?

Chris: [Laughter]

Dave: Then there's another and then they come up and they're like, "Oh, our brand color is blue. Can we get a blue one?" You're like, "Okay, here's a blue one." You know? It's a hassle because you have to build a theme for every section of the website for all these.

Chris: Yeah. Right.

Dave: Then you have to choose the right contrast color. You mix in light and dark modes. God knows what's going on.

With this one, it's like, if somebody is like, "Hey, I went into the CMS and I made a red one," I don't care, Chris. It's going to choose the right text color.

Chris: Right.

Dave: I just program the machine to spit out the color. It's going to result in so much less CSS.

Chris: Yeah, it's like a robust system.

Dave: Yeah, and so instead of whatever div class BG or theme--blue, your theme can literally be divstyle--bg:blue. You set a CSS variable that is for the background and that's how you change the background of the theme. You don't have to make these theme classes. You could still make the theme classes, but the theme classes would just be variable setters. Ta-da!

Chris: Yeah. Ta-da! Can you use it for border colors and whatever?

Dave: You can.

Chris: Fills?

Dave: Yeah, you totally can. Anywhere you set a color, it'll choose the most contrast. That's where it gets a little interesting to me because the example I worked up had link text next to text. In that situation, I was flipping the color of the link text to be contrast. I think, in those situations, you actually want your text and your link to be--I think it is--three to one contrast just so they're different.

Chris: Yeah.

Dave: But anyway, if you have an underline, it should be fine. Anyway, I just was like, I think there are interesting explorations that could be had, like you want 3:1 on a border around an element, like an input element or something like that. Getting that 3:1 -- but now, in 3:1 for light and dark mode, it's just automatic. It's one line of CSS. Border color, background color, verse foreground one, foreground two.

00:07:30

Chris: Yeah. Yeah. I like that we're talking about it. Yeah, you're using it to make a really robust system, and we're talking about only the happy path here. This is what it was designed for and so this is how we're going to use it. But as we know with new CSS things, it goes through a little lifecycle of like, "Okay, yeah. That's the basic usage of it." But then digital artists get their hands on it and who knows what kind of weird cascading things will happen from it or trickery.

Dave: Yeah.

Chris: All of a sudden, somebody is like, "I did container queries with color contrast," or something, and you're like, "What?!" [Laughter]

Dave: Yeah. No.

Chris: Because internally it does math. That's the kind of thing that people are like, "Hmm. I am going to leverage said math to do something."

Dave: Yeah. Well, and kind of in a weird world, could you--? We're getting some more color functions, too. Could you kind of calculate--? I don't know. Calculate the proper contrast ratios and all you do -- I saw somebody's CodePen demo. You set an HSL (hue saturation lightness) and it'll generate ten versions of that color. I think it just drops the lightness up and down - or whatever.

Chris: Hmm.

Dave: I just was like, "Hey, you're one step away from generating a whole entire color system where there are ten of every six complimentary colors and stuff like that. You're one step away.

Chris: Which I think has shaken out as how companies actually work. I know that makes for a good blog post and it makes for good little tool websites and images for conference talks and stuff where you have seven blues and seven reds, or ten, and ten grays, ten light grays and ten dark grays. [Laughter] That's kind of what we do at CodePen, and I kind of like it.

We definitely have ten grays because we're such a dark website. I don't think we have ten blues.

Dave: Yeah.

00:09:24

Chris: Still, that might be a little overkill for us, but kind of cool though. I love making them programmatic.

Color has changed in CSS, too. I'm not sure if everybody is aware of that. Let's say you write HSL. You just don't have to put commas in it anymore. Did you know that?

Dave: I didn't know that.

Chris: You just don't have to. It doesn't matter and it's probably better that you don't because that's the future syntax. If you're going to add opacity to HSL, don't write HSLA. Just write HSL with no commas. Then at the end of it put slash space and then the opacity after that.

Dave: Zero or whatever. Yeah.

Chris: That's the new system, so you don't have to remember two different functions. It was designed that way on purpose. If you're going to use HSL, just use the HSL function. If you're going to use RGB--the same story--just use the RGB function.

Dave: Hmm.

Chris: The reason I think they did that ahead of time is because there is new color functions coming.

Dave: Okay.

Chris: There is -- whatever. There's SRGB--

Dave: LCH, the LAB, and--

Chris: Right. Those are going to work in the same way with the alpha, so why not just learn it that way? Then they are all consistent across because they're not going to ship LAB with commas.

Dave: Hmm. Hmm.

Chris: It's just going to be the space syntax only.

Dave: Yeah, it's getting cool. Yeah, I don't even know what these LABs and LCHs do other than give us more of the color spectrum or something. It's HDR or something like that.

Chris: I can't talk about it super intelligently either, but I did notice that there is famously a panic website that used some pink with a LAB color with an HSL fallback or something. If you look at it in a browser that supported it, which I think was Safari at the time, it's like way more badass looking.

Dave: Oh, really?

Chris: It's like, whoa! That is a color that we just were not able to render on the Web before. It's like in your ass face pink that's like, wow!

Dave: I'll have to find that because it's almost like pantone colors or whatever. You get the little chips.

Chris: Yeah.

Dave: You're like, damn, that's a good-looking pink. Then you're like, "Oh, it's got a hex. Cool. I'll just plug that in my website."

Chris: Yeah.

Dave: It just looks like brown.

Chris: Right. Pantone can do a lot. Notably, it still can't. In a printing press, the way that they're going to make a pantone -- well, pantone is unique, so let's wait on that for a minute. But often you print in CMYK. That's how printing works.

Dave: CMYK is cyan, magenta, yellow, and black.

00:11:54

Chris: There's this thing called a rosette pattern -- I think I have that right -- where it's like little, tiny dots. If you get out a magnifying glass and look at the next printed thing you get in the mail, you'll see it's different than a digital printer. It's not like if you print on your little Epson at home or whatever. That's a different process. But when you're printing millions of something, that's really inefficient to do it that way. They print it with plates with offset lithography. They're hit with four rollers (CMYK) and with these little, tiny dot patterns that trick your eye into mixing those colors together and it works. It works really nicely. You can print really nice stuff with CMYK plates.

Dave: Yes.

Chris: Most of the big printing presses in the world aren't four-color. They're five or six. The reason for that is the sixth roller is often sometimes a coating. We might as well hit it with shiny ass -- shiny something.

Dave: Yeah. Yeah.

Chris: Why not? But you can do whatever you want because CMYK can't hit everything you want it to. There are some blues. I think there's like cerulean blue that it just can't make good.

Dave: Okay. Yeah.

Chris: You can't represent it (in CMYK) good. People run what they call a spot, and a spot is often a pantone. It's often your brand color. I don't want to mess around with CMYK for our brand color. Anything that's our brand color -- and you'll do this when you're working in Adobe InDesign. You won't just pick a color from the color palette. You'll pick a pantone, and so it'll be really specific. When you send the digital file over, it won't even try to make a CMYK variant of it. It'll be like, "No, that red. That's a spot."

Dave: Pantone. A53B0, yeah.

Chris: That's pantone. Exactly. 5309-whatever.

Dave: Yeah.

Chris: Then the design software will know to output an entire plate that's just that spot.

Dave: Wow.

Chris: That special blue color will be the fifth color, so it's pretty common to run CMYK and a spot and a flood.

Dave: Wow.

Chris: Anyway, that was way too much info, but isn't it cool to know that CMYK has these real limitations. It can make a photograph just fine, but it is what it is. We have no better way to hit ink with paper to make colors with its limitations and all. The Web has the same; RGB has the same problem. But there are these new color things that come along that say, "We don't have those same problems. We can represent."

Dave: Yeah. RGB is 256 million colors and you'd think, "Oh, surely that's enough." [Laughter]

Chris: Yeah. [Laughter]

Dave: However--

Chris: It just isn't.

Dave: There are different worlds out there, so I don't know.

Chris: It's not like there's one within that sea of 256 that's just like, "Well, that one is way different." It's like whole chunks, like if you map color in a different way, it's like whole parts of that color globe that just aren't there.

Dave: Yeah, and then you're getting into optics, like how your eye is tricked by the color.

Chris: Mm-hmm.

Dave: What was it: blue dress, gold dress, or whatever? Just the way a bit of light change can actually trick your brain.

Chris: That one was truly mind-blowing, wasn't it?

Dave: I was so mad. I was mad.

Chris: [Laughter]

Dave: I was just like, "That's a blue dress, you idiots." [Laughter]

Chris: I can't even remember what I saw at this point, but I was pretty opinionated too. Just fascinated but opinionated.

00:15:12

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Netlify. Thanks so much, Netlify, for the sponsorship. Really appreciate it. It's kind of, in a sense, the de facto place to deploy your website, to be your website host, especially if you lean into the JAMstack philosophy.

I forgot where this came up last, but is it true that every single website on Netlify is a JAMstack website? Yes, it is. It's true because what's not a JAMstack website is a PHP website or a Ruby on Rails or a Python website where there's a Web server that runs a backend language. You literally can't do that on Netlify.

Yes, if your website is on Netlify, it's JAMstack because it's powered by static files. It doesn't mean that it can't have dynamic features. Of course, it can because JavaScript and JavaScript runs and can do dynamic things. Netlify helps you do dynamic things. It can help you with hosting your functions. In fact, it does an amazing job doing it. You just put some JavaScript in a special folder and it just deploys it as a Lambda function, which is amazing.

But anyway, yeah, I just think that's kind of cool. Every website on Netlify is a JAMstack website. How cool is that?

They do so much for DX along the way. You just hook it up a repo and it, poosh, just goes there. The greatest thing ever. Thanks again, Netlify.

[Banjo music stops]

00:16:57

Chris: Okay, so it's not only what is possible to represent but how you represent it in literal numbers. This is what I haven't gotten super good answers on yet, but you know this, Dave. Developers like HSL because HSL is hue, which is a circle. What does it go through, 256 or something?

Dave: Radian on a degree, 360.

Chris: 360?

Dave: Yeah.

Chris: Then one through 100 and one through 100, which are percentages of saturation and lightness. It makes sense in your brain.

Dave: Mm-hmm.

Chris: You can design a system around it.

Dave: Yeah.

Chris: You can very easily, if you want a ten-color thing, just make them ten lightnesses apart on that scale. It's very easy to programmatically mess with. But HSL has similar limitations as HEX, RGB, and all that stuff.

Dave: Yeah. Yeah.

Chris: Unfortunately, HSL isn't a panacea for us, whereas something like LAB can represent way more color. But what are the numbers?

Dave: Yeah.

Chris: What is LAB? Is it more systematic or not? I don't know the answer to that yet. I think the answer is yes, but I don't think it's as good as HSL is.

Dave: Yeah. I would say HSL, once you understand there's a color wheel involved, you're like, "Oh, okay, okay, okay." But then, yeah, with LCH and LAB, the stuff I've looked at, I was like, "I'm going to trust that it's good." [Laughter] Okay, guys. Yeah. I don't know what these numbers mean, but I'm going to just trust that it's a good one.

Chris: This came up in an interesting -- there was a color tool I linked to from Eric Kennedy who presented this really well. Everybody can imagine a color wheel in your head, right?

Dave: Mm-hmm.

Chris: A literal circle one, not like the Photoshop representation of it, but a color wheel.

Dave: Yeah.

Chris: Like a rainbow around in a circle. But then fill it in all the way to the middle. Then you pick two colors. In the middle of it is kind of white or gray or black. There is low saturation in the middle.

Dave: Yep. Yep.

Chris: That's where the grays live. If you pick a color and you're doing a gradient between those two colors, like across the middle, so two colors that are complementary, I guess.

Dave: Yeah.

Chris: They're not next to each other. They're opposite each other on the color wheel.

Dave: Opposite, yeah.

Chris: Blue and yellow, or whatever. Blue and yellow will go right through the middle, which means it goes right through that low saturation area. If you do a gradient in CSS and do from blue to yellow--

Dave: You get the mud.

Chris: It's going to suck in the middle.

Dave: Yeah.

Chris: But if you do red to blue, what's the middle? Purple.

Dave: Okay.

Chris: You're going to get purple in the middle, and it's going to be high saturation purple. It doesn't have to cross through the middle. Erik Kennedy has got some tool that kind of fixes this and goes on an arc instead, and it's very interesting and all that. Interesting, isn't it, that the color wheel has real-world implications for us here.

Dave: Yeah, well, and I think we struggled to figure out what conic gradient does, or whatever, because that's a new CSS kind of feature. Conic kind of does that. It tweaks. It tries to go around the horn as opposed to straight through.

Chris: Yeah. Interesting. If you did a blue to yellow in conic, it wouldn't do the same problem. Look at that.

Dave: Yeah. I don't know if it goes through green-land or what. [Laughter] It goes to green-land and then it comes--

Chris: That's weird because, in my mind, it would go through gray, but it's how it paints it on the screen that's different.

Dave: Yellow and blue make green. Let's put it green. It should go through green-land.

Chris: [Laughter]

Dave: I don't know.

Chris: Do I even have that right? Are they opposites on the color wheel?

Dave: I think it's blue and orange, isn't it?

Chris: Blue and orange, yeah.

Dave: Because Padres, that's how I remember it. I think everyone does, so San Diego Padres.

Chris: Probably everybody does. Yeah.

Dave: [Laughter]

Chris: Okay, so Firefox is shipping stuff.

Dave: Firefox.

Chris: So is Safari. So is.... Everybody is shipping stuff, which is great. We've got the three system and it appears to be healthy at the moment, although there was an exodus from Firefox and it did involve big people. There was one container query was talked about a bunch. They'd be like, "Oh, well, we're just waiting for David Baron to drop his thing because David Baron is the guy. He knows. He's worked at Firefox since it was a kit."

Dave: Yeah.

Chris: That's a baby fox.

Dave: Oh, a baby fox. Okay.

Chris: I know because we have a book about baby foxes. Wow, that was an aside.

Dave: Hey, hey.

00:21:29

Chris: But anyway, his name gets quoted a lot in the, like, nobody knows more than this OG Firefox guy, right?

Dave: Yep.

Chris: Then he's gone. He's axed. To me, I look at that and be like, "Pfft. Okay, Firefox. Good job. Fire the OG Firefox guy."

I don't know what the internals are like. I don't even know if David Baron is a nice guy, although I have met him once and he seemed to be a very nice guy. Glad to see you again someday, David. But I'm just saying I don't know the internals of that deal, but then he pops over at Chrome.

Dave: Mm-hmm.

Chris: Congrats on your new role, David. You've got to imagine that the momentum of development of browsers just had a little shift in momentum there, I would think, with that exodus and entrance.

Dave: Yeah. No, I'm glad. What's interesting, too, is browsers seem to be working on different things at different times, which is okay, but it also, in my experience here--20 years of the Web--it ends up a little weird because one browser has a thing and two browsers don't, and vice versa.

I hope it goes fast. It seems like it is going fast again, like CSS activity has picked up. Hopefully, it will do good.

I don't know what's going on with Firefox, still. Still haven't got the update, the memo. I don't know what's going on. I would like an update from the team on the blog.

Chris: Yeah. Like a real honest one would be good, too. You know? Like if somebody could scrub it free of overly optimistic marketing stuff, that would be fine, too.

Dave: Startup speak, yeah.

Chris: I know that's hard to do, but that would be cool.

Dave: "Hey, man. We're just crushing it on privacy Skycloud. You got it." I don't want that.

Chris: Wow. Dave, you're hired.

Dave: I know.

Chris: That was amazing.

Dave: I should go work in the Valley. I think that's where my talents are most needed.

Chris: [Laughter] That is great.

Dave: There is a thing. You read Medium posts or whatever. It's always like, "Ah, man. We were just crushing it too hard. No one was ready for our Bitcoin to toilets startup." You know or whatever.

Chris: [Laughter]

Dave: It's like every utter failure is pitched as some success, or whatever, like, "We were acquired, a.k.a. bought for a dollar." [Laughter] You know? I don't know. People don't tell you that stuff. They just say they were acquired and everyone thinks, "Oh, man. They were acquired." But it was for $8.99.

Chris: [Laughter]

Dave: Anyway.

00:24:03

Chris: But there is -- I do want to see a little bit more, though. We talked about container queries the last episode. Or was it this one? I can't remember even now.

Dave: Oh, last episode, we talked about it. We snuck in a little container query....

Chris: That's such a big deal. I will not shut up about that. That's a massive deal for CSS. Once that gets spec'd and in a happy place, Firefox has to ship that. Please, please, please prove that to me, Firefox.

Element-internals, we mentioned because we were talking Web components and stuff.

Dave: Yeah.

Chris: I think that's a big deal, right? You literally can't compose a form of Web components without element-internals. Chrome shipped it. That's that kind of thing. I know Chrome ships too much stuff for the Web for Firefox to keep up with. There are different amounts of people and money behind those projects. You put it very funnily at one point. You said that Firefox is getting DDOS'd by Chrome, as far as features thing.

Dave: Yeah.

Chris: Which is funny. That's probably not changing. I think that, unfortunately, it means that Firefox has to pick the most important ones to then ship, and I don't know exactly how you do that. I'm surely my opinion is different than other people in the world opinion. You need some kind of metric or something to do that.

These things are a big deal. If you don't ship element-internals, that means that Web components are certainly not dead in the water but different. People can't -- it changes the face of the Web a little bit when there's just stuff you just can't do. If you don't ship container queries--I don't know--that just sucks [laughter] because people can't use them.

Dave: Yeah. Well, and there's the thing, right? We're kind of back to the Twitter outrage cycle of stuff. We're just entitled people. It's like, "Ugh. Safari doesn't have it. Ugh. They're terrible." You know?

In this climate of I am literally one icon click away from complaining to a large audience, you're really in a tough position as a browser to keep customers and your name unmarred. You see it, too, on the reverse side when Chrome is like, "You have to use Amp," and everyone is like, "Chrome is a stupid head." You know?

Chris: You do see it on the flipside. Yeah, I saw a little death of Amp article the other day that I didn't read. It seems like it might just be kind of on the way out there.

Dave: The search carousel will now, in May, put fast sites in the search carousel, so it's not Amp only.

Chris: Fair enough. How does it do instant load then?

Dave: Probably doesn't.

Chris: It just doesn't. It doesn't.

Dave: I even think those gains were not as cool as they said. Why -- he puts on giant tinfoil hat -- is because they wanted to index your content on their servers because it's cheaper. Anyway, we'll talk about that later. [Laughter]

Chris: I don't even think you need a tinfoil hat for that one. Follow the money, yo.

Dave: Training AIs on your content.

00:27:14

Chris: Speaking of CSS things that have dropped, though, you can use both of these across all the major browsers now, all the way through. There are these pseudo-selectors ("is" and "where") which are literally the same, Dave. They just have one difference. But otherwise, they're exactly the same.

Dave: I don't know the difference. If you could tell me, so I could look cool on my podcast, that would help.

Chris: I will. For sure. I feel a little contractually obliged to know about CSS stuff. "Is" is like, let's say you're going to write -- you want to select your H1s, H2s, H3s, H4s, H5s.

Dave: Yes.

Chris: But within your main element.

Dave: Yes.

Chris: Right now, you'd write main H1, main H2, main H3, main H4, main--

Dave: Barf. This sucks. I have these selectors in my code.

Chris: It is, and you'd probably just preprocess it, right? You just write main and then nest the ones inside. Then you only had to write main once, but you know. I like it when CSS evolves to not need preprocessors. I work on several sites right now that use none at all - whatever.

This, you'd type main space colon is and then it's a pseudo-selector, so it has -- well, this pseudo selector has parents. You can pass it stuff. You pass it H1, H2, H3, so main and then the "is" function with all those in there. That just means the same exact thing as comma separating all those selectors but with main in front of it.

Dave: Awesome.

Chris: Just nice, and it gets especially nice when you use it multiple times in a selector. Within those H1s, you have a hover or something, ooh, that gets -- or you want to select both your hoover and your active state, or something, that selector can get just stupid.

Dave: Yeah.

Chris: Just really big and dumb. It's very quick to express, so I'll put a link to my Almanac post or MDN or whatever. It explains it very well.

Dave: Where I would use this would be form is or form input or input is type equals text, type equals URL, type equals tell, type equals plus.

Chris: Oh, genius. Genius, yes.

Dave: It's one selector. It's not 52 selectors.

Chris: Right.

Dave: I'm going to use it there. That's where I want to use it and send it to.

Chris: Yeah, because it's scoped. In your case, scoped to a form, but I would probably scope it to a class or something just so you have a little opt-in something to those things.

Dave: Mm-hmm. Mm-hmm.

Chris: Anyway, that's great. Or you could have three different ones. I do that on CodePen. We have top label forms and side label forms and big forms, or something. We have three different form types.

Dave: Yeah.

Chris: You've got to select all the input crap inside of it in those context. It's great for that. That's "is" but here are a couple of things to know about it. One is that it's selector forgiving. If one of those comma-separated things is a bunk (is screwed up, is wrong)--

Dave: Doesn't exist. Yeah.

Chris: Not even doesn't exist in the DOM, but yeah, it doesn't exist - period. It's invalid selector. It doesn't just conk out the whole thing like it would if you're normally comma separating stuff in a CSS selector. It'll just nuke the whole thing and then you're like, "Oh, that sucked."

Dave: Oh, really?! I didn't know they did that, but okay.

Chris: If you wrote P comma space--

Dave: Comma blark, or whatever. [Laughter]

Chris: Well, blark will select a blark element.

Dave: Okay.

Chris: But if you wrote P comma P colon Dave, there is no pseudo selector called Dave.

Dave: Oh, okay. Yeah, yeah.

Chris: That's dead now. You killed all of that whole block.

Dave: Wow! Wow!

Chris: Yeah.

Dave: Dangerous.

Chris: Dead zone.

Dave: Wow.

Chris: Dangerous, indeed. Yeah, so don't do that. But if you put it inside of an "is," now it's forgiving and now that'll be fine.

Dave: Huh. Okay. Well, that's good.

Chris: But it doesn't take pseudo-elements in there, so the one I always want to use it for is colon colon selection, which works in Safari and Chrome, but you have to go ::mozselection for Firefox - still to this day. It'd be nice to just do one block, right?

Dave: Yeah.

Chris: But you can't.

Dave: Aw!

Chris: Because you can't comma separate those selectors. You have to do two blocks that have the identical crap inside them. Dumb. And you can't use "is" to fix it because it doesn't take pseudo selectors.

Okay, so that's "is," right? Here is the weirdest thing to know about "is." "Is" has no specificity by itself, but it does. It has the specificity of the thing in the comma-separated list with the most specificity.

Dave: Oh! Whoa! Okay, so if I did P, that's pretty high because that's an element.

Chris: So, it's pretty low because it's an element, I guess.

Dave: Oh--

Chris: For specificity. So, if you do P is -- or form space is. If you do a space like that, it's like a star selector. It just means anything that is.

Dave: Yeah.

Chris: You can scope this to a class. It could be form--without the space--is, but that'd be weird.

Dave: Interesting.

Chris: You know what I mean. It's easier to look at real code. Mouth coding this is hard. But then if you said is and then the first selector was an ID, ID Dave and then comma type selector type equals input or text or something.

Dave: Yes.

Chris: Now, all of a sudden, you're selecting an input but with the specificity of an ID. You've just artificially bumped up that. Even if Dave doesn't select anything, you've artificially bumped up that selector to the specificity of an ID without actually having to select anything with an ID.

Dave: Yeah. Okay. That's a weird quirk. Yeah.

Chris: It is weird. It's weird. I don't know exactly now why that it is, but I think you need specificity.

Okay, so all that stuff we just learned, where it works 100% identically the same except for that no matter what is in that comma-separated list, the specificity of the whole thing is zero, none. It wipes it away.

00:32:44

Dave: Wow! Okay. Okay. All right, because this came up in conversation because we were talking about Web components and the styles inside your Web component. If you wanted them to be very low, you could maybe style it with "where."

Chris: Oh, yeah. Right.

Dave: Then all your component is ready to be overridden. I think that was Jonathan Neal came up with that. Anyway, just an idea.

Chris: That's where my mind went is like you should -- I almost think you should use "where" by default because low specificity is good, usually, in apps.

Dave: Yeah. Yeah.

Chris: But the fact that it's zero is just weird enough to me that almost makes me think you should use it because it's like zero specificity is almost weirder than some specificity, to me somehow.

Dave: Right. Because if I was -- like where pound Dave and then somebody else just comes around and -- I don't know -- could just overwrite me with div, you know. [Laughter]

Chris: Yeah. Really, yeah, with very little specificity.

Dave: Broad, yeah.

Chris: Yeah, exactly. I did some contrived examples, but I haven't used these in production enough to know what it really feels like to feel the pitfalls. But one of them that I did like, I think Miriam pointed this out on Twitter. It's like a fun specificity hack.

Dave: Mm-hmm.

Chris: Have you ever written dot button dot button?

Dave: Oh, well. Yes, I have. Yeah. Yeah. Where you just try to double it up to get it--

Chris: You just double it up. You don't actually need two classes on the HTML element. You wrote the selector twice and so now it overrides dot button somewhere else because your new selector has two classes on it instead of one. It's like the dumbest specificity hack, but it's short of having to do important on a particular property. It's like a middle-tier specificity hack.

Dave: Mm-hmm.

Chris: "Is" kind of opens that door where you can just put a fake selector in "is" that's as specific as you kind of want it to be, but you don't actually have to select by that thing. [Laughter]

Dave: Yeah. Okay.

Chris: It's just a specificity hacker machine.

Dave: I like it. Yeah, I mean that's just fun.

Chris: It's fun and you can have fun with it. I think your specificity hack could be like dot giving dot this dot slightly dot more dot specificity -- or something. It's like anybody finding it will see what you're doing.

Dave: Yeah. Yeah. Oh, interesting. I'm thinking about full-bleed layouts, too, with "where" because I did the not using "not."

Chris: Mm-hmm.

Dave: Like article not image -- or whatever. You know? Star not image -- or something.

Chris: Yeah and "not" only takes one selector, so it's as specific as the selector you put inside of it, which is yet another thing to wrap your mind around.

Dave: Yeah.

Chris: Yeah. Or does it wipe it out? Hmm.

Dave: But you could do article where -- as a figure or a table. Just make it full screen or full width or whatever. Anyway.

Chris: Ah, yes, indeed. Yeah, I like that list of being, like, I don't have to pick each one of these with a comma-separated selector. It's just a nicety for writing. The thing is, it's not just a nicety. It has all these other little side effects that you have to think about.

Dave: Oh.

Chris: It's just the way it is.

Dave: All right.

Chris: Just one little CSS thing in the world. I'd argue that those names are real weird, the fact that they behave the same but just have specificity differences. I don't have any better suggestion and I don't mind that they shipped, so that's that.

Dave: What about "is" and "is" v2?

Chris: [Laughter]

Dave: And "is" --

Chris: Yeah, sure. That sounds great. Just "is" with two I's and two Z's.

Dave: [Laughter]

00:36:28

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Jetpack. You can learn all of what Jetpack does at jetpack.com. If you have no idea, just go there.

You've probably heard me talk about it before. Just in case you haven't, it's a plugin for your self-hosted WordPress site that brings a whole bunch of power. A lot of that power is born out of the WordPress.com cloud, in a way. It brings a bunch of cloud ideas to a site that's hosted anywhere that you can host a self-hosted WordPress site.

It's kind of like, "I need backups for my site," which of course you do. I definitely do. You can get real-time backups just through your Jetpack plugin and they go and they backup to the WordPress.com cloud, which is amazing. That's where you go to explore your backups, download your backups, restore to places. That's cool. You can kind of see how the WordPress.com cloud is involved.

That's how search is powered, too. You can have jetpack basically totally replace site search on your site. You still have a lot of control over it, but it brings up this full-page search experience that's powered by Elastic Search. It just has really great search results, unlike the default built-in WordPress search. That's incredibly important to me and I use that too. That's a part of the Jetpack world, too.

Now think of those two things. Do you need one and not the other? Fine because they're both a la carte. You buy them a la carte, which is kind of great.

Also, it's a big time for Jetpack. They are ten years old this April, so having a big decade birthday for this. It's a very mature product and I'm just a big fan. I use it on all my WordPress sites. Thanks for the support.

[Banjo music stops]

00:38:20

Chris: This is one that feels like the answer should just be like -- I don't know. I don't know what to think of this. Zac Cain [sic] writes in. Zac, this is nice. This is a very legit question.

Dave: Oh, it's Zain Khan.

Chris: It's just interesting.

Dave: Sorry, Zain.

Chris: Zain Khan. Wow. Why did I--? Ignore whatever I just said.

"I'm facing a responsive design issue. If I develop a design for 768 pixels high," which that's a number that does have some meaning. There are plenty of computers out there that have that as kind of their max height in the browser, "then look at that browser but on a different screen, a screen that has a resolution where the height of that browser window then is 1080," like 1920 by 1080 kind of thing."

Dave: Yeah. Yeah.

Chris: A vertical space. "My design basically looks cut off at the bottom. What's the solution to this problem?"

Specifically, he's talking about designing dashboards that are not scrollable. You're setting a height on purpose because I'm setting the height of, like, this is just a portal to some stuff. It's not a blog article where you scroll down, like most websites. It just is there on the screen.

Dave: Yeah. I think Zain has worked on my local COVID dashboard, possibly. It struggles with that sort of stuff.

I think, with any dashboard, you can do 768 high, but you need to recognize (if it's a dashboard) there are other TVs that have higher resolutions and taller bits. You need to build that tolerance into your design and make sure your HTML and body have height 100 and then your dashboard grid of widgets is also height 100% or 100 VH or whatever you want to do it.

Chris: Yeah, 100 VH seems to be the ticket here, right? Give yourself the whole space. Don't hard code a height pixel thing.

Dave: Yeah. Yeah. The only place I would do a height pixel thing was if I were doing Twitch backgrounds or something and I knew I was streaming at 1080 or 1920 by 1080. But set it to where it's a scalable thing and you just make sure you scale to that.

It's going to be weird. You're going to have extra space. But that's sort of the trick is to make sure all your widget graphs and charts and whatever are kind of centered in the little boxes that are scaling up.

Chris: Yeah, I think there is a whole bunch of stuff you learn, like, are these SVG charts? Well, now you're dealing with aspect ratios instead of specific heights and widths. You're setting things with grids and using justify-content and line items and stuff so that things are being put in the middle of their containers here.

I think what it's telling me that if you're setting a height with pixels, you're probably setting a bunch of other stuff with pixels, too. I think in the world of today's design, which is responsive design plus, or maybe we should start calling it intrinsic design like Jen Simmons suggested, that this world is not just how many fluid columns anymore. It's just arbitrary space all the hell over the place in every direction.

Dave: Yeah.

Chris: It's a different way of thinking in designing. You can do it. It's not that hard. Maybe just attempt to just wipe out pixels from your CSS. Give that a shot. See what that's like to use only relative units and, when you can avoid a unit at all, do that. Can you just align it instead?

Dave: Yeah. No, CSS Grid in all the browsers have this tool now. I think most of them have a grid inspector.

Chris: Mm-hmm.

Dave: I know Chrome and Firefox have it. I don't know if Safari does. Basically, in your element panel, next to an element that is a grid or a Flexbox, there is the word "grid" in a little gray pill or whatever. Click that grid word and then you see the grid on the page. Then just make it fill up the page.

Chris: There you go.

Dave: It's pretty good.

Chris: Those fractional units are your friend there. Fractional units can be used vertically as well.

Dave: Ay-oh! And if you designed it for 768, go find a 1080p monitor and plug an HDMI into it, and plug it into your computer. Test on the devices you're rolling out to.

Chris: Yeah.

Dave: Yeah.

Chris: I think if you don't have access, even zooming out would somewhat replicate that, I think.

Dave: Yeah, because it gets me. Different laptops and stuff are so different. A MacBook Air or whatever only has 968 pixels in height or something like that. Devices are weird, is what I want to say. I think 874 is the tallest I can get a browser window on my brand new MacBook. That's not very tall. That's in the 768 range, but--

Chris: Yeah. You ever see these--? I wonder how many people in our audience do the vertical. Maybe the vertical side monitor find this common where you grab a monitor and you flip it 90. Can you do that for a minute?

Dave: I don't have the energy to do that, but yeah.

Chris: Yeah.

Dave: It's cool. I already am overwhelmed by Windows. I don't think I can do that.

Chris: [Laughter] Yeah. I want to see this Slack chat, but I want to see what people wrote last Tuesday.

Dave: Tall!

Chris: [Laughter]

Dave: Tall! I want to see code, but I want to see all the code. No, it's cool.

Chris: Maybe that's it. What is the number one use case for the super vertical? Is it so you can see more of a code file?

Dave: I think if you could see the top and bottom of a code file. Yeah.

Chris: Yeah.

Dave: But people are doing it with ultrawide too. It's not just the 16:9.

Chris: Oh, ridiculously tall.

Dave: They're checking these ultrawide. Anyway.

00:44:25

Chris: Let's do a short and sweet one here. Get it from Nikki Sweet.

Dave: Hey!

Chris: "When linking to another website, is it a good practice to use target underscore blank?" That's the attribute that you can add to an A-tag so that, when you click it, it doesn't open in the same browser window. It opens a new browser window, but not usually a new window because every browser has tabs these days. It's probably a new tab.

Dave: Mm-hmm.

Chris: You know I've been very opinionated on this for years, so all I can give you is my very opinionated answer to this, so maybe we'll start with Dave, so it starts more chill, possibly.

Dave: I think it's a possibility. I think it gets misused and abused. People just have this weird brain where they're like, "I want that person on my website forever." You know? It's like, people like to just use websites.

But there occasional use cases. I think one thing, you rolled it out on ShopTalk or maybe it's not in this version, where if the audio is playing, any link click will put it into a new window. That's maybe a good use case. If you have video running, that shouldn't take you somewhere totally random.

Chris: I really like that thinking. I like that. That's the kind of thinking I think this needs.

You know this for working 20 years in the Web. People don't change their defaults, right? Some people do. Fine. Of course, they do. Most don't on anything.

Dave: Yeah.

Chris: Anything at all. Any setting, if you have it, the vast majority of people have it, whatever is the default setting you had it on.

Think of attributes on an anchor link that way. The vast majority of links on the Internet (internal, external, or otherwise) do not have this attribute on them. The vast majority of websites in the world have the kind of default behavior of what a link does, which is, it goes to the fricken' page.

If you use this, you're doing that thing where you're changing the setting on someone without them asking you to do it. I feel like that's a little bit selfish.

Dave put it perfectly. People use this because they're just like, "I want to increase my time on site metric. Never leave my site. If you leave my site, you should open a new tab, but leave my site open because you probably didn't even want to leave it. You probably just want to be here all the time."

That's just silly to me. You're breaking the expectation of how links work, but I like that it's possible. I like that we have that ability. I wish it wasn't called "target underscore blank" -- for crying out loud -- in HTML, but that's what we got.

Dave: We probably need a new one because that also sends referrer stuff, but anyway.

Chris: Yeah, right. If you use it, you've got to set rel equals no opener and no referrer. It has space-separated values in order to be safe. Yeah, we could use a new one. Maybe that's a good opportunity for that.

But like Dave put, if you're playing an audio file on a podcast website or something, and you click a link, even an internal link, all of a sudden the audio stops playing, which is this is a whole podcast I want to do at some point because this is an interesting problem. That sucks. You hurt their user experience, in a way.

Dave: Mm-hmm.

Chris: We use it on CodePen in the Pen editor because you're working on something. Like Google Docs should have it for their link to Google Helps Doc because you're on Google Docs because you're writing a document. If you click the help, I don't want to just have my document just close on me. That has this gut-sinking feeling like, "Oh, God! Did it save?! How do I get back to it?"

Dave: It makes you feel like you lost data. Yeah, when you're losing data. Yeah.

Chris: You should use it to improve UX, when you can. Don't stop playing their audio. Don't whisk them away from work they're trying to do.

If that's the case, if you're trying to increase the user experience because you have to open a new tab, then I think that's the acceptable use to it. But just because you want to or, worse, because you think it's some industry standard that you have to adhere to that internal links link internally and external links open in a target blank. I've heard that lots of times in my life. That is not an industry standard. I don't know who told you that, but it super isn't.

Dave: Yeah. No, no, I think it just gets abused. I would use it sparingly. The number of times you use it should be pretty low.

Chris: Think of the UX.

Dave: I can't think of the last time I used it. I know we used it recently, but it was for a very specific kind of thing. It was like if you're going here, you're kind of bouncing out for a one-off kind of thing - or something.

Chris: Yeah.

Dave: I don't know.

Chris: It's not that it doesn't have uses, for sure. I have a whole bunch of it in CodePen in all kinds of different places. We have a linter in our JSX that if you use it, it doesn't talk about the UX because how could it, but it reminds you to use the rel attributes that you need to have with it.

Dave: Oh, yeah.

Chris: For security.

Dave: Nice.

Chris: Kind of a nice little linter rule, I thought.

00:49:31

Dave: I like that. You know what grinds my gears a little bit more than a target blank?

Chris: Hmm?

Dave: I maybe forgot. No, like when articles talk about something but do not link to the source material, like The Verge.

Chris: Oh, my gosh.

Dave: Have you been to The Verge? They do this all the time. They're like, "Oh, Tesla made a new car. Blah." No link to the Tesla website, God forbid. Why would you do that? Because they would leave your site.

Chris: Yeah. Newspapers do that, too. They don't. They don't link to stuff.

Dave: Yeah, they don't link to stuff.

Chris: Why?

Dave: Just put a dang link, man. Be useful. I don't know.

Chris: I couldn't agree more. I don't get it. There must have been some decision at some point that's like, "This will change our editorial integrity," because links have value, and something like the New York Times has incredible SEO value so that if you put a link to it in an article that you're getting whatever New York Times level link juice for Google. That can affect what you write about and what you don't write about because, certainly, you know if you can get a link in the New York Times, you're just going to beg, plead, and steal every journalist over there to write about you.

Dave: Yeah.

Chris: I feel like it changes the game a little bit, but not enough to not link to stuff. My God. You're crushing it for us readers. Don't make me Google your stupid crap in your article. Put a link. Just find another way here.

Dave: Yeah. If InVideo launches a graphics card, please just link me to the graphics card page. [Laughter]

Chris: Yeah.

Dave: Please.

Chris: What's the attribute? Isn't there an attribute? No something?

Dave: Oh, no refer. Yeah, or no--

Chris: Well, no refer means it just won't -- it's like no link juice, but it's not that.

Dave: Rel?

Chris: It's something like that.

Dave: Rel.

Chris: It's definitely a rel.

Dave: We're cool. [Laughter]

Chris: Yeah.

Dave: No. Rel no follow. Bingo-bango.

Chris: No follow! Is that it? Maybe it's no follow. Look in some WordPress comments because WordPress puts it in there automatically, I think.

Dave: Yeah.

Chris: Just to avoid link spam because I think when WordPress does something like that at scale, it actually has an impact on the Web. Put no follows on every link in every comment thread, so now spammers have no incentive to put link spam in posts because they will get nothing for it.

Dave: I think that's awesome.

Chris: It's great.

Dave: I think that's the way comments should be made.

Chris: I think no follow is one of them, but just don't take my word for it.

Dave: Well, people that do it on their name because they knew their name got linked, and so it'd be like, "Austin Web Design is my username," you know?

Chris: Yeah, right.

Dave: Because it's my website. You know? I don't know.

Chris: They do. Long ago, I just stripped all of that crap away from my WordPress site entirely. It has comments, but you can't even leave a link. You can leave a link in the content, but that runs through a little spam catcher anyway. If I see a comment, even if it's a good comment but then it links to Austin Web Design at the bottom, I'm just like, spam. Bye-bye.

Dave: Yeah. Adios. Yeah. Yeah, unless you're adding value, right? I don't know. I feel that about my inbox, too. I get so many. I've got people wanting their boss on the podcast already today. I don't know. I'm like, what are you trying to get here, man? This is not -- normal people don't act this way. That's what I want to say to them.

Chris: "Normal people don't act this way." I really like that, Dave. Thanks for summing up how I feel about all those emails.

Dave: [Laughter] It's just normal people don't act this way. Please be a normal person in my inbox.

Chris: Please. Please. Please. All right. I guess we better wrap it up.

Dave: Let's wrap it up. Hey, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

Head over to patreon.com/shoptalkshow to get in that [techno voice] Discord. Please. All right, it's fun. we're having fun.

Anyway, that's all. Chris, do you got anything else you'd like to say?

Chris: ShopTalkShow.com.