 Okay, so I'll talk really loud until it goes on and then people in the back go, wow, you're too loud. And I think it is right now, right? Good. Okay, so do not download this right now because there's no internet access, barely, but it's always going to be up there. My name is Estelle. See, Estelle, just remember that. And then you'll be able to find this deck on GitHub. Everything's listed on my GitHub, Estelle.github.io so you can find all of them. This entire deck is CSS and HTML. There isn't a single line of JavaScript throughout the whole thing. So just think of that whenever you're like, how's she doing that, which library is she using? There's no library, just pure hand-coded CSS and HTML, so let's get started. So we all know CSS is awesome. This is such an old joke. This is actually hard to do to mess up this badly. Let's use regular CSS and we can make it look good and then get rid of stupid width. And CSS is awesome and if you only want to be small, you just float it to the left, right? You guys already know how to do that, right? So stop making this joke because CSS actually is awesome. We can really easily center stuff. So I put a lot of design effort into my deck. It's a hard time picking the color grays. So here this is centered, two lines of CSS, display, flex, center, doesn't really look centered but if I get rid of half of this text, it's still centered. Don't tell me you can't center in CSS. So someone said yesterday, I think his name was Chris Coyer, that flex box is a really simple spec. I just wrote a chapter on it for CSS, the definitive guide. I actually haven't finished it. It's 122 pages long. So it's not such a simple spec but you can do kind of neat things like this right here. This doesn't look that interesting, right? But this right here is perfectly aligned with this other H5, this H1, this H5. Who cares, right? That's easy to do. You can find here, I do 100 pixels, only on the H5 is margin top, they're still aligned. So this is some of the features that Flexbox is going to offer you. It's a line items baseline. So this is kind of a WTF of CSS. That spec, like the border radius spec seems like, oh, you can just make a round circle. It's I think six pages when printed out or something ridiculously long and 60 pages in a book. The specs are really, really deep and it can do some amazing things. So you can do baseline, which means that these are going to be aligned at the bottom of the first line within that spec. You could do stretch, which is the default stretch, and they both go 100% of the height. It's a really deep spec, but let's cover stuff that's actually more fun. Counting. Who here knows how to be, who here has not implemented CSS counting? It's been around since IE 8, but it's been in the spec since forever. You need generated content, so IE 8 finally supported generated content, but it's been around since Safari 1, since Chrome came out, everything else. So these little numbers right here, these little five, I've been counting the slides. So I told you there was no, you know, that's not hard coded. It's there. Is this not working? Okay, I'll turn this off. I also am not used to air conditioning, so the air conditioning in my hotel room gave me a really bad sore throat. Because I live in California, and this is a natural tan. Okay, so right here, this is the counter for the whole deck. What I did is I did a counter reset on the body, counter increment on every slide, and then after each slide, I put the page count, and then I gave it a position of absolute, in the bottom. But just to show you, I added one here, because I want to show you one other thing. When you add things to your pages, like transitions and animations, and you have things like this, can I get behind here? Yes, I can. Oops, and I can change my deck. Pointer events none, I have no clue what I just did to my deck, allows you to get behind whatever your Z index of 1,000 is, you put a pointer event none on it, and you can actually click right through it. So that's why I wanted to make a huge one, and accidentally change the page I was on in my deck, and then try to find my talk again, and so one other little feature in this deck. There's all the pages in my deck, remember I said no, so I can just go and find out where I was, which was counting, and go directly there. No JavaScript, that was pure CSS. I'll show you how to do that later. Okay, so counting, what else can you do with counting? Right now there is one error on this page, you have one invalid entry, because this one is required and it is empty. So if I actually put something in it, like five, I now have zero invalid entries, CSS. If I make a mistake, it goes back up to one, if I have the wrong step, because in HTML5, if you don't give it a step when you do the number input type, the step I default is one. So point one is a mistake, that's a little bit of HTML thrown in with my CSS. So let's make another mistake, nine is bigger than that, and we start entering here. I gave another little hint, it's pink, it says invalid, counter increment, invalid count, background color pink. So I'm counting, and I'm also showing the user what is invalid by changing the CSS. This is progressive enhancement, so color blind or completely blind person would not be able to see this, but it is an enhancement for the sighted user. I now have four invalid, if I actually make this valid, oops, I'm down to three, two, one, zero, oops, went the wrong way, zero. Unfortunately with CSS, I can't actually correct this to singular, we'll have to work on that. So what did I do? I used the invalid pseudo class and the counter. So what kind of pseudo classes do we have? We have a lot of, if you look at HTML5 form features, we have a lot of new things that we can add to them like patterns and the required attribute, minimum and maximum. And with that, we have all sorts of CSS that we can use to target this. So this has also been around for a really long time, enabled, disabled, is a checkbox checked or not checked? And that's actually what I used to do this whole deck. I did, there's a checkbox behind that next button and when I check it, I say the slide that comes after the last checkbox, show it. We have invalid in range, out of range, required optional. So do take a look at your selectors and dive deep into them because they're super powerful. So you guys probably know a little bit about specificity, if not a lot about specificity. But specificity is one of those things that seems super simple and it confuses a lot of people. So we know that the star, some people think it has no specificity, but it does have a little bit of specificity of zero, zero, zero. It's not none because it actually does target an element. It targets all the elements but with no weight. Then elements have a specificity of zero, zero, one. Classes have a specificity of zero, one, zero. But pseudo classes, so if you do nth of type, that has the same weight as a class. And the ID, it used to be use IDs for everything. I recommend using IDs for nothing because they are super powerful. A thing that people don't really think about is when you get more specific with the greater than sign which is the child selector or the tilde which is the adjacent sibling or the plus, I mean the plus is the adjacent sibling, the tilde is the general sibling. They don't actually add any weight. They make things more specific, but this second line right here will override the first line if you're using the same. Even though it's more specific, it doesn't have any more weight. So these combinators don't actually add weight. And then there's the not. I love not, but you generally realize that the not has actually no weight in terms of specificity. It's whatever you put within the parentheses, what you pass as a parameter. So here we're adding zero, zero, one. Here we're adding a class attribute weight and here we're adding an ID weight. And you can put complex, like complicated selectors in here. These, whenever you use the not, it has to be a simple selector. But a simple selector can be very complex to write. It just means you can't have a parent-child relationship going on in there. If you have any questions about specificity, I created this handy little chart. You can print it out. It's at specificity.com. You don't need to write down any of the links. The last slide on this deck has a link to every single resource that I use through the deck except for one which I need to add. Okay. So if I find you using important, I usually tell people that I will fire them if they put important in the code. There are reasons to use important, but you have to be proactive about it. When you're setting up originally, if you want to use, like, do it proactively but don't do it reactively. Don't add important because you can't figure out how to override something because you can't override it. So instead, let me just make this bigger so you can actually see it. So here I did disabled cursor default important, right? If someone uses disabled, it will always have the cursor of default. Instead, you can actually use the class three times. So that element that had a single class declaration of disabled, if you write dot disabled, it checks, does it have the class of disabled? Yes. And then it says, oh, does it have the class of disabled? Oh, yes. Oh, does it have the class of disabled? Yes. So even though you're only putting it once within the element itself, you can declare it three times and that gives it a weight of zero, three, zero. If you're going to do this, comment out in your CSS why you did that. If you're going to use important, use important for prototyping, avoid it like the plague in production. But if you're proactive about it, like if there's a legitimate reason, go for it. But what if someone, what if you're putting in a third party script and they put an important, call that company and tell them to fire the people. But there is actually a way to override important. It's with animation. This is the worst hack in the world. But I thought it was really funny. So I wanted to share it with you because this is a WTF. So here I have, LI color is white is important, but notice it's red. So if I change this right here to blue, you see a turn blue. Well, you probably can't see a turn blue because of my beautiful color selection. But it's no longer red. That's maybe what you can see. Let's just make it yellow. So if people are color blind for one color, at least they can see that it did actually change. You see it changed. So what did I do? I said, gave it an animation of, and I called it red because it's now yellow. So that's why you don't name your things based on colors because when you change the color, then animation name doesn't make sense anymore. But I said at 100% make it yellow. And then I said animation red forwards. What that means is attach the animation and when you get the 100% mark, stay there. So the important was ignored because for right now, though the spec is changing and it might change back and they've been arguing about it and who knows what they're going to do. But allegedly right now, when you have a property in an animation, it's more important than important because that is so easy to remember. That's a WTF. A wonderfully terrific feature. Yes, that's what WTF stands for. So red forwards, I didn't give it a duration and I didn't give it an iteration count. By default, iteration count is one and by default, duration is zero milliseconds. So I'm just taking advantage of that and forwards make things stay at the 100% mark. So that's how I did that. So let's talk a little bit about animation, things you might not have known. We covered important is ignored in the key frame and in the original values for right now. The specificity spec has changed, but all the browsers except for Safari support this hack right now. So don't use it because it's a dumb idea. But other things you should be using is realizing that animation name is an identifier, not a string. Why is that important? Don't quote it because if you quote your animation name, it won't work in Firefox and a few other browsers. I don't know which browsers I haven't tested this past week. But don't quote it because it might break it. Animations are applied in the order they're declared. If the original values are missing, you saw that I just did 100%. The zero percent is the default values that were on that element in the first place. Animation iteration count is zero or greater. You can't do a negative number there up to infinite and no matter what, like that animation that I put on that had zero iterations basically, it threw an animation start event and an animation end event, but it did not throw an animation iteration. So you get one animation start for each animation, one animation end for each animation, and then an animation iteration for each iteration except if the animation iteration and the animation end are at the exact same time, then the animation iteration doesn't get thrown. So that's one of those things that's kind of a gotcha. And then animate your characters with animation timing function called steps. I'm going to cover that one. Oops, went too far. So I'm just going to make this a little bit smaller so you can't read the code. Okay, so here, this is how animation step works. I have this function called steps for end. I'm taking this little image and I'm animating it to look like a bicycle rider. So what is animation steps doing? I'm going to show four screens and then what does the end mean? So what I want to show is this, but I don't want to show the 100% mark. So I'm going to break the animation into four steps. It's going to be going up the background position negative 360. So I show the zero, the 90, the 180, and the 270, but the end says skip the 360. If I had put start there, it would have skipped the 0% and I would have shown these three. But I really don't want to show this one when the background position is negative 360 because I would be showing a blank screen. So the step function, which Lea Varou used yesterday to make it jump from one side when she was doing the pie chart and she made it jump to the other side. She was using steps, so it just kept going like that. That's a perfectly good use for it, but that's a totally WTF use for it. This is the common use for it. I couldn't figure out why Steps was in there when the spec first came out because I don't do character animations very often, but Steps is there basically for this sole purpose. But the end and the start are really confusing, which is why I want to cover that part today. Did that make sense to people? Okay. So animation timing function is a WTF because it's like I don't understand it. And also because you can do things like this. So here it says width goes from 500 to 100. So I marked the 500 mark with this line and the 100 mark with this line, these little specs are 50 pixel increments. By the way, I hate making graphics, so there's like three graphics in this whole deck. Something else is just CSS because I just don't want to open Photoshop. I don't know how to use Photoshop actually. So here I'm saying go from 100 to 500, but look, we're at 40 and we're at 600, 700, almost 800. So you can actually use animation timing functions to make things balanced like crazy by using cubic beziers that are off the normal curve. So if I did one to one, it would stay in there. But because I went, oh, I probably shouldn't do that. That's not the key I want to press. There. Like that is completely off the page. So I like this little tool that I created and I still have to prefix for Chrome. But it's a nice little tool to just basically like, what do these things mean? What does ease mean? Laver would create this awesome tool, but visually this helps me actually count exactly what it's doing. So you can either go to CubicBezier.com, great site, or you can play with this ugly thing that I created, but it helps me understand things. Okay. So that's Cubic Bezier. Another thing you can do is we're going to have talks on SVG later today, so I'm going to cover a few things on SVG that I think they're not going to cover. But you could animate your backgrounds by using animated SVGs. So in CSS, you can animate with CSS or you can animate with SVG. So don't do this because this is just incredibly ugly. But if you look at MDN, the Mozilla Developer Network, they've actually supported something, a background image called Elements. And you can put any element as a background image, including like a canvas that you manipulate in the DOM. Unfortunately, it only works in Firefox. It's been there for over five years now, but no other browser has started supporting it yet. Okay. So SVG, it rocks because they're just basic images. You can animate it, you can include media queries within them, so you can change it based on what the viewport is because the viewport, you know, normally when you're doing media queries, the viewport is the browser itself. When it comes to SVG, the viewport is the container that the SVG is in. It's supported almost everywhere, are you E8? You can do it with data URI and you can use it for masking. So I'm going to cover masking a little bit, but right now I'm going to cover shapes and this stack is a teeny bit out of order. So this is the one resource that I didn't actually give credit to. Did someone here draw this? I found it online. Okay. So I didn't give you credit because I couldn't get online to find out who drew it. Sorry. So this great artist right there did that. So I'm going to show you a little bit about CSS shapes, because shapes are awesome. So right here we have this beautiful picture of Adam and it's floated to the left. That's what you do with images, right? This is what IE8 and IE9 and IE10 will get. But shapes is now supported and you can basically say, hey, put your text circular. You can't really see, but the text is going this way. So let's clip that image and give it a little bit of love for WebKit because it's been supported that long. We just made our text go around. So that's CSS shapes. And this is a wonderfully terrific feature. So we can also make it oval, but then we also should clip the path in an oval-ovular way. There we go. So we can make it look a little bit better. I'm going to get rid of the eclipse because I prefer the circle. Oops, that's good enough. OK, margin. So now that I'm holding this, I have to type at the pack. So I apologize. Negative 200 pixels and get rid of the dash. And put a parenthesis at the end and reload the page because that didn't work and then go back here and then go back to CSS shapes. I'm glad I added that feature and that's cool. OK. So let's try this again. And then. So I just gave the margin left on the image itself. If I actually didn't use shape outside, that's what IE8 would get. This is perfectly doable. This is a nice little layout. It took like four lines of CSS, three, four lines of CSS. That's a nice, I could have done border radius on the image too to make it round in this case. But you need to use the clip path if you're going to be using shapes. So those are a few shapes. Let's cover a few more shapes. Here's one. It's a triangle because I used polygon. So I again want to clip the path. And sorry, Adam, that your face got cut off. But I can use background position, right? Background position is one of those features that no one uses, but you can do so many powerful things with it. But I'm not covering that today. I'm covering other features. So that's one polygon, but you can do other polygonal shapes. Here I'm just cutting the middle of it. Webkit. I just basically cut out a section of that image. And I've said, oh, I just want to show this. And I want the text to go around it. So there I used a rectangle. I could have come up with a little bit more interesting of a shape, but I didn't. So here we have Super Plumber. It's a hero I created for a talk I gave two months ago. But it goes again with my theory of I use Photoshop as little as possible. So I grab whatever images are on my desktop. Look at this nice little curve of text. I used this polygonal shape. And I gave it a margin right. Because what you want to do when you use shapes is you want to cut it as close as possible. You don't want to have any two points being the same on the left because then it looks like a hard edge. In this case, I could have actually put padding instead because it's a transparent image. And the padding would have worked fine. But if I'd actually put the clip path, I'm going to make the background yellow so you can see how ugly this is. Background, color, yellow. OK, so that doesn't look very good, right? I have no taste. It doesn't bother me that much. I think Comic Sans is not that horrible until recently. So here, had I actually had that image, that would have looked really bad. So I would have wanted to use margin right instead. Because that actually looks better, right? So for the clip to work, you basically need to use shape outside with polygon, rectangle, ellipse, circle, inset. I don't actually think rectangle is one of them. I just made that up. Then you float it. You can float it to the right or float it to the left. You can't actually put text in this part. We're going to have shape inside pretty soon, or maybe not soon. It's in the spec, but it's not there yet. But you can only just do it on one side for right now. So how did I come up with these numbers right here? Because that was not easy, right? It was so easy. I'm going to show you how I did it. Let's go over to this because I have the extension that doesn't show when you're doing it this small. OK, I'm not going to show you. I'm not going to do it live. There is an extension called CSS Shape Editor. It's in your inspector. If I can open up my inspector. I'm going to select. No, that's not select. Select this element. And then shapes right there. And it's not working in Chrome Canary, but it does work in my Chrome. But I'm not going to open Chrome just to show you. But basically, you just define the shapes. And it lets you do the points. So unfortunately, it's not working in this browser. It works in my other browser. So back to SVG. Remember when I said SVG in media queries? And it's super powerful. So I came up with David Newton yesterday talked about responsive images. They're not supported in every browser yet. This responsive image method is except for IEA, but it has a fallback. So this is cool. So if I hover over here, the SVG size gets really small. And here I have a clown with balloons. As I get bigger, it's a different PNG. This is a PNG that's showing. It's a responsive image. Now I have a car because I got bigger. And now I have this huge image because I got bigger. There's two methods of doing this. This was background size auto. Here, it's background size cover. So it's pretty much the exact same thing, except for the previous one has a better performance. And I'll explain why in a second. So how did I do this, first of all? I included an SVG. And the SVG's viewport is the container. So when I changed the size of the container, the media query that got selected changed. So I had a huge image, a big image, a medium image, and a small image. Media screen maxed with 300, 600, 900, and 901. Typical media query, but it's inside an SVG. It's pulling in a raster image, right? Background repeat, no repeat, background size auto. I'm telling the image, fill up the whole thing, or basically give it background size auto. It has nothing else in there. It's just going to have a background image on this SVG. And this SVG is pulled into an object tag. And the object tag has the default if the object doesn't render of the image for IE8 with the alt attribute. So it's very well supported since Android after 2.3, 2.3, and IE8 need to use a fallback. So why was the first one more performing than the second one? Because the second one, the first one used background size auto, and the second one actually resized the image. When you resize the image, you have to decode it twice. So when you are using responsive images, whether you use this method or picture or source set, realize that when you resize images on the fly, especially if you're animating them, that it has to be decoded twice before it's repainted. So it takes two to four times as long to render, which if you're only going to render it once, really, who cares? But if you're going to be rendering a lot of images, especially in animation. So there's another way to make images smaller. So this is a hokey example. But I want all this detail on this image, but I want the center to be empty. I really want to use this PNG right here, transparent PNG. But at 551 kilobytes, that's pretty big. What I can do is use a JPEG instead of a PNG, and then use a mask. So someone talked about masking yesterday, and I'm afraid I can't remember who it was. But masking is a super powerful way to enable use to use transparent JPEGs. There's no such thing as a transparent JPEG. But by putting a JPEG together with either an SVG or a transparent PNG that's monocolor and therefore tiny, you can actually reduce the file size. So here is an example. And oh, I need to put WebKit in front of this. That's why it's not working. OK. So you saw it was white, right? It was a JPEG. Instead of using a transparent PNG with the center cutout, I used a JPEG that was 20.8 kilobytes. The mask was really simple. It was just a rectangle. And that's way smaller than if I had used a transparent PNG for the iPhone 1 box. Again, I use whatever's on my computer, and I had this on my desktop. So I probably should update my phone screenshots, but hey. And then you can tell that this is live because one, I already showed it to you, but let's just do two left to reiterate. So it's kind of like a frame. That is 21.1 kilobytes instead of 133. So I'm saving a lot of bandwidth there. Another thing SVG is used for a lot is font icons. Just give me a second because it's getting really warm up here under these lights. OK. So Google came out with these font icons that are actually amazing because they use ligatures, and therefore they're accessible. So the word behind that 3D, it doesn't just say the letter of capital D like most font icons do. There's actually a word. So here's an example of it. Here in Tiny, you have a little face. I have the word face, and that's what created this. So class material icons, what happens is with ligatures, like have you ever seen the two Fs put together? So they're using basically F-A-C-E put together that comes out with this drawing. You don't actually have to use all this CSS. This is the CSS that goes behind it. Google actually provides this for you. All you have to do is give it a class of material icons and pull in the font family. To make it accessible, because IE8 does not use this. So this is accessible. This word says accessibility, and we have these two little guys right here. One is done with generated content, E8, 4E. Let's just change this to F and see what happens. Apparently, the slide is not live. OK, I thought it was. Oh. This is why. What did it say before? 3F? OK. 4F? Oh, well, whatever that is. OK, so you can do it two ways. You can either use CSS, because this part, this one, that works in IE8. This one, accessibility, doesn't work in IE8, but it will actually read the word accessibility. So you can use just aria-hidden for your generated content and stick it in there for people who are actually using IE8. And that's not actually the correct way to do it. You don't want to use aria-hidden because it will hide the whole thing, and you don't want to hide the whole thing, but you can put a little span on it with aria-hidden for that. So one of the reasons you want to use those icons is because you want to, I'm going to actually go to the next slide first. So what this slide does is if you notice this is the ugliest text you've ever seen, because there's two different fonts being used, way off the screen, because sometimes, come on, let me, OK, well, is it live? No, it's not live. So I'm just going to shrink this and end up on some other page again. Come on. I thought I was being clever when I added in those little things at the beginning. But now I find out they're super useful. Why does it keep re-going here? Index, font squirrel subset. OK, so basically at the end, what you can't see, and I'm not going to mess things up again, it says text equals AEOU capital, and then AEOU lowercase. So I've pulled down 718 bytes of font because I've only downloaded 10 characters. So if you know which characters you're going to use, create a subset. And you can create these tiny, tiny file sizes. So if you're only pulling in for the ampersand, because sometimes your designer wants an ampersand, go here to font squirrel. If Google Fonts just include equals ampersand and you'll only get the ampersand. But if you're actually creating from your own font, you can choose expert. And then down here, you can do custom subsetting, and I'm going to increase this so you can actually see it. So this is font squirrel. You choose expert. And then you can just use ampersand. And font squirrel will actually give you all the CSS you need, as well as a file size that is tiny that only contains that one character. So that is fonts in subsetting. So who here has used Modernizer in JavaScript? So I only want to use CSS, because that's my thing. So we have this little Modernizer thing in CSS called atSupports. So here it's purple, because it supports Flexbox. So it says, supports display flex. It supports it. But this is a Chrome browser, so you know it's not going to support Moz appearance, right? It wouldn't do that anyway, because this is display. Oops, Moz appearance none, right? But what if I did a display none here? So how can you use this as Modernizer? Well, you can do it for browser sniffing by just doing Moz appearance none, which I just did. That's only going to support Firefox. But you can totally exclude old versions of IE by doing display none, because IE, old versions of IE don't support atSupports. So you can actually use CSS atSupports as a kind of Modernizer. Instead of doing what I just said, use it as a Modernizer and basically put the shape outside circle. Or if you want to use Flexbox, put display flex. So you have one layout for non-flexbox, and then you override it in your atSupports block. So that's Modernizer with CSS. So how did I do all of these slides? One, I've been changing CSS on the fly, and it's been going live. And I said I didn't use JavaScript. Well, I just did a style display block. So here it's actually legible. I just turned my style block to blue, right? So all I did is I did a head display block. Then I hit everything in the head. And I made the last style content editable. And I'm editing it on the fly. And because it's actually the style block in the head or the page, it changes the CSS. And that's how I'm doing this. So I basically did style content editable. I used WebKit user modify, read, write, play text only, which no longer works, which is why I didn't actually copy and paste anything. Now I should be using user modify, read, write, which allows me to copy and paste directly into content editable. So you have to set it to read. Otherwise it's read. Sometimes you have read only. So touch events. I showed you that earlier. Here I'm using user modify. So in terms of the deck, how did I do this deck? Well, you don't see because everything is quirky today because I'm live is right up here, there was the next slide. The entire time the next slide was up here. Because what I did is I did the next slide is, well, first of all, the current slide is the slide that comes immediately after the label that comes immediately after an input that is checked is normal. It's sitting there in the front of the page. It's not transformed. It's scaled to default size. It's not rotated. The slide that comes immediately after the label that is not checked, of an input that is not checked, that comes immediately after a slide that comes after a label that is checked. So that means the first slide that doesn't have a check mark before it is up in the upper right hand corner and then I animate it in. So that's how I did this deck using CSS and using checkboxes. So that's kind of it for my talk, except for I want to go over one more slide, which is all of these resources. So this is always going to be up at do you know CSS? And then specificity, specificity, animation, clown car, the material design, so the icons. These are, remember how I did the generated content? It's really hard to figure out what those numbers are. There's a list of them right there. FontSquirrel, optimizing Google Fonts. The shapes editor is right here. And then I'm just going to click on these shape examples and pray that we're online. We are. OK. So this is the one I want to show you. Please. OK. Well, you can go to this site and it's going to show you tons of shape examples, including using SVG to make really complex shapes. So I have, it went from three minutes to four minutes. Oh. No one booed me or yelled at me. I thought I had like three minutes. I'm like dragging it on. And then I'm like, wee. So no time for questions, but I'm here all day. And I do not do stand-up comedy. So thank you.