This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Appearance" Lesson
[00:00:02]
>> Estelle Weyl: Okay, so I mentioned Appearance because I was going to introduce it. And Appearance right here, we have none button, button-arrow-down, button-arrow-next, button-arrow-previous, button-arrow-up, button-bevel, button-focus caret, checkbox, checkbox-container. These are all values of the -moz-appearance property.
>> Estelle Weyl: There's more.
>> Estelle Weyl: Then we have -webkit-appearance. So these are all things that instead of defining like a color and everything else, they'll just say, basically, -webkit-appearance button and then it will look like a button.
[00:00:42] And so you can change that. You can say -webkit-appearance none, and that's something I use a lot, probably too much. Because you shouldn't be playing with the natural appearance of things because people are used to things with appearing a certain way. A radio button should look like a radio button.
[00:01:00] Like there's on off toggles which are like a thing that is like this wide and has a button here and you move it to the side. But I never know which one means on and off, because is just a thing. And is off to the right or to the left I don't know, why they didn't use the check box cause the check box is either on or off and you can click it on and off.
[00:01:20] Like a radio button, you always have to click one on, so if you have five radio buttons all having the same name value which means they're in the same name group. If you click one, you can click another one and then the first one will turn off. There's no way to unclick all five of them once you've clicked one of them.
[00:01:39] Radio boxes you can do that. So, it's best to actually use the native features, but sometimes your designer says I really want my buttons to be like this. And so 99% of people use a div or a span for a button, when a button is much better, and you can just change the appearance, and make it look like it's a different type of button.
[00:02:04] So the reason you wanna use button and link instead of div-class button or span-class button is the semantics. So who cares about the semantics other than screen readers. Well if you have a paragraph or div that is a button how do you tab to that? You have to give it a tab index.
[00:02:26] How do you put it in the right tab index order, how do you keyboard navigate to it, all these different things. If you actually use the correct HTML element, then everything is taken care of for you. Like I've created a carousel that works exactly like a carousel, it spins around it's awesome.
[00:02:48] And there's one line of JavaScript which just says change the background position or translate the transforms because I used radio buttons. So when they click on the next, when they use their arrow, they just click onto the next radio button and everything changes. And I had to put no JavaScript to maintain state.
[00:03:07] If you use an element for its non-intended purpose, if you use the wrong element, you have to use JavaScript to maintain state. So I know most people here use Angular cause I've heard people talking about it.
>> Estelle Weyl: No.
>> Speaker 2: [LAUGH]
>> Estelle Weyl: 90% of stuff that people use frameworks for, they could do if they fully understood what the element does.
[00:03:27] And then they wouldn't have to basically re-create the DOM. And that's why we have virtual DOMs, because people don't understand the actual DOM. If you understood the actual DOM, you wouldn't need a virtual DOM. Which isn't true, there are real cases to need frameworks and they make sense.
[00:03:45] But the only times I know that Angular is being used is when I hit an error on a page. Like, it wants my phone number and my phone number is ten digits long, but it's only accepting five digits because they put the wrong thing into their Angular. So I go into my web inspector and I change it and I wonder, no one must submit this form because no one can submit this form unless they go into the inspector but maybe they only want web developers to submit their form.
[00:04:14] Anyhow so, how do I know what the webkit values are on a media control? So let's say we have a video and it has all the controls, you can actually find these style sheets that show you. So the webkit right here, we have the webkit media controls and then, let me see, one.
[00:04:43] -webkit appearance is media mute button, right, so if you wanna use the mute button that comes with the iOS device just put in -webkit-appearance: media mute button and you get a mute button, I think. I don't know, I wouldn't do that, I've never done it. But reading source code, other people's source code especially browser developers, you can learn so much.