 Everyone. Amazing. Hey, look at my beautiful title slide that I just did now, because I've not done one. This is a really rough draft of a talk that I have to give at a conference that might happen. It's rough because I am being stuck trying to work out what to do with it. But it's all about HTML, which is why there's nothing in the CSS tab. But we'll get to CSS piece later on. And the thing is about HTML, I mean, actually, I should backtrack. When I left Singapore, I said, where's my CSS fix? And there was Melbourne CSS, but it stopped. So I started it again. And because as Waging knows well, we have to fill time all the time, we should have HTML elements in the month because no one actually knows HTML. So every month, we go through a different HTML element that no one knows anything about and talk about it, just as something because no one ever wants to speak. So this talk is pretty much a compilation of those things, if that makes sense. So it's things that are new in HTML to people who haven't been paying attention, I guess is the long title. Some of these things are new-ish, but they're not really. I mean, we got to HTML5. Everyone was kind of along with that, and they understood that. But the standard didn't stop. It's a bit like CSS. We got to CSS3. And everyone's like, OK, so CSS is done now, but CSS has never done. Otherwise, the CSS news would be really short. So HTML, is there HTML6? Not really. It's living standard. New things keep getting added. Browsers keep implementing things. And new features do get added to browsers as time goes on. So let's start. I'll go through some of the ones that some of these are useful. Some of these are not. Some of them are really, really not. Some of them you can actually start using now, depends on what you're trying to do. We'll start with progress, which is progress. This is a progress bar. You'll see how I'm referring to Melbourne CSS. These are all on CodePen anyway. So this is a progress bar. When do you need a progress bar? If you're downloading a file or uploading a file, you can track it. And you've got a native control during progress. How cool is that? Everyone needs progress. Native, you just get like that. You can have, once this reloads, that might be a little bit tricky to see, but you can actually have an indeterminate state. So as it goes, if you don't know how long something's going to take, it's got an animation on it in macOS. I can change the value. And there we go. Look at that. That's pretty cool. Since this is Talk CSS, your first question is, can I style it? Can I? Can I? And the answer is, you bet you can. This is not working how I wanted it to. Now I've got two comments. Sorry. OK. Now this is where things get really interesting. The HTML for this, it exists. So all you need to do is drop your progress in. You've got a maximum. You can set a value pretty straightforward. If you want to style it, it gets difficult. Why have I still got a rogue thing in there? There we go. The first thing you need to do is basically tell the browser that you're going to override everything the browser wants to do. And that's by setting appearance of none. You'll see this with all these controls that I'm presenting today. You basically throw away everything that you've got. This is pretty similar if you've done anything like custom inputs or something like that before. You'd be familiar with this. We can then start setting things. So I'll set a width. I can set a height. There we go. And then we get dark. Now if I inspect this thing, and my inspector's very small there with me, if I look at the element, normally I've just got an element just like anything else. But I've turned on shadow DOM as enabled in browser. I think every browser's got shadow DOM in there that you can inspect it. I'm pretty sure. I don't know about IE, but once you actually get into the shadow DOM, this is going to show things properly. It doesn't look right. That doesn't look quite right. Usually we can see pseudo elements and things. So maybe not so much for this one. But you end up into browser prefix land. So this is a WebKit one, but I'm in Firefox, so that's not going to do anything. And that's WebKit again, so that's not going to do anything, but I can do a Mozilla. And none of these, I don't know if they'll ever become blessed and become real standards at any point. I haven't seen any signs of that. Weijing, have you seen anything like this? Or it's going to turn into a real standard? You mean HTML? Like these things like this, where it's a shadow DOM selector? Shadow DOM is a spec spec. But I think it also depends on who's pushing it. I believe it's the Chrome people who are quite big on it. So I do think that there is work on it. I don't hear a lot of interest, and that might be a thing. Because as you're also aware, it's a popularity contest. What if you just get shit, right? Yeah. But this is well into edge cases. Most people would rather spend, actually, they'd rather just Google and download a library that doesn't in 3Meg, rather than learn how to code the thing. And some of these get a bit sketchy. Browser support's a bit hit and miss with some. Depends on exactly what you're trying to do. But the thing is, you can actually style most of these elements really well. And this is a progress bar. I've used one before as a file upload. And it is quite good. You can do pretty much anything. It's a background image that you can apply to it. So I put a linear gradient on it to make it look kind of interesting. Oh, that's right, I did a button. Oh, let me reset. OK, that's right. I don't know why I'm making that small. If anyone's familiar with CodePen, you've got HTML and CSS. There's actually a third tab as well. I found this the other day. And you can write this thing JS. I don't know what it is. But you can do stuff with it. So I wrote something. Look, if I keep hitting this, I could have done this in a lot of better ways. But this is basically what you'll see if you're downloading your file. You can actually pop that in the browser, which is awesome. I feel like making this go all the way to the end. Hey, so that's progress. Can you use it? Yes, you can. Support is reasonably good for memory. Where are you? That's not showing me support. That actually works in IEUP. Accessibility, I think, for memory is pretty good. I don't have my research in front of me at the moment. But basically, if you do need a progress bar for something, you don't need to write your own thing. I mean, there are a lot of ways you can do it. Just put a div in there and control the CSS or something. But this is proper DOM-oriented native progress. I use one of these in one of the applications I'm working on at the moment, where it's a multi-step form thing. And there's a progress bar at the top. So every time you navigate to another thing, there's progress so you can see what's going on. You can also animate the transitions too, which is quite good. So that's progress. Yay. Now, similar to progress is a meter. And a meter, this is not like the measurement meter. This is not as in distance or something like that. This is a meter is in almost like a gauge, I guess. And this is a really interesting one, because you've got colors and things like that. And you can change them according to, depends on the value. So I've got my minimum value, my maximum, and you have these values, low, high, optimum. So at the moment, I've got my value of 15, which is low. If I drop that below, if you watch, the color will change and now it's red showing that it's bad. So once I'm in range of somewhere in there, it's gone yellow. If I start creeping that up a bit, let's try 27, I'm still yellow. Once I actually reached the high mark, it will show, do I need to be 31? Yeah, there we go. So now I'm actually good. So you might look at this and think, oh, what's the point? When am I ever going to use that? And the when is something like a password meter. So you want someone to enter in a password, you want to make sure they don't put ABC1D3 or something like that, password one or their name. You can tie the meter to what's actually going on here. So on this one, what I've done is basically said that when you put enough characters in, then it's good enough. So as I start typing my password in here, you can see actually tied up to the wrong meter. Yes, I have. Well, they both have the same ID. They both have the same ID. That's why, and I'm the only doing it on one. Let's try that again. There we go. So as I'm typing, you can see the meter is actually changing for me. So this is equivalent of having to wire up your own thing to do this. So, you know, works, reasonably supported, can actually do stuff, not so terrible. Can you style it? I don't know if you would want to. It's a bit odd. It kind of does what it does. I think you can change the height and the width, but that's about it because things like the colors seem to be set. I don't know how that would fit into cultural things because, you know, red is bad. It's not necessarily bad in some cultures. So I'm not too sure what the pseudo select is. I haven't found that much written on it, to be honest, because it doesn't seem to be very well known. But it's got a very, very particular purpose that exists, which is awesome. Okay, now the range. This is what everyone calls a slider, but it's actually called a range. So I can slide it up and down and choose a thing. Now, the idea, like, why would you use one of these things? I've been doing web things for way too long. I've done web forms for way too long. I've only used a input type range in the last two years ever. I've never had a reason to use one before, purely because of the projects that I've been working on. So why would you actually need one? You need one because there's a finite list. You need to actually choose something that comes from that list of things. So that's a basic range. You have a minimum, you have a maximum and you can preset the current value should you wish to. What else can you do with it? You can attach a data list to that. Data list is another one of those weird HTML elements that doesn't get used all that much. So from the input, I add my lists, which I refer to by ID. And this actually adds, what it's meant to do is add these values as little notches underneath. In practice, browser support is so poor, I think it works in WebKit, but not in Mozilla, so unfortunately it doesn't work very well. There are also problems with responsive design when you're looking at things like this. If I had notches underneath here, how am I going to fit those labels in there in any meaningful way when it's on a really narrow screen, especially when they get big? So this whole thing here, oh, sorry, I've gone too far. This whole section is trying to be difficult. You grab it and you toss it in the bin because there's no practical purpose of doing anything with it and the browser support is bad. That's unfortunate, but it is what it is. Now, something I've done differently on this one is I've set a step. And our step basically restricts the movement of the range. So my minimum is zero, maximum 100, and I can step in 20s. So you'll see it'll actually snap to those points on the range. So that will restrict what the person can actually do. So this is good. In what I've seen in the past, when people have implemented something like this is 300K of JavaScript so they can do something that is native that's supported in IE. So then we say, can I style it because isn't this Torx CSS? Yes, it is Torx CSS. Now here's one I prepared earlier and I'm going to render it without, actually I've already got the styles on there, okay. Now this gets into Shadow DOM land again. And to pull this one off, this code for this is an absolute nightmare. The best thing I can recommend and I have a link in the code pen is to go to the CSS tricks site on HTML input on the range and follow their instructions and pray to whatever gods you've got because you'll need them. You have to set, to make this work you need CSS variables. What are they called properly, Reggie? They're not variables, they're something else. That's them properties. Those ones, yes. So you need to actually set them to make this work properly. Depends on the browser as to what's going on. I said this does actually work in IE because the IE things are different from what works in other browsers. But to make it work on every browser you have to use CSS custom properties. So this does work. Accessibility is pretty good. But just to show it in action. So got things I can do. This is good. When I let go, it'll update. And what's that that's updating? Oh, hang on. It's another HTML element. What on earth is this thing? This is output. We're used to seeing input and there's actually output as well. What is output for? What could it possibly do? Output is perfectly suited for something like this. Where I have an input and it shows the value that's there. It does nothing without JavaScript, of course, but since you're doing interactive form elements you're gonna need some behavior anyway. So this code gets really, really interesting, as I said. And one of the things you can do with a range is you can have, you have the track, which is the background of the whole thing. You have the thumb, which is the round bit that you can actually interact with. And then you have the field. So the field shows the bits that you've done up to that point. So if you're showing a range of things where it has a particular progress then the field color is really useful. So this looks like I'm actually progressing in some way. If it's just a range where it doesn't really matter where I am on the range then you set the field color to the same as, or set it as transparent, actually. And then it'll just work and look like a normal one basically, like this, but with whatever background colors and things you like. You can see from this code, I've actually got mix-ins in SAS which I try not to do. I'm using SAS variables just to contain the sanity of it because it's really, really difficult. There's, when you get into the shadow DOM bits like there's so much stuff in here. There's some fun count. There's our custom variable or custom properties coming back in. Webkit version, Webkit again, the names of them are different according to which browser you're in. So there's a range track from Mozilla. There's a track for Microsoft browsers, range progress, but you can actually pull off everything in the end basically but look how much code. And this is the nice version after lots of effort. Let's go inspect it and have a look at it anyway because it is quite interesting. So here, because I've enabled shadow DOM, I can actually go a bit further. Chrome seems to do this better, I think because I seem to be able to see more things but at least you can see, so that's my track, that's my fill and there's my thumb. And this lets you see exactly what you're trying to start. And if I pull it up a bit, you can see the properties that I've put on it. So I could make that bigger if I wanted to. Wow, there you go. So that's really massive but there, like I said, there are a lot of gotchas when it comes to range. I think for the version that I've got in the component library I have at the moment, it probably took about two days to get it up and running just to get it through to the point where it could be slotted in anywhere. You may have noticed, I'll drop back to where I was before in my SAS code. So I'm wearing my SAS code, I'm sending defaults because I want to be able to override the colors according to whatever theme I've implemented. But this, yeah, it was a right nightmare to actually implement this. I'm actually using a data list. I said before data list is a bit useless but it can be quite useful. I did mention that in practice, they don't render properly but you can actually override it and do your own thing. So what I've done instead, what I've learned, I'll do these not do anything. I'll do these too. Actually, I have a feeling this does nothing. This on the other hand does, these are my labels. In order to make things work on desktop and mobile, you do need to actually have your own labels in there. So these are set as already hidden because you can't meaningfully represent them to anyone who can't visually see them. But at least you can put them in there. What happens if you want a third label in the middle or the problem is what usually happens is the text gets too big and it will overlap and then you get problems. So in practice, what I've found is that you can have a minimum and a maximum and that's pretty much it. If you had a thing that's designed for a bigger screen, maybe you might get away with extra notches in there but yeah, certainly for my own mileage, this is as far as I've managed to get. All right, so that's input. Input is, as I mentioned, works in every single browser out there, can be custom style for every single browser out there. There is no reason that you need to grab an off the shelf weird thing to do this for you. Native, yay. All right, go away soon thing. The last one I'll talk about tonight is details and summary. And what is this? This is an accordion. Ooh, accordion. How many people have written their own accordions or grab them before? It's native. Wow, how awesome is that? This is good and bad. The accessibility is a bit hit and miss. The browser support doesn't work in Microsoft things but it works in everything else. And if it doesn't work in the Microsoft things then it will just render as inline content anyway so you don't really lose given what it's trying to do. This was an experiment I did a while ago trying to work out how on earth I could animate it because you can style them fairly well. You can change the track. Let me just bring in my inspector. So there's my summary and there's my marker. That's what it's called. You can change this. So you can set this to an image of anything that you like. So that's pretty awesome. The problem is what usually happens with accordions is you try to have it so when you interact with it it'll animate out but you can't do that with an native one. There's just no support for it. This is really painful. So unfortunately for these things unless you're after a really basic accordion and if that's the case then great. Go ahead and use it. Unless if you need anything more interesting if you need animation if you want proper accessibility and of course you do then unfortunately you can't use this thing. It'll get there maybe in time, maybe, maybe but unfortunately right now this is where we are. Now that's as much as I've prepared I've got a couple more than I was going to get to that I haven't prepared properly yet. One of the main ones that I will cover in the future is the modal because there is actually a native modal element as well and it's very similar to the details where you can't use it because accessibility is rotten. So it's really disappointing. You can get really, really close to having it work properly and it just doesn't. So it's a bit sad. What might you have learned from this tonight? You might have learned that you can immediately go and grab a progress if you need one. You can use meter right away. You can certainly use your own native range. You can't do your own custom dialogues at the moment. Sorry, accordions and modals don't work. But at the same time when you're thinking about doing something instead of just looking for a library to do it for you think about what actually have a search and see what's there natively because these things exist. They keep getting added every time Google need one for Gmail or whatever product they've built or someone else has done something that they've tried to but they do keep getting added to the browsers and they become quite useful. So I would urge you when you're looking to do something that's a bit different from usual to see if there is actually an 80 version of it now because you might save a whole lot of code in order to pull off the same thing as what you're trying to do. All right, thank you everyone. Cool. Moles, except there isn't any because everyone's muted. There is a virtual clause, virtual clause. Use your imagination, sir. Yes, thank you. Oh, thank you. Thank you, everyone. Oh, look at that. I have missed your dry sarcasm. You know that because you said that you had unfinished business