 Hello, my friend and friends. Thank you so much for coming to join me for yet another video and for exploring the state of CSS 2023 survey with me, which is what we're going to be doing in this video. If you're not familiar with the survey, it's a survey that gets an idea of where people's current knowledge of or awareness of and how much they've been using a lot of the newer CSS features is at. And it also goes into your opinions on things like the different frameworks and libraries and authoring solutions we have for CSS today. So we're going to be starting off by going through the parts, the features of CSS itself. And I'm going to be sort of going through and explaining what some of them are as we do this. So maybe before you go ahead and watch me do this, you could answer the survey. And just to take a quick look here, here's the page, the state of CSS. So it's the first link that is just down below. And you can dive in and start doing it on your own. If we come down, you can either have an account or continue as a guest. I have an account. So I'm going to log in in just a second, but definitely I'd recommend you do it first. And then you can I'm going to go through it myself. I'm assuming I'm familiar with most of the things, though we'll see if there's a few that I'm unfamiliar with through here. And for quite a few of them, I'll also take the time to try and do a very quick explanation on what they might be sort of as we run through on these. So if you find a few that you're not familiar with as you go through it, hopefully I can help you out. And I'm also going to link to a ton of videos down below on any of the topics that I have covered as well. So let me just log in and I'll see you in one second. All right. So there we go. We can continue on to the survey. And I'm going to go through the parts that aren't opinion based because there's definitely opinion stuff in here. And I don't want to sway anybody's opinions on things. I'd like you if you're filling out the survey and please do go fill it out. It doesn't take long. It's like 10 minutes. I guess if you're watching this maybe a little bit longer. But even maybe go take it now, see what you know, and then come back later. And you can maybe get a fill in on some of the things that you didn't know about when you did the survey. And of course, it is the first thing that is linked just below this. And so welcome to the survey. Here we go. Here's all the different sections of the survey that are here. We have a new layout now, which is exciting. And I don't think we had code before. So we have some code examples of what things are. And this is something I heard about with the reading list, which is cool. Because now if you come across something you're not aware of, you can push plus and it adds it to your reading list, which is nice. And then I don't know if I can remove it. So we have some written there, but that's that's awesome. We can add stuff in. I'm going to zoom in a little for video sake here. Let's see if we can make that a little bit bigger. And I like having the code blocks because definitely I would see names of stuff here and be like, I think I know that later on I'd Google it and be like, oh yeah, I've used that a ton of times. Just the name here didn't mean anything to me. So yeah, let's subgrid if you know me. You know I've used it. If you're not familiar with it, I'm going to link to some stuff below and I'll link to my playlist that looks at subgrid. But basically it lets you have child elements on the parents grid instead of on their own. Sort of. I don't know how to talk. I should. It's a hard one to explain with words without examples. So definitely check out those videos if you want to know more about it. And Chrome has announced their intent to ship. So in August, all browsers will finally have subgrid. I'm super excited about that. It looks like we can leave comments as well. So that's kind of that's another new thing. That's that's cool. I can leave a comment. I don't know what kind of comments I would leave. But I won't leave one for their writing modes. I've definitely used. Again, it's I'm cheating a little because I do videos about CSS all the time. So hopefully I know these logical properties block would be instead of the top and bottom in line would be instead of left and right. That would also follow your writing mode. If you changed your writing mode, the logical properties will follow those switches. So the inline start would switch sides if you switched the writing mode from left to right to right to left and all of that. So it sort of replaces using top bottom left and right or widths and heights as well. You have the inline size and the block size aspect ratio. I use it. I think that one's pretty straightforward. I'm talking too fast because I'm a little bit out of breath. So we're going to try and slow down a little bit. Content visibility is one I've used. I don't have a video on this though. But I definitely have played around with it a little bit. I have some content just around this whole idea here a little bit. But some of what this could be useful for. But this is one of the ones I think when the results come around will definitely be high up on there. Flexbox gap I've definitely used a lot. I started using that before I should have been using it in production. Container queries. I've definitely used one of the things I think most people are excited about the most with CSS and will be very happy that we can sort of start playing with those slowly but surely now. Though maybe is still a progressive enhancement. It's like a media query but it's for the size of the parent or the size of the defined container. So you have to say this is my container and then the items in there it's just like a media query but you're not looking at the whole viewport. You're looking at the contained size that it's inside of. Super useful. Yeah, really good. Object view box. That one. Do I know? Object view box. Object view box inset. Oh, I think I know. I did a article and video for Stephanie Echols series that leads up to Christmas and I think this is what I talked about but I think it wasn't a CSS property. Was it object view box part of it? I thought what I looked at I think was an attribute on an element but it works exactly to me the way this is working and maybe it even was this. I'm going to put I know what it is but I haven't used it because right away looking at it I know exactly what it's for but I definitely haven't used it. Even in that video I had to make images of how it worked because there was no browser supporting it at the time. So basically what this is if you have an image you can say like I want to inset the view box almost like the view box on an SVG but you can do it for an image so you're sort of like this is the area I'm looking at even though I have a bigger image so you could like highlight a certain part of your image if you wanted to or something like that. A little bit like you could play with background sizes and positioning. I wonder where browser support is for that. That one you know what we'll add that to my reading list because oh and I can take sub grid off. It's behind my head. Let's move that out of the way for you. My reading list is here I didn't even realize it so I can take sub grid off. I can leave that on there so I can remember to go and take a look at it after. Cool. Dynamic viewports I definitely have used them. If you've been watching me for a while you might have seen me use something like DVH which is the viewport on mobile devices especially can change because if you scroll down and the UI elements move away like the address bar moves out the viewport size changes and things like VH always had issues with that so DVH is the dynamic so it will adjust whether the UI is visible or not. You'll also have the S which is for small so it just assumes that the UI is always there or there's the L ones that are the opposite it means large viewport so it assumes that the UI is not there it doesn't assume it acts as if it isn't visible and this small would act as if it's always visible. So this can fix some of the issues that you can run into on iOS. Well that's where people always complain about it was iOS so it can fix some of those the only thing with DVH is it doesn't it like stays small until you stop scrolling and then it sort of gets bigger after so it's not like this nice smooth transition the same way the menu disappearing is so it's not perfect but it does help us with some of the problems we'd have. I've covered this in a video so I've definitely used the range context super nice super clean I think it's you know something we need to explain it more it just makes more sense than min width and max width so that one I like a lot anchor positioning new in 2023 oh that's kind of funny because this one means it's not new so that's interesting anchor positioning I've read about it so I'm gonna okay we're in a funny zone right now I know a hundred percent have read about it but I don't remember what it is so I don't know which one to answer here anchor positioning anchor name and looking at that I have like it's a slider link so I'm actually I'm gonna say this because I completely forget how it worked and what it could do like at least the other one I could explain it to you this I have a vague idea of what it is I've definitely heard about it but I don't add it to my reading list because I guess I have said this is great for content I have ideas for content now for videos it's fantastic there we go let's go on to shapes and graphics and looking here mix blend modes I've definitely used they're super useful isolation is also great it's always I do occasionally like underused are underappreciated properties and values and CSS stuff and I always have to remind myself I've already covered that I've already covered isolation previously because I just always want to talk about isolation it's super like simple it's one line it it works with blend modes but I don't well you could use it for blend modes it just stops things from blending but it creates a new stacking context and that's how I always use it I'm just like I need a new stacking context I'm just using isolation isolate but it is part of the blending mode spec I believe which is why they would have grouped it here filters and effects I definitely use I've been using blur a lot more than I used to actually there's there's some good stuff you can do with blur just in general it's a it's a nice property to have so you know instead of box shadows box shadows are kind of weird because if the parent is transparent or whatever you don't see the area does that make sense like it doesn't generate a box shadow where the box would have been so you blur you can have like a pseudo element that has a solid color blur it anyway and can be very useful backdrop filter I think a lot of people know it just because it's used for like when you're blurring the stuff behind so that whole glass more glass morphism thing definitely made every you know that was the backdrop filter was all about that the linear easing function this is really cool it's I've been seeing more people actually I haven't used it so I won't say I have but I've seen a lot with it it's something that's already in my list for video topic ideas but I haven't used it yet so I have no video yet ready to go on that but it's just to make much better easing functions where you can actually you know if you wanted to bounce before and you'd have to use keyframes we don't need keyframe animation to do something like that we can have like our crazy cubic bezier but for an easing function now type of thing anyway I'm not explaining it perfectly well but definitely look it up I'm actually going to add it to my reading list to remind myself to look it up in a bit more detail so I can explain it better when it comes to making a video on that uh entrance excising max content min content fit content I talk a lot about them the most useful tends to either be max content or more often is fit content but I definitely they're a little bit more fringy I'll put a link probably do most of these things down so if you if there's any of these you want to learn more about is if I have a video on it it will be down below conic same thing conic reading super useful if you don't know them not all they're really weird at the beginning or like these circular gradients not radial from the center out like start here and then like spin around they look super useless when you first see them but then you can see like they're really good at lots of different use cases from crazy patterns to just making really nice gradients and a whole bunch of other stuff in between including like pie charts so definitely yeah they're super useful ah this is one of the things I'm most excited about um which I haven't been in until recently but seeing I knew it oh my god that'd be cool but basically it's like if you want to go from your transitioning views basically I've seen some really cool examples uh using view transitions and your as it says you're going from the old view to the new view and um that you're having transforms between them and there's lots of cool demos and other stuff out there so I definitely would recommend going to check them out it just looks like it's so easy and it just works and I'm adding that to my reading list because that's definitely it's not even in my upcoming videos but I want to make a video on this um it's one of the things it just looks so cool and so easy and it makes a lot of things that previously would have been heavy on javascript just work it's so cool um and there is also like with that api I think there's some javascript stuff you can do as well um but definitely something I want to read more about and get more into colors next that's exciting uh just because there's lots of new color stuff in css so a lot of these I'm aware of but I don't I haven't used them um so for example I probably I think I actually color itself I don't think I've used I probably have used um but basically you get to choose what color mode you're using um it's something I definitely need to read more about so I'll add it to my reading list as well um I've seen a lot of good examples stuff you can do with it our displays have better color we're not all rgb anymore s rgb we have all these monitors and phone screens that have this huge vivid range of colors that wasn't available in css so now we're actually able to define what color um mode or whatever it is called that we're going to be using which means you can open up this whole new range of colors which can be useful accent color I've definitely used I have several videos on that one um changes your checkboxes your radio buttons your select the range sliders uh is it those three maybe there's another one too you can change the color of them really easily with that so that's super handy here we go these checkboxes would be an example these are custom done um but you can custom style them too it's like a very minimal touch that you're doing it's not this big styling you can just change that color um which is good current color yes this is the the og of of custom properties right super useful color mix uh I haven't used it yet and it's one that I actually this is on my video list it's not in my calendar yet it's in like my topic ideas but this is what I'm really excited about because it opens up mixing two different colors together which can seem like why would you want to do that it's been something it's been in preprocesses for a long time now but it's coming to css but not only you can choose like what color modes you're mixing them into which is interesting um but this is like if you need to make a shade you can just go like oh I'm adding 20 white to this hex code that I have and then see you get something it's like or a tint is that a tint that that would be a tint you're adding a little bit white you can add some black but you can also mix two colors just a whole bunch of useful things for this so um yeah super cool that's coming or it's sort of here it's in some browsers I don't know what the browser support is but I think it's actually pretty good um whatever I haven't used all of them I'll put that I've used these um I have a lot of content I want to make on colors because there's so much new good stuff coming um LCH is the one that I kept hearing is like a more human understandable than um the one we use now HSL took me a second there um then HSL because the problem with HSL is like you could take two colors that are at the same lightness value and one of them is super bright and the other one is actually pretty dark and it's just because of how our eyes perceive color whereas LCH it it's handles that in a much better way so if colors have the lightness is the first value so if you're keeping the lightness the same they're much more the perceived value of that lightness is much closer matched for me I've had so much trouble playing with it just because lightness is first instead of the last value and then it's chroma and hue my my brain just hasn't like absorbed the mental way of working with it yet because I haven't used it enough but definitely um as browser support increases for me I think LCH will replace my HSL but there's other reasons there's also the okay ones and something I also need to research a little bit more but I have played around with them relative colors I know what it is as well but I haven't done anything with them where it's kind of cool because you can say I have this color and then even though this is a hex color I can say I want the HSL value like I'm going to I'm going to transform that using HSL so it's going to break it down into HSL effectively so I'm saying this was my color is this one my hue is going to stay the same my saturation is going to stay the same but I'm going to do a calc on the lightness and multiply it by 1.2 or I could do a change my hue so same thing I could change my hue by like times 1.1 or whatever and so you can make like shade like play around with your hues or your saturations or your and of course this is doing it you know we can go back here and do it with LCH instead or one of the other newer color models and everything so yeah really one of those things that I'm like that's really cool that we can do that with and I'm just looking forward to seeing and I'm sure there's already demos out there of the like awesome stuff you can actually do with it from people smarter than me that come up with all the creative ways to use it but yeah that one's a good one interpolation color spaces oh yeah okay so again I haven't used this but you're just saying I'm doing a linear gradient that's this HSL value it's going to red but because gradients if you do it in different color spaces they actually like a gradient again because of how the color values work in everything and how the color space works for going in between values and how the math works and it's all the stuff with colors that's weird but like the same gradient in five different color spaces will look completely different in each one the middle ranges the two ends should be the same more or less but the middle values like some will get washed out to white some will go to like a muddy brown depending on the colors used as well so here we can say well this is I have an HSL value and red or like a hex code here I want to make a gradient between those and that gradient should be using the okay lab to do the calculation on how to do it so it's as if it's going to treat these as okay lab and do the whole gradient using that at least that's my understanding of it any of these ones that I haven't used take them with a grain of salt but that's what my understanding of it is but if there's if I'm wrong on any of this stuff please let me know in the comments or if there's some that I haven't got right just let me know whatever it is corrections clarifications anything yeah put those in the comments below scroll snap I've definitely used and played with it's snap helps with scroll snapping right so if you go to scroll it would like stop at a very specific place um I did a video on the netflix style thing using that and some stuff with adam argrile too and probably some other stuff um over scroll behavior you know when you're scrolling and you have like say a a window that has not a window like a div let's as an example that can scroll if you have an overflow with the scroll on it if you get to the bottom of that and you keep scrolling I'm doing this like it's a touch device but you say you have your mouse wheel in there and you get to the end the default behavior once it gets to the end if you're scrolling we'll start scrolling like the parent which is the next scroll bar which is usually the like the browser window and often you don't want that to happen so when you're scrolling in that like limited view box or you know the smell dave or whatever and you get to the bottom of that and you keep scrolling it goes to the next out scroll bar we'll just start scrolling so it's usually your viewport so then your whole window starts to scroll and so you can use over scroll behavior and contain it so when you're scrolling and you know it gets to the bottom of that as long as the mouse is on top of that or whenever your pointer device is on top of that element it won't scroll the viewport you're you're limiting over scroll behavior basically so uh yeah that's a useful one that probably isn't useful enough um touch actions is dealing with with touch actions I think it's pretty straightforward scroll behavior smooth and auto uh you know if you have anchor links on a page you click either jumps or it scrolls there um definitely I've done videos on that one I haven't done a video actually on um touch action I probably should um scroll bar gutter uh this is one I haven't done a bit did I do a video on it I'm not even sure but uh I remember being really excited about this and then not as happy um as recently actually I think Kyle recently did a short on this but basically what it is is do you want the browser to account for the space that the scroll bar would take up if one is visible even if there isn't one and so that could just mean like you're preventing jumps and content or if you have multiple things that have scrollers on them that there's consistency between them uh with their spacing and everything um so yeah that can be it can be kind of useful um but it just if you have backgrounds and stuff it doesn't go into the space or I think I don't remember exactly I just remember being like oh it's really cool oh there's some limitations that make it so it doesn't quite work the way I was hoping it would work um but yeah it's it's definitely still something you could definitely use it just wasn't as amazing as I was hoping it would be um font display here with font we're into typography now so font face stuff and then you have the font display fallback I have a video that talks a bit about that I think do they not maybe I didn't do one on font display I think I included font display when I talked about font face though but it's possible I didn't I have to think about that a little bit um line clamp I did do a video on that one this is the annoying one and actually the spec now is for this is like how we need to make it work now basically it's if you have like say you have a card and you want to show you're bringing in dynamic content to your card and you only want to show two lines and then there's like an ellipsis after and you know maybe on some cards there is only two lines another there's 10 that actually come in you want to crop it and include the ellipsis but not like one line you want to make sure it's after two lines or after three lines of text only there is a line clamp property that is part of the spec that nobody currently supports but all the browsers support this version so you have to do these four lines of code to what will eventually hopefully eventually be one but yeah it could be useful variable fonts I've done a video on them they're great um you need one font you get different weights different variables as the name implies so you can have like your italics you can have crazy weird stuff you can there's lots of really cool stuff with it and ranges of weights and you can have like a 206 rule even here 375 for the weight and other stuff so definitely super useful super cool font palette I've played with it it's really cool but you need to find a font that has like a color font and there is a google fonts has started adding more but just in general there's a very limited amount of good color fonts out there and the font palette is what you would use to control the colors so the colored font might you may be going ahead and set a color on any font but a colored font will have multiple colors within the font itself so maybe it looks bezeled or maybe there's like weird it's for more fun display type fonts usually and then so you can set each individual color using the override colors here and yeah you define your font palette and then how you want to set it up with those override colors and then you just use it wherever you want so you can have like 10 different palettes that you're choosing in between depending on circumstances maybe you just have one palette whatever it is again that's more definitely a much more niche thing but could be super useful in the right situation just did videos on this I did a short and a video so you're just balancing out text it only works on text I think it's maximum of four lines maybe it's even three I think it's four though and mostly to me this is useful headlines so just there's no examples on here but if you have like text that's going and then one word sitting at the end and you just want that to be a bit more balanced out text drop balance works it's pretty cool browser support it's not great but that's fine prefers reduced motion I've used it have videos on it or at least where I use them I don't think I've done a video dedicated to prefers reduced motion though but yeah it's just it does the person prefer or not you know do they prefer reduced motion in their system settings if not you can reduce the animations it is prefers reduced motion not no motion so it doesn't mean that you have to get rid of every single transition in animation it just means that ideally there's less of them and ideally you're also doing it you don't have to but the easy hold easier way it's a little bit like mobile first where you use your media query to add in complexity you can do the same thing with prefers reduced motion so you prefers reduced motion no preference and then you're add in your animations transitions that could be problematic for people that would prefer not to see them for a variety of different reasons they use this a lot for a scholar scheme dark you can set up your dark mode first reduced data I haven't talked about a lot but it's nice and easy so maybe you have a font that's loading in but if somebody's on their phone that's on like a reduced data mode then and as long as the phone or the device that the person's on is saying they're on reduced data mode I think even on laptops you can set them up so you're on like a metered connection and stuff it is the device that decides when this would be kicking in as far as I understand maybe there's browser settings now I'm not sure but you can say I'm loading in the heavy font that you're using you could just change your font family to system UI and there's some other stuff that you could do you know maybe you're setting background colors instead of background images and other stuff so it's a good one to be able to use color scheme this is like your default dark mode I use it a lot so I won't talk about it too much but color scheme light dark just means I have a late and dark color scheme that I want to use and so pick based on the user's system preference and it's going to set the user agent styles to either a light or dark based on the user's preference so if you are going to do a dark mode it just sort of puts the user agent styles in the dark mode which can be useful you can also omit light and just say dark if you're only doing a dark theme and again just to sort of set the stage in the right direction prefers contrast is you know these are all like accessibility related ones as as the page here that we're on as sort of indicates so if the user has indicated in their system preferences that they prefer high contrast you can have a higher contrast style just like you could have a dark style a dark theme fourth colors I have talked about in videos force colors is instead of being a high contrast site like here where the user's requesting high contrast force colors is when in the system settings and windows anyway there's a way of setting like this high contrast mode like super high contrast mode that completely takes away a lot of colors and actually a border of two pixels green solid the green wouldn't even work um it the color your color choices go out the window there's a very limited set of values you can actually use for colors um pretty sure anyway that you can't specify green I could be wrong though on that I again once again correct me in the comments if I'm wrong but I'm pretty sure green there wouldn't work um you can use again there's like maybe you can use your canvas color your the base text color line color maybe um or interact I don't know there's like there's a set limited color and then depending on the theme the person's picked it's going to use one of those colors and I don't think you can specify specific ones but I could be a little bit wrong there focus visible is handy this is sort of the new default in browsers now so when you focus with the keyboard focus but you also gain focus on stuff like when I click on these they're gaining focus but see how when I click and then I leave like um this doesn't stay highlighted let's say I tab through here I'm actually curious okay so if I tab on that there's like a lighter see that color that's like on there um and if I use my arrows I can move it be see how it's like there's like two rings and if I tab off that outside ring goes away and if I click on it it's also doing that so it's not using focus visible this is using focus if it was focus visible which is really good on buttons because when you click on a button that you don't want to go somewhere but like it would gain that focus ring which is kind of annoying because you're you know you just don't want it to be the focus ring but if they're tabbed onto it it makes sense to have it um so it just depends on how the person's interacting with it the browser decides which one is appropriate to show when um yeah on a lot of things focus visible makes a lot of sense which is why on I think most stuff it's the browser default now variables you know that I've used variables I have mini series on them I've been talking about them for years uh so you know custom properties or CSS variables right there at supports it's a way to check for support you probably wouldn't be looking for table cell and display list item um but if you're want to use a newer feature you can do an at supports and if the browser supports the feature that you're looking at then you can write specific code and outside it so you do like a certain layout and then have if supports and have like a media query type thing in here so like um container name or whatever it is and then do your container query in there so the other two browsers are using the other one and then if it does support container queries it would use your container query layout instead um type of thing comparison functions use them all the time um and I still get comments about this in my videos if you're using a min max or clamp you do not need to use a calc inside of those so you can do like a 50 vw plus to ram it's going to work or times whatever math works inside of these without having to use a calc so little tip there uh at property I've used it played with it looking forward to browser support getting better because it's really cool um it lets you uh I'm gonna like declare a custom register a custom property with a bit more information because custom properties can be anything whatsoever and now we're not getting anything whatsoever we're getting like uh we're telling it is it a color is it a number is it a string what is it and that can be really useful because some of these things can be animated and it can let you animate your custom properties so you can have a gradient that's animated because you're not animating the background image you're animating the custom property values only um and it opens up some really cool doors that's like a really basic look at it but it opens up some really awesome doors um and yeah once browser support hits for that it's gonna be great and it is supported in safari now it's only firefox that it isn't as far as I know maybe I don't know I should look I haven't looked into that in a while uh marker I've used it you can change your bullet points to whatever the marker is if you have list items um you can also change the colors that could be good if you just want to change the color of like the numbered list but not the like the actual content just the one two three four but the rest of the text stays the other color um it's very limited what you can style on that though has just like container queries much earlier on super super excited for um I've done videos on it there's lots of cool content it's a complete game changer uh and opens up things that were impossible to do before where we can say the parent is styled based on what the children are so it's basically a parent selector super cool uh where it's just like is but there's no specificity in it super useful and actually I would skip over this but on my is and where video a lot of people say that is and by contrast where is basically the same as using the ampersand in um scss or just like that type of thing within um preprocessors and it's not the same um if you do it the other way around then what we're doing here it would be so say I did p and then like the like I'm looking for I don't know paragraphs headings and other things that are all inside my header you could probably use your ampersand in that sort of way nearing this way around or maybe I'm just missing it and I'm like I don't see how you do this with an ampersand uh and of course this is different because it's where so there's no specificity on this part of the selector um but yeah I just you can do a lot more with is and with where than you would be able to with a with an ampersand um it's not like nesting and nesting is coming to CSS we'll probably have something coming up soon I'm guessing there it is I see it um nesting is very different from using is and where and you can do more stuff with this and you can use nesting with these um so they're not quite the same cascade layers um I haven't gotten like full in on using them I just haven't had the need but um there you can organize things by specificity I could definitely see their usefulness um I'm curious if you use cascade layers like in production or like personal projects and stuff please leave a comment down below and let me know about that too shadow dom is a place I'm not super familiar with um but I have uh I did a video with uh Dave Rupert where we did take a look at them and I played around with it a bit after so I have used them um but I'm like super new but I'm not going to try and explain them um but I have used them so I get that there uh trigger not trigonomic functions again I've used them I did a video on them to sort of show them a lot of smarter people who know why these would be useful uh can can talk a lot more about them but basically we have trigonomic functions in CSS now and they can be useful um especially if you need to make a circle of elements and I don't know what else you'd use it for that's what I did in my video um and it seems like the easiest um and it seems like the easiest thing to get but anyway I'm sure there's other stuff um I don't know if I can say I use this or not because I haven't I'm going to say no because I haven't used it in vanilla CSS yet um but I've definitely I know what it is I've used it in sass for years um but I haven't used it in vanilla um I did play with it also with post CSS but again it's a post processor so like I haven't used it in a browser supporting it yet even though chrome supports it now question mark um so definitely and I actually I think it's chrome and safari support it so a video will be coming on nesting soon uh image set um this is sort of like your source set for background for actual images but it's coming to CSS you can you know if you have different sized images based on like how you know the media queries and other stuff how big the screen was the resolution the browser will pick the appropriate one on its own um so you're not loading in like this massive image that doesn't have to be loaded in um I meant to do a video on it but the browser support was terrible but I played around with it a lot I don't know if the browser support is increased and I should I'm going to add that to my reading list just because if I want to look into a browser support it's better now because I'll do a video on it if it actually is better this is what I was thinking of before okay I'm going to put I used it because I wrote an article on this the thing at the the beginning the view box this is what I was talking about this is the x y w h is defining the view box I knew there was something similar so yeah this one uh again I don't think it's supported by any browsers yet I could be wrong but basically you can say your image it's the image function instead of the url function for background images it all just came flooding back to me and that's why the other one looked unfamiliar but was a familiar concept and there's more you can do with this look for my video again I'll link it down below but at the time no browser supported it but basically it opens up a whole bunch of cool stuff we can do with background images using the image function instead of using the url function individual transform properties I have used I've talked about them I recently put a quiz out and in the quiz people I said which one of these is not a valid property and the other one I included was skew because skew is a value that we can use if we do a transform just like translate rotate and scale but only translate rotate and scale are now their own properties and a few people replied to that quiz saying that they're properties but they're not they're values or value functions really but they're values we can use for transform and then they decided to take these three and also make them their own properties I've also talked about amet sheen who does a ton of stuff with animations and 3d stuff and all of that and he still recommends just avoiding these I am lazy sometimes so I use these because it's a little faster and an interesting thing in that CSS challenge we did I did a while back from amet is I found out you could transform rotate something and rotate function it and have both of them being applied which was an interesting way to solve a animation challenge thing which was kind of cool not something you'd probably want to do in production but it was pretty cool so this is where I'm going to stop because now we're getting into the world of CSS frameworks CSS and JS other tools CSS usage etc and I don't want to give away my opinions on any of this stuff because I think it would actually influence you guys in your own answers for some of these and maybe not hopefully not but I think it's possible that if I talk very highly about something or very badly about something you'd be like oh I went from I would think about using that too I'm not going to use it now and I don't want to influence anyone's opinions on any of the stuff that is in here so I'm going to continue this survey on my own but I would really encourage you if you didn't do it ahead of me to go through and answer it now if you hadn't heard of things before I talked about them during that entire section be honest about like your knowledge of it beforehand you know because maybe now you know of something you didn't know about before so don't use this video as your I know of so go ahead and take the survey the more people who answer this the better the bigger the sample is the more representative of it is of our you know our world in general so yeah please go and take the survey it's not run by me I'm not affiliated with it in any way at Sasha who puts in all the hard work and he has a other team of people who put in a lot of hard work to put this whole site together for this and the CSS the JS survey as well and by taking it you know it's just good to know where everyone's at it can let the browsers know what features people are interested in and what direction things should be going because as I said some of these I don't think are even supported currently by browsers you can leave comments leave other stuff along the way in these as well about your opinions on on different things so yeah go ahead and fill that out and once the results are in we'll take a look at those together as well and of course until next time don't forget to make your appointment on the internet just a little bit more awesome