Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset

Boss, and Scott

key.

Welcome to Syntex on this Monday.

Dietrich. We're gonna be talking about absolutely nothing.

Nothing.

Nothing in CSS. 0. 0 pics. No. None hidden initial unsaid. All the stuff that essentially either undoes or does, says the absence of something within CSS. My name is Scott Linsky. I'm a developer from Denver. And with me as always is Wes Bosch. Yeah.

I Ran into something a couple months ago, which was the fact that 0 seconds and 0 are not the same thing in CSS. And I thought, man, like, what else is there in CSS that is none, 0, hidden? We did a whole show on nothing in JavaScript and nothing in TypeScript. You've got 0, null, false, undefined, any unknown. Never. Right? Like, there's all these things that describe this whole world of typescript being.

And then I was thinking, like, wow, we actually have quite a bit of that in CSS, as well as a couple of things in HTML we're gonna hit upon as well.

So let's get Before Sorry. Go ahead. We even do that, Les, I wanted to bring something to your attention that you might not know about.

Oh.

So you you had mentioned that the values are different, even different types of values. Right? And have you heard of the at property, new syntax within CSS that's coming? Didn't, we had,

not Adam. Who was it that came on and and talked to us about it? Promise. Yeah. Where you can register

the type of a property. Correct. I just wanted to make sure that we were on the same page here because This gives you a lot of options with CSS types. Now I I don't know how closely this is related, but the fact that these things are are different Makes me wonder with the typing of CSS variables, if the different null or none or 0 values, how these play into the types of CSS. Because it's not something that we've ever really had to think about, but it's gonna be something that Yeah. Us as CSS developers are gonna have to think about somewhat pretty soon here. Right? Oh, yeah. Exactly. I think Like, which of these none types fall into the categories of Like the number percentage. Obviously, 0% is a percentage.

0 is a number. But, like,

none. Where does the none keyword fall? You don't really think about CSS is having types, but it does right? Like it has percentage, it has turn types, it has seconds types, has milliseconds types, it has,

I guess, keyword types, hidden, none, things like that. Do you want to know what all of the official types are for the property? Are you going to it depends. Is it gonna take 6 minutes to read them off? Or Length number, percentage, length, percentage, color, image, URL, integer, angle, time resolution transformless transform function custom indent, and that's it.

I went fast just for you. You can slow it down. You wanna get all of them.

Alright. Let's start with the first one we have here, which is hiding things. If you want to visually hide something from the page, there's a couple of things you need to think about.

The first one we have is display none. That's going to totally hide the element from the page, as well as from screen readers.

Then we have visibility hidden. That will visually hide the item, but it will not give up its space in the document flow. So If you have an element that takes up 40 pixels high and 30 pixels wide and you have visibility hidden on that, then the space that it takes up Will not go away.

Then we have also, really important thing is visibility hidden is not hidden from screen readers. So if you want to take something out of the page but not actually take it out of the DOM, visibility hidden will still be read aloud to screen readers. So if you do want to hide it from screen readers, you can use aria hidden equals true.

And then the last 1 we have here is opacity.

That. If you put opacity 0, that will visibility. That's kind of the same thing as visibility hidden.

But What what do people use that for for for fading it in when you do want to show it? Right? Yeah. Because you can't really fade in

visibility hidden using a CSS transform without doing some JavaScript or something like that. But also to, you know, another thing it. To keep in mind about these is the SEO part of things. If you want something to, quote unquote, be available in the DOM, just like it is for screen readers, display none will hide it from crawlers as well. I mean, it's not going to be, counting towards your SEO juice if it's display none. So if you're hiding something on initial page load and then loading it in after for some reason using display none, You run the risk of robots not being able to see it. That's a really good point. Yeah. Because we used to hide things on the you know, back more in the jQuery days. I remember hiding things all the time, and there used to have to be a little bit of a a workaround or make sure that, hey, you're not using display none on something that Could eventually become a problem here, right? Yeah. And code that you want to be visible. That's a good point. And I don't think we do that as much because

We can simply just not render the element when it doesn't need to be there because we have frameworks like React and Svelte and whatnot that will

Literally, it's easy to conditionally render something. Yeah. So that's that's visibly hiding things. But what about, like, hiding things from interactivity? So we have things like pointer events none, which pointer events is is how you control the mouse usage of something. So, pointer events. None mean that this thing will not accept click events.

