Quickfire CSS Tips

Key Takeaways

over on my Discord I have a section that is dedicated to suggestions for content to put out here on YouTube and I often go there to get inspiration for different topics that I'll cover Sometimes some of the things that get posted there are either a little bit niche in what they're asking for or they're just a little bit too small to really make a dedicated video about so I thought it'd be fun to do some quick hit topics that are just sort of all over the place but just about CSS and and some of the cool things we can do with it and maybe they'll even answer some questions that you've come up along the way as well so we're going to dive right into this first one which is asking about image set and looking at what that is and one of the reasons I haven't covered image set yet is just the browser support isn't quite there yet so we're going to be using Firefox to jump into it and this is a topic I've wanted to cover but I'm waiting for Chrome's browser support to get better which they're not really hinting at yet but the idea with using image set is right now um with our images we're either setting a JPEG or you could use a webp or you could use an avif or whatever but the we have like a picture element in HTML where you can right with the picture you can set different sources and that's what image set actually allows us to do so what we can do is just a background image like normal but then here what you do is you'd have your image set and this is supported actually and let's just take this out for a second um so you get your image set and if this if you wanted to play with this in Chrome you can already so it's webkit image set like that and then so you just need a prefixed and non-prefixed version but even this version of it with chrome it supports different resolutions of an image so if you have like a low res medium or as high res that you want to bring in you could do that in Chrome right now as long as you're using webkit but if you want to use different image formats that's not yet supported in Chrome and that's what we're going to look at now where I have that image and so with that in here we're missing one more thing where we actually have to tell it what it is so this is exactly if you're familiar with the picture element um where I have to do type and then inside the type just like if we were doing a picture element you'd have your image and then here you'd put the type so in this case it is a and it's not working now just because I have too many closing parentheses so that should fix that and there we go way my background image has come in and it's working fine and but you can see that's just working with my jpeg right now but because we have an image set we could bring in multiple different ones here so just really fast we have that and actually let's just copy and paste this and now you can see my background image is still coming in here but I've set it up for an avid a webp or a JPEG but as I mentioned this will work in I believe Safari definitely Firefox because we're inside Firefox now and if you do want to have this as like a progressive enhancement let's say one option would be to do the background image here that's only looking at your JPEG and then having it the second time right here which is using the image set so if the browser doesn't recognize this one it's going to use that but if it does recognize this it's going to use this instead and then it can get a higher performing you know get a better compressed image as a quick example there of how I guess in that case you could drop the jpeg maybe from here whatever you want but basically just like image works and if you don't know about the image I'll put a link to it a video Down Below on that because it's a nice useful one but we're sort of getting there with background sizes and as I said we can do it with resolutions too so you could have like your 1X your 2X and your 3x so you can give DPI and other information there and I'll put a link to the MDM article that covers uh image set down below if you're curious to learn a little bit more about it all right this next question was again looking at something a bit specific but about position absolute that I think is worth looking at and I've covered position relative and absolute in a lot more detail in other videos so if you'd like something a bit more comprehensive once again down below but basically they're asking about this black box overflowing its parent and so like this specific thing here where we have this example with position up so let's let's start by turning off this position absolute right here and you can see um and even we have this Orange let's make this like 20 pixels just to make it more obvious what we're working with and so right now we have the black box that's inside of this Orange Box and there's a display Flex probably on here which is causing the stretch to go there but when we do a position absolute on this example which is the black box everything shrinks down and it overflows out the parent and this just has to do with how position absolute Works where things are pulled out of the flow so normally when we have when we don't have position absolute on something it just lives within that space But as soon as we do a position absolute it gets pulled out of the flow so it's still positioned in the same place because we're not using something like top left right anything like that so whenever we do a position absolute that item stays exactly where it would be on the Page by default but it's pulled out of the flow meaning nothing else around it actually sees it anymore and you know the parent just shrinks down as if it's not actually there this is true even though I believe we or it's here and we have a class or this this div has a position of relative right here so the position relative when we use that it's less it's not about like I can see it's not about the parent seeing the child it's about the child seeing the parent or not the parent but seeing the nearest ancestor that actually has a position on it um we should say so in this case it's a few levels outside because we have this div then this div and then it's finally here uh so let's just say and if I remove this position relative right now nothing would actually change because we're not using top bottom left or right uh or actually no that's not true it did change I didn't think of that uh in this case it did change because we have this width 100 percent so the width 100 is looking at the items containing block and so it looks at wherever the nearest containing block is which would be the nearest thing that has a size on it or a position on it I should say not a size and in this case it's the viewport so it's actually 100 width of the viewport which is kind of awkward so let's put that position relative back on here so again when we have that positioning it's about what element is this referencing when we're doing things like with things like height if they're percentages or if we're coming in and saying something like left of I don't know negative 50 pixels just to throw a number on there it's going to move negative 50 pixels left based on the position of this div if I were to take this off now it's doesn't have anything else so it's going to be the viewport and it would cause some overflow going that way you can see it's pushed over a little bit right here so this is where understanding this idea of containing blocks can be really important and if this is if you do struggle with positioning I have a video that deep Dives can painting blocks and some of the weird things that can actually create new containing blocks whether you're dealing a position fixed or absolute so I'll link to that one down below as well all right this next question was a bit more of a suggestion to look at CSS Houdini's at property Rule and if you don't know about CSS Houdini it's an API that exposes parts of the CSS engine and gives us some extra Powers this is a video I've been waiting to talk about in a lot of detail but once again browser support is not fantastic it's still an experimental feature so I won't do it in depth until browser Sports better but just really fast on why it's exciting we'll look at it right now basically one of the simple ways or one of the ones I always come to is if we wanted to do a background or a gradient like this that moved the way we sort of have to do it is by making a bigger gradient that has a big size and you're actually changing the background position when you hover or when you do other stuff like that and it's a little bit of a hack it works fine but you're you're not actually changing the colors of the gradient because we can't this is actually a background image right when we have a gradient and background image is not an animatable property so you can switch between two but you can never transition even if you're using colors in here and that's where app property comes in where it allows us to use custom properties but to be able to do a little bit more with them so here I've set up two different colors uh using the app property Rule and if you're familiar with custom properties the naming of things is still the same you do your double hyphen and your name but we're not doing this in the root or anywhere else we're just doing this as an app property Rule and then we can Define it we have to give it a syntax and this is where the big departure from regular custom properties comes where with regular custom properties the value could literally be anything it can be a string it can be a number it can be a color it can be you could just put whatever you want and as far as CSS is considered it's valid but it doesn't know what that is and that often limits how they can actually be used in the sense of Animation or other things that could potentially come up so we have to say the syntax it could be a number it could be a percentage it can be a string there's a lot of different options that you can put for the syntax the inherits can either be true or false so normally custom properties do inherit but you can set it to false if you don't want it to inherit or put it to true it's up to you and then the initial value and then you just put whatever you actually want the value to be and one thing that's very important with this is you do need all three of these for the custom property to work this way so make sure you have all three of them I've gotten caught in the past and then we just need to come down here and set them up just like you would with your custom properties in a background gradient and of course then we can change how this is working you will notice it's not working here though nothing has showing up and that's because we're in Firefox now so let's jump on over to Chrome and we start in Firefox because what I was doing there wasn't supported in Chrome properly so here we have my gradient set up uh we can actually see it nothing has changed it's the exact same CSS but the the gradient is actually showing up so what we can do now and this is the fun part um is we can do a transition on our custom properties that are there so now what we can do is I can come down here and redefine say my color one is going to be red now and let's do my color two and let's you know we don't have to use keywords we can do anything we want here so let's do a hex code of 0 f 0 and let's see if this works actually at first it won't transition we're just going to get this happening uh if we do want it and that green is really overpowering that eh there should be some red on that type anyway um oh my background size is at 200. that should fix everything there we go ah much better now we want that to transition so what's interesting here is you can do your transition of just the custom property so color color one is going to be say 500 milliseconds and we can even do color two of I don't know 1500 milliseconds just because why not and then we get the transition of the two colors there on the gradient we don't have to do any weird hacks or moving and you you can do this with numbers or percentages even as color stops you could do this for all sorts of different stuff with gradients and of course there's other use cases that this would be useful for as well but this is just one of the ways that I I think it's been great because I'm just sick of having to animate background position but for now we can't really use it but definitely worth being excited for for when we do have it and the very last question is this one saying suggesting a content on tailwind and I kept this as a quick hit just at the end because I do get asked a lot about tailwind and so I thought that I'd at least mention it in a video to get more people informed on my position of it of my my tldr is uh that I I see why people like it but it's really not for me I like authoring CSS and writing it like this I also find that debugging it becomes a bit of a nightmare you need to know CSS to be able to use Tailwind anyway but people use it as a bit of a crutch and they get stuck and just because they're not super familiar with CSS so some of the problems I see coming up that I'm run into are people asking in the Discord server they're looking for help that are using it again debugging it becomes a little bit harder than it has to be because you're basically looking at inline Styles but I could see why how you could throw together a really fast site and just work really quickly and not have to worry about CSS which is you know if you're focused on other stuff and you need that to come together quickly I get why people like it but definitely for me I like authoring my own having fun with it and experimenting with new features and playing around with stuff and and just yeah that's that's sort of my my stance on on Tailwind so if it is your jam and keep on jamming with it nothing wrong with that but on my channel here there won't be any Tailwind content uh so yeah don't don't hold your breath for that and with that if you do have any content suggestions and you'd like to let me know about them if you just want to hang out with other developers front end back end all ranges of experience or you have questions that you'd like to ask and all of that there is the Discord server that you can join it's a lot of fun a lot of amazing people there so I spend as much time in there as I can which hasn't been a lot lately but I do poke my head around there so if you're looking for that type of community definitely come and check it out and with that I'd really like to thank my enablers of awesome over on patreon Jan Johnny Michael Mr Dave Patrick Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your own the internet just a little bit more awesome