 Thank you for coming. I'm Jean-Yves Perrier. I'm working for Mozia for 12 years, but a lot of time as a volunteer and eight years as an employee. I'm part of the developer outreach organization and my role for a very long time was to make documentation about CSS, about other things and to make the release notes which basically meant going through 1,000 email a day for everything what's happening inside bug email to understand what the developer was doing. Later, it's a bit different nowadays. I'm working mostly on the tech speaker program and I'm helping organizing events and other things like this, but I still like to know what is going on around the CSS, the HTML and how the browser is working. So today I want to speak a little bit about something we don't speak much anymore, CSS, which is one of the basic things that the web was doing and is still doing. So CSS is all about boxes. The goal and the main goal of CSS is to take boxes of different shapes, to change a little bit their shapes, to put rounded corners, changing the color and to put them somewhere on your screen or on print and other devices. That's the idea of the layout and in fact the way we are doing this is changing and we forget it because we speak about JavaScript, we speak about WebAssembly and how to make a nice and really fancy web application but we forget that we still have to put boxes on the screen and to make them interact together and the way we are doing this is a bit different in the second half of the second decade of the century. Then it was in the 90s, in the end of the 90s when CSS was created. And the first thing that has changed lately is we have new way of describing where we put the boxes. So one of them is Flexbox. So Flexbox has been invented already a lot of years ago but now they start to be over the last three or four years. It's something that everybody is using and can use. It has been designed to do a set of boxes of different sizes and to tell them how to align them, what happened if you add an extra box, what happened if you don't have enough space and how to go on the line and so on. So this model is very useful when you design web application and especially menus. So this is the first thing that we have added that has been added to CSS over maybe 10, 15 years that make the way we lay out boxes different. And in fact, even if we can do this for quite a few years, we were still missing quite a few tools to make this easy for the web developer. So what exists nowadays, and I take the example here on the DevTool of Firefox, is in fact when you look into the HTML or into the CSS, you have small hints that tell you, oh, this will be a Flexbox. And the way we want to look and debug your Flexbox is to clicking and you want to see the Flexbox in your tool. And this is pretty new. This is in the last release of Firefox. You absolutely can see for each box is where it is, you can define the color of the box in the layout so that you can understand why your beautiful layout on the paper is looking absolutely ugly on screen and you can debug it. So that's one thing that was absolutely necessary, not only to have the flexible box model, but also to have way to see it on screen. So if you are more interesting about the flexible box layout, we have, sorry, all documentation on MDN. It has been rewritten lately, so it's really up to date with all the small changes. And also we have all information about the Flexbox inspector that has been added. The second thing that has changed over the last few years, and this one has mostly appeared in 2017, so two years ago, is now to have agreed. So everybody was saying at that time two years ago, oh, we are back to the table world where everybody was using tables in HTML to make their layout. Yes, on one side, because yes, having a table layout is sometimes useful, and no on the other side, because HTML is for semantic. And now we can do table layout, but without the semantic inside the HTML of a table, because it's not a table, it's just a layout. So the grid layout, in fact, lets you define grids, and you say different regions on the grid, and what happened, and what has to be put there. Coupled with responsive web design, you can have really fancy or really basic, in fact, in this case, layouts being done very easily just by saying this spud. Three columns, this one, three columns and two rows and so on. All this one we need as many rows as possible to fit the content and so on, but when we change the screen size, it automatically attributes different elements of the grid. And here, exactly the same as the Flexbox, and this was done in fact before, we need a way to see the grid. So from the HTML, we need to know that the main is a grid so that we can debug it, or from the code where we see the display grid, and we have a small element to click. And this is what we have to debug and to know again why our marvelous design on the paper is still looking very bad. So here we see the grid, we see the numbers in one direction, this is from a template, so there are non-named lines, and on the other side it goes with negative in the other direction, and you can understand why something you believe will be here while in fact displaying in this part. So this is another tool that you needed to use grids in an efficient way. So what happened to the float? Because everybody was doing design with floats before, so all I learned about floats is useless now, all the small things to spend days to be sure that everything was pixel perfect is useless. No. In fact, we still can and we still need to use floats, but this time for something where you need floats. So you still have sometimes text with image on the side, the position of the image depends on what is the image, so if it is bigger it will be maybe more centered or larger and there will be less text around it. So you still need your floats but to do what was done before in magazine in newspaper it is to have text going around an image. Like this. This is an example where using floats in a modern layout is absolutely gorgeous, very nice. You float the elements and you can in fact exactly the same define how you float an element inside depth tools. So here with clip pass and ship outside we can define shapes that can be circles, ellipses, rectangle or here in the example a polygon and you see in your debugger that you have the different points of the polygon and you can move them around and define where the text will appear. And that way you don't have to compute with analytical geometry exactly where will be the point or just by try and error. So that's very convenient and you have the text. And also of course if you have a browser that doesn't support shapes, so the big deal you will have a square will be less beautiful but still usable. So the depth tools have way to define these shapes. So here we have the clip path where you can define which area of the image is visible to define where is the center and in this case here you define what is the actual shape that the text will take around it. Here again a few links that you can use to have more information about this. So until now we have mostly reinvented something that were already existing, grids are the old table, flexbox are a little bit new but not really completely different shapes are modifying the way we do floats but basically it's only classic CSS. And in fact there is a lot of other classic CSS it is being reinvented lately. The first thing that is reinventing are fonts. So we all know fonts from the HTML font elements that we are burning when we see it in code nowadays but just to the font properties in CSS. We don't know the font, we display a font with a specific size and if we want a different, slightly different font we download a second font and display it. So last year variable font has been added to most browsers and it's a way to have personalized fonts that you don't load but without the burden to download them six, seven, eight times depending on the amount of variance you need. So variable fonts are really a collection of fonts and you can modify them in CSS without redundant exam by different attributes that are called axis. So you can modify their weight, their width, if they are in italic or slanted, their optical size. For a lot of these things there is a high level properties but we also have a low level properties. And in fact here I have an example with two different weights but it's the same font and this font is downloaded only once so you increase performance. So fonts are in fact made completely different right now. And again in order to debug this you need the corresponding DevTools or here is a font inspector that allows you to modify them and to see the difference in real time. And what is really interesting is this is also working for non-variable fonts for system fonts or for just regular static fonts that you download. You will have less choices but you still can put them in italic and so on. So you can play with font and really adapt your font now inside your design. Again more information about fonts, it's a domain that is pretty new. So even there are a few, most browser already implement them but there are a lot of things that may come in the future there. It depends on the design of the developer and what can be done. So that's something that is only at the start but the time when we have to download a lot of fonts to do a nice website is soon over or more and more over. So all this was a fancy stuff. There are even more boring stuff evolving, gradients. So gradients, some people are using it, some people say you don't have to use it and some people say you must use them because they are so exciting. I don't know if you know the last category, I'm torn between the different category but clearly there are interesting things going on with CSS and that can be done with CSS. But they also have CSS gradients but they also have drawbacks. So these are examples of gradients taken from MDN, that's why they are so bright. And next to each of them there is a small code explained but I wanted to remind all of you that gradients is not just a boring gradient in the background. It can be something like sharp colors like this and sharp columns where with a precise limit it can be put over an image to give an effect. It can go in diagonals, it can be repeated or not and there can have a lot of effects. So that's something to keep in mind when you do layouts, it is a tool that you can use. And the syntax of gradients has evolved. So two or three years ago there was an addition of syntax to do more, sorry, color hints. And in fact lately and this landed last Tuesday in the version of last Tuesday people noticed that in fact there is a lot of redundancy, a lot of things to type. So for example, when you have several color hints, several stop, you can put it in one thing. So it doesn't change very much the life but gradients are still something that you can use and you should consider using them sometimes. What is also interesting with gradients, this is not especially new but you can put several gradients on the same box, on the same image. So here these kind of effects are done by having three gradients in different direction, with of course some transparency or else you have only one gradient visible. This leads to these kind of things that are quite interesting, that are quite impressive. I promise I will never put this one on the website because it's a bit too shiny but it's interesting that it can lead to two effects that can be useful in some cases. It's gradients so there is still a warning that it's computationally heavy. It's getting better but you have to pay attention when you have gradients, sometimes an image is much more efficient because you just show the image and it doesn't have to compute. Especially on a mobile website or the mobile version of a website, you don't want to drain the battery to have shiny gradients and an image can be more efficient. So you have to test, especially if you are using complex gradients, you have to check what impact it has on your performance. So I'm almost at the end, so it's 23 years now that CSS has been invented for the first time and modern layout has appeared. In fact, grid and flexible box are layouts that should have been there in the 90s but weren't. For a lot of reasons and the first one was that browser and computer were probably not powerful enough to have this implemented in a generic way in a browser. Traditional layouts are still here, they are now revisited with shapes for example for floats. So classical way of doing CSS leads to new effects. We have new techniques like variable fonts and we have old techniques revisited like gradients. And all these now have a set of deaf tools that can help the developer debugging them and make them really work in the browser. So the question and I will not answer this one is are we at the time where CSS is at maturity? And I just want to finish by just a few sentence, a few elements of what's coming in the future. So this is a trend that is still continuing nowadays. So we still have a few layers like multiple columns that can be used in some cases like indexes or when you shuffle cards of the screen. There are still some problems there and we need better tools for this. And this is on the way, maybe this year, maybe next year we don't know yet. But it's interesting also the first letter of a paragraph is something that we would like to have more control so that you know better and you can have better design. There are a lot of other things going around CSS and some are much more fancy with this but I will see, we will all see what will come this year. But one thing that I'm really excited to see is something called subgrids that will be grids inside grids with connection and this is something missing and we expect this this year. So thank you for coming and thank you. Thank you so much. If there are questions I can try to, can you help me pass the mic please? Hi, my question is do you know if there are any plans to release CSS gradients for text and also for borders? There are workarounds for it and I'm using the workarounds right now but yeah, that's not YouTube proof I think. So for text? Yeah. What do you mean by text? So do you mean the alignments of CSS grids used inside blocks and regular blocks? That different color is a gradient over a complete string. Okay, yes. I've not seen any bug with this and work going on on this so I guess that is not in the current plan. That doesn't mean that it shouldn't be the case but it is interesting to check if there is a bug saying and asking for this and if it can go. But yes, having a background image on several agreed elements and not on a box is something that is currently not possible on grid. I think it's not even in the spec right now. Okay, but you don't know if there are any plans to. If it is not in the spec it will not be in the browser. It has to be in the spec first. Okay. But there are no plans to put it in the spec. As far as I know I have not seen any plan around this. I have not checked what the W3C has around the spec. I know that this has been seen as something missing but as far as I know at least for this year nothing will come in a browser around this. Alright, thank you. Yeah, but variable fonts. So two questions actually. One is just to check that what you mean by variable fonts is that right as of now if I want to use bold italics and regular let's say from Google fonts I have to download like those three font faces right. And this would solve that right? Yes. You just don't want one variant and then you customize as you will. The font has to be designed to looks good with a different axis. That was my next question actually. How do you do the fonts need to be authored in a special way or have a special format? Yes, it's a special format that describes not only the glyphs for the regular font but also how it should behave when the axis are modified. I have not looked in the detail of the format but it's actually a different format. Okay, so it means that if I tomorrow I want to use that or like six months from now I have to check two things. One is browser support and also that the font I'm using is also supporting this. Okay, thanks a lot. Okay, so since the beginning of CSS many features has been added to the we could call it markup language but the syntax itself didn't change much. In fact, most people require preprocess before CSS like SAS or less or whatever. Are there any plans to improve the syntax of the CSS? There are discussions, regular discussions about this. Small improvements like some features that can be in preprocess or nowadays could be added. We have two examples. There is no an environment variable that allows to connect. So this has been added by Apple recently and by Firefox in the last three days. So these kind of things are discussed and can be added. Having a completely revamped CSS with a different syntax, I don't believe it in the next few years. Maybe a new language at some point but there are so many things depending on the current syntax. Some features of SAS may go, so the question was why about not just supporting SAS or why about supporting SAS. So some features of SAS can go in but surely not so who loves SAS. Kind of follow up answer and question is CSS variables and you are old. You say it, you are always old as me at least. And more phosdems than me. Well, compared to the age of phosdems CSS variables are new. And I think there are also something that addresses a lot of the preprocessor needs that people currently have where you want to centrally define the color and use it in a couple of places and sizes that you want to use in a couple of places. And that can now be all kind of put into a CSS variable and used so there is actually no preprocessing necessary for that. So CSS variable was meant to address this. CSS variable has the problem is the fallback, if you are using CSS variables, the fallback is not very good. So basically you have to write your website twice with CSS variable and once without. And this really is a problem for adoption. And I hope that this problem will go away very soon with old browsers supporting it and old browser no more needed to be supported by websites. Okay, okay. Something wrong with it or? Just for the guy who was asking about the gradients for the text there is actually a workaround which is that you can clip the background using background clip in CSS to the text. So the background is like only for the text and then set the text to the transparent color which makes the text be colored in the gradient. That's all. Thank you. He was like, give me the mic. I was like, why? We still have time. So we do have time for one more question if you do have one. I'm sorry. There was an extension to CSS called CSS regions which allows to connect boxes together and have text flow from one box into the next, making CSS actually markup program which reaches the power of desktop publishing applications. So very powerful layouts. Is there still progress being made on this? So yes. Yes, there was CSS region that has been proposed by Adobe if I remember well a few years ago. I have not seen progress there and the reason why progress told there is because to not implemented but to render a page using CSS region you had to read to calculate twice the pages. So the first time to have the basic layouts and then you have to recalculated a second time which was making everything very slow and on the web. So this is why there was no adoption, a lot of adoption around this back. There is no adoption right now but nowadays CSS is quicker and is more performance. So that may, this problem may go away or a for a current can be found around it putting CSS region again as something possible. But no promise. We do have it on tape now. One last short quick one. Thank you so much. Thank you.