User select none Won't allow you to select the text. Right? These are things that are gonna be hiding the ability for you to interact with something, but not actually hiding it from display. Yeah. Pointer events none is a very handy one. I use it somewhat frequently. If you have some sort of

decorative Like in my in my case, I always put grunge over top of my text.

And if you do that, You are putting an element on top of it and you are messing up both JavaScript click handlers as well as the ability for the user to just like highlight text because sometimes The click will touch on the image or the div that's over top. So putting a pointer events none on that will just it makes it sort of invisible to your pointer events, to touches, to clicks, to gamepad movements,

and it will go right directly through that. And Yeah. I use that one quite a bit. Yeah. Just not it's the only thing it's not doing is actually hiding it from the the visible portion of this. Have you ever Yeah. You mentioned, but I I know I've been to a website specifically where I want to highlight some text, and what I do is grab a big old image or something that's, like, sitting in front. Yeah. And a lot of times people are using that, you know, to block paywalls and stuff like that. If you've ever had a, a site that is a subscription based site, they'll put up a little div in front of everything.

You just go into the dom and delete that sometimes.

It's true. These things can really be abused, especially user select none.

When you try to remember back in the day, people would stop. You would disable the context menu to stop people from like viewing source like that was the trick that people did. I'm pretty sure you can still do that because in some cases you want to use your own context menu or You don't want to be able to pop things up. You don't want someone to be able to select something like a good example with user select none would be if you are building a drag and drop interface.

The text inside of the drag and drop interface shouldn't be sometimes it shouldn't be selectable. I guess it depends on where your cursor starts, But, you don't want someone to be able to try to drag something and then accidentally

select the text that is on it. Yeah. That is an interesting case because it does feel like that would hinder the normal use case of like, oh, I want to select and copy and paste this text, which would then be removed from that ability with that. So I don't know. Yeah. It is one of those things I don't find myself using, user select pretty much ever, but, it's there. And I I I'm sure, like you said, building your own custom context Yeah. Contextual menus and stuff. Slider is another good ample is if you

are trying to swipe through something you don't want if somebody, like, long presses on it or holds it for a while or they're like

their mouse is in the wrong spot. You know, sometimes you can accidentally select the image and try to instead of actually trying to make a swipe. So there's little edge cases. I wonder if you have like a carousel with, like, a icon font or something. You had a font or or a font specifically that might have a triangle symbol, and you want that to act more like a button. You don't want it to be selective, all those types of things. You know, 1 I'm wondering is

if you had a paragraph with a span in the middle of it. If you put user select none on the span, would it just not select the span, but the text around it? Should we try it?

I think you should try about it now. Alright. One sec. I'm I'm gonna yeah. I'm gonna also try. The answer is yes. It selects,

everything except for the thing. Oh, that's actually really nice. So if you had like a little like an icon font in the middle of your thingy, you didn't want them Like the actual icon itself. You put user select none on your icons. Yeah. I just tried it on an anchor tag, and it

selected everything but the anchor tag. Beautiful.

Next one we have here is inline elements.

I like to call these ghost spaces, and every now and then, especially when I was teaching the boot camp, it. It would pop up where people say, I don't know where this space is coming from. I put padding 0 on it. I put margin 0 on it. There's no grid gap on it. You know, you do all the things to take away the spacing, and then you have 2 like the classic examples. You have 2 images that are On the same line in HTML, not on each on their own line, but if you have an image next to an image in HTML, which is kind of weird that HTML differs, spacing based on how you write it in HTML, if they're each on their own line or if they're not. I hate that. Yeah. Yeah. I hate that kind of funky.

So you get this tiny little space between 2 in line elements that you can't get rid of.

And that's because they are beside each other. And that's just I call it ghost space.

And the way to the way to get around that is you can either oh, sorry. You can put them on the same line together if you want. That will get rid of it. Or you can set a font size to 0 on the parent and then reset the font size on the actual element in that by setting a font size to 0, the ghost space is determined by the font size, and it will get rid of it. Interesting.

Yeah.

