Web Design Engineering With the New CSS | Matthias Ott | CSS Day 2024

so our first speaker is Matias U uh I've I've known for a while now we've met at uh Indie web camps we're both big fans of the the Indie web so we were internet friends first you know knowing each other's blogs his blog is mati.com and you should definitely check it out um you should also uh subscribe to his newsletter uh the own your web newsletter it's it's really really good so if you're into the whole Indie web thing as you should be um matius is is is the man um but he also um he teaches he teaches interface prototyping um at the matus University of Fine Arts and designs and you know does workshops and all that stuff about about modern web design and that's kind of what he's going to be talking about today so so here's the thing at CSS day particularly the past few years I think you'll agree we've heard about just amazing new capabilities that have landed in the browsers I mean mind stuff but it always feels to me like there's maybe a bit of a gap between the stuff Landing in the browsers and us actually using it in our day-to-day projects in production always feels like there's a bit of inertia and we're still sticking to the old ways of doing things and it would be good to learn how to practically apply all this amazing stuff we've got in browsers now well you're about to learn how to do that you're about to learn that from Matias a and I want you to give him a great big welcome mattius ladies and gentlemen thank you so thank you very much Jeremy for the kind introduction um good morning CSS day it's amazing to be here honestly um being in Amsterdam again I just walked around the city yesterday and the vibe of the city is just incredible but the same goes for CSS day so I hope you're all looking forward to two days of fantastic talks great inspirational conversations with everyone but also making a lot of new friends because this is what conferences ultimately also are for right so remember the Pac-Man rule um my name is Matias UT I'm a user experience designer and web design engineer as Jeremy mentioned I also run workshops I've been working on the web for about 18 years now as an independent designer this is my maedon handle Matias madon Doo I'm also on all other networks so you can pick your Silo and this is My URL of my personal website is and as Jeremy mentioned I am quite passionate about personal websites and this is why I created a newsletter about it it's yeah coming out every other week more or less and I'll send out an issue about various topics um on personal sites only your web presence just like yeah everything around this topic so feel free to sign up if you're interested now we already did this hands up if you were here last year for example um I was actually last year um at CSS day as well but in case you didn't see me around it's because I was actually sitting in my little office in the attic and I attended cssd remotely so it looked more or less like this um here you can see I watched all the amazing talks like this very interesting one by Hayden Pickering but also all the other Talks by Miriam Stephanie Yuna hidden Manuel so many others on YouTube and I highly recommend this so get a streaming pass or YouTube membership for the conferences you enjoy and like to support them if you can't attend in person and just like probably most of you and like Jeremy mentioned I was just blown away by how much is happening in CSS these days it's overwhelming to be honest but it's also really exciting to be writing CSS today because CSS is definitely not the same anymore but on the other hand this isn't big news right just like the web CSS has always been changing it has come a long way since this man sir Tim burner Lee invented the web almost 35 years ago and back then CSS hadn't even been invented yet so all people could use to style their web page PES were few presentational tags like font small or big or presentational attributes like size or color inside the HTML and there was no separations of concerns yet no inheritance and also no way to use the power of the unavoidable Cascade and thanks to Zack letherman for providing this code snippet um in 1994 this all changed because CSS was born and the CSS will writing 10 years later was very different from the tcss we were writing in 2014 and fast forward another 10 years and CSS we are writing today is so powerful but also far more complex than ever before however when I sat there last year in front of my screen in my little office I felt like this time something was really different this time many of the changes coming to CSS just seemed so fundamental on so many levels that it almost felt like a singularity like there is now the CSS before and the CSS after the early 2020s the new CSS because we can now do things with CSS that were thinkable just a few years ago just I mean you can now select the parent of an element with hair you can Style Elements based on dimensions of its container thanks to container queries and no it doesn't create endless Loops I'm told and each of those features is already an incredible and long awaited addition to CSS and together with all the amazing other features we can now create flexible and robust components and layouts like never before and there is so much more as you will hear throughout this whole conference um the very foundations of how we understand and write CSS have changed radically but not only that CSS is also now the most powerful design tool for the web what do I what do I mean by that yeah you can clap if you want to um it wasn't me though um for many many years creating high quality websites largely meant that designers used visual design tools to create static images static pictures of websites and then handed them over to the developers and the developers often had to reply with things like yeah I'm really sorry but this stuff you designed it doesn't work in CSS because back then creating killer websites really meant understanding and literally hacking your way around the limitations and quirks of CSS so the platform was the limiting factor and this is now changed to the opposite CSS has become so powerful that the tools are now the limiting factor the design tools and not the first one to notice this both Miriam and vasilis over there right posted blog posts about this exact problem just a few days apart from each other back in 2022 because also because of the interop initiative browsers are implementing new features so quickly these days that it is extremely hard for design tools to keep up and although design tools like figma Adobe XD and sketch already have much smarter layout algorithms as you might know like Auto layout in figma they are still using very different mental models for design so the way our design tools work has very little to do with how CSS works and this is a real problem because it widens the gap between what designers design and what could actually be possible to create with CSS so on one hand we could be creating much more capable and resilient and flexible and beautiful websites but on the other hand this also means that we create often sub optimal experiences for all the people out there who rightfully expect the website to be a successful stressfree accessible and also enjoyable experience and at the same time I don't know if you've noticed this sometimes it feels like many teams are still effectively closing their eyes a bit to the reality of what the web looks like today some of you might know this picture it was taken by Brad Frost at a conference in 2012 and back then it was a revelation to see how device fragmentation was already happening it is a picture that many of you might have in their heads when they think of responsive design but that picture was taken 12 years ago so how about today this is a visualization I created in 2018 based on an earlier visualization by Frank chimo in a talk he did and what you see here is a representation of all the screen sizes I could find back then on various websites at listed device specifications and fragmentation of viewports was already obvious back then but recently I took the data that Andy Bell and his colleagues at set studio collected for their brilliant site viewports FYI and I updated my own visualization with the more than 2003 00 viewport sizes in their data set and this is the result we really have to understand that the web is vast and edgeless and unpredictable and uncontrollable we have to finally Embrace a way of thinking about designing and building for the web that allows us to cope with this uncertainty now over the years I've been working with many teams at Design Studios and agencies I ran workshops with hundreds of designers also for Adobe on designing and prototyping with Adobe XD and for from what I am seeing in the industry many teams although they are now Building Systems of components are still starting their design Journey here you might know this so in a way I too am Ethan marot a web designer in my 40s wondering why the industry is designing for One browser and for a handful of screen resolutions and I hate to say it in a way but we are still painting pretty pictures or websites for the most part we are painting static pictures or websites by the way is Hayden Pickering here no I don't think so because I have a t-shirt suggestion for web briefs maybe he you can call me Hayden if you're watching the stream so yes designers are still painting pretty pictures of websites and while we might have gotten away with this for now it is becoming a bigger and bigger problem the more CSS and the other platform features are evolving because to properly designed for a medium you need to understand it by not using the platform in CSS as our design material we are breaking the feedback loop that is so crucial to develop an understanding of the medium we are designing in and by that we are limiting our ability to experiment to play to prototype to learn and to innovate with what is really possible with the new CSS so the question kind of w always was and still really is what would happen if we stopped treating the web like a blank canvas to paint on and started treating like a material to build with this is from Frank Kimo's fantastic talk the web's grain so what does it mean to build with or for the web with CSS in such a way that you are working with the inherent qualities of the medium and not against it in the case of CSS it means that we finally stopped thinking of CSS just as a tool that lets us translate visual designs into browser code instead we should look at how CSS really intrinsically works so what is the essential nature of CSS and how can we work with CSS officers in 2018 Jen Simmons called this intrinsic web design that we work with the layout system and all the other intrinsic features of CSS to create outstanding design for the web also outstanding graphic design for the web but working with the intrinsic nature of CSS also means that we recognize that CSS was never really about control right it was invented as a tool that is about the information and the content first and that's a big part of the success story of the web as well what has made it so resilient over the years the very idea of a flexible and adaptable medium is baked into HTML and CSS because only on the web content can adapt to different screens and devices and users can adjust the presentation of their content to their liking for example by changing the font size and colors and all this fundamentally changes the role of us as creators because on the web we are not controlling the experience we are suggesting it in a way or to quote John alsop from his seminal article Ada da of web design if you use stylesheets properly to suggest the appearance of a page and not to control the the appearance of a page and you don't rely on your Styles sheet to convey information then your pages will work fine in any browser past or future and John by the way if you don't know this article a DA web design he wrote this 24 years ago in the year 2000 I was 18 back then if you are writing a line of CSS you are suggesting you're not specifying how something should look but this also ensures that what we are designing is flexible enough to work fine everywhere this is kind of the promise behind CSS and it works to this day Jeremy over there he likes to call this declarative design um this approach to designing for the web meaning that you don't specify or dictate how something should look you are declaring an intent you providing the boundary conditions the parameters that shape your design and Its Behavior but then you let the browser figure out how the design Works in a certain context and I really like that Framing and as should have become clear just by watching taking a look at all the plethora of viewports before and the devices and input modes and the screen readers and network speeds and so on such an intrinsic and declarative approach is probably a good idea when we are designing for the web so how does this look like in practice then how do we as designers and developers finally embrace the fluidity the flexibility of the web with CSS let's take a quick look at a few areas where CSS really outshines our classical design tools and how we can effectively work with the new CSS at the intersection of design and development now that it has become the most powerful design tool for the web and I'm also intentionally looking at stuff that is already available in major browsers or will be very soon so not only the very very new stuff um and let's start with one of the most important elements of any design and uh R will talk about this in his session in even more detail typography when it comes to typography on the web the lack of control is still a real issue for many designers and also stakeholders because in print design we have full control over every typographic detail right on the unpredictable web however we have to accept this dance with uncertainty and we have to somehow instead create a set of boundaries or suggestions that makes a topography work in different contexts and this is where fluid web typography comes in fluid typography or fluid type allows us to scale type based on the size of the viewport so that it works well on any screen without any break points maybe just a quick um show of hands who has used fluid type in a production project before okay so a few people all right but not everyone so this is how it looks like um instead of just adding more and more break points to your design when ever the layout doesn't look good anymore we instead create a system in which elements scale proportionally and fluidly on based on the viewport size and this idea can not only be used for font sizes but it actually works really well for the spacing the white space for example of our sides too and this is how it is usually done with modern CSS we are using the clamp function to calculate a font size that adds a fraction of the viewport width or a container width to a base font size but we also make sure that it never gets smaller than our minimum and never larger than our max value the relative font size unit also make sure that it stays accessible um but it can still because it can still respond to font size changes and just in one word about clamp in case you were holding back a bit of using it in your projects clamp is well supported just like Min and Max and has been available across browsers since July 2020 more than four years so use it and the idea of fluidly scaling our type is then combined very often with another idea that is really centuries old a typographic scale in the 16th century already European typographers developed a series of type phas sizes that would work in with harmonious relationships between the individual font sizes a scale and this underlying idea is that really that numbers that are related by a certain ratio will feel harmonious just like in music and there are various ratios that design have been using historically modular scale.com is a great site by Scott Kellum and Tim Brown that calculates various scales for you and now we can combine those two ideas we have headings that scale fluidly with clamp and we are using a modular scale to create a system of harmonious font sizes and the trick is that we are using different scales for our Min and Max viewports so for example for the smallest viewport the type scale multiplier is 1.2 for the largest one it is 1.33 and you can beautifully see how the topography the font sizes scale up the larger the viewport gets and this is great because we can you make use of the much larger screen real estate but on small viewports we have more pressure on the layout and so there is less contrast as a designer however I have given up control over how large exactly each font size is on a particular viewport I could calculate it if I want to but I can also just trust the browser that it will work fine in any screen there are many calculator datas you can use for fluid type probably the best and most wellknown is Utopia created by James Gillard and tris mudford you can enter all your values for Min and Max viewport units font sizes ratios and so on and Utopia will yeah spit out a set of custom properties that you can then use in your project so you don't have to come up with this calculation yourself all the time and as I mentioned there are many other generators as well Utopia now even has a plugin which lets you import your fluid type and spacing values back into figma and this is interesting although it feels a bit like reverse engineering to be honest um but it can still be helpful to create a system that also works well in static design tools so the designers can at least use the font sizes and spacing from Utopia to paint their static screens but what if we don't want our type and spacing to scale up in a linear way what if we want our headings to scale up very quickly at the beginning to make use of the growing viewp pod real estate and then on large viewports grow it much slower like maybe in a curve like this there is a tool by Scott Kellum type Tura that does something similar and Scott uses a clever hack for this he takes a CSS animation with an easing curve and then he stops it at a certain point to create those fluid type sizes but it also relies on a bit of JavaScript and so let's see if we can use the power of the new CSS to achieve something like this and for this we could use a trigonometric function like this like the sign function or to be more precise this part of the sign function and functions like this one are also the basis for easing animations easing curves um and as you can see changing the value on the x-axis results in a more rapid change of the resulting y value at the beginning but then it slows down the more we move towards half pi and in our case we would use the Min and Max viewport widths or container widths as the starting and end points to use the sign curve to interpolate between our font sizes now trigonometric functions are available in all major browsers since last year so we can confidently use the sign function to experiment with this idea and this is how our sign function then would look like um I'm I've taken this from eings Donnet aite that lists various easing curves um and it's pretty straightforward if x is zero for example the sign function returns zero as well if x is one we pass pi divided by two into the sign function and it returns one so we have a value between zero and one and this is what we need the only challenge is is this this x here because this x needs to be a value between zero and one that is relative to the current width of the viewport and to calculate that we need the current viewport width but without the unit maybe you remember this from your Math's classes back in school it's quite easy if you want to get rid of a unit like pixels you just divide the value by one unit like in this example where I'm dividing 100 VW by 1 VW and I get the pixel value ideally except that this here currently doesn't work in any browser it's part of the spec Miriam told me um but in theory yeah so in theory it could be possible but somehow none of the browser vendors has implemented this specific detail yet so I'm taking a look at the people in the front yeah yeah Adam um there is no way to get a unitless value of the current viewport width with C that we could use in our trigonometric function and therefore our whole idea of using the sign function for fluid typography falls apart at least that's what I thought for a long time until tamman aif pointed me on Mastodon to an article by Jane ay in which she demonstrates that you can actually use a combination of the 10 and A1 2 functions to divide by units or in this case length types and it's a really clever solution here is how it works it took a while for me to understand it as well so the a102 CSS function is another one of the newly available trigonometric functions it returns an inverse tangent of two values so you basically pass in two coordinates of a point and the function returns this angle the nice thing about this function now in CSS is that it takes two values with different units so this here passing in 100 W and one pixel will work now the a12 function returns an angle in radians and if we throw this R angle back into the tan function we are getting the original value for 100 VW back but without the unit an amazing hack um there is one thing we need to do because a102 still seems to be a little bit buggy in various browsers when you combine those different units we also need to make sure that we are always passing in the viewport width in pixels and this is where at property comes in also hurry up Firefox um you can declare a custom property with ADD property but also give it semantic meaning so instead of just declaring a custom property that basically could be anything you can say I want this custom property to be a color or a number or or in this case a length it's like typescript in CSS in a way if we declare a new custom property and register it as a length the computed value will always resolve to an absolute length in pixels and this is what we need now that we have a Caron viewport width without a unit we can normalize it so that we get a value between zero and one this is what this function does somehow and then we can put our X into the S function and then calculate our fluid font size I will share all the slides after the talk so you can take a closer look in case this was all too fast um but we don't have time to explain it um but this is how it looks like in action so at the moment this is just a proof in of concept you you can see that the topography scales up very quickly at the start but then not that much the larger the viport gets um I wouldn't use it in production at the moment maybe on your personal site personal sites are the perfect playground to try out stuff like this but it's shows you what's possible with the new CSS and if that's not programming I don't know what is we even using the the pow the pow function to generate our various type scales but it is also design right design in the browser and also over engineering your CSS is a lot of fun right Kevin um please also be aware that fluid type can become inaccessible because you might limit the ability to scale your type up to more than or up to 200% which is an accessibility requirement and Sarah is already nodding so please uh always test your implementation also pay close attention to Sarah who will talk about accessibility in her talk all right let's look at another area where the web platform outperforms our design tools and that is color on the web color has been neglected a bit from around 1994 until 2016 nothing really happened in the color space of course we gradually moved away from being able to use only 16 named colors to 216 web save colors Jeremy remembers this I guess um to being able to use all those ways to write Colors now and also our tools our design tools let you use those color formats in some form so figma for example supports hex RGB hsl HSB and even lets you enter a color in CSS syntax but as Chris Lily put it two years ago on this stage all of those ways to Define colors share the same limitation they are all locked in srgb prison because if what you are seeing here is the range of human color perception then this is srgb quite small and that's actually what the s in srgb stands for it's the smallest common denominator when it comes to color spaces on digital devices but thankfully all of this has changed recently also because Apple decided to put white gamut displays into their devices using a color space developed by the movie industry called display P3 and P3 is a much larger color space although it doesn't look that much larger but it has around 50% more volume than srgb and it allows us to produce much more vibrant colors now our design tools haven't gotten the news fully yet so you can switch sketch and also figma to P3 but both tools still very much rely on this old srgb workflow figma even tells you that P3 isn't recommended for web design in CSS however we can make use of a set of really powerful functions now CSS color module level four offers new color functions that work with the dis play P3 color space lab okay lab lch and OK lch let's talk about OK lch it's a so-called perceptually uniform color space so it is really good at producing different colors which have a similar perceived lightness and it supports white gamuts white gamut P3 colors obviously the L in okl stands for lightness the C stands for Chroma so how colorful is the color and the H stands for the U angle so where on the color wheel are we and it is okay because it is actually a version of lch that is more okay and how it produces um gradients but also how perceptually uniform it is this is how you write OK lch colors the first value lightness is going from zero to 100% the chroma value ranges from zero to theoretically Infinity but in practice it stops mostly around 0.5 depending on the color and the U value goes from 0 to 360 and you can use it with transparency of course but you can also use it in production you could for example check for support with ADD supports and then update a custom property of your color another Advantage is when you're using okl that besides the those more Vivid colors you can create much more beautiful gradients perceptually uniform gradients so I guess the projection does not show this perfectly I guess propably but the srgb gradient at the top users X fallback value so it is clearly less vibrant than the other gradients it is also much darker and more muddy in the middle than the okb gradient below but the the okay yeah okay the OKC gradient at the bottom um it is clearly has has the most vibrant colors throughout the whole gradient and that is because ok lch so to say does not take the shortest path to interpolate between two colors right through the muddiness but it takes a trip around the color wheel and we get more colorful gradient and you can also tell the browser by the way in which color space It should interpolate the colors of a gradient just write in OK lch or in srgb and so on now if we compare our OKC gradient to a gradient created in figma the first thing you might notice is that the figma gradient is actually quite vibrant respect you can actually paste a P3 color into in okl into figma and it will convert it into a P3 color I have no idea how accurate this conversion is it looks vibrant but clearly the gradient figma isn't perceptually uniform it's much darker in the middle so as far as I know there is no way to create a perceptually uniform gradient in the static design tools most of our designers are using and the same goes for choosing or picking colors you can't really pick pie three colors uh confidently but luckily there are a few online tools you can use if you want to Define p P3 colors and fallbacks like ok.com by evil martians and if you want to create a whole color palette which also is really cumbersome to do in the static design tools you can use utone free tool by Alexa OV or also Atmos Atmos do style and this is really the biggest benefit of working with okl it lets you create color palettes that are much more accessible because you have more control over color contrasts in Atmos for example you can check your color contrast against W 2 or W 3 requirements but you can also create color pallettes with the new CSS and there are few ways to do this one would be using the color mix function which has been supported in modern browsers since mid 2023 color mix basically lets you mix two colors into one so using a base color like this indigo blue here we can mix it with another color like a light gray and we get a light Indigo also pay attention to the u values we are using here because we don't want to turn the color wheel into we direction we're using the same value so we could use color mix but there is also another way to do this which is even more interesting and elegant and that's using the relative color syntax or just relative colors relative colors are really powerful because you can easily create complement and variations of existing colors like like darker more vibrant more set saturated lighter colors transparent and so on it is super convenient for color plette creation relative colors still have a little bit of limited availability as you can see Firefox hasn't caught up yet but let's take a look no yeah there we go so from July on relative colors will be supported by all major browsers nice so if you want to create a variation of the relative color syntax you can define a new color using a basic color function like okl and then you're using the from keyword you tell the browser that you would like to create this color from An Origin color like your indigo blue um custom property and then you provide the output value for each individual Channel you can also leave each Channel like in this example as is by writing lch but you could also change the values for each individual Channel like this one here where we are using lightness values from 10 to 100 100% And the resulting color palette has the same chroma the same colorfulness and the same u values as the origin color but we're getting a range of our blue it looks this is how it looks like when you are using this technique for a variation a range of colors you can beautifully see how each color in each column has or the colors in each column have a very similar perceived lightness so that's great because we can reliably use it to produce contrasts that are reproducible um but maybe you also notice how the colors at the edges so the very dark and very light colors might still be a bit too bright especially the yellow at the top for example so how about we turn down the chroma the colorfulness of the color at the edges but leave the chroma at the center more vibrant for example and we could use the sign function again for this right we we already have our function but this time we are using only half of the sign function and because we can also do calculations with the relative color syntax we can use the chroma values of our colors and calculate new values with the help of our sign function looks complicated again right um but here I'm also using a base value for um the chroma so that we don't start at zero but I guess also there are many better ways much more smarter ways that you could use this in production maybe one one day and this is how the pette then looks like it's much better the colors at the edges are now much more uniform the light colors for example look much more pastell um next we could go on and adjust the chroma for the or the base values or the curve we are using for each individual color and fine unit further but we don't have time for that so in the future we will also have the ability to make sure that colors have sufficient color contrast using the upcoming contrast color function and Leia great wrote a great post about this because we can now comp we can for until then we can com um calculate this using the relative color syntax as well so make sure to read this blog post and in case you want to learn more about and really understand color theory better so that it really clicks make sure to read this amazing blog post okay color Spaces by Eric Portis he includes a lot of interactive three-dimensional demos but most importantly he brilliantly explains the complex theory behind color gamuts and spaces in simple plain language it's a fantastic post all right now those were two areas where CSS is outperforming our design tools but the same goes for layout and Rachel Andrew will talk right after me about layout um so I won't go too deep in this topic into this topic in CSS we went from hacking layouts together with floats to an amazing mix of wonderful native layout tools today that you can use to really be creative but for this to happen designers must also know what is actually possible in terms of layout on the web and this is why I want to talk quickly about CSS grid because also CSS grid lets us do things that are powerful but impossible to do in most modern design tools you can for example create fully responsive fluid layouts that dynamically wrap and change the number of columns with one line of CSS as you might know this is done using the repeat function with the autofill keyword and a minmax function that defines how small our columns can become but we can also do stuff like this we can combine columns that have different widths like here the First Column has a fixed width of 100 pixels there is one column that has a flexible width between 40 and 65 characters and others are filling the remaining space with one F FR and we get really columns that will grow and Shrink at different rates we can Define Min and Max values for the dimensions of our grid columns and rows and we can adjust them based on yeah from the outside but also from the inside depending on the content they contain this example was from Jen Simmons fantastic layout lab still an amazing resource you might know it already but many of the designers in your team might not so send them the link and show them all the amazing demos and prototypes using CSS grid because they really show what is possible with grid we can even do things like this with grid we can make things overlap we can name the areas in our grid we can rearrange elements depending on the context but you probably know all of that so why am I telling you this because somehow the adoption of CSS grid is still underwhelming this is from the web Almanac 2022 there wasn't an almanac version of it last year but next the next issue will probably come out later this year but even if adoption is then at 20 or 25% it is still far too low because CSS grid has been supported by Major browsers since 2017 for seven years now and globally Almost 100% of users will have a browser that supports it but still the majority of designers in my experience still has no idea of what's possible with CSS grid and the same goes for subgrid I recently heard someone say that subgrid is basically what CSS grid was always meant to be was that you Kevin yeah um with subgrid we are able to use a grid not only for the direct Children of the container but actually use it further down in the tree like in this layout the cards can inherit the grid rows of the parent grid and we have images and type that nicely aligns and we can even use different gaps within our subgrids amazing that's just one example of the power of subgrid and support for sub grid is also growing constantly we are now at almost 90% and you might be able to use it in a way that doesn't break the original layout or also use it with a fallback but please start exploring it now it's amazing and tell your designers that it exists and then there are container queries I mean who would have thought right not me but thanks to Miriam and many of the people many other people of course we can now adjust an element based on the size and very soon also the style of the container it is in and here you can see the mother of all Container query demos the card it's this is all the same element but depending on how large a container is in this case it's the width of the grid columns we are changing the color or where the heading sits also the whole layout of the component by using container cre we can use our card in different areas of our layout without needing to know exactly where it will be placed in the future and this allows us to create really flexible components now container GRS are super straightforward and easy to use also you first have to tell the browser that you want to use an element as a container by writing container type inline size so this is our container and then you use add container just to write a condition just like you are writing a media query in this case if the container is wider than 4 TM we are changing the color you can also name your containers with container name and then use this name in the query below using container names can be really useful if you want to be more specific about which container you want to react to but it might also make your component one and less flexible Adam right so think about whether you really need a name and you can also use the short and property container then to declare both values container name and type in one line and we can also using CSS nesting move our container query up inside our component declaration and I really like how that looks right depending on a use case you sometimes might need a wrapper around your component pay attention to that but I think this is still a small price to pay container queries also come with a set of new query units that you can use um you they let you use a percentage of for example the container's inline size like cqi for example and this can then be used for adjusting the spacing in your component inside of your component and I've also seen people using it for fluid type we've seen before but you and you can do that but be aware that then you are mixing a lot of different font sizes in your layout right and this whole idea of using harmonic font sizes in relationships then falls apart so it might still be better to adjust the font size based on the viewport width or the body as a container and for example change the sizing step then of the components font size only this is what I've done in the demo before adoption for container queries is still a bit underwhelming as well so start using them um this is from the state of CSS survey Chris coer recently asked on Mastadon why this might be the case and he blocked about it I believe part of the reason is that we are still very much thinking in viewport widths and the designers are building their layouts based on viewports also old habits die hard but I guess adoption will come once everyone has seen how elegantly you can scale um and create flexible components because container queries are available in all major browsers since early 2023 so you can definitely use them in production especially if you use them as an Progressive enhancement and there is so much more that I just couldn't fit into the talk also looking at the time there is stuff like Min content Max content and fit content those sizing keywords that let you define how the box of an element should behave in terms of the intrinsic size of the content there is has the parent selector that is so much more than just a parent selector it allows us to select an element for example based on the size of of what's inside of it and we can create even more flexible components that real re to not only the context but also the content like here we are changing the number of columns in if the card component has a figure inside of it there's also the mask property which lets us mask or clip images you including gradient masks for example to create something like this or animation an araw you can do so much in CSS as well these days in the browser and it has become so powerful especially now that we have the linear function which lets us Define our completely own individual easing curves like you can see here in this easing generator by Jake arot there's also the scroll timeline API which Carman will talk about tomorrow um I'm very much looking forward to that session as well also view transitions I included a transition for this um and then also anchor positioning which tab will talk about so yeah I guess that was a lot a lot of stuff to take in um it should be obvious that CSS is really awesome today we are at the really at the cusp of a new era in CSS but all the examples I showed you have something in common they are clearly something that no design tool can do and which are they are best evaluated and decided in the browser so to be able to make a decision the design decision whether a certain set of topographic scales or color Petes or fluid grid layout will work we have to see it in action we have to build with the real material so to make use of all those powerful features we not only have to work with CSS as a material but we also need to change the way we use CSS in our projects and workflows because we cannot wait for the static design tools to catch up we can maybe look for better tools but also we have to change how we use CSS first of all by learning constantly learning and teaching each other about the possibilities of CSS so write blog posts like Roma or Sarah do um create courses like Josh Kevin um create videos other learning material tell the world how awesome CSS is but also what Solutions have worked for you and then we need to start to use CSS much earlier in the design process again because working with CSS from the start ensures that our designs are grounded in the realities of modern Brower it ensures that we are able to make more informed decisions design decisions early in the process and not when all the blank static canvases are already filled with paint and the paint has dried which might we might still sometimes have to do very often maybe to develop a general visual design Direction but we need to make CSS an essential part of the design process again in which we start to decide in the browser what works and what doesn't not in static design tools that are only an abstraction layer right and for this we need to build prototypes I've been teaching prototyping for 12 years so believe me they are invaluable prototyping is where new ideas are born and and really tested and refined it allows us to iterate very quickly often times but it also ensures that we are building the right thing and it allows us to work with the real material that is the new CSS so build typography prototypes color prototypes layout animation interactive prototypes build prototypes of anything with CSS and in turn this will also improve collaboration between design and development when we're using prototypes which is really really really important because building websites is a team sport yeah it could also mean that we switch from still ubiquitous waterfall like processes to something like the Hot Potato process suggested by Dan Maul and Brad Frost so instead of everyone working in their respective silos designers and developers pass ideas back and forth small work packages small prototypes in much shorter Cycles just like a hot potato and by that we are also working collaboratively in interdisciplinary teams we yeah we have to work side by side we have to share our skills and grow together this also means by the way that we let the devs design with CSS who wants to design with CSS right yes everyone um and you now you know what's coming next it also means that we let the designers write CSS again this topic again I really mean it I'm not talking about production code necessarily I'm talking about acquiring a firsthand knowledge of what it means to design for the web I'm talking about about getting your hands dirty exploring stuff yourself about understanding the concepts behind things like fluid type color modern CSS layout and so much more because telling web designers they don't need to worry about code is like telling Architects they don't need to worry about steel wood or physics I couldn't agree more to Brad Frost here so because ultimately to really bridge the gap between design engineering the Gap that also Jeremy talked about that holds us back from harnessing really the full potential of the new CSS we have to create our designs at the intersection of design engineering and have to practice what's often called design engineering this could mean that we hire people like design Engineers who know how to prototype and build web components with modern CSS and to help build Bridges between design and development but it also means that we have to become better at design engineering collectively as teams as people with different skill sets working together you could also call it web design engineering if you want but maybe the right term for all of this has always been just web design and the big mistake we made was to think that we could split up design into and and development into two completely separate professions because in the end it is all one shortly after creating CSS hakon vom Lee and Bert boss the creest of CSS published a book about their new visual formatting language and they called it cascading stylesheets designing for the web designing CSS is so much more than just a means to an end regardless of whether you understand or wrestle with the Cascade or how much you try to control the output CSS is the very material all of our websites and every design on the web is Created from CSS is the most powerful design tool we have on the web today and we need to get get back to creating amazing cool graphic design on the web not by imitating print anymore but by using using the medium using the new CSS itself and we also need to build websites and components that are resilient flexible beautiful and accessible because our websites can be so much more still what they are today now is the time to learn the new CSS and build amazing things with it and I wish you all a fantastic CSS day 2024 thank you very much thank you very much Matias I think everyone would agree that was the perfect opener uh we don't have too much time for questions I'm afraid so do uh go and grab Matias afterwards I think I've only got one qu time for one question so I got to make it good you've already answered the big question should designers code uh let me let me kind of reframe it then uh and and a lot of people were asking about this how do we bring designers along on the journey are you saying mattius that everybody needs to be a unicorn I I remember that uh Hayden Pickering got asked a similar question last year and um I can only in a way repeat his answer that um if if you're using CSS it is a tool to make decisions right and so um you have to think about how you can include it into the design process but this doesn't mean that necessarily everyone has to become a unicorn and has to code but you could also yeah just have a team that does it together collectively but in a way I really think that we need to work with CSS much more than we have done it for the last few years right easier said than done yes you know Pro the way when people have a way of doing things to change your process inertia is a powerful force yeah there's clearly a lot to talk about here so I hope you will grab Matias and and Peep your question oh I did have one come in this isn't a question it was more of a comment but uh it's a good comment because it comes straight from Milla you asked about at property oh yes uh it's Landing in Von next week great it's coming um so like I said you can uh right now go and talk to Matas upstairs because we're going to have a break where you'll get tea and coffee and remember do not bring your glasses downstairs decant into the paper um and you need to be back in your seats by 10:55 that's when the next talk is and you don't want to miss that cuz it's Rachel Andrew but before you go get your coffee can you give it up one more time for matius a thank

Channel: Web Conferences Amsterdam

Views: 6,947

Keywords: web development, css, web design, browsers, standards, figma, responsive web design

Id: su6WA0kUUJE

Length: 51min 14sec (3074 seconds)

Published: Mon Jun 24 2024