 Hello, everyone, how was the lunch? Good. I just want to check if everyone's awake. How was the lunch to say just scream Just to see that you are great. Great. Great. So today I will talk about CSS. I have a lot of content here I will try to not rush, but I will just keep a few parts that's kind of like old stuff but the new stuff I will promote folks on that and Start our presentation today about what is new in CSS First, I think some of you know me some around Europe I have been different place in Europe with different what games, but I'm a front-end dev lead a Company's called digital method. It's a learning platform We actually don't use WordPress at the moment But I apply loads of things that I learned on the Gutenberg editor and I just use in my daily Projects that's super cool and awesome Google developer expert So if you want to find me or if you take pictures, please tag me. It's at Philip and on the side of my picture some of contribution that I made to what press translation the most recent one learn dot WordPress dot warring and Events I was organizing doubling and some Paolo and Also speakers in different place. I love to hang out with you guys and so I got Let's let's talk about what's matter today. We're gonna learn about Karuaru Karuaru is my hometown in Brazil I have learned a lot with you in the past seven years and I would just talk a little bit about my town doing that presentation just to Representing share a part of me because I have been different place in Europe and I just love how everyone's you welcome and for sure we're gonna talk about CSS and Actually I'm here in that picture That is a party that we do every June in Brazil. It's the same days I think the folks from Portugal also celebrate the same season like they have the the saints day and they have some San João and that was a San João night and I was in front of the stage and you can see how I Enjoy that party because I just said the front line and so Let's talk now about CSS and then we're gonna come back to Karuaru and I will share more about Karuaru and for today or just split and pass present in future so things that can use for a while and Things that are new that can already use and feature features that are coming soon and also we're gonna talk about WordPress and Just for you understand, I think it's one behavior that probably some of you have that It's just look for new features and see and think that oh That's cool. That's new, but I will just use them two years or five years Because we are just used to that so the difference between the Internet Explorer six and seven was like five years and if you leave we for The PNG the transparent PNG that didn't run in Internet Explorer and you need to do a fix all those great fix that we have on the web For example clear fix. That was a problem to fix the floating Was for until last year at the top 20 selectors on the web And it's still there is still in 10% of the websites. We still use clear fix to solve the problem about layout and I hope that that will disappear I think the the word present the Gutenberg editor helps a lot to take out these from our lives and And how the things work today today we have that specific scenario We have Chrome Edge and Firefox releasing new features every month and we have Safari with your regulars Updates as well and some of the updates are related to the OS and We have the good news that the Internet Explorer 11's gun Yeah And I think everyone was like that and After Internet Explorer 11 was gone and we are like oh so but We have those browsers release new features every single month And I would just like name a e and d are different features and then Which feature it should apply for my project because none of all the browser has the same feature implemented at the same time and there was a time that realize ok those new things are super cool, but I Actually can't use yet, and then we have loads of tools to fix that problem, but The idea scenario is not we use tooling to solve that problem But also who make the browser kind of like can you guys get together and decide what you should do and Actually was that what happened like I think 2021 a comment they call interop They got together and they decide was the roadmap for the new features for CSS and the HML and that's why we now we have some Stable release and when you see something new they're like broadly adopted because They just get together and say okay. Maybe it's nice to implement those features just an example that 2022 those are the least that they implemented like layers and colors Dialogue dialogue was a night and that I was I was in Ireland three years ago when I saw dialogue for the first time I just showed my friends. I say oh, we don't need to implement a pop-up anymore We just can use dialogue and they just look at me and say oh But we're gonna take like five years to use that just like looking for the default Behavior that we have in the past, but actually dialogue today. We can use in all modern browsers It's available for all modern browsers and some of those features. I will share with you today The other important initiative now that is the most recent one is draw a line to say, okay, those features are Safe to use So they're like we all implemented but the next not the next but the previous two release we are adding it's using them and They are working together to document those things or the W3C documentation or inside MDM Have a clear sign that you can use those features safely and the idea for that baseline project. It's also to Create a line for each year and say, okay, this year. You are safe to use those features and Just going back to Colorado my hometown this Some of the pictures from Colorado. We as you see we love music we have love like how to do the sunset and I would just use at this website Example and show a few things That I just notes like when I was like talk with other developers that I constantly see in different websites And for that we're just like pass quickly on that because we're gonna cover the new stuff But those are some common problems based on The problems that we didn't know yet. Oh, should I use that? Should I? be safe in use those features and what's kind of common see that not everyone know that they can use that and they are like With a huge support already. So the problem here are the header the image is kind of distorsed and the the card image maybe you want to do that's like an even situation that you have different aspect ratios and But let's say that you want to apply the same aspect ratio for all the image And the third item is back to top It's something that I saw a lot just someone installing a plug-in to do a back to top transition and Maybe you can do with CSS. Maybe you don't need any fence solution for that and The three solutions for that are object fit aspect ratio and scroll behavior this for behavior It's a simple solution, but it's kind of just to show that sometimes you don't need JavaScript to do that so object fit you have an image with a specific container and then you set that container, okay I I want to just cover that whole area and when I do that That image will behave as a background. So and I also can define the border center That's like the reference for that image and when that image resize or do something the proportion will be there and We just want to have Behavior as a background We have a few good like things about that. That's number one The image will be on the dawn the browse knows when should load that image we can use in that image for example is loading or fetch priority that we're gonna improve our performance and Also accessibility you can also Describe that image when we have an image in the background. We don't have the capability We can use way error to describe that but it's not something out of the box that we're gonna have that and Just for those features here are the version the the version that you can use that as you can see here is like Chrome for a while we already have that Firefox as well And when I was a talk with friends, they didn't know how to implement that and then I can also That's just like a before and after You can just see the image here like how we stretch the CDR and here It's like how stable that image are because the container just try to fit in that container And if I want to combine those two items, I can use also aspect ratio aspect ratio It's useful for you keep the proportion of the image but also any container I can apply for deep or if I frame and I can use for example to do a Recize ball I frame Embed from YouTube that is like responsive. I can use Instead one by one. I can just use 16 by 9 and that I frame will be responsive And if I combine those two items so in that case Here I have the aspect ratio and the object picture gather and I can just have one image one by one for sure we can do that on The the back end to solve those things, but also we cannot decide on the front end as well how we're gonna show those items Scroll behavior. It's a it's another solution. It's just a simple solution that we have white job script but you just need that selector and for that example I I just create a video use the site editor and I just tag the cover image with ID and I just link with the image I will just play the video here for we see and I Won't talk so much about the site editor But if you want to learn about site editor, there is a website will cool. That's learn Dot what price dot or please go there visit and get that amazing content there and Here I just include that CSS that I showed before and Then when I go to my page, I just scroll to the bottom Click on back to top and we have this is most transition That we will improve there are a few things that will show you in the end of the presentation that are we gonna see how that will improve them And now Okay, that's the past things like things that for example, I saw that not not everyone knows but now let's talk about the present days here So We would see using the blocked themes. I read please just raise your hands Cool Cool, it's getting there. It's getting there So the nicest thing about the the new blog theme that I can have like a file that's called theme json will be kind of the Kind of my my styling brain like kind of the rules of my game And I can find that some features on the theme json and I can connect those two items the CSS and my site editor and One thing that we can do for example, we can find properties here. It's a shadow I just set this shadow on my theme json file And I can get that same definition here and use on my CSS files I can like reference the verbals for for example shadow pink So I can just call here WP preset shadow pink And I just use the same structure across the my theme json and my CSS and I can reuse that in my UI and have a Consistency why and then it's a one item that I really love because I was working on project and I Love to have that before because we have like different views and we want to have the font adaptings According to my viewport and for that before I use this crazy math with like sauce to do that fluid Typography when today we can do that with only CSS and clink is the function that will help us to do that So basically I have a function that has three parameters The first one is the minimum value the last one is the maximum value at the middle one is the kind of the ideal value that I will navigate between those two gaps and That functionality it is available now Not now I will just go there is 6.1, but this is just comparing there before and after the The project that I did before was like there. I have like different screens and for every single Font and size and spacing. I need to define here. Oh that font wasn't from 18 and to 52 I I just put a small font it's not for readjust to see the size of that and Just think about to that for all the fonts for all the spacing and when I can just do that with that line So that's a CSS claim. That's available in CSS and the good news that we have clamp on FinJSON and How we can use that before we use that on our FinJSON file on the typography settings I just set fluid through when I sat there. I'm capable to go here at my Font size for example, I have this font medium And I just set here the mean and the max value and then I will have that fluid text on my block thing The other cool thing that we can do with clamp. I can find my Spacing using clamp also can be the other way around. I can just set a value Using clamp for my spacing and I can have those gaps defined and also adaptive to the Viewport that I'm using so if I'm a mobile phone I can have this minimal spacing if I'm a big screen I can have more space between my elements and I can just use the power of FinJSON to have that across my team Okay, and now that's more like on the CSS side And those are the features that you can use today. Just remember that here are The versions that you can use kind of like kind of new some recent ones, but container query we had before like as we we learn how to work with Media queries now we have container queries and how was container queries container queries. I will just Show example here. That's like is where we we see that in in action Let's say that I have a block and that block I will just define. Okay When you have a large space You're gonna have two columns Doesn't matter where we are which device you are When you get that area just be two columns, but when you have a small area just be one column content after content and here I just have a A card that we will just like check when the container has like a size that is like until 407 pixels who just like set as one column and Just imagine that you can create your blocks and tell to your blocks Each scenario that we adapt down when you have like a bigger size or a smaller size You just know how to do it. You don't need to care about how the layout is doing there So kind of like we have a lot of independent like a structure inside your block The item number six that I would like to show today is layer That's a common scenario. I'll talk with a friend during the conference And we are just saying that if everything is important, nothing's important and that cold here We have 206 important selectors. So I think that are of important things here And but sometimes that happened because we have for example bootstrap or something that we need to overwrite every single time and layer What that feature does is we create like layers in our CSS that I can define the priority for those items So in that case I can tell that the least important one is The framework layer So it's my bootstrap or my tailwind CSS and then I can define other layers and Something that I want to see in a future. I was passing play with the site the site editor is When we use the site editor nowadays now Here's just example, but when you use the site editor nowadays everything is important And if someone has some issue or something to implement to for example See a way to use editor to not use important for the CSS that came from the enter Please talk with me. I would be interested to know and help with that But what's that example that I did? So if I set here the least layer that is the editor So it would be the most important one I don't need to set any important over that CSS because the browser will know that okay That's the most important CSS in that page cool and This one I wasn't like any actual improvement, but I see some face say yes For a while, I used to go to my CSS file and write this mean with 600 pixels and I was like it's a the that goes until 600 or it's after 600 and I just want to test you who thinks that's the That's the first code here. Just raise your hand say that that line on the top and just say raise your hands Yeah, we have we still have a split audience here Who thinks that's the that line here represent this one just raise your hands Okay, think Actually is the first one and And it but it's you not sure always been asked because it is the second as the first one but it is the first one and Just inside small improvement that we as developers just help our lives to okay I don't need to stop and think about that. It's just like I know how to code. I learned that's that's the sentence that we do like Greater and equally than 600 and we can do range as well Right, and that's a feature that's available all the browser today so so far so good yeah and As we saw there we have loads of items that It's a it's a rather helping we build our layout But we can use some of those items for example claim and all the items inside our thing Json, but I want to see for example things like layer also coming to live inside of what price I could system and For those items now That under future some are available in most of the browsers and some are like not available anywhere yet But I will just want to check them and see how we we can use in the future those projects But before if you want to make sure that for example I want to try that but I'm not so sure that I can use that feature For example, we can do a media query to check if our browser support that feature so I can just do a Check for example if my browser support nesting and then inside nesting. I just use nesting CSS And you can do for all their type of features as well that I will show today number eight That's for me. It's like I was like waiting for that for so long It is Has has is a selector that check if the container that I'm doing the This piece of the selector has item with the rules that are defined side there and Here For example that first selector. I just check it if My card has item with the class feature So if you have like a store or something that you display item That you have like a sales code or something that when you have that sales selector You just include that's like fancy Label that say okay these items on sales Before to do that. We need to use yes job script or PHP to just check if we have that item And now we just do all the things with CSS it's not cool Yes, I know are you with me? Yeah, and So if I from Brazil or if you have been Brazil before those are my favorite foods then that's for northeast So I think the folks from Freitas was talk with me when he saw for the first time those pictures like yes, I know that I say yeah, you know what is good here and So here's just example So when I have a card for example, I have my pulse that it has a feature image I can do something when I don't have a feature image. I can also Set a different title just to feel that area that supposed to have an image and Let's say that I don't know if the content doesn't have anything only a title I can also do something and those checks are only with CSS and I can check if I have that item, but also I can check if I don't have that item Let's say that I don't have a intro. So if I don't have a intro I can do a fancy car or if I don't have a feature image. I can do something else as well has now There are like a kind of like a better version There are fees that are coming that we will check for other things for example CSS variables If the language if we have the language direction and that's just the first version of has For modern browsers There the new versions of modern browsers We are doing checks for example CSS variables as well. For example, if I have a value that is like a Discounts true. I can change the CSS the presentation of that card Just based on that variable as well But that item is not available yet on Firefox, but we already have on Chrome and Safari Safari this week we had the WWDC that they Have a full presentation of a CSS and they talk about has and new stuff that they are planning to do if has as well And the item number nine it's nesting. It's again. It's related to Organize my code and if you work with size or less before I'm pretty sure that you have used that and now We can do CSS nesting on CSS Again, I hope that Firefox also Getting the game to use nesting But what are the advantages for we use CSS nesting the advantages for you use CSS nesting that I can just Set the CSS for that block. So if I want to do maintenance or anything I know that everything just contain inside that nesting selector and for example in that item here, I have my post block and I have the style for my taxonomy time. So I know that I would just apply that CSS for that taxonomy time that is inside my WP blog post So and we can play around we can use like a related Related like selectors that was the item that I show on the previous slide that I was like check if we have support Basically are checking if our brights has support for that type of selector and and then they will just check for for the support for nesting CSS and Now we we saw like the things that almost there there are the features that are most landing in all the browsers this one It's kind of new are related to two new CSI and not CSS but two APIs the web animation API and the CSS animation API and Basically, we can do scroll driven animation. So if you do you have worked with parallax before You need to use the JavaScript to do all the facts to check if the user is exploring in one specific area That feature is available on the contrary of Chrome version 116 and that's working in that way. So I Have these cover block when I was scrolling my cover block We'll just do animation to feed 100% of the area to 5% of the area You can see we will have a few image like doing animations and also we have this progress bar on the top here and And All those animations, it's only CSS. I just use CSS to do that, right? And I'm pretty sure that if you love animations I would love to see in the future all those like template builders like when you talk about animation Just sold them with CSS no JavaScript Because like when you I'm not like always I talk about JavaScript. I'm not hating JavaScript. I love JavaScript I work full-time with JavaScript, but just to divide in the proper way So the the painter paint the walls the electrician take care of the cables in the house and It's what happened now that evolution of CSS. We have what is related to CSS? Like layout so keep those things there What is related to the the electrical part of our application keep those things there as well and just for we check how I did that so I have my Container block that I Behind I just put like a main header that I used to do the animation and I have set my animation and that animation it's a front 100% of the height of the viewport to 5% I just set the animation now. That's a Until here is nothing new the the new parts start happened here on those two lines and What I'm doing here I'm going to the animation timeline and Setting that okay that animation will run over the scroll and When I sat down If I don't set this animation range My scroll Timeline will be back Top to bottom of my page. That will be the timeline of my animation But we can define here The animation range and set okay I want that animation happen from zero to nine percent So in that case I don't need to scroll until the end of my page I just scroll until nine percent of my page and then I will have the full animation. So the The the cover block that we have on the top so if you look at the Let's try to play again Here I'm 100% when I start scrolling when I got in 9% of that whole area The animation here is already completed right and Only they scroll is to happen back to top because I didn't set the range so if I didn't set the range the animation will go until the end of that content and Other feature that we have as well. For example, we can also define do the animation when that container appears on your view So we have different ways to acting with that. So It's a really powerful API. I really love to see that and I really love to not have all the The job scripts you doing there and just like okay Let's job script do his job and let's just take care of the the viewport with CSS and So and I have loads of features that I do love to show I think I have a few face here from Rotterdam that I did that presentation there And I just changed the content the friends from point of either as well So there I have show a select menu there and in Lisbon I have shown that the tax balance and We have plenty more new features available like or coming or popping up It's a real excited time if you want to work with CSS And also if you see those features that can help what price to do like okay how we can improve what price with those new features, please open a shoe and github and Yeah, talk with the people tag me as well. I'm on slack available as well and Here that link is the the panel of the interop 2023 so the The list was already fine it so the time that they defined at least it's from July until October and There was a funny thing that last year was here in Athens And I show the image set feature and I was just super happy to show everyone Oh, you can use image set in your background And you can show different versions of your image and your website will be fast and then after my talk I went to test that on Chrome and didn't work and I was like well Yeah, all the browser supported and not chrome and then I was a okay I need to talk with people how we like we can have that on Chrome as well And then it was the time that I discovered interrupt was the time that okay I think that talk was born and and the word came out in the last year And then I start talk with the the interop I have raised a shoe over the image set and the image set was the Item number 11 like in the vote and I was super happy to I just open like and say What I would like to see and so it's open to everyone everyone can go there to the github and say I would love to see for example, uh better is scroll is move API or I would I would love to see a better way to set my background image and Everything's open. Everyone can participate that so if you want to participate, let's just be like on the the timeline to check when they will open new features and Just be part of that as well because I think that everyone that is here can help for we make that environment better Cool How so far? It's great Hear me. Oh, yeah We've got about five to eight minutes for questions So if anybody would like to ask a question, you can come down to the mic if you have more than one Ask your first one and go to the back of the line Thanks, we'll start with over here. Here we go testing test. Hello. Yeah, hello Thank you for the talk I have a question around so you mentioned the container queries and layer and I know that at the moment Gutenberg doesn't support container queries It doesn't know how to pass the CSS and although I've personally as a developer can go in and I've written a poll request That's just one particular feature and there are all these other things coming. Is there anything that you would recommend for? WordPress and Gutenberg in general to stay on top of CSS new features to make sure that when we do Decide to adopt them that they're ready and we can immediately use them Yeah, I think one that I mentioned then I think image set was I raised issue and on the GitHub repo for Gutenberg the For example, we do that on other Like template the page builders that you can set the image for mobile version image for desktop version Because that's some like some browsers not some browser some websites that when you set up I think there is a specific scenario that you I think you set your background for the cover image It's fixed it and then that image is not a image tag anymore and became a background CSS and And then we just set one large image size and then when you have a mobile user the LCP just go way far I think yeah, I think it's the other item that I would love to see as well like image set and kind of like Managing that thing to have like optimized LCP image. Yeah Thank you. Thank you. Any more questions. We've got another one here. Yeah. Hi. Oh, sorry So I have somewhat of a philosophical question. I guess is so There's been a lot of frameworks coming out lately that Allow us to write Predetermined selectors so we don't have to learn or use all the nitty gritty off of or the details of CSS so two questions first is are those frameworks making us a bit lazy And second question. Is that a good thing or a bad thing? Oh and also a third question How many people in here still write raw CSS as opposed to using some kind of framework? Raw CSS raw CSS. Oh, wow Good. Thank you. Yeah Okay, let's I think I do a lot of frameworks. I think the You when we got for example was the first time that I showed nesting for example privacy Oh, that's we're gonna kill saws. I was like, no, we won't kill saws because saws has hundreds of features that you can use not only nesting that makes us but For example nesting can be a reason for you not using saws and not have like a build pipeline for Do styling that's cool But also on the framework side, they don't need to worry about nesting anymore They can invest their time and other new cool features and I think that's one good thing I do love frameworks and I use frameworks every day But I think it's important for we see what happened behind the scenes because if something goes wrong you're not like CSS blind like Something that I know we first of my friends that they start with react They never told job script and then when they have a problem job script They're just spending because they didn't have enough exposure to job script But I think yeah, we need to use both but I use consciously. Yeah Great, thanks. I think we got time for one more question over here the mic working You know, no, please Thank you, thank you. Okay. So what amazing voice Thank you, Philip for this talk. Yeah, I have a question about clamp Yeah, so as a backend developer, I don't spend much time with CSS But when I do I try to read all documentation and understand what I'm doing and With clamp I found a problematic this middle value So I understand the first value is the minimum the second the third value is maximum The between value is so confusing. So do you have a human understandable explanation about it? It's kind of For example, I would try to elaborate that in a good way like for example my Let's say I'm here in the word came I will speak today and I have the whole week here in Athens and I have my minimal values of beer that is like before my talk and I have my Maximum value of beers as after my talk, but during the week I can go easy and flexible But I can't go too much and then the middle value is like the flexible part of those two range and you personally Easy math that I do it's like put like a flexible value on the Middle value that is like 5% of the viewport or 10% that will be a value that will navigate between those two items so in in that case the 5% of the viewport will be based on the size of my screen. So everything will navigate based on the size of the screen Okay, so it's a space between it's like it's ideal value But like how is it? Okay, I can be flexed between those two points. Okay. Thank you. Thank you Great. Thanks everyone and thanks Philip for a wonderful talk