There's also the values of none and 0 often used. You know? It's it's funny. There's, like, 2 types of developers, especially, like, people who are Are working, like, in a border context or something like that. And the people who put, like, none for border versus the people who put, like, a 0 for border. Right? Yeah. Which are effectively doing the same thing. You're saying this this border does not exist.

But none really makes more sense if there's no border. Right? Especially because you just wanna say, hey. It there's not a border here. Maybe there's a border and you're overriding it, removing it. You're saying no. There's no border anymore.

List style is another way that we often use none. List style, none. We don't want to have a list style, which It's one of those things that I don't know. Do you ever get control issues around that? Like, where you're like, oh, I want list style none for everything. But wait. No. I don't. I actually want list style none for most things in the interface, but I do want the list style for UL's inside of the body.

How do you personally control that? Yeah. I will usually

make Either I'll make a utility class, where I put it on each unordered list. Or if it's the case of like a blog post, You're not putting classes on your blog post URLs.

So if that's the case, then you just say any unordered list that is inside of a blog post, but is not inside of a block quote or something like that, then apply the following styles. And I think it's pretty easy to do that type of stuff. I usually don't.

Carte blanche take all of the list styles off Because that's the base style, right? I'll just take them off as I need them, like in the

if you put if you have an unordered list in your footer or in your header and your nav, something like that. Yeah. I feel like that's the one lesson I never learned. I like start a project. I go to say, oh, I don't want these list styles everywhere. I got turn them off, and I start building, and I'm like, oh, no. Wait. That's a dumb idea. And I feel like I do that every project. You know, the one that I do is I'll take the

margin and padding off of the unordered list right away.

And then I'll have that nested.

Yeah, we'll have a nested unordered list.

And then You can't tell that there's indentations, right? Because the padding is based off the parent padding. So if that's the case, you say, okay, when there is a u l inside of a u l or a o l inside of a u l or a u l inside of an o. You know, they get to do all the the combinations a You're rebuilding it back in in

your own way. Exactly. It's funny. I also learned it, recently because I rebuilt the syntax color palette that some of these new color, pickers and things like that, like okay LCH, which is one that we used. You can use the value of none to indicate everything. So if you do okay LCH none none none, it's gonna give you black.

Or if you do okay c okay LCH 100%. None none. It gives you white. Right? There is no hue. There there is no chroma in this thing.

There's only lightness or darkness and or occasionally not even lightness. So I I thought that was a really interesting way you approach color because I don't necessarily think about that. That's the same thing as 0. Yeah. Because what you're saying is is is literally that not that the lightness value is set to 0. You're saying, hey. There is no lightness whatsoever.

It's really interesting.

Is there a difference between? No, no. That's just the way it reads. Display. Yeah.

Just makes it nice and obvious that there's Yeah. Nothing there. Yeah. It's it's kind of the difference between, like, null and undefined,

you know, right? Yeah, explicitly nothing there is explicitly nothing, whereas 0 is a value of nothing.

I know, man. What a world, right?

I'll ask you about border. So you're taking a border off.

You say I think I probably know the answer to this, but do you say border 0 or border 0 p x?

I Or do you do unitless. In my in my ideal world, I would probably keep the pixels there just for consistency's sake. Yeah. But I'm pretty much always do

just 0. I don't know. Actually, I would love to find some of my code for that. You know, I've been a unit less 0er for my whole life. However, I ran into a couple of issues with CSS calc in the past.

If you are trying to add a number to 0.

There's certain conditions where it makes sense to have 0 instead of just 0 Because you will course the output into a pixel value rather than it might not know what 0 is. But if you have 0 px, you say, all right, We're working with pixels here, and that can be handy if your inputs like if it's 1 it works. But if it's 0, you can get into some trouble. So maybe setting it to to p x is a good idea in that case.

Yeah. You know, it is one of those things that I feel like I just have done it the same way forever, but, like, I've never thought about it ever even though I'll see it in somebody else's code and just be like, alright. That's how they're doing it. Okay. Fine. But it it doesn't have, like, a huge impact to me. Right? The I guess the only time I, you know, the only time I do think about it is if I'm To go back to the same conversation we had said about using, like, none for border or anything like that is if I'm, like, animating. Right? Let's say I have a situation where I want to animate the border and have that border increase in size from 0 to 10 or something like that to have it do like a little, then I will use 0.

