Select text to annotate, Click play in YouTube to begin
Hello, my friend and friends, if you write or ever written blog posts that involve code snippets, but also things like keyboard shortcuts that a user might use or like a go-to file, save as or something like that, you might have used code blocks like this around everything, and you shouldn't be doing that. There's actually another element you should be using instead of just wrapping everything in code. And I know if you're writing a blog post, you might be writing a markdown, and it's very easy just to put some backticks around something, because when we're
writing in markdown, then the backticks get turned into the code element. So it's the easiest way to do things, but want to think about this a little bit, because first of all, if I just come in and I have some, you know, when we have code, often we have like a little bit of formatting on there, so let's turn that on right now. And now all of the code stuff here is getting highlighted, and it looks a little bit different, which is very normal for a blog post or something like that,
where we want to sort of distinguish our code inputs. And the problem is, if I put the same styling on all of my code snippets, as well as user inputs, like shortcuts or menus or things like that, it doesn't distinguish those different things, which I do think should be distinguished. But there's more than just that into why we should be doing it, because this is for code, and then we have other elements for other things. We're going to see two different elements in this video. The first one
being this KBD that's right here, which is sort of like keyboard is how you think of it, but it's basically for user inputs in general, though it can be used in kind of a different way too. There's a lot of new ones to how this works, but there's also a lot of benefits of actually using it, not to mention it's the correct thing to use, because it's the semantic element for this stuff. But there's other advantages to it that come on a developer experience side to, and I want to be exploring
both of those. But the most important one is that you're using the correct semantic element. Start there, that's the win, but it also makes it easier to do other stuff. So for example, let's come in and just say we have my code comma KBD for now. And if I do something like this, you'll see here I have this other thing that's coming in my command C, I have an escape here, and it just looks like my regular code thing. So we don't want to do that. And this is why having
a different element is nice, because it means we can actually very easily style things different. So I'm actually going to come in with a little bit of styling that I've already written right here for my KBD element, just so we don't have to go through the entire thing, but I want to make it look like it's actually a key. So now we have this sort of depth that's coming in on here, and we can zoom in a little bit on that just so we can see it a little bit nicer. And we get this escape that's coming in right there, it looks like an escape key. And it's a nice win. I'm just
using a box shadow for that to give it a little bit of that fake in depth. And you could probably make it a lot nicer than this. But yeah, just a quick box shadow on there is doing the job. And then I am adding a margin inline end, which would be the margin right side of 0.25 CH as well, because of this extra shadow sticking out the side, just to give it the space here. So we're not touching the word two. And I use the CH character here. So if I change the font size,
that's based on just with the font. So a nice little use case there. Now you might be saying, this looks cool, but Kevin, what the heck is going on with the command plus C that's going on over here that does not look so good. And this is where KBD starts getting a little bit interesting, is if you have a chain of commands or a chain of user inputs, I guess I should be saying, where to be able to do something like that, let's scroll on over because to right here where you
can see I have KBD. And then all the way over here, I'm closing a KBD. And then in there, I have nested ones. So I have that one and that one. And this is because what I'm saying is, this is my user input is command plus C. And then each of the user inputs within that whole user input is my command key plus the C key. So the plus isn't actually a user command. It's just sort of
signifying that I'm using these two keys together. So in a case like this, it's actually appropriate to do it in this way, which can definitely look a little bit weird. If you're like, Kevin, I don't want to do it this way. I think it's probably okay just to leave the outer ones. But we can fix the styling of this pretty easily. So I'm going to zoom back out for this just because my code is way too big. And what we're going to do here is where I have the KBD, I can actually say
not has because has has good support now KBD. And do that and whoops KBD, like there we go. And now if we go look, we can see my command plus C is fixed. And this might look a little bit weird. But I'm basically saying that I'm selecting a KBD as long as there's no KBD nested inside of that other one. And I don't think I'd ever nest three deep, but this would also solve for that. You'd only ever be selecting the most inner of all the KBDs using this type of pattern.
There might be a way of doing this without using has, but I'm happy to use has these days. The support for it is pretty good. But I will leave a link in the description to the support table for has just in case you want to check it out. And I'm also this finished code for this will also be linked in the description as well. If you want to play around and explore it a little bit if you're not following along right now. And so yeah, that's the KBD is for user inputs. But there's a bit more to it because sometimes user inputs aren't keyboard commands where you're clicking things.
User inputs can also be going through like the file menus, right? File, save, and other things like that. And that's where things get a little bit different. And another element actually comes into play. And there's a the new ones of it gets a little bit deeper. But before we get to that, I just want to say really quickly if you do have trouble keeping up with maybe some of these more niche features that you don't hear about too often. Or sometimes I know a lot of people tell me they're having trouble keeping up with all the new things that are coming to CSS. I have launched a new
website called the HTML and CSS tip of the week that you can check out. You can either sign up for email. There is an RSS feed if you don't want any more emails, which I totally get. So that's why the RSS feed in here. And if you just want to visit the site whenever you want, you can do that as well. And I have articles once a week about things that not enough people know about. And sometimes there'll be more practical tips like the one that I most recently put out another times it to be on
something like the KBD. In any of these cases, the article doesn't go deep dive into what it is. It's more about helping you be aware of these things because that's what we want as a developer is to be aware of these things. And then when we go, oh yeah, I think there's something like that that I actually need right now. And then you go and look up and see how it works. So this is just about, like, here's sort of how you use it. And if you want a deeper dive, you can go into this blog post that's right here. And I do that for all of them. So if I look at the empty one, not too much
information on it, very quickly done. And then a few different resources. If you do want to dive further into the topic and actually learn more about it. So if that's interesting to you, the link for that is also down in the description. But let's get to that weird other element that isn't in the HTML and CSS tip of the week article, which is when we want to be doing things like showing either the file menus or system messages and system outputs and other things like that.
And we're going to be starting by talking about this Samp element. And to get that, I'm actually going to jump on over to MDM where they describe the Samp HTML element is used to enclose inline text, which represents sample or quoted output from a computer program. Its contents are typically rendered using the browser's monospace font. So the example they give here is I was trying to boot my computer, but I got this hilarious message. And then in the Samp here, you put what the
message was from the computer. So you're showing what a system message might be. Again, blog post, technical articles, things like that. This could definitely be something you would actually use it for. And you might want to style these. So very quickly, it's just add a background color to this one. So you'd have like something that just makes it look more like a system message, right? Or stand out, look a little bit different. So I'm just adding some padding, a border and a background, nothing too complicated going on right there. If you want to know more about this, there's a card
popping up or a link down in the description. I'm not going to dive into relative colors right now. It was just an easy way to do this. But so Samp can be useful in its own just for that type of thing when you're echoing or showing an example of what a user input might be. But it can be combined with KBD in two different ways. Sometimes the KBD will be on the outside and the Samp is nested inside and other times it's the other way around. And it took me a minute to wrap my head around
it and figure it out. The MDM article for KBD, which will also be linked in the description, does describe both. So you can check that out if my description is not good enough, but I think I got it down where if we come down here to the examples, one of them is here where this actually might be weird because I have a Samp, then a KBD, then another Samp, which also is breaking my
styling of things a little bit. Oh yeah, it's breaking my styleings. We'll see how we can fix that in a minute too. The reason that we're doing that though, as you can see here, is the Samp on the outside because I'm showing an entire system message. Then I have this KBD and the KBD looks like it should be for keyboard and I'm guessing that's what originally was for, but it's basically for user inputs. But if it's a user input where they're not like writing something on their keyboard,
but they're pushing a menu, right? So if in code pan, if I come in here and I get this, this is a system menu that's being exposed to me and I would be clicking on it. So it's a system menu that I'm describing, but it's also a user input of what I should be clicking on. So we're actually are these two things. And with that, so we have the KBD because it's the user input, but it's the user input is the thing that's being echoed back from the system. So it's a user
input that's something being echoed back. So it's a menu thing being echoed to me. So in that case, we do the KBD on the outside and then the Samp on the inside for that type of use case. And because I'm echoing a bigger message on the outside, I also have the Samp all the way out here, but ignore that one. But this is sort of that use case there where if it's a user input that is a menu item, it would be the Samp on the inside with the KBD on the outside. And you might see it for
use cases like this too with the file save as right because if I come down to that, we're doing the KBD on the outside all the way to the end. This is the same as when I did that command plus C for copy before because you have the whole set of things wrapped in a KBD. Then for each user input, it's a KBD with the Samp inside. It's kind of weird. And even in the docs, which I'll link below,
I do believe they say you can omit the the Samp from these if you wanted to. But I find it kind interesting to do it this way. And it makes sense once you think about it a little bit, even if it's getting a little bit messy, I'm going to grant you that. But I do want to mention that just like this actually opens up a lot of styling hooks that we can get into with CSS. So first of all, we're using the correct semantic elements. That's the most important thing. But it also means I don't have
started throwing classes onto things, which is really, really nice because that can get really annoying very quickly. If you're especially if you're writing mark down, you don't want to be using classes. So if you were doing code or spans or things like that and you wanted to distinguish keyboard inputs from other things, it starts getting a little bit annoying. And in a case like this, I might actually want to change the styling of a few things. So the first thing I'm going to do here, just to fix the styling where things broke here a little bit, we had the KBD not has KBD. I'm also
going to put a Samp here as well. So this is going to style things a little bit differently right away because now I'm styling the Samp here. I'm not styling the KBDs anymore. But now of course, these are still not fantastic. But then we could also come in with something like this where I'm saying, if my Samp is inside of a KBD, I'm changing the border radius and the padding on that Samp. So they get a little bit smaller. And we get these different situations for depending on how the nestings being used and the different types of things we're showing because I don't want this KBD
to look like a keyboard button anymore because it's not so that this solves that problem. And then if the Samp is inside, that means I know it's like a menu item. So I could style this to look more like a menu item versus this, which is more of just the computer output text that's showing up on the screen. And I did mention there's one other use case, which is we're going to jump back over to the MDM page. Once again, this one will also be linked in the description, which is the Samp one,
where it's if we have a KBD that's inside of a Samp and not the other way around because before we are looking at the Samp inside the KBD. So this is if we have a Samp, which is being a menu that's being echoed out to the computer, but that's also showing something that was user input. So and the example here is if you're doing something like a command prompt where this is the part of the keys that the user is actually pressing. So yeah, it definitely gets a little bit weird. You
have to think about it a little bit, but it all does make sense at the end once you understand all the different use cases. And because of the different ways the nesting happens between them all, it definitely opens up a lot of the possibility of styling things. It takes a little bit of setup, a little bit of work, but it's a lot easier in my opinion than having to use classes or other things. Once I actually start putting my blog posts together or other things, and most importantly of all, it means you're using the correct markup as well. So I hope this little deep dive was
interesting to you. I know probably not the video for everybody, but for the right people who've made it all the way to the end. Thank you very much for listening. If you are interested in the HTML and CSS tip of the week, do remember it is linked down in the description below. And with that, I would like to thank my nablers, Vossam, Andrew Simon, and Tim as well as all my other patrons and channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.
End of transcript