GitLab Frontend Skillsharing, 7 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: What's New in CSS - Hover Conf Presentation Recap

Description

A short recap of Adam Argyle's presentation on Hover Conf 2021!

Original Slides from Adam Argyle: https://2021-hover-conf-new-in-css.netlify.app
Expanded Notes and More: https://gitlab.com/dfosco/hover-conf-2021

A

Hello, everyone- this is daniel foshko, I'm designer on the release group on gitlab. This is a presentation recap of hoverconf uh conference all about css I attended a few weeks ago.

A

This is a presentation recap for what's new in css, adam argyle's presentation. Adam is a developer advocate at google, who is very involved with css coming the css community and standards committees. In this presentation he goes over 31 new css features. There are different stages of implementation. Some of them are just proposals. Others can be used behind flags on the browsers and others. You can start experimenting right away using fallbacks.

A

These are all the features he goes through. Some high res some other risks some low risk. You can try today, there's too many, so I won't go over all of them, but you can check all of his presentation that has links to all the demos proposals and articles on this url. uh The description for this video will also have all the links, including including more extensive notes for other talks. I watched at hoverconf and again these features are in different stages of maturity. Some of them do not exist.

A

Are just proposals- some are very experimental, so make sure you read more before you try any of them out. So, let's get started with conditional values.

A

Conditional variable values are a super interesting feature and they essentially present a simpler media query with an inline conditional, it's pretty much a javascript ternary, but in css. So here you have a flex direction statement. If the viewport width is more than 500 pixels, then it will resolve to row. Otherwise it will resolve to column.

A

You can do also more complex statements, so in this case you have a css variable size with value small and then font size. If the variable size is small, then it resolved to m if it's medium 3m, if it's large 5m- and this is super cool because whichever value this variable matches will be applied on the style and the others will be ignored.

A

But what happens if none of the values apply right here, you have largest what would happen here. That's why switch is another feature, that's coming to css and if you're thinking switch from javascript you're exactly right. Essentially, this is the kind of switch statement you have in javascript, but natively in css.

A

So here you have a full class with a background property and a switch where, if the width of the element where the class is applied is more than 200 pixels, it resolves red if it's more than 400 resolves to blue or otherwise there is the white default that is applied next up, houdini, layout and houdini is is the kind of thing that I've been hearing about a lot and it's super out there and I've never really truly grasped until this talk, but essentially today you can use javascript to build more advanced, layouts or really anything with your websites.

A

But that means including increasing your bundle, size and potentially blocking other important code from running in your application.

A

Houdini allows you to create your own layout logic and functions that run directly on the browser engine, freeing space on the main javascript thread. So, let's see an example here we have houdini masonry right, and this is essentially a value for the display property. Just like you have display flex or display block or display grid, but display masonry, and this is what it looks like it's running, on chrome, canary with a flag enabled.

A

So here you can add more columns, and this is you can see. This is the class classic pinterest grid that is notoriously difficult to build only with css.

A

So you can take different css variables as internal arguments for its functions, so you can see here the padding and the columns and another example.

A

Just one moment there you go so houdini svg path, that is kind of bonkers, and this is essentially something more closely resembling adobe illustrator, but in your browser itself. So this is what it looks like you have an svg path and then the layout svg path property actually renders the elements along the path. So, if you add more, they will be all along the path you can.

A

You have flex like flexbox, like attributes that you can change uh for the whole container or the elements themselves, but the really cool thing is that you can change the actual um svg path and all the elements will follow them. um The the gif is scratching a little bit, so it may be hard to see, but I think you can you can get the idea from from this.

A

Let's get away from these gifts because they are killing my presentation um yeah next up, houdini paint, which is another type of houdini property and essentially houdini paint lets you create pink paint, functions with very custom properties and very custom functionality.

A

So here you can pass different kinds of properties to this powdered gradient paint function, um and- and this is a kind of example similar to that one right. So this is that static, gradient paint function, um you can change properties, change the color and you see it renders directly on the browser something very custom. um You have different different browser supports here, so you see, chrome 65 already supports it.

A

Another example: houdini paint curved line, really cool these examples. You can find in these two urls, where you have more information as well on how houdini works and how to test these things.

A

Next, we have scope so the way we scope in css today right, it's very similar to bam and other stuff, like css modules, or you know um emotion. These are things that we came up with to be able to scope. Css, a native scope is coming to css and essentially the way it works.

A

Is you have an add scope statement where you define the class to which all of this will be scoped to um it supports a lot of stuff, so um adam doesn't go into a lot of detail, but essentially you can also use it to create teams for design systems. So you have light team scope and dart team scope, and the good thing about this is that it's much harder for specificity and css from outside of the scope to leak in here next container, queries, which is a huge thing, that's coming to css.

A

