Lea Verou - Keynote: Even More CSS Secrets

hi everyone I'm Lia I hope this is correct here's a fun fact you may not know about me I'm originally from Greece and specifically from the island of Lesbos which technically makes me geographically lesbian probably the first you'll ever meet seriously that's what the word lesbian actually means someone from lesbos the other meaning came much later so technically my father is also a lesbian my entire family's a lesbian in other news I like making stuff you might have used some of my work and for the last oh I'm an invited expert in the CSS working group there's me and this is a photo of the most of the working group I've written a book called CSS secrets and actually if I ever write the second one the content of this talk will probably be in it and it has been translated to a bunch of languages German Polish Russian Japanese two versions of Chinese Korean Bulgarian I mean I don't think it's been translated to Ukrainian yet though and for the last four years my day job has been research and teaching at MIT my area is human-computer interaction which is just a fancy academic term for usability that's more specifically my research is about trying to make web programming easier if you're interested in more details about what I do go to Malvolio ma vo de rio so the idea of this talk started a long time ago in 2011 I used to give this talk called css3 secrets because css3 was a thing back then you now know that there's no such thing as css3 but back then it was the buzzword and it had ten three ten things you may not know about CSS like ten tips apart from them all being CSS tips they had nothing else in common it was just cool stuff that I wanted to share about CSS and then I did a sequel more CSS secrets the next year and then for the next five years I was doing more specific talks talks about color talks about border-radius talks about CSS variables and I've always wanted to do a third sequel well a second sequel of this series and today I'm I'm presenting this third second sequel for the first time and I hope you like it so let's start with the first one I you might have noticed in the cover of this of this talk this cut out text effect and I'm gonna show you how to actually do this effect with the least amount of CSS so here is a starting point I have a black heading with a white color and the black background obviously this is this won't include like all the code used for this cuz I don't need to show you how like the background image showing these two ladies is applied or anything I'm just going to show you the relevant parts of this so how many of you have heard of blending modes about 1/2 or 1/3 I would say so blending modes allow us to control how the current element blends with whatever's behind it and specifically here the multiply blend mode is very useful because as you will see once I apply it I actually get the cut out text effect but notice that if I didn't have a black background here if I had say my favorite pink that wouldn't quite work I would get a different effect it might be a nice effect I would I might want that effect but it's not a cut out text effect this only works with black and I'm gonna show you a different technique for white and I have not found a solution for any other color so but why does this work because if it's if I just tell you like this this one line and it works and and if you use it you get this effect what's the point it's just one more thing to memorize I made this little application which lets you specify two colors and you can play with it after that after the talk because my slides are online so you can input like to CSS colors here any color work even like named colors and you select a blending mode and you see both the result of their their combination and the mass used to produce it so these blending modes come from Photoshop you might have used these they have exactly the same name in Photoshop and it was Adobe that originally proposed them to the working group few years ago so why does this effect work because basically multiply just means what it what the word says it multiplies the RGB components of each color notice here that the color in the middle is produced by just multiplying the red components and the green components and the blue components and this is the color we get this this column here so what happens then if the color in the foreground is white which is 100% everything you can see that basically if you multiply anything by 100% what do you get back you get this thing you multiplied right so any color you multiply with white you just get that color which is why our white text you see we had this white text here and that white text now became transparent basically cut out because it got combined with the background and combining white with whatever gives us that whatever similarly why did the black stay black because if we input black here notice that if we multiply something with zero what does it give us it gives us zero right so if we multiply black we get black in general multiply always gives us a color that is at least as dark as that as the darkest of the two colors so this is why this works and gives us black for black and cutout for white so what do we do the opposite effect when we have a white background and we won't cut out text there multiply won't work because of what I mentioned the white becomes transparent and the black becomes black so the screen blending mode comes to save us here which gives us exactly what we want and we can reason about it in the same way if I select screen here the math is a little more complicated I'll give you a few seconds to process it so notice remember this is the result we have black becomes cut out and white stays white so let me show you the white first so with white this component becomes zero and it's zero for all three of them so this is getting multiplied by zero so we have 100% for each of those three components which gives us white and that is why white stays white for black this component becomes 100% so it's useless it's just like multiplying by one and then this gives us 100% minus 100% and this become because we have two minuses it becomes a plus so it gives us 80% and same for the other two components so basically when we screen with black we get whatever color we had behind which is why it gives us the cutout text effect so if you haven't heard about blending modes before I know many of you might be wondering okay this is cool yeah but what about browser support browser support is pretty decent actually 86% of users and remember if blending modes are not supported you actually pretty get a pretty decent fallback this is the fallback it's still perfectly readable you don't even need to do any other supports or anything so the takeaway from this first secret is that with multiply blending mode black it becomes cut out and white is opaque and with a screen blending mode white is Carol and black is opaque and there are many interesting things to observe with other colors so I suggest you play with the app a little bit afterwards and if you discover something cool let me know so the second secret is using characters as images look at the background of this slide it's actually using emojis and characters for the number two it's not images so how does that work so we're using in this example I'm using a data URI with an SVG and contrary to what they've told you what you've been told you don't actually have to URL escape everything you only have to URL escape very few characters URLs actually have very few reserved characters and everything else just works today and also for CSS when you have a multi-line string you have to escape the line breaks which is why every line ends with a slash yes it's very annoying and chances are during this example I'll probably forget it at some point but you have to remember there's a slash at the end of every line otherwise hell breaks loose so here I have a circle and I can make the background a bit smaller and now I have many circles but a circles not very interesting right I could do this with a radial gradient if I wanted what is more interesting is the text element so SVG supports a text element for putting text in our image you can't see anything right now because by default the baseline is zero which makes which means that the letter is outside my image but now that I've given it a baseline of 1m you can actually start seeing something and let me make it a bit bigger so I have a view box of 100 by 100 here and I've made it again I've given it a font size of 100 so I get a pretty big a and that could mean I could I could use like I could put any characters here or even better I could put emojis here and you know what's even better because it's just SVG and SVG supports anything almost anything that you're used to you may see where this is going except I have to escape this I think it's % 7 what is the brace yeahit's % 7b and I'm gonna use a % 7b here there is our unicorn again and I'm gonna apply a transform a rotate transform and here I'm gonna give it a style attribute with an animation of foo one second infinite alternate and maybe let's make it - so you can see here that not only you can use this technique to have images but they could also be animated images who needs animated gifs and a P and G and all that you could have SVG which is much more awesome and you can actually use this to style meter elements to look like rating widgets here this is just a meter element if I change it I can get like all kinds of numbers and it's just using this technique to style it it's just using two stars as width as images with this technique this star is faded out and this star is not and yes I'm using this WebKit pseudo element here but there is an equivalent one for each browser if you if you look it up there is a pseudo element for Firefox and there's a pseudo element for edge and I hope eventually we standardize this because I'm just as fed up about this as you are but right now we have to use this proprietary pseudo elements if we want to style meters but the thing is now that we've done that we could turn this into a chocolate ice-cream meter isn't that awesome [Applause] so the takeaways here is that you can turn glyphs into animated images with SVG data your eyes you should escape some characters but not everything like we like people used to think we had to do and you can use this trick to even style meters with discrete icons but the wonders of SVG data your eyes don't stop here so the next secret is also about it's also related to SVG did I ever think how you could do this border with CSS we can't do it with CSS without SVG but we can do a lot of cool things with SVG so it's worth looking more into it so here I have a simple rectangle it has a stroke a stroke width of 4 pixels and there is a property called stroke - array which lets us have strokes with custom lengths of dashes and custom length of gaps and there is also a stroke - offset property that lets us move where these dashes start from so look at what's happening as I'm reducing this it's an amazing and you know what's even better you can animate this with a keyframe animation so let's do that let's add a style element with a keyframes rule that will call marching ants and it will make the dash offset not minus 94 but all we need to do is all we need is minus 15y minus 15 because the dash length is 10 and the gap is 5 so 15 will get us exactly where we started so if we continue this and if we animate in Italy we'll get the marching ants effect so let's apply the animation marching ants with marching ants let's say one second infinite so you see that it sort of moves can you can you see what's happening in the back so you see that it sort of moves but it's not like what you would expect it's it's it's as if it's getting tired at some point and then it picks up again the reason is that by default the timing function of animations is ease but we can add linear to make it linear and now it's the proper marching ants effect that we know we can make it a bit faster because that's a bit slow yeah I like this better so we can use it for like a selection or something but right now this is just an SVG so what we wanted was to apply it to an HTML element as a border so I'm gonna copy this here and here I have a div it's just a div with a class of unicorn and look at my awesome border as a Content and here I have the SVG data URI ready but I'll need to add some slashes and another slash and another slash and there it is and it's fully flexible if I go here because I've given it content editable so I can change it if I go here and change it it just adapts it's just like a normal border except it's cooler [Applause] thank you so what else what other cool thing we can do with SVG so here I have a simple rectangle with a 40 pixel blue stroke that's not very cool we can do that with CSS normal CSS as well but you know what else what we can do with SVG that we can't do with CSS gradient strokes so gradients in SVG are a little more awkward because they came way before way way before CSS gradients so they have a completely different syntax which you can see here but it's a it's a little more verbose but it basically does the same things let's make it ha a see yep this blue and now you well you can't see it because I haven't applied it anywhere yet so let's go here where it sets the stroke to a color oh and I need to give my gradient an ID and here I just say URL hash whoa and now I have a gradient stroke and I can also apply a gradient transform to make it a diagonal stroke and yes everything is different in SVG like the way we specify angles even the way we specify transforms notice that there is no degrees here and if we try to specify the transform the same way as in CSS it doesn't work anymore so it's not ideal but at least it lets us do a lot of really cool things so now like the previous time we just have a rectangle here how do we turn it into a cool CSS border on an HTML element same way I will copied here again we have a div with a class of unicorn and I'm gonna go here and paste it in add some slashes and there we are notice that because this is basically a background image we don't get any offset like the text is still overlapping our border but we can do that easily with like with padding and then it works just fine notice that even though my stroke width is 40 pixels my padding is is 20 why is that the reason is that the stroke I actually end up seeing is only half the stroke the other half is on the outside yes it's very weird it will become more clear if I may turn this into dashes just like before I'm gonna do this and then now you still don't see it but if I apply line cap round well and make my gaps a bit bigger now you start see what seeing what's going on here I can't really use round line cups because half of my stroke is on the outside and what's even worse there is no way to fix this there is no easy way to fix this because we can't really say calc in the width and height we can't say 100% minus 20 pixels because like most browsers don't support that and there is a property that is supposed to control this I think it's called stroke offset or offset stroke or something but no browser supports it so if you like these things start pushing browsers a bit to implement more of the cool SVG features because they think we don't care seriously that is why browsers are not implementing cool new stuff in SVG there's a ton of stuff that is planned for SVG in browsers are just not implementing it because they think that developers don't care about SVG so show them that they're wrong tweet about it tweet about SVG and how great it is so the takeaways from this is that SVG's with no view box notice that I didn't specify any width or height or view box for these SVG's they spread to cover the entire area and but folks don't stretch they say the say they stay the same widths we specified which is exactly what we want for for borders like this so the fourth secret is about creating headings with a flexible line around them that just adjusts to that just adjusts to the heading content you don't have to animate them like they are over here that I just thought that was cool but in a real website please don't animate them they will be just as annoying as a mercury tag so here we have a heading the only reason I've added contenteditable is so that I change its content afterwards and show you that it's really flexible and here we have before and then after pseudo elements which is the key for this so the main idea is that I'm gonna add some before and after pseudo elements here I'm actually gonna give them a content for now but I'm gonna remove that afterwards this is just to show them to show you what's happening and similarly I'm gonna give this a background of yellow just to show you what's happening but we're gonna remove this afterwards so the idea is that these pseudo elements are gonna become our flexible lines by using the wonders of flexbox so right now we don't see much of a change by applying flex because there's nothing to flex really so let's give the heading a width of 100% and let's make the pseudo elements flexible by using the Flex shorthand so now this is already starting to get there right so let's remove these horrible colors and let's remove the a because we don't need it so now we're sort of getting there already you can see it here it's already nice and flexible but it doesn't look very pretty so what should we do let's reduce the height a bit and now let's make it centered this is already getting there let's make it thinner and let's give it a bit of margin and there we go that's already one version of this effect however we could do other cool things as well I mean as you've seen in the cover of this we could also give it a background and give it then and have stripes there another thing we could do is instead of having a background we could have a border with the border width of the top and bottom being point one and then left and right being zero and actually this is a bit too thick still maybe something like this and maybe we could give it a gray color as well so as you can see the possibilities are infinite but what happens when the heading becomes so big that there is no space anymore well as you can see we don't get the lines anymore which kind of makes sense so flexbox just takes care of that without us having to do anything for when the text is too big so the takeaway from the fourth secret is the text nodes and pseudo elements can be flex children and also grid grid items if you're using grid we're going to use that later on so the fifth secret is about having accessible CSS pop-up menus I'm sure you've seen this many times how many of you have done a pop-up menu like this with just CSS at some point in your life most of you right it's like one of the exercises that people do when they're learning CSS so the problem with these menus is that they don't really work with the keyboard so unlike what this heading is showing the reality is more like this so here I have a nested list which have styles to look like a menu again the exact styling doesn't really matter so we're not going to look at it the only part we're gonna look at is the part that shows and hides the menu because that that that is more relevant the thing I want you to remember is that each menu item is an a element and then there is a ul for the submenu with list items that also contain a elements so if I click here I focus on the project's menu and if I have it open I can actually tab through the submenu items but that's not how it usually works for keyboard users they don't like hover on the icon the on the menu first and then use the keyboard what really happens is that they focus on the first item and then they press tab and nothing happens in the submenu they don't even know there is a submenu it just goes to the second item and the third item so how can we fix that one possible solution would be to open the submenu when the a item is focused so we can use the a focus pseudo-class and say a ul that is after a focused link should be displayed so now if projects is focused with the keyboard the submenu does open and now we can see that there's a submenu there but what happens when we try to tab through it disappears it's not actually usable it's just teasing us like here there's a submenu but we you can't use it unless you use your mouse which is why until now using CSS to do these kinds of sub menus was actually an anti-pattern unless you also use JavaScript but now we got a new pseudo class called focus within that doesn't just match the focus the element itself but also all its ancestors so how can we use this to our advantage here so we're gonna say the item it has focus within it then can you still hear me there's weird stuff happening with the microphone okay so if the LI item has focus within it then the UL inside it should it should display so you can see that now if I tab through it actually works and similarly I can tap the blog tab tab tab it works just fine like I like it it works like those menus that have JavaScript except without the JavaScript so focus within is fantastic for accessibility and pop-up menus is just one example you might wonder what is the browser support for focus within and it looks like I forgot to add a slide on that but we can go - can I use quickly and you can see that it's actually pretty decent it's only edge that's holding us back and it has like 0.02 percent market share so and one point 67 percent here you can always include like a fallback or a polyfill for them for edge so also in the future we might also get target within so that all these all these web sites that use the target pseudo class to the to open or close certain items now with target within we would be able to display something when we don't have a hash and the URL its target with and would also be super useful I can't wait to see it but it's not there yet it no browser has implemented target within yet so the sixth one is about variable fonts for non variable strokes what does that mean it sounds very cryptic I'm gonna show you what it means here so but before I do how many of you have heard of variable fonts that few come on if you fear the variable fonts raise your hand okay well the rest of you are in for a huge surprise so remember how in the beginning of computers our phones were not actually vector based but they were bitmap and every size had to be drawn individually and eventually we got vector phones that just scaled at any size so variable phones are an equivalent revolution as when we got vector phones for the first time it's like the second big thing that has ever happened to fonts and what does it mean so before variable thoughts each font had a certain number of ways often just normal and bold sometimes the stuff especially the fonts that are used by graphic designers a lot they also had like extra light and light and normal and semi bold and bold and black and all these weights and they if you wanted to use those as web fonts you had to include like seven weights if you actually wanted all of them and it was terrible for it was terrible for performance but it's not just about performance you could also not make small adjustments it was either light or normal nothing in between whereas with variable phones we get everything in between with just one font and you can see this is an awesome website for variable phones v - fonts comm it has a ton of variable fonts and it's not just weight that that can change like here you can also see width changing also the slope and everything is changing smoothly here you can you can see the seraphs like this font becomes goes from serif to - sans-serif with a different axis like basically you can have all sorts of custom axes there is even an emoji font here with a poop icon with with the hat of the icon growing and shrinking based on an axis let me see if I can load this because this website has the poop variable font as well it's awesome but I don't know if it will load the Wi-Fi is a bit slow I'm gonna show you some of the others while we're waiting for it to load you can see how like this has horizontal and vertical proportion here it's the contrast between the strokes that changes here it's like the swoosh enos and something loaded there it is so notice that if I change the axis there's a cap high taxes accept cap Heights here it doesn't actually mean uppercase height it means actual cap height so yeah a variable fonts are super cool and this secret that I'm going to show you here it's only about one facet of them so here I have a heading with multiple lines and I've adjusted the size of each line the font size of each line so that it occupies the entire width but do you notice something here this looks awful the the strokes the widths of the strokes of each character look completely different look even though they all have the same weight our actually appears much bolder than everything else and the 1st and 4th line appeared thinner than everything else so how can we fix it before variable fonts we did we couldn't really do very much even if we had a font with like all weights that were a thing back then all we would be able to do would be crude adjustments like font weight 100 which is way too thin but so here have included a variable font called F if met of VF by monotype it's a free font and notice that instead of the font weight descriptor giving us what weight this font is it gives us a range it has two values it says this font is between 100 and 900 and you can get all of these weights from just this one file and same with font style it says they come it's from it goes from normal to italic and by the way font display swap is a cool new property to look up I'm not going to show it here because it's kind of hard to demonstrate and talk but basically it means load the fallback while the web font is loading and when the web font loads then swap it which is better than the current behavior of some browsers so let's see how variable fonts can help us here so we can tweak each line individually so be even though 100 is too much maybe 190 is a bit more appropriate and similarly even though 100 is too much too little 140 looks more appropriate so and the 4th one looks okay to me so I'm not gonna adjust it so this is already useful but what happens if I change the text there what happens if I want to change like variable fonts are awesome and I want to change it to like variable fonts erm ok ish I guess or something like then I would have to painfully adjust the font size and the font weight again and like every time I change anything I have to adjust these separately is there any way to have a continuous expression that gives us what font weight we need to specify for each size so there is a concept in maths when you have a number of points and you want to find the curve that matches these points there's a process called interpolation that gives you a polynomial which produces intermediate values however if you have a lot of points interpolation can give you a very high degree polynomial like X to the seventh for example which in CSS terms would mean like multiplying something painfully like seven times because we don't actually have powers in CSS so we want something a little simpler we don't care about the ultimate precision we just want something that looks okay so what we can do is there's another math concept called regression how many of you have have heard of linear regression it's usually in the concept of statistics okay so linear regression just gives you a line if you have a number of points linear regression just gives you a line that matches these points that there comes as close as possible to these points obviously if you have a lot of points it cannot match all of them exactly if you only have two points it can match them exactly so and there's also what is called quadratic regression which instead of giving you a line it gives you a second degree polynomial so this sounds a little bit abstract but don't worry about it because we're gonna apply it in practice so I thought what if we could use these techniques to derive a calque expression that will give us the font white weight for each font size so that we only have to adjust the font size so the idea is we would instead of specifying font size with a property the Prada font size property we would specify it with a variable and then I would say font size for size and then font weight would be some kind of calc expression that depends on size but I'm gonna comment this out right now until we have the coefficients also because we want if if in CSS we have MS we cannot get anything that is not MS we cannot get numbers from MS so I'm going to change this to 1.5 and this to 2.8 and then I'm gonna multiply the size here by 1m so let's look back oh and I'm gonna set a default size of 1 okay so now we're back in the original situation so I've made a linear regression calculator that piggybacks off of Wolfram Alpha with you've heard of Wolfram Alpha right okay so it's like it's a website that lets you compute a lot of complex math things so we can input the points we've discovered so we've seen so far that when the size is 1 the weight is 300 because we've specified 300 here when the size is 1.5 the weight is 190 and when the size is 2.8 the weight is what was it 140 so 140 and now we see and I'll make this bigger so now Wolfram Alpha gives us a line that tries to be as close as possible to all three of these points so notice that this is not actually very good not only it doesn't match any of our points but it's actually pretty far from all of them and you can see here when it says plot of the residuals it goes it can be off by 40 a foot an increase of 40 in the font weight has a very visible result so this is actually pretty bad I'm gonna show you how bad so come on okay for some reason Wolfram Alpha gives me an image there and I have to like copy the image so that it copies the alt text it's terrible so let's go here and put that expression in but instead of X I'm gonna multiply by var sighs so that should work and let me comment this out so we can see the actual effect that we have actually it's not that bad maybe we should just leave it at that well so let's suppose we left it at that what happens if we change the text because that's the the real test otherwise we could have just left the numbers we had so let's say for example instead of like four lines we want to make it three lines so we go here and we want to change the size wait something's not right here oh no okay never mind so you can see that it's sort of less good I mean it's it's it still loads better than what it was before we made this adjustment but it could be better so what can we do we can weaken we can add more points and that way we'll get we will get a different line but there's a limit to what you can get with just the line so another thing we could do be to find the font wait for like a smaller number because right now the size of 65 is completely outside the range of numbers we have we have already put into that calculation it's not within the range of numbers we've specified before it's outside of it so it's even harder and I'm actually surprised that did so well I was expecting it to do much worse in my tests before this talk it did much worse I'm not sure what I did differently so we can test like what the actual the correct font weight would have been let's say 360 it would have been like 350 and if we go here and add another point with 350 it gives us a different line with this point being completely really really far from it so we can select quadratic which gives us a different curve that fits the points more closely do notice that if you remember math at school where you were where you were graphing second-degree polynomials you remember that the shape is not actually like this it's actually sort of like this so at some point this expression is going to be very inaccurate at some point it's gonna start going out and giving you completely wrong results so this will only work for a certain range whereas the line approach will give you sort of reasonable numbers throughout so let's try this I'm gonna actually make this bigger so you can see what I'm doing here and I'm gonna try to copy it again which is torture so you can see the line here and you can see how far it is and I'm gonna go back and apply this expression instead so I'm gonna paste it here and I'm gonna replace those X's with my variable and here as well okay so you can already see that it's sort of better it's already feeling closer but the real test is if we have different sizes so let's try to go through oh yes yes yes that's why I was like what the hell yes and you can see now how all the intermediate sizes sort of make sense we don't have to specify them all we just have we just have to find a few points and calculate that expression and we didn't even have to calculate it ourselves and you know what's even better is that once we find there oops what did I do here what was it 5:43 once we find the expression we can use it for other purposes as well so what other case might in what other case might this be useful so you know well at least the more design savvy of you know that a it's bad to use synthesized subscripts and superscripts and in the past font designers had to include special glyphs for those supers for those smaller characters because otherwise this happens notice that the citation needed superscript is much thinner than the rest of the text and same with the acronym another type of graphic rule is that acronyms should be smaller like all caps things should be smaller so that they're more harmonized with the rest of the text and they don't stand out too much but if we do that and the font doesn't have specially designed small caps characters then this happens where the strokes are much thinner but variable thoughts help us with that as well and what's even better is that we don't have to calculate it again we can just go here and paste the CSS we've already calculated and then we well we have to change the size here at the font size the font size the size and change this but as long as we make that's that change like we don't have to change anything else like our expression doesn't need to be calculated from scratch it just works and it already looks much better so the takeaways from this secret is that with variable fonts and making small adjustments to for to the font weight we can do a ton of things that before variable fonts required special glyphs in the font and special faces in the font and all sorts of things from the font designer whereas right now they don't have to put extra effort in designing the font and I say no extra effort because they used to design variable fonts before as well before open typed variable fonts they the font designers actually designed an entire range and then had to export it in individual weights the work for the variable font was already being done it's not extra work for the font designers to create this variation we just get to enjoy more of their work their existing work so these kinds of minor tweaks allow us allow us to equalize strokes synthesize small caps superscript subscript sat on of things and we can use linear or quadratic regression to avoid calculating the weight every time for these tweaks it's not perfect but it can help a lot and it's definitely much better than just leaving the weight to whatever it normally is so the seventh secret has to do with flexbox and more specifically responsive flexbox like this header is showing so can you imagine how to do this layout with no media queries and you might be wondering what what's what's wrong with media queries Lee I like my media queries but sometimes media queries don't really work very well because your component might be used in many different places and it's size doesn't really depend on the viewport but on whatever it's inside like if your same component might be in many different places and have many different sizes and yes this is why we need the element queries but that's a whole different story we won't get element queries anytime soon so hacks like these are kind of the best we can do right now so let's suppose we have this sort of forum post type thing or message comment type thing and let me show you what happens when I string the viewport well well or whatever it's inside in this case it's the viewport but it could be other things so notice that this is pretty horrible like it's pretty much unusable at this point so what can we do let me walk you through the HTML first there's a header element which is the gray area here and there is a a post element that actually contains the message and here the part of the CSS that are relevant to this is that the article has display flex and the post has flex one so that it stretches to accommodate any remaining space one thing we can do to help things is to add flex wrap wrap and then at least in small sizes it automatically wraps but this looks horrible we wanted this to stretch horizontally so what we can do is we can add flex to the header as well whoops and then the vertical layout works but in in fixing the vertical layout have broken the horizontal layout because now this is huge and why is it huge because the relationship between these two is basically one-to-one like it's it I'm basically saying this should stretch equivalently to fill any remaining space but I don't really want that so what I can do is I can give this a really large number so that when it's horizontal and they're sharing the same space we still get the same behavior as before but when they're vertical whoa weird things happening here but when they are vertical the head there still stretches horizontally because the default flex is 0 which means flex grow is zero which means nothing stretches so by giving it a flex of 1 we say you should stretch to cover a remaining space but because in the vertical layout there's nothing out there it stretches to cover the entire remaining space you might notice that at this point this becomes very thin but the rest of like normal CSS still works we can give this a min width of say 15 m/s and that way we can control when it actually switches to a vertical layout so now it didn't it never becomes too thin because it just switches to a vertical layout and all without any media queries so this is not actually my trick this was published with the title flex grow $9.99 hack by someone called your and Vaughn he if I'm pronouncing his name right you can follow him on Twitter over there so the 8th secret is about all the flowing grids which again is kind of cryptic until we see what exactly it's about so here we have a list of items it doesn't really matter what items they are they have classes some of them half of them have a class of cat and the other half have a class of human and also half of them are male and half of them are female and they're styled differently the cats have a different background color the humans have different emoji so let's assume that I wanted to display these items as two columns where the humans were in one column and the cats were in the other column how could I do that I could use display grid and notice that right now nothing happens because it has one column by default so I apply grid template columns and I say they should both be the same and a grib gap or say five pixels so notice that now it's they're automatically assigned to columns so I have both cats and humans in both columns so I want to specify what column each of them goes so I say humans should go to grid column 1 and then cat should go to grid call him too but look at this what happened here so the reason this happened is that grids are laid out in rows by default so it laid out the cats where it should and then the humans when underneath however we can change the we can change this layout there is a grid auto flow property where we can specify column and this fixes that problem so now they're properly sorted just like I wanted and if I wanted the humans to be in the second column and the cats to be on the first column that works too and it's it's completely independent of the source let's say I wanted to split them by gender instead so I would say male in the second column and female in the first column and that works too so yeah grid out the flow is a pretty cool property and it doesn't just do this another example you can see another example here with where I have a list of 10 cats I'm gonna refresh here because my scrolling is broken for some reason nope still broken okay I'm gonna use the scroll bars so I have 10 cats here throw my free stock for a website called pixels and I want to display them in a grid well right now I haven't specified a template so nothing happens I can say grid template columns and I use the repeat function to avoid saying 207 times or four times so I want them to be in four columns and four rows of 200 each and right now it looks really weird because the images are still their full size so I can say with 100% and height 100% and then okay this no hmm oh right typo so notice that I just committed one of the ten horrible sins of web design I stretched images but fear not because object fit comes to the rescue and it's supported everywhere oh noes so this looks kind of like a boring grid so what I wanted to do is I want to enlarge some of the cards let's say these but I might decide otherwise when I see it and say they spawned two columns all right I need quotes yes so they span two columns and two rows so notice that now our grid looks kind of weird it there's no cuts here so how can I fix that good Auto flow to the rescue again so I'm gonna use the default algorithm row but I can also add a dense keyword after it and now things can be shifted up to cover any holes in the grid just for the lulz if I said column this is what the result is because they're laid out in columns now I think I prefer row so and this is the browser support for CSS grid in case you're not aware of it it's basically 87 percent of users even edge supports it so if you were if you were wondering about that don't CSS grids available everywhere so the takeaways from the secret is the grid Auto flow defines the direction that auto automatic grids are laid out and I say Auto grids because you could also like explicit lycée where everything goes and then grid ought to flow has no effect but in most cases you don't want to do that also the dense keywords prevents holes in the grid by shifting things up as necessary and object fit cover prevents image distortion also object fit contain and a bunch of other values but cover makes the image as big as possible and prevents Distortion so the ninth secret is about pie charts I'm sure you've seen linear gradients in CSS right and you might have seen radial gradients as well so soon we're getting a new type of gradient called conic gradient where the colors go around the Ray that goes around the midpoint and the colors are added like the normal gradient and there is also a Frome arguments that the that rotates the gradient so I like this it looks kind of like a weird shadow and here I have applied an element a development that I've called PI and I've given it a linear gradient which I'm gonna convert to a conic gradient does that remind you of anything a hue wheel on color pickers now we could make that with CSS but we can make more cool things so if I remove these colors and then increase this let's say I make it 40% and then I decrease this at some point they meet and then I get a hard line which is a pie chart and actually notice that this happens regardless of what as long as the second numbers big is smaller than the first it doesn't matter what it is it could be 0 so I tend to use 0 they're both as a convention to indicate what should be happening and also so that it works with whatever value so now I basically have a pie chart that works with whatever number I put here and I could also specify a value CSS variable that holds the 30% and here I could say var value and then I could also specify this in the style element or via JavaScript this is why CSS variables are so much superior over sass variables try going doing that with sass so I can change it in the inline style again all via JavaScript and my pie my pie chart just adjusts as necessary it's like almost like a component and you know what's even cooler okay I'm gonna take this out of the inline style now so that we all we have all our code in one place but what's even cooler is that the second parameter of var is a default value and by that by doing that I could have multiple slices of the pie let's say I wanted to add the potential for a second color so I could do this let's give it a fixed value now and let's say black here we have a full German flag now I don't know why I chose a German flag so notice that now it works just fine and actually in your browsers I can do this it's a new syntax it's currently only supported by Chrome so you should have the two consecutive color stops but this was implemented at the same time as conic gradients so if browser supports Coney gradients they probably support this syntax with the two positions as well so now I can have a second variable here with a default value of zero so that when this variable is not set I just don't get that color but I could I could set that color to something and then I get it just fine notice that the numbers I specify are not are not in addition they overlap like sixty percent is the total angle of the yellow not the difference it has from the first from the red one so that way I could a tonne of colors let's say three and four and I could have like lime and let's say aqua here and they only appear if I actually set values for them so I could do value three let's say 80% and basically that way I can have a pie chart component that shows whatever percentages I want with however many slices I want just with a few lines of CSS yeah I like pie charts too thank you so another cool thing is let's say I have just one slice for simplicity here but everything applies to multiple multiple slices as well notice that as I'm changing this it sort of looks like it's animating which kind of begs the question would it be cool if I could actually animate this that way I could make like a pie chart progress indicator so I added my keyframes roll and I call it progress I'm terrible at picking names for keyframes I hate that we have to pick a name for everything for every animation and then let's say to value 100% and then I go here I set this to zero and I try to add an animation that sets for progress one second infinite but look at what happens it just jumps from zero to a hundred and the reason for this is that by default CSS variables are not animatable because the browser pretends that it doesn't know are animate them even though it's obviously percentage the browser's like yeah I don't know what you've typed there who knows you could have typed thread instead of like 100 percent I don't know what you're doing I'll just give up so how can we fix that the good news is there is some JavaScript we could write to fix that to register this property and we can say this property is a percentage and we can also say whether it inherits and what's its initial value is this is part of a set of new specs called Houdini which is which is going to give developers that the power that before was only for browser engineers and if I run this snippet and I go back now it works which i think is really cool I'm gonna make it even cooler whoo so isn't this awesome no kromm is supposed to ship it really soon like we've actually cleared it in the working group even though even though the spec itself is not ready we've said that okay this this part of the spec can be can be shipped like we we had a meeting we approved it I don't know why it hasn't shipped yet like I've talked to the chrome engineer that implemented it and he told me that it was meant to ship in April so I'm not sure what it's holding it up but I expected to ship in chrome very soon and it says here that it's in development in Safari as well and WebKit so hopefully in a few months that situation will be very different and these days browsers ought to update so we don't have to wait years to get it but this is all this this situation is also pretty bad even in chrome this is behind the flag and Chrome the chrome people are those pushing this so yeah I guess there are issues to be ironed out here but I'm very excited about both of these I can't wait until they actually make their way in browsers properly and we can play with them in real websites so some takeaways from this conic gradients are coming finally I proposed them five years ago and have been like putting so much work into them I'm so glad that it's finally happening also two colors top positions for bands of colors and gradients and not just corny gradients but also all gradients that's coming to a color stop position of zero creates hard lines regardless of the previous position and CSS don't register property will allow us to animate custom properties opening up a lot of cool use cases so the last the last secret and I'm horribly over time so the last secret is called descendant grid items primarily because I could not think of a better name and this is why it's not really styled because I it's really hard to visualize this concept but let me show you what it's about this is a very common marker for like login forms it has two labels username password by putting the input inside the label we avoid having to give it an ID which is always nice because I hate specifying IDs and let's say we wanted to use grid layout to display it as a grid so we apply display grid by default it takes it puts everything in the same column which is why they're now under each other but notice there's no grid so we say grid template columns and we want the first column to be author because that's the side we wanted to adapt to whatever the label actually is like username or password we want it to be as big as that and the second one is basically whatever remaining space exists but notice that we got a completely different result that what we were hoping for but actually the browser just did what we told it to do before we apply the grid on the form the form has two children it put these two children in two columns which means the label the labels are next to each other so how can we fix that until recently we couldn't fix that but there is a new display property called display contents and called display contents that basically tells the browser to not to ignore this element when it comes to applying CSS like if so now it ignores the labels when applying grid layout and also notice that the labels don't have any styling either so they're basically completely transparent as far as CSS is concerned it's like it's as if the layout is as if the label element was not there but we still have our nice semantic HTML our nice accessible labels but they don't get in the way of our layout and now we can have you name and password in the in the two inputs in grid cells just like we wanted and if we make this bigger the grid just adapts and let's give it a nice gap as well because I don't like this yep another use case is when you have a website layout and you want to use proper markup and like use a header element for the header but you actually want elements inside the header to to be on the main grid of the page as as you can see here like we would want these elements inside the header to participate in the overall page grid and display contents doesn't have amazing browser support but it's very decent and it's constantly growing like as you can see more than one in two users has it basically two out of three users have it so the takeaways from the last secret is that display contents allows us to make descendants flex or grid children even though they're descendants and not actually children and also as I've mentioned before text nodes are flex and grid children as well so this is basically what I've had for today but before I thank you two things since we don't have time for questions because I got home I went horribly over time I'm gonna be in the speaker area Bruce mentioned where that is I don't remember it but hopefully I'll find it I'll be in the speaker area you can come and ask me questions seriously don't be shy I like getting questions I like hearing what you thought and also I would love to hear like which secrets did you like secrets did you not like which girls you already know about because that will help me like adapt future talks as well so like if you if you want to tell me like which ones you knew and watch which ones you didn't know I would love to hear that feedback so thank you very much I hope you enjoyed this [Applause] you

Channel: You Gotta Love Frontend

Views: 6,395

Rating: 4.9810429 out of 5

Keywords: YGLF

Id: YsX4uFgyvpk

Length: 74min 8sec (4448 seconds)

Published: Thu Jun 28 2018

Reddit Comments

[u/alkampfer]

The problem with real world application of this cool method, is that blend mode doesn't work at all in Edge and IE. :(

[u/joeKingtheThird]

Some of the markup in the svg is deceptive. I don't know what browser tool she is using but in firefox and chrome I had to encode some of the characters -

< > { } #

%3C %3E %7B %7D %23