I do feel like I might use none somewhat frequently as well just because that's like a situation. I'll find myself refactoring some code. You know what is worse when you can't remember if it's none or 0? What?

Like, there's a couple properties. What is that? I think you're lying there. For a joke there. So I thought Oh, no. That literally. That's the thing is that like I'm trying to remove this like you set something and then on a child, I need to take this off.

Do Do I change that to something or not? Yeah.

Collapsing margins in CSS is kind of an interesting one. I don't know. Would you consider this a none version. If some if you have 2 elements that touch and they both have margin, the greater value of the 2 will be the margin between the 2. So if you have 1 element with margin bottom 15 and another element underneath it with margin top 10, you're not going to have 25 pixels of margin. You're going to have 15. They'll collapse into

that. I don't know if that belongs in the show, but I threw it in there. What the heck? It's the absence of I mean, it's like a negative. Yeah. Well, it's like let let me, or no. I guess it is more of a 0 because one of them is just straight up not counting. Your pricing margins are like a very frustrating thing for me in general in CSS. But all right, let's talk about

0 units versus 0 itself.

This is something that I ran into in the past. I said, you know, when there's something in CSS like 0 pixels, your rem, 0% and you just write 0, There are a couple properties in CSS that will break when you omit the unit and just put 0.

And I ran into this as transition delay.

I had put a 0 on it, so I had I had a bunch of things that were animating around the page. And I think I put like on one of them, I put 2 second delay on it. Another one, I put a 5 second delay. And then on the 3rd one. I put a 0 second delay, so it starts right away, and I just put 0 and it wasn't working. And I thought, that's weird. Like, what's going on with this? And it turns out that transition delays. 0 is not valid, but 0 seconds, 0 s or 0 MS is valid. So in that case, you do have to pass a unit value. And I posted on Twitter and a couple of people posted Tab Atkins, who's one of the CSS spec authors. He said that unitless values were a mistake. I thought it was kinda interesting. I agree with that statement

as a whole. Like, I I'm the type of person. I'm gonna use a unit list value sometimes just for funsies or just because of habit.

But I do agree that the ambiguous nature of not having units on everything Yeah. Is highly confusing to many people and probably confusing to people just learning this stuff, especially because one thing that it leads to is it leads to different people authoring essentially the same CSS in different ways, which I I've looked at some people CSS sometimes, and it's like reading a completely different language. Like, what what is the the strategy here? What is the

And it's usually always valid things. It's just some of these learned from somebody else, and therefore, they've picked up different habits. Right? That's interesting because like I would say probably most people listening to this podcast would say like or even have us go as far as have a lynching rule that say, all right, if you're saying 0 Units, then just put 0. But it may that's a really good point in that, like, if somebody if you put 0 on something and then someone comes around and says, alright. Well, I need to actually you change this to an actual value.

What are they going to use? Are they using pixels? Are they using the rems? Are you using degrees? Are you using percentages? But if you put it as 0 degrees or 0 turns or 0 pixels, then they know. Okay, well, I should just change this to 10 pixels. You know, it's kind of stated what we are using here. Mhmm.

Good. I like it. Maybe I'll start trying that.

Big maybe. Okay. How about this? We'll put in a style and rule in, in the syntax website to make sure that we always use units To save us from ourselves. I wonder if that is actual rule. Can you tell me any other CSS properties that do not take a unit less 0 that do not take a u are they listed in the show notes here? Because Yeah. Are you did you read them? I've well, when you start asking the question, I averted my eyes from the next part of the list. So I'm, like, intentionally, like, trying to look away from it right now. Okay. So you said seconds in milliseconds.

Yep. The that cannot be unitless beyond time, degrees. Did you say degrees?

Degrees is one of them. So font style oblique 0 is invalid. I didn't even know that you could past the amount of degrees that your font was oblique.

I guess I did not know that. Yeah. Oblique is fake italics. Is that what that is? It's just yeah. It's one of those, like,

old properties before we had font face or something to get slanted text or what. Oblique type is a form of type that slants slightly to the right and is used for the same purpose as italic type. Unlike italic type, however, It does not use different glyph shapes. Yes, exactly. So if you have a font that does not have an italic weight, you The browser will just tilt them a bit and you can I didn't even know this? You can specify how much it tilts. You can that interesting. Very interesting. Wonder how far you can go. I guess you could just use skew.