This gif shows an example um and you can see the screen is resizing and these elements they change layout at different rates right. That's because they are not responding to a media query, but they are responding to container queries that change the layout based on the size of the containers themselves, not the full page. So this is how it works more or less.

A

You apply the contain class to define an element as a parent container and which properties you should respond to and then on the child elements you declare add container, then the property and how it should respond. So this looks like a media query essentially, but the difference is that it applies to the size of the element itself, not of the whole screen.

A

This would be super useful for design systems, because now, with container queries, you can have elements, components that respond fully to their own context, they're, not depending on the context of the page, but rather you can have a table component or a modal component that really changes based on the space that is available to them, not to the whole page.

A

So there's a lot more applications. This would be super interesting next nesting, so we spent years using sas. Essentially because of this feature and much more sas is great. But yes, it's just like you expect to work, and um I think css owes a lot to sas uh for being at the forefront for stuff like this cascade layers. uh This is something else that I hadn't heard before. Until this presentation is so cool, so essentially cascade layers are imagine, you have a reset right, reset.css.css.

A

The way you would import this in your project today would be either through css imports, which are not the best um or, if you're, using vue.js, you know, react or any other sort of templating engine. You use that to import the css file.

A

Css layers, allow you to create a layer for your reset and then import the layer directly on the css, also allowing you to add more things to that layer after it was declared- and you know, import layers one after the other. So here I am importing this file as a layer in this layer default, and then I'm adding also this file on this layer default and you can do all sorts of of importings and then the interesting thing about this um again, not to go too much in details.

A

But as far as I understood layers, um they do not follow the css specificity. So what it means is whatever is declared last here has a preference regardless of specificity. So if you're thinking of css specificity, it's like each layer has its own contained uh layer of specificity where it applies in there, but between layers, the ordering is what matters so really cool and really useful for future large css applications, yeah and here's another another way. You can declare them as well foldables.

A

So imagine you have this in your hands right. How do you design a website for this? Well, you design it with foldables, which is a new css feature that introduces new variables that you can use for folded screens. So let me find here.

A

Yeah, so here you have gap, environment, fold width, so one of the things foldables give you gives. You is different environment variables that give you the width of the fold, the size of the food, the size of the depth and so on, and so on.

A

So here, for example, you have display grid and the gap right is the size of the the the size of the middle of the fold um and then grit and plate volumes, one to the left and the other to the rest. So imagine having applications that people working on the field have foldable tablets and you can have the same web app that if they are using a foldable, a foldable device, it looks perfectly fine for that device. But then, if they're using a desktop or normal mobile device, it looks differently.

A

But it's the same application really cool. And here another example. You can set an element to span a single fold right or expand both folds um so really powerful, stuff, color level. Four- and this this I had heard of before- and it's so exciting. So you know when, when you open a mac computer- and you have this beautiful background image and then when you code a website, everything looks like this there's a reason for that.

A

This is an exaggeration, of course, but essentially css is not prepared to display all the colors that uh modern this place can show you right. So this is srgb and then uh color level. Four introduces lch, which has a much more broader color range. Here's an example. Essentially srgb only goes up to here. So you can see.

A

This is another new new color mode. That is not lch, but you can see there's much more vibrant colors available here, they're just not available in css. Today you cannot use the scholar websites with the current color modes we have um so lch is one of them.

A

Lab is another, and- and the interesting thing is that these color modes are made to match more closely the way the human eye works uh so really interesting, stuff and then coming even after that there's color level, five that introduces color mixing right, and this is whoa mind blowing, because now you actually mix colors the way real life paint works. So you can mix red and white and it will actually render a pink color. uh More than that, you can mix colors in different rates.

A

Right so imagine we have a brand color and then for one color. I want to mix my brand color with black to a 25 degree. So what that means is after adding black 25 of my color will be left, so it would be pretty dark.

A

But then, if I want a lighter one, I can leave 40 of my color after black comes in, and on top of that uh we have color contrast with a scent which essentially says here's this color, this background versus black and white, so, depending on the value of bg, choose either black and white.

A

The one has the best contrast and what that means is it'll, actually change colors, uh depending on the background dynamically, so there's so many things we do today to to ensure color contrast that will simply won't have to do because this was solved for us.

A

Moving on data saver is a nice little feature that essentially gives us ways to choose different different classes and different files based on whatever preference, the user browser has for data, and this in theory, could get the preference directly from the mobile device doesn't necessarily have to be something set in the mobile browser, so really interesting things. So you can have a lighter video for your users or, if they're on desktop. If they have no preference, then you can load huge funds um because you know you're, assuming they have a fast connection, all right.

A

That's what I have for today.

A

Again all the links for this presentation and for the notes will be available on the description and as soon as this video, the full presentation from adam is available online I'll share share it as well. Thanks again.