Even More CSS Secrets - Lea Verou

[Music] hello everyone it's great to be here today so hi I'm Lea here's a fun fact you may not know you may not have heard about me I grew up in Greece and more specifically in the island of Lesbos which technically makes me geographically lesbian probably the first few you've ever met seriously that's what the word lesbian means it means person from lesbos the other meaning came later in other news I love open source you might have used some of my work I'm an invited expert in the CSS working group has just mentioned and that's my day job is research and sometimes teaching at MIT I work on a language called Marvo which is an HTML based language for defining entire web applications without writing JavaScript or backends and sometimes I teach user interface design and implementation so why is the title of this talk even more CSS secrets I mean the CSS secrets okay kind of makes sense but why even more even more than what so it's because it's a sequel yes Doc's can have sequels not just movies so many years ago I used to give this talk called css3 secrets it was among my first talks and it was because at some point I realized that I find it too confining that I have to give a talk about a specific don't make there are so many exciting things about CSS right why do I have to pick just one so I made this talk about 10 things that I found interesting at the time about CSS you can see short descriptions of all 10 of them there and the talk is on YouTube if you want to look it up if any of them sounds interesting and then the next year I did another sequel which I called more CSS secrets with another 10 things and for many years after that I kind of slid into the format of one specific topic per talk and recently I thought I kind of want to do another CSS secrets talk again and that was after so my book also came out of these talks which had 47 secrets which secrets is this code for things I find cool about CSS things I like and I want to share about CSS so that brings us to today in this talk and that's why it's called even more CSS secrets and let's get to the first one which is cut out text you may have noticed this in the headline of this talk on the cover in the previous slide and also this slide so how many of you have used blending modes in Photoshop or CSS way more hands when I said Photoshop so today we can use blending modes in CSS they work exactly the same way as in Photoshop they even have the same names because they were invented by Adobe at the point where they were interested in contributing to head standards there was a time and as you can see they work in exactly the same way you're used to from Photoshop I can change this color you can see what happens but most people let's try let's change this as well it's making a gray or something you can sort of see what happens so most people use blending modes because they've pattern matched on how they work from experience they've tried them they've they've seen what happens but they can't quite explain why it happens they've instinctively learned that you always get a darker color of the two that you're combining but that's that that's about it so the actual algorithm behind blending modes is multiplication that's why it's called multiply it just converts the RGB components of each color to percentages and it just multiplies the percentages that's it so I've made this little app so I can show you here how this works when I change the colors and you can see the math here and how it changes I mean I can even use named colors by the way all my slides are online so you can play with this afterwards yourselves as well so the interesting bit here okay I mean it multiplies together the two colors so you get like the result of the multiplication what is interesting though is what happens with black and white which is kind of special so as you can see when I multiply any color with black let's say let me change it maybe yellow green maybe lemon chiffon anything I multiply with black gives me black because I'm multiplying each RGB component with zero and what do I get when I multiply a number with zero zero so always gives me back black what has the opposite effect let's try a few colors here and as you can see anything I multiply with white gives me back the same color so I can use this here to give me a cut out text effect all I need to do is give a black color to the text no the other way around Leigha think remember anything I multiplied with white gives me the same color and anything I multiply with black gives me black so if I want to have cut out text which is cut out out of black I I just apply a black background and a white text color and that's it and the best thing is that this degree it's perfectly gracefully if blending modes are not super are not supported this is what I get which is perfectly fine it's even more readable because it has like the maximum contrast you could possibly get so you might be wondering now okay but what if I don't want black as my background what do i do then well if you're if if you want white I start have a solution for you so there's another blending mode called screen for which the math is a little bit more complicated you can see it here and it sort of works as an opposite of multiply so notice here that if actually I'm gonna write an RGB one again yeah it works so notice little anything I screen with white gives me white and similarly you'll see that anything I screen with black gives me the color I screamed it with so why is that so the math is a little more involved here but basically it's because when I'm screening with white this becomes zero and because this is multiplying this entire thing goes away so every single component becomes 100% does that make sense I see some notes similarly when I'm screaming with black let's try a few colors here you can see where this is going anything i screen with black gives me back the same color and that's because similarly if we look at the math this is 100% minus zero so it just becomes 100% when I multiply something with 100% it just stays what it was and then because we have the minus here the the two 100 percents cancel each other out and I get the 30% that I had here and same for the other components so what does that mean in practice if I make my background here white my text color black and my blending mode screen I can get a cut out the cut out text effect with the white background so the next question is okay how do I get a cut out text effect with other colors I don't have a good solution to suggest to you it is possible if you if you create a copy of the text and pose shut it behind and but it's just not worth it like anything that involves duplicating text in CSS is usually not worth it if you can find a way that doesn't involve duplicating text please tweet at me blending modes have very decent browser support and in most cases I mean yes it's not amazing but it's pretty decent and in most cases they degrade gracefully like in both of these effects if we don't have blending modes we still have a perfectly readable very nice contrast headline it works fine so these are some takeaways from this first one so the second secret I wanted to share is using characters as images take a look at this background you see unicorns you see chocolate ice creams and you see a number two all of these are not none of these are images it's a background created with text characters so how do we do that and the secret is SVG which I like to call the cheat code of web design because it lets you do things that CSS doesn't or that are difficult with CSS so here I have a data URI that is defining a simple SVG a simple SVG with a circle with a red circle how many of you have used data your eyes in anyway most of you how many of you have used data your eyes that were not base64-encoded way fewer so yeah you don't actually need to escape most characters you can just have data your eyes where the SVG code is just like this the main thing to notice is that you have to escape the the line breaks if I do this everything breaks so you have to escape the line breaks in CSS every time you have a multi-line URL but that's about it and there are a few more characters like the pound sign and a few more that you have to escape but most characters are fair game in data your eyes and this is not just for SVG's by the way you can create entire HTML pages with data URIs and all sorts of things but here we're going to focus on Viji so let's make this background a little smaller let's make it 100 pixels oh why did I say background clip that size Lea okay so now we get a bunch of circles which is not super interesting cuz we can do the same thing with radial gradients but once you are in SVG land we can do other cool things like use the text element now you might be wondering what's cool about this cuz like you can't see anything but now that I've set the baseline so yeah SVG has a lot of bad defaults you have to set many things explicitly but I think the result pays off so yeah you have to set the baseline explicitly because by default it's zero which is like completely off the SVG and you don't see anything and also you have to set the font size because by default it's something super small and our view box is 100 by 100 so we set it to 90 because we wanted something sort of big so now we have a background that is the a character which is not super interesting but we can make it a unicorn and that is much more interesting and because we because everything because we're defining an SVG file here we can have access to whatever we can do in an SVG file you know what we can do in an SVG file we can have style elements yes I'm adding style elements inside the data you are either is inside my SVG it literally doesn't get more meta than this and then inside this style element I can have a keyframes rule and let's say let's have a transform let's say rotate minus 20 degrees maybe and now let's go here and add in line style that makes it dance and there it is our unicorn is now dancing so not only we can use this trick you have to mate to turn characters into images without having to include any images we can even make them animated images like who needs gifts anymore not to mention that like we can have all the emojis here now we have chocolate ice cream that's dancing and we can change them super easily and this is not just useful for typical backgrounds I mean here I have a meter and it's like a star rating widget and it's all CSS I have I don't have to include any stars it's just the Unicode character that is a star and yes I'm using a WebKit pseudo-element here and in practice you would need to use another one for Mozilla and another one for edge but still the good thing is that not only you can make star rating widgets this way but you can make similar widgets about any anything like now when you're rating chocolate ice creams isn't that awesome and all the values work just fine no image is required unfortunately notice that I had to repeat the same image twice the same URL twice just to change the opacity and some of you might wonder can't we use the CSS variable width for that the answer is no we can't for two reasons we cannot concatenate strings in CSS yet and also URL is weird URL has weird parsing rules because you can use URLs inside it without quotes so because of that you can't really use any CSS function inside URL eventually we're gonna solve both of these problems we're gonna add another function probably maybe fetch maybe something like that basically a function that does the same thing but only except strings and also we're we're going to add something for string concatenation it looks like that's gonna be called text like a text function but all of these are in the future right now we can't use variables in there if you want to reduce duplication you can always use a preprocessor and use preprocessor variables which can be used for anything so some takeaways from this you can turn glyphs into animated images with SVG data URL URLs and you can use this trick also the style meters with discrete icons so the third one is its fancy borders look at this border how would you do that border with CSS I mean yeah we can do dashed borders with a single color but we cannot control the size of the dashes it's just whatever the browser is willing to give us that day and we cannot have gradients on our borders really there's border image but it's kind of a pain so how would we do something like that it's like in instant CSS borders are not even animated so let's look into it first off the first thing I want to tell you today has to do with SVG's again and it's called stroke - array so notice here I have a rectangle with a black stroke stroke with width of 4 pixels and no fill notice that I'm actually I'm actually seeing two pixels here not the four I've defined that's because half of the stroke is outside the rectangle and it's non-trivial to get it in so there is the stroke - array property did I say function that lets you define the size of the dashes and the size of the gaps all right and the size of the gaps and you can see how I can change them however I want but what's really cool about this is also when it's used in concert in conjunction with a - stroke - offset property so let's see what this does notice that when I'm reducing this it moves the dashed border and what's really cool is that if if my stroke - offset is a multiple of my stroke length and the gap length then it has no effect why is that cool you might wonder so that's cool because it means I can do a looping animation so let's add a style element and the keyframes rule let's call it ends and let's say - stroke - upset - 15 pixels and let's come here and add an animation and one second infinite sell it it loops so that's almost there it's almost like marching ants but it has a problem it's not smooth it's like going and stopping and going and stopping that's not how a marching ants animation works it should be smooth and the reason for that is that the timing function by default is easy so we have if we want it to be linear and not accelerate or decelerate at any point I mean it works well for most animations it makes them look much more natural than linear but in this case we actually want linear so there we go now it's a proper marching ants animation except that's that's an SVG it's not in our CSS so it doesn't look it's not as interesting but we can copy this and then we can add it to our speed to our CSS here I just have a div with a class of unicorn and my data URI is ready here yes you can have emojis in class names so let's go here and let's escape faithfully all our lines cuz otherwise stuff breaks and there it is and actually I can change that the text and everything and it just works it looks just like a normal and normal CSS border except it's cooler so at this point we can do the marching ants part of the type of animation but what about the gradient part so another cool thing about SVG is that it lets us color stroke I mean we can color strokes with plain colors but we can also color them with gradients this syntax is a little more painful as with many things in SVG because it came before all this like SVG was the first thing that introduced gradients to the web so yeah the syntax is not as nice as in CSS because it came before probably CSS the syntax would also not be as nice as it is now if it had done it first so let's give it an ID so we can link to it let's say great crud gradient whatever and then this linear gradient element has stop elements inside it with stop color attributes and let's give it that and here let's give it a gold color and an offset of one because we have to specify the offsets explicitly here and now we go here we'll replace the color with this and there's our gradient we can change the offset if we want more blue and we can also apply a gradient transform if we want to transform the gradient most the main use case of which is to rotate it and also the rotate the SVG transforms have a slightly different syntax than in CSS notice that there's no deck and actually if I add egg here it breaks that's also because SVG transforms came before CSS transforms so they have slightly different syntax but notice that if I use them inside CSS in SVG then you will get the CSS syntax it can be a little confusing if you are not sure try both syntaxes so again this is in a rectangle so it may not be as interesting but we can copy it in our data URI same thing here same deal more lines to escape and we are almost there accept notice one thing I said earlier that it behaves exactly like a CSS border which is slightly false we couldn't see the difference earlier because it was a very thin border but here that we have a thick border we can actually see that it's obvious that this is actually a background it's a very flexible background but still a background so we can work around that by applying some padding to offset the the actual border and just like before we've defined a stroke width of 40 pixels but we actually get 20 so that's all we need to account for hence the 20 here so takeaways from here SPG's with no view box notice that all of my SPG's had no view box attribute they spread to cover the entire area their coordinate system is defined by that and strokes stay the same width regardless we can use that to apply fancy SVG strokes to our HTML elements SVG gives our CSS superpowers in a way so the fourth thing I wanted to share is line headings sometimes you see lines you see headings that have these lines that sort of flex to account for the width of the text usually they're not animated like here and here I have a simple a h1 with not much styling at this point and I'm gonna show you how you can do that effect so we have two pseudo elements here we apply some content I'm gonna add a letter here that I'm gonna remove later and the background just so I can see what I'm doing and I'm gonna add a background here just so I can see what I'm doing okay so we give the heading whoa a display of Flex and then we got to make the heading 100% to account for the whole width otherwise nothing much would happen and then we stretch these areas by applying flex one we can remove this now we're almost there we can also remove the gray background and now we can style this however we want maybe let's give it a height of 0.1 and we usually don't want them to be this tall this high up so maybe a line items denser and we don't want them to be this stuck so maybe a margin as well and that's basically what it is we can do other things like if we want we can apply a border border with top one pixel right left zero and background off nothing that's that needs to be thicker and probably this should be thinner yep so you get the idea and it just adapts and you can see what happens what when you get to the next line you just stop getting lines anymore which i think is a perfectly fine behavior just the dots we don't have to account for when we have too much text so the main takeaway from here is the text nodes and pseudo elements can be flex children as well which is kind of obvious if you think about it but many people don't realize how many of you have done pop-up menus with CSS at some point most of you okay great that's what I expected so there's a problem when you do pop-up menus with CSS at least there was so usually we do something like this we have nested lists and a elements for the menu items and then our CSS looks sort of like this I've omitted fonts and backgrounds and stuff because that's obvious so usually we do something like this with a hover pseudo-class on the and then we display the UL and when I hover over these items I can see their sub menus I can click on their sub menus that's fine as long as yours as long as you're able-bodied then you can use a mouse what happens if you can't use a mouse and you depend on the keyboard I try it let's try to tab through this menu nothing nothing nothing so while this is easy to do it's not keyboard accessible you might try to fix that by using the focus pseudo class like nav a focus + UL basically URLs after and a focused a element should become visible as well and now the met the submenu does appear but what happens when I actually tried to tab through and click on one item it disappears it's just a teaser it's just here to tell me hey there's a submenu here but you you don't actually have access to it sorry and same here I'm just tabbing through and it's just teasing me I can't actually do anything however we recently got a new pseudo class that is centered around focus it's called focus within so focus within matches either focused element or any of its any of its ancestors it it basically targets elements that contain a focused element it's sort of like a very special case of the parent selector that we've all wanted for years but it's it's a very specific case of that and no we're not going to get a parent selector and CSS I'm sorry if you've heard anything about a house pseudo class that's never gonna happen in CSS at least nothing's planned right now but focus within gives us some of the functionality so let's try to use it here whoa let's do focus within and then ul whoa what happened here hmm okay well they've disappeared now let's try to tab through it opens and I can actually tab through to specific items notice that my mouse is here it's nowhere near the menu and I can just I can tab through them just fine it's just as accessible as a JavaScript based pop-up menu but just with a with an extra line of CSS and focus within has some decent browser support it's basically edge that's the problem right now so takeaways from here's that focus within really helps to improve accessibility and also something I haven't mentioned is that eventually we're also going to get a target within pseudo class so that's going to also help with a bunch of use cases in general it's much easier to add more specific parent selector pseudo classes like that than it is to add a generic parent selector so how many where in the in the talk earlier that mentioned variable funds I saw much more of you come on okay so for those of you that weren't there I think variable fonts are probably as big of a revolution in typography as the one we got in the 90s when we went from bitmap fonts to vector based fonts which may sound a little crazy but let me explain so back then in the 90s we had to design each size of each of the H fonts separately and then export them with like bitmaps for each character of each size and eventually we got vector based fonts and the fonts not only became smaller but also more flexible it's the same thing now we until now we had to design each well its weight separately and if we wanted to use like a full the entire range of all faces of a typeface we had to include like a bunch of font files which was really heavy and expensive well the expensive part hasn't really changed very much but the tech part has changed so with variable fonts we can include all the variations of a font in the same file and it completely continues so you can see here how you can completely change the font the fonts comb is a really cool website it lists like most of the variable fonts that we know today and some of the access that you can have are very non-conventional let me see if I can find you so someone did an emoji variable font with one of my favorite emojis which you can probably guess now which one it is so I'm on internet yes there it is so and the variation axis it's called cap height isn't that lovely they called it cap height and it actually changes the cap height I cannot wait to get more variable fonts with emojis but back to normal characters for a bit so here we have a multi-line heading with different sizes so that each word is aligned and this is what the CSS looks like and the more Design inclined of you will have already spotted the problem here even though everything is the same weight the all looks much thicker and the food's also the word fonts also look slightly thicker but they're all the same weight why did that happen well if if you change the size of a character it's natural that its strokes also appear thicker but with variable once we can actually tweak this because we can get the entire range of weights with with with normal fonts we could just go from like maybe light to normal or to extra light but that's that was it whereas with variable fonts I can start from the font weight of 300 that I have actually maybe let's start here I can start from here and go down until it looks right and I think it looks right about here and here as well I can do the same thing I can go down until it looks right and I think it looks right at about 190 so that's probably the first takeaway that with variable fonts we can tweak things to get exactly what we want but also you might think this is kind of a pain if every time I change the size I also have to adjust the font weight well there is something we can do about that you would still have to adjust the font size manually but at least not both of them how many of you have heard of the term linear regression from Statistics perhaps a few so linear regression is mostly used in statistics it's basically if you have a few points then linear regression gives you a line that is as close as possible to all of your points and if you have more than two points so it most likely won't hit them exactly but it will try to minimize the distance from all points and there's also quadratic regression which can come a little closer because it's it's a second-degree one so for those of you that don't like math very much you can rest assured that you will not have to calculate anything there are websites today that you can put you can plug in all your numbers and they give you these equations back so let's try to do that you know and if you're wondering okay so this is about having a few points and getting a line but like what are our points here our points here are the sizes and the font weights and what we need to find is a function that can give us any font weight at any given size at any given font size you can wicked we can take if we can see the font size as sort of the independent variable and the font weight as the dependent variable here so probably the most popular websites for these kinds of things is called Wolfram Alpha and I can actually make it bigger it's called Wolfram Alpha how many of you have heard of Wolfram Alpha half of you okay so basically anytime you need to calculate anything non-trivial there's some query that you can put into Wolfram Alpha and it gives you the result so for a linear regression based which is basically to get the line you type something like this I've made a small app here that generates it for you but you can just like type this in it and this is the line we get as you can see it's not exactly this it doesn't exactly go through our points but it's close enough for most cases and we can click on plain text and copy it from here and now let's go back so how do we apply this to our CSS first off we need to change the this to use a variable for setting the font size because we can't refer to the font size in an expression so let's do this whoops and now we got the same thing we've had before with the font size you might have wondered why I removed ms as well the reason is that today if you have MS you cannot get anything else in CSS you can't go from a length to a number you can only go from numbers to lengths because we you cannot divide with MS so if if you're gonna be using something in calculations you should set it to it you should use plain numbers and then multiply them by whatever by one of whatever unit you want so and let's say font-weight here and now let's paste our expression here and what is our X it's for size so you didn't see a change because these are still here so now the moment of truth how different will it be if we remove these not that different it's not 100% perfect probably the most seasoned designers among you might be able to see like a small change but it's still like so much better than before that then if we didn't specify any font weight for each specific for each line like remember how bad it was and another moment of truth is what happens if we need a different font size than the ones we had so let's say we want to combine the these two lines and let's go here and we want to use smaller font size like maybe 65 so notice that even though it looks much better than if we didn't have a font weight a specific font weight for each line at all if we didn't have this if all of them were 300 this is what we get so it's already it's better but it's not great the our awesome is already it is much is obviously thinner than the rest of it and that's because linear regression is a little more limited you can see that it's not exactly it doesn't exactly fit our points we can actually get closer with quadratic regression and as you can see here it actually completely fits our those three points it won't fit any point in between because it's highly unlikely that the actual underlying function is a second-degree polynomial but it gets closer so if we copy this one let me make it bigger this is what it gave us let's click on plain text and copy it and let's go here and we'll replace this with the new one and we replace any X's with bar sides here it was squared so we have to do it twice and another multiplication and here as well and maybe let's put it to multiple lines cuz it's getting a little long isn't this much nicer looking and let me show you other sizes as well so as you can see it works quite nicely up until fairly large sizes I think it starts breaking after three or so it will always break eventually there will always be yeah it started breaking now there always be a point where it breaks when you use quadratic regression because essentially you get a parabola which goes like this and you're just hoping that the sizes you want are in this part once it starts going up again it breaks so test with a large range of font sizes that you might need and the good thing about this is that it's not tied to a particular use case it's tied to a phone but in the specific weight that you're trying to emulate but it's not tied to this particular use case for example another use cases how many of you have have read or heard the rule that in typography you should ever try to emulate small-caps your than expected well in typography you should never try to emulate small cups because when you make when you have to make them you have to shrink the same glyphs that are not designed for small cups and you end up getting thinner strokes notice that the sequel there that's so another good practice in typography is that acronyms should use small cups because then they're less prominent otherwise they draw the eye too much but if we don't have real small caps characters if the font doesn't actually have small caps glyphs this is what happens like the sequel it word is much thinner well obviously thinner than the rest of it and it's the same with with superscripts and subscripts notice the citation needed superscript it also doesn't look harmonious with the rest of the text that looks thinner we can apply the same trick however we can go she ate we can come here use a variable for this and then just paste in the same CSS we wrote previously and now it looks much better and when we wrote this code we have no idea about this use case this came later but it works regardless so these take away that the steak wings from this is that the why the weight axis and variable fonts allows us to equalize strokes across different font sizes which is useful for a variety of use cases as we've seen and linear or quadratic regression helps us to avoid calculating a weight every time which would be a huge pain in the ass and also thank you to black foundry for providing this font for this demo it's normally a commercial font there are free fonts though there are free variable fonts if you go to V fonts calm you can see all of them free and commercial the second thing i wanted to share with you is called responsive flex with no media queries so what does that mean this is a very simple post component let's assume it's for like a blog a forum post or something a comment whatever and notice what happens when the viewport becomes smaller it doesn't look very good now we might our first thought might be to add media queries and this could work if we control the entire page but it's not very scalable if we want to use the same component in multiple different contexts the viewport doesn't doesn't define what's the width of the actual component which is why many people are asking for element queries which we won't get any time soon there there it there are many things to be resolved before we can get element queries right primarily the thinner cyclical so we can discuss this afterwards if you want but it's highly unlikely that we'll get them anytime soon however for this particular case there are things we can do that sort of act like element queries so we want to make this vertical when it's too small so one thing we can do and CSS looks like this right now just a simple flexbox where the post has flex flex of 1 we can apply flex wrap and then in small sizes it wraps but it doesn't look very good because the heading doesn't stretch because it has no flex we can apply flex of 1 and then it works but then when we make it bigger we now broke our layout we don't want both of these columns to be equal size so what can we do we can change this to be a very large number which works when you're small because all it needs is some nonzero flexing and it works when you're big as well however notice that it gets quite small before it wraps like it at this point this is not a very readable forum post or comment or whatever but all our existing CSS properties still work we can say we can specify them in width for the post and it still works and basically that way we can control exactly when it changes like this is the smallest it can get if we make it 20 m/s hmm yeah because now it's it's 20ms even when it's vertical so that's not that great let apply them in width but not like a tiny tiny man not a huge man width because it will be applied regardless so the takeaways from the seventh one is well I was using flex but ultimately I was setting flex grow behind-the-scenes and flex shrink and flex bases were just their default values and flex growth defines how the remaining space is distributed zero means no expansion in this case we did want an expansion so we had to set it to something bigger than bigger than zero and this is based on the Flex grow $9.99 hack by Joran van he I hope I'm pronouncing his name right so the eighth the eighth secret is about grids grids are awesome so here we have 10 article elements with different classes each of them has a class of either cat or human and either male or female and we can apply we want them to be in two columns so we can apply display grid and specify a grid template let's say one afar for both of them it doesn't really matter what the width is for this and now we want to sort the cats to the first column and the humans to the second call it and notice what happened here that is not what we expected we just wanted to columns this is not like a proper two column layout the reason for that is that by default grid automatic grids are laid out horizontally but we can change that with grid Auto flow we can say : and then we change how this algorithm works and if you get it it they're laid out by : and we can change the sorting we can swap the columns it works just fine we can change how they're sorted like maybe make it male and female they'll works all we had to do was use grid or to flow but great auto flow is useful for a number of cases here we have ten kittens as you may have noticed I also love cats so and we have a grid template of let's say four columns there are 200 pixels and like this vertically as well but I don't like this repetition so let's use a variable here and here okay so notice that this looks kind of almost artsy I would say but not quite what we wanted which was for a four by four grid of cats that's because as Rachel mentioned this morning when you have when your grid items when your grandchildren are images or anything that has an intrinsic anything that has intrinsic dimensions they are not stretched they so they just get their normal size there are two ways to fix this one would be to apply a width and height of 100% how many of you are freaking out right now because these images are like stretched don't worry about this I got you covered and the other way to fix it is just Excel align align self stretch and justify self stretch and we get the same result which one do you prefer okay let's keep it like that so it's kind of a boring grid right now so I want to make one of the kittens large let's say the third one so we say grid column end span too which means it spans two colons it's this one this cutie and let's also make it span two rows because it's too cute for just one or two K cells okay it doesn't quite look nice I I want to I want to make another cut bigger as well so let's say maybe the fifth one and oh my god what happened here I got a hole in my grid that's not nice but I can still use grid or to float to the rescue so besides row and column it also supports a keyword called dents and thence just shifts grid items up to cover any holes that were created and that's can also be combined with column it just columnar and route changes how the algorithm works and dents makes it dense so isn't that a much nicer grid of kittens so as you know from Rachel stop CSS grid has really good browser support today and you don't need polyfills object fit in case you haven't seen it is also also has great browser support so the eight the takeaways from this grid ought to flow this defines the direction that auto automatic grids are laid out the dense keyword keyword can prevent holes by shifting items earlier and object fit cover prevents image distortion which I cannot think of a single case where you want to distort your images so the ninth one is about gradients because I can't give a talk that doesn't mention gradients so this is a plain linear gradient from white to black I'm sure you've seen many of them and we will we also have radial gradients I'm sure you've seen many of them as well but a new type of gradient is conic gradient it's called conic because it sort of looks like a cone with the right color like if you look at a cone from above this is something I proposed five years ago and finally it's making it into browsers it lets us do a lot of things such as color Pickers but also how I mean how often do we need to write color Pickers it can do way more useful things than that so let's keep two color stops and let's bring them close together let's bring this one close to and actually so notice that now that they're exactly at the same place and it also works if this one is earlier too so I usually just make them zero and then they work with whatever numbers coming before them so what is this this is a pie chart and I can use CSS variables here for the value and then I can change the value independently of the gradient and you might be wondering why is it cool what to use the CSS variable for the value well because then I can apply it in an inline style now I don't have to touch the CSS to change the pie chart to change what the pie chart is display or I can display it with JavaScript egg and have like an attribute here and then some JavaScript that sets the variable but notice that when I'm removing the value variable I get nothing so I can I should probably set a default which is done like this the VAR function accepts a per a second parameter which is a default in I can also have multiple slices of the pie chart let's define a second one and let's go here and add another color and now I can do this and move this up as well now I have two slices in my plane my pie chart and I can change this and it just updates both of these could be set in the in line style and I should probably set a variable default for this as well and now I can basically control how many slices of this pie chart I have by just setting some CSS variables and you can see how this works from multiple I can have like ten different segments like ten value value to value three up to value nine or whatever and then I can have like up to ten segments by just setting the right variables I can even control which colors I'm seeing by just setting the right variables and some of you might be wondering okay so if we if we can do that can we also animate it can't we animate it there's always a good question to add for anything CSS related now let's try what happens if we try to animate this this the - - value property from 0 to 100% let's set it to 0 here and I can try to do this and infinite now what happened here isn't that kind of anticlimactic and disappointing so the answer is by default we cannot animate custom properties and if you're working in production today the answer is a flat out we cannot animate custom properties but it's gonna get better so we can run this JavaScript CSS not register property which lets you quite predictably register property and now if we go back it's animating let's make it nice the animating just fine and I don't even need to specify the starting position because I've declared that this is a percentage so obviously its initial value is zero unfortunately well conic gradients don't have great support but they're coming in they're already available in Chrome behind the flag and it's gonna be it's gonna be exposed in chrome 69 finally and CSS that register property also doesn't have great support it's only available in Chrome and behind a flag it's part of a new set of specifications called Houdini which are created as a task force from the CSS working group and the the technical architecture group at WCC and it goes way beyond CSS the register property it's gonna be a new set of JavaScript API that let us hook into things that only browsers could do earlier like parse CSS so we can write polyfills if if you've ever tried to write a polyfill a CSS polyfill it's a huge pain we can parse CSS we can create new image types we can do all sorts of things that previously were only accessible to browsers it's that's why it's called Houdini it's sort of an inside joke because it's exposing browser magic to developers so connect gradients are coming you you might have seen this before a color stopped at zero creates hard lines regardless of what the previous color stops are CSS variables increase flexibility as we know and CSS the register property will allow us to animate custom properties can't wait so the last thing I wanted to share with you today is called descendant grid items which doesn't quite make sense by itself so I'll get right in it right to it so here we have a login form with very simple HTML just two labels some text and two inputs and what we wanted to do is we wanted to allow it to align these enough in a 2x2 grid so first step would be to say display grid and then we define our grid template which is also for the first color we we want username and password that the column that has username and password to be as big as it needs to fit the contents and then one if our for the rest and notice that we didn't quite get what we expected that was not the grid we wanted to get this is not a grid this doesn't even look like a grid I mean it is one but totally doesn't look like it why did that happen well the browser did what we told it to do it applied the grid layout to four and it had two children and we specified two columns so the first column we got the first label the second column got the second label that's how it works and until recently there would be no way to fix it but now we can so basically what is it that we want here if we could tell the browser what to do we would probably tell it something like you know what actually could you just ignore these label elements and just apply the the grid to what's inside them well we can actually say that with display contents that's exactly what display contents does it tells the browser to ignore this element for all intensive purposes except selector matching but when it comes to styling it the browser completely ignores it I mean even if I try to apply like a border not there and yeah let's apply some grid God that looks nicer so there it is that's the grid we wanted to do just with one line we fix the problem display contents is also useful when you are late a website for example and you won't you have a header element and you want you want to apply the things inside the header to the grid and so you can you can just apply display contents to the grid and then it's children become grid items display contents has pretty decent browser support don't look at the amount of green and red when you see a table like that it's misleading look at the percentages and especially if you don't live like yes if you if you're developing websites for a specific market you could also look at the percentages for that specific country which kind of use also lets you do so it looks like there's a fair bit of red here but actually 70 percent supports it and you can always detect support with the at supports rule and apply these rules apply specific rules only to browsers that support display contents so the last takeaways display contents allows us to make descendants of elements flex or grid children of the parents and text nodes our flex or grid children to notice that we didn't have to wrap the words user name and password with anything so before I finish one last thing this is a super quick feed feedback form just basically which ones of these ten things that you already know which will help me improve future talks and also I have stickers so if you want stickers come find me I'll be at the after party as well thank you very much you [Music] [Applause]

Channel: ScotlandJS

Views: 5,361

Rating: 4.891892 out of 5

Keywords: CSS Secrets, css, scotlandcss, scotlandcss2018, CSS Variables, SVG, grid layout, flexbox, variable fonts

Id: 8BXQ3zCihYM

Length: 63min 20sec (3800 seconds)

Published: Mon Sep 24 2018