(upbeat music) - Thank you, John, I should start with noting that my title slide, is a bit of a lie, I had that moment when I started, after I just submitted this talk and I thought that, Know Your HTML, a little bit authoritarian, so I changed my mind belatedly much to John's no doubt, annoyance 'cause now he feels he needs to change things, but he won't.
So, I changed it to, What's New in HTML, and I thought about that and I thought, well, is it really what's new in HTML? Because half the things I'm talking about, aren't actually new.
So, really the title of the talk should be, What's in HTML. And really what that's about is that most people, don't seem to know much about what's in HTML. And that's really why I'm here talking to you today. So, a lot of these things have been in HTML for a while, but they're just not very well known.
So, hopefully at the end of this, you'll come across things you've not seen before, that you can potentially use in your projects. So, a little bit of history, HTML got up to version five and it was a glorious thing. And that was the end of it, and that's the end of my talk, thank you everyone, everyone's got on their CVS now. Okay, there's a bit more than that.
What happened to HTML6? Where did it ever go? The thing is we don't actually have HTML6, we've got HTML living standard, and what on earth is living standard? That's not six, I want my six.
What living standard is about is actually, instead of having set version numbers, it's reflective of how HTML and the web, has evolved over the years.
So, every version that's come along, is an increment from each browser vendor, or from the W3C or from the community.
So, rather than having an explicit set of things, that come into it, each version, each feature is released progressively, and that's really what's always happened, it's just now that's how we call it.
There is a bit of a debate at the moment about, whether we should have an explicit HTML6, because for marketing reasons is a lot nicer, and makes people actually look for these things, but at the moment living standards is the way we're going. Basically, how it's put together is just changing stuff, to see what happens.
Just like we do with our own code, that's how the web was more or less put together, and the committees and all sorts of things, along the way but pretty much that's what's going on. Okay, so what is actually new in HTML? When we're looking at these features, there are three key things that I look at, to make sure something's actually useful.
The first one is pretty simple, does it work? And that sounds a bit, it sounds simple because it is simple, but it doesn't actually do the thing it's set out to do. And it's a little bit tricky because not everything, has being released to do what it's meant to, and often the community will fill in the gaps, ahead of the HTML standards.
One of the most notorious examples of this, is the native web date picker, and there are dozens and dozens if not hundreds, of custom date pickers that you can find out there. Each of which has got a different variation, of what it's meant to do, as much of that is because what's a date picker? If I'm choosing flights or accommodation, which you're not right now, but if you were hypothetically, that's very different from when I'm entering my birthday. So, there is no real one date picker control, that will satisfy all these requirements at once. As a result, early attempts at creating these things just failed, so, native date picker is basically not a thing, because it's too hard to work out what the requirements are. So, most of the new elements that have actually worked, are the ones that feel a very small niche.
They do the one thing they're meant to do.
Not all of them do, and we'll go into that as we review some of the elements. So, next measure is, is it accessible? And this is pretty straightforward, If I can't use it completely, then I can't use it, it's pretty much like does it work, but being a bit more friendly towards accessibility reasons. And the third one, I do run Melbourne CSS, I used to run Singapore CSS, can we style it? That's probably one of the most important things, 'cause you'll come across with this brand new thing, and it's can we have it in blue? Oh, you want in blue now, okay.
Okay, navy blue is a thing.
So, not everything can be started out of the box, and they do get complex.
So, it's a matter of again what you actually need, and whether it achieves what you're trying to do. So, let's skip slides and go straight to some code. Now, I will note that I'm not one of those people, that comes up with beautiful things, you'll see here, this is Olivia Ng's CodePen, if you wanna see beautiful things today, just go to her CodePen and maybe skip the rest of these, my CodePens are very technical, so we'll jump into it. The first one, I'll talk about is the HTML input type range. Now, the range is basically a slider, as a lot of people call them.
We've had HTML inputs for an awfully long time, and so this is a new type of input.
And what's it look like, it's quite different, you can slide things around, there's the step, this version where you can have, an explicit list of points along the way, you'll see here, I'm in Firefox and you can't actually see the steps, but the mouse does actually force you to stop on that. If I jump across to any WebKit browser, I actually get an explicit number of dots underneath. So, it gives me a bit more than that, but you can see right away browsing implantation varies, 'cause no one's ever had before.
Now, what's this actually good for, a range is useful for an explicit set of values. So, it's something like if you need to enter, your age between 15 and 20 and it needs to be something really specifically within that.
It's not for something where like, tell me your ideal income, because there are no range is gonna be big enough, to give me that.
So, it needs to be something that's within a finite list. Now, does it work for what it actually does? It does work quite well, they're variations of sliders and rangers out there, that do a lot more than these basics, is it accessible? It's pretty good actually, within native browsers support is pretty good. And next question is, can we style it? And I'm sure this has added some grey hairs to me, for the fact that yes you can style it, but you will add, you get your very own grey hairs out, if you actually do so.
Chrome version is not loading, here we go.
So, you can see here, I've got a range that actually has some background colours, I've increased the size of the thumb track, because of the thumb because that's a whole lot more easier, to touch or manipulate with a mouse.
I've got some labels in there which is some custom styles, I've done myself.
And the question then, can I style it? How easy is this thing to style? The answer fully input type range, is it's an absolute nightmare.
To actually pull this off, and it supports it's FMI 11 up, you need a combination of very new things, like CSS, custom properties.
I've done my own implementation using Sass, because trying to do it in a straight up CSS , is not unimpossible, and you need mixins to make your life easier, but I could go into this, but I basically spend the entirety of the conference, just talking about how hard this is to do.
The too long didn't read version of it is, yes you can style a range, best advice is still someone else's example, and if you're a praying type, pray.
It does work, you can style it, expect to lose some time actually getting that done. Now you may have noticed when I changed the value, on the range, there's a value here on the screen updates as well, now this is another new or newish, that but not really new HTML element, this is the output. And the output doesn't do much, the output takes something from a control like a range, that doesn't otherwise tell you much of what's going on, and it takes the value of it into there.
So, that's all it does.
Does it work? Yes, it's a box that you can assign a value to. It's not much different from a div in that way, but it's actually an input element.
Is it accessible? Yes, it actually will tell people what's going on, is a little bit shouty because the elevation level, is a little bit higher than maybe it should be, but you can control that with our roles.
Can you style it? It's basically a box, you can do anything that you want to do with it. So, the HTML output is a fantastic new element, anytime you need to output something onto the screen, if you've got a calculator, so one field multiply by another or anything else, that's actually dynamically resulting from form input. The output is the perfect answer for you.
All right, onward to some progress.
Now, HTML progress is exactly that you have a maximum, are we actually gonna get there? And you can say where you want along that.
So in this case, I can set that to 60 or at 600, I'll try 60, and when my screen updates, as you can see, it's not just a little bit ahead, there is a variation called the indeterminate progress, which I'm going to run.
I've done my best not to live code here, but because I'm playing with an editor, it's gonna be trouble.
Now, I'll just make that a little bit bigger, you can see in the way that indeterminate progress, is rendered, it's actually pulsing.
So, this is for something where, we don't know how long it's going to be.
It might be a file download or anything else like that, so, if you cannot shoot along, if you do know what the progress is going to be, then you can use values, if you don't, you can go ahead with indeterminant. So, it covers both of those really well.
So, the first question does it work? It's a progress bar, it does everything it needs to, it's absolutely perfect.
Is it accessible? It actually works really well, it'll announce where you are when you increment the notch, so, it does what it needs to do, and can we style it? Yes, we can, but it gets interesting.
It's not as interesting as the range, but it is certainly interesting.
The way you need to go around it, is first of all, is you need to kill the native appearance, with a style of none, which takes off any native behaviour that would be there, we can set our own width and height, I'll increase, put that on the screen, and then we get into browser specific code. So, this is webkit-progress-bar, and you'll see with every single one of these, elements more or less, they have very similar things where well and truly, into browser prefix to make these things work. And as you're working on them, you will find, so, I've set the background progress bar value, I can set the value of the thing, that's actually being filled in, so, how can I actually have a look at this? And the way that we actually look at all of this, is pretty much this it's not Darkwing Duck, but it's the shadow DOM, so, these are things that are actually rendered, in the browser but you don't normally, see on first inspection.
And if you're not doing anything special with them, you don't really need to know anything else about it. But when we are actually trying to style them, pretty quickly, you'll need to get into shadow DOM, to find out what that's going on.
Every single browser has got its own unique way of actually, showing you that something is in the shadow DOM, 'cause if you open up the inspector, and I inspect this element because I've actually enabled it, I can see that there's a div here.
Now, Firefox unhelpfully doesn't tell me anything more, some browsers with some elements, you'll actually see the pseudo elements, and the selectors as you go, but at least you can see something and what's going on, otherwise, it's a completely closed box.
It's a right pain.
But once you've turned on your shadow DOM, every single browser being different, Firefox possibly the worst, because you need to go into, I accept the risk, I need to start typing shadow roots, this is set to true because I've turned on, they've really done their best to hide these from people, I don't know exactly why, but if you're going to get into styling these, newer HTML elements, then you'll definitely need to know how this operates. So, the question's again, progress bar, does it work? Fulfils the need accessibility perfect.
Can we style it? Yes, so I've made this one really hard, where I have to keep tapping on the button for it to work, making progress, you can see the progress bar, is actually filling in.
So, I'll use these in a stepped application, like a wizard or something like that multipage, where you've got to set progress on one screen, to another linear narrative, and you can animate these transitions as well. So, you can actually see a clear transition, from one page to the next.
It works really really well.
All right, onto the HTML metre elements.
Now, the metre is another thing that does one thing, and does it really well.
The idea behind the metre is basically, gives you a progress of some description, but it gives you an incremental progress.
So, in this instance, I've connected up a password field with the metre, and I've actually set, I've got the minimum value is zero, and the maximum of 100, my low value, so the minimum I'll accept is 30. My high value is 60 and my optimum, so ideally anything above would be 80.
And as I start typing, you'll see that the metre starts filling itself in. So, with any good password, I need at least 80 characters to make it decently secure. So, can I style it? Yes, you absolutely can, accessibility on this again, it will actually talk to you at the appropriate points. So, let me type away, you can see my style version, except that I've not actually enabled the CSS. Very similar to what we saw before, where you remove the browser styles, you can start putting basics like width and height in, I've saved myself a bit of my spare time, with using a Sass mixin here, but that's basically setting the background thing, so I don't need to repeat it.
Unfortunately, every browser has got its own way, of doing these things that these days, that's mostly WebKit and Mozilla, so it's not too bad. And you can wrap some of these things together, just to save yourself, having to repeat too much. Okay, now I've actually turned that on, you'll see I can completely change the custom, what's that going to rerender? Maybe it is, maybe it's not.
Oh, here we go, so you can see the colours actually, will move as I start typing.
Absolutely perfect.
All right, onto HTML, the details summary.
Now, this one is really really weird.
What's it actually here for, it looks like an accordion, right? So, it's an accordion, right? Except it's not an accordion.
It's HTML details summary, and there's a lot of discussion, about what this thing's actually useful for, and no one else really quite found that yet. I think could have be using it somewhere, that all it does it's kind of like an accordion but not, it doesn't have half the accessibility rules, you'd hope for an accordion unfortunately, it doesn't really do its job properly, accessibility kind of works for what it's meant to do, but no one quite really knows what it is it's meant to do. Can we style it? The main thing I wanted to find out with this, is can I animate the thing? 'Cause the first thing you get when you have, an accordion is I want to actually, animate the object sliding in and out, and wouldn't that be awesome, if that could work natively, let me just change that to open, refresh, can I style? I can animate out, I can't animate in.
This thing unfortunately at the moment, it's pretty useless. The browser support is not bad, but there's really not that much you can do with it. So, unfortunately detailed summary is a little bit way off where we'd like it to be no accordion for us yet. So, onto the hidden attribute, if you look carefully for what I've rendered down below, you can't see anything at the moment.
Hidden is one of those great examples of, it does one thing, it does it really really well. Normally, I might put a class on something, and say, I want it to hide, and then I need to set display none.
With hidden, you don't need a class, you can set it just by saying that it's hidden. So, if I take that off, my paragraph will appear, my paragraph will appear, my paragraph has appeared. All I do is the hidden attribute to something and it's gone. Accessibility is perfect, it won't be run out, it doesn't take up any space.
Can you style it? It takes away style, if you don't like CSS, this is your new favourite HTML.
So, the hidden attribute really simple, fantastic, I absolutely love it.
All right, the last one that I'll go through today, is the HTML dialogue.
Now dialogue, awesome, finally a native dialogue, right? Great thing with this, again we can use attributes to do things with it, so I can set an attribute of open on it, and it will render and show up, which is perfect. One of the awesome things that comes along with this as well is when you render a dialogue, you have to deal with all those problems of, oh, now I need a backdrop, to grey out the rest of the screen.
That's really annoying.
There's a new CSS selector for pseudo selector for backdrop. Absolutely perfect, this is great.
There are problems with it, it's not so great. There are accessibility issues with the HTML dialogue, it does what it does really well.
Browser supports little bit iffy, can I style it? If backdrop worked, it would be awesome, other than that, it's just a box basically, and you can do more or less anything you want. So, this is one that's painfully painfully close. Backdrop is not supported in Firefox, at the moment unfortunately.
No is, actually I'll jump back to, I'll show you JavaScript, there are JavaScript DOM API, that you can actually manipulate this.
So, if I run this unload and show you the console, it will tell me that showModal is not a function of a modal, at least it's not in Firefox unfortunately. So, if I jump across to my handy WebKit browser, I cannot there's my mouse.
So, let me just open this thing.
And when it refreshes, it is open, so where's my backdrop, right? Unfortunately, no backdrop for you, because that's not the way you're gonna get, your pseudo selector.
Due to the wisdom of someone, you actually need to use the DOM API to do it, which is possibly how you're most often going to do it. So, now I've actually used DOM command showModal, it'll render with the backdrop, which is awesome. All right, to summarise what we've gone through, I mean, what actually makes a good HTML element? Why are these ones good and bad? What are we actually looking for out of this? You would have seen that the things that work, are the ones that are really simple, they do one thing, they do them really well. Because of the complexities of how we actually implement, these things in real life were not really able to create, anything, the big building blocks.
At least not yet, maybe there'll be some more effort towards that later on. But then the other complication that comes with this as like all these elements are great, but where is my tab lists. Can I have a tab group please that actually works? Because, surely that's the first thing everyone looks for in a component library.
We saw the summary details before, that where's my accordion, everyone wants an accordion. So, unfortunately we're not there yet.
So, what can you actually do about it? One of the things is actually getting involved, a lot of these features are being specked at the moment, in various ways, so there'll be prototype specs with W3C, getting their have a look and play with them. The browsers often have ways that you can vote, for these things as well.
So, you can promote an element to be worked on. So, have a look through what you're actually looking to do. If I'm sitting there writing my own codes, implement a UI element, wouldn't it be awesome if the browsers are actually, gonna do that for me? And you can make the difference, and actually encourage them to do so.
So, this was what's in HTML, it's not what's new, it's what's the, most of these things you can actually go and use, which is awesome.
Save yourself a whole lot of code, you don't have to reinvent the wheel, and if they're not there, then they're actually things that you can do, to make them come into existence.
Thank you.
(upbeat music)