Oh, that's great. Much of calc breaks with unitless zeros. We talked about that.

HSLA, you cannot pass a 0.

It must be 0% for the hue, which is another one that I would have thought. Wow, interesting.

So and all of the stuff related to perspective, 0 will break and anything with timing. So transitions

whatnot. We talked about will break it. You pass a unit 0. That makes sense. Right? It's so that would be very ambiguous, but also, yeah, Does feel like a lot of these newer properties having unitless values is either only there for longevity sake or to match things that already exist. Right? Mhmm. Where transition is a fairly newish property. And I have no idea if that actually comes into play here, but just first thing I thought of.

Let's talk about unsaid in initial, which are fascinating because you did a Twitter poll. And let me just say, for the record, Wes, I got both of those correct. I can prove it.

I can prove it that I got both of them correct. I don't think I would have got it. I got both of them correct. Yeah.

And, I was very proud of myself because after I submitted that, I was like, Okay. Did I actually Did I goof up? Is everybody else right about these? So yeah.

Almost everybody got it wrong. I think it was something Yeah. Which is why I was, like, second guessing myself immediately.

Yeah, and I don't know if you ask me what are the differences between unset and initial? I don't know that I would have been able to explain it to you without looking it up because it's not something you use every single day. That's what a lot of people said. Oh,

I've never used that before. I I've never used it before. I think I mostly guessed out of logic and got got lucky somehow. Yeah. Well, ex explain to us what onset and initial values do. Okay. So unset will revert to the inherited value, and it will ignore anything set directly on the the element itself where initial will revert back to the browser default itself.

So unset basically says, hey.

If if you have applied a a p color. If you you say p color red, and then you use unset in the next one, that p color will get its color from other means of the color being defined. Like, let's say you have a div wrapper around that paragraph tag with a color. That color will still apply to the p tag, But the red that you assigned to the p directly will be removed from it. And initials just gonna say whatever this thing, the the reset that comes from the browser, which is typically just black for text or Yep. Whatever the purple blue colors that we have for links and stuff like that. Default browser styles. Default browser styles. Yeah, and people are saying, like, when would you ever want to use that.

A couple of use cases for Unset would be if you are embedding some HTML and CSS from an external widget, and they put their own styles on it. You know, sometimes you go to a website and you see something and you're like, oh, that that doesn't look like the rest of the website. And it's because whatever third party embedding thing they're using is applying its own CSS rather than you going and trying to overwrite all of the styles to match what your website is. You can go in and select all of those elements that have their styles and you can say unset. And what that will do is it will say, Okay, the styles applied to this element are unset, and therefore they will now inherit any properties that that have been set above me. So common ones are colors, all of the font stuff, font family, things like that.

It will allow you to unset it, inherit.

Another kinda interesting use case that I had. Sorry. Before to interrupt you, that's a such an awesome use case for stuff that I have in the past taken a look at that and just been like, I guess I'm just gonna copy and paste some CSS, or I'm gonna abstract and start dropping classes in here if I can. Yeah. But it it that's a great use case for that, and I've never considered that at all. Another use case is with CSS variables.

If you have something that has, like, let's say you have 6 cards and there's a CSS variable on all 6 cards. They've been applied and you say, Okay, but this 1 card, I don't want it to take that value. I want it to inherit from whatever is a little bit up higher.

Rather than reset the value to whatever it was. You can unset it and it will say, Okay, well, somebody set a variable on me. I'm going to ignore that.

I'm going to go up, look up the DOM tree to whoever has now set a CSS variable and grab that value.

Interesting. Last ones we have here are some HTML bonus ones. So these are no none. All true in HTML. So user scalable equals no.

This will stop your user from being able to pinch and zoom on a website.

Almost always, you don't want this. It's very frustrating when websites disable this because I simply just want to Zoom into a photo. This happens a lot to my kids like on Google Photos.

I show them some pictures of something, and they want to pinch and zoom into it, but you can't because they've disabled that.

A lot of times people use this when they're developing an app and then they implement their own pinch and zoom on the photos themselves rather than the entire app because that also is annoying if somebody zooms your entire website and then all of a sudden they They have to scroll side to side. You know, you get that bit of a pain in the butt. So that's how you disable that. Just about never do that, though.

Yeah. Yeah.

That's also bad for accessibility. Right? Like, people like to zoom in on stuff. Some people are stubborn, and they're like, I'm not gonna increase my font size. I can read just fine. Let me just zoom in on everything all the time.

Right? What about role of none? For our like an is like an ARIA role. This is hey. This has no purpose

be used for I don't know. I never use role of done. Do you do you use this? That's a good question. I don't I don't know that I I have used it in the past. I wish that I just had a search on my entire computer That I could search all the code I've written because I use all these like Raycast and whatever searches. And if I'm searching for a line of code, it always just finds some like bundled node module thing and like 18 versions of Babbel when I'm searching, so that would be kind of cool to be able to search my actual code. I guess I could use GitHub search.

But anyways, role of none will indicate that the element should not be mapped to any ARIA role. So if for whatever reason you are using an input or a tab or something that you're like, You know what, I'm using this not in the way that it is meant to be or I do not want screen readers to be able to pick up on it.

You can put in Aria role equal. The opposite of role is often, and this is this happens with like Facebook and whatnot, is if you are making a div or a span into a button or a tab group or anything like that, Then you would say, Okay, I know that this is just a regular old div and this is just ignored by screen readers.

But if I put you say role equals button, and it will show the the browser and screen readers. Okay. This is something that's clickable and should be focusable. I was gonna say is that like you think like a like a honeypot

input or something that you would have. You would you would probably want screen readers to ignore that. Right? Yes. But I think yeah. That's a good point because you could like,

usually with honeypot inputs. So for anyone who doesn't know, a honeypot input is an input that you put on a form that you usually visually hide from the user, hide from screen readers, but For whatever reason, a robot that is trying to spam you will,

will try to

because they're going to see it in the DOM. Yeah. So and then on on your server, you can say, all right, well, if they filled in the honeypot, then obviously it was a like a a spammer because there's no way any actual user would be able to get to that input and autofill it. But, like, I often think about that. I'm like, well, then, like, Are the bots really that bad that they can't figure out if

a button is hidden or an input is hidden? You know? In in my experience, the honeypot inputs don't do very much. I've I've added, well, like, I have a form to get this against I'll just throw a honeypot field on this thing and solve it. Okay. Never mind. They figured it out in, like, no time. So Yeah, I think we need a

we should do another show on submitting forms safely on the Internet because

Robots have ruined everything. Ruined everything. Totally. I know. And and Captcha suck. They're sincerely are awful.

What is so we also have disabled false, which The only time I use disabled false, which is essentially to say, like, there the state is not disabled, as in this thing is active, Is if I just am using a straight up JavaScript Boolean toggle on something to an input, and I wanna have it occasionally be disabled false or disabled. True. As in this thing is disabled, but then also be able to toggle it. That's pretty much the only time I'm using disabled false.

Well, disabled false is true.

And all of HTML attributes with you. What are you talking about? Yeah. If you Go go make a go make an input and say disabled false. I guess I don't use this then. Yeah. So the simple with all HTML attributes, except for ARIA attributes.

The simple existence of the attribute will make it true So you can set. I always do disabled equals hell yeah, brother, because it doesn't matter what you pass to the disabled. Same with autoplay.

Autoplay equals. Yeah, buddy. It doesn't matter because the value of those attributes doesn't matter. It's the existence of them. So that's why if you're trying to toggle them in most reactants felt they'll take care of that with the actual Boolean.

Show it or hide it. Yeah. You're right.

Oh, man. Is that okay? I don't do that. I guess I thought I did that, but I must not have because there's no way I would have shipped that. You probably pass a Boolean

to Svelte, And it takes care of adding and removing it. But if you pass a string of true or false, it's not going to work. HTML doesn't work that way. You are dead on. Yes.

And then Aria hidden true. We talked about that. We don't have to go over that one again. So that is not a zilch 0 0 p x nothing unset initial in CSS.

Hopefully, you learned a thing or two. Anything else to add there, Scott? No. I was trying to, like, think

of a word that was 0. I I add 0 to that, a pixel or a, unitless unitless answer. 0.

Beautiful. Alright. Thanks for tuning in. Catch you later. Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.