The problems with viewport units

hi there my front end friends as you may or may not know I have a Discord Community where people can ask for help with problems that they're running into and there's one mistake that people seem to make over and over and over again which is using viewport units for all sorts of things and most of the time they're a terrible choice so let's take a look at some of the problems that people run into with them and better solutions for what they're trying to do so one of the first things that I see surprisingly often is this right here which is about putting viewport units on HTML or instead of this sometimes it's the body as well and especially 100 viewport width it's not exactly what you might think it is and it also depends on the operating system and the browser you're using so let's jump into vs code and see why this is a problem to begin with and it's mostly around this even though the height 100 BH can also cause a couple of problems and we're going to look at issues and how we can solve them here and the issue with this one to start with we jump over to the browser is we get horizontal scrolling and you might not get this if you're on a browser that has a loading scroll bar but I'm on Windows which in Chrome at least and in general doesn't have it so if I have scrolling content and I have to be able to scroll like that that will give me this because VW does not take into account the space underneath the scroll bar so your HTML or your body or wherever you're putting this on ends up being wider than the actual viewport since we have that space there and that is extremely annoying but it's also not really serving a purpose the solution here is to not do anything at all because the HTML is already taking up the full viewport anyway or you see the same thing with your body same thing there's no reason to set the viewport at 100 VW now there are some hacks and some interesting things that you can actually do with 100 VW but for the most part I just wouldn't ever declare it because it's very rare that you'd actually need something like that and it's one of those cases that maybe you run into an edge case here or there where it can be useful but for the most part you're probably better off just completely avoiding it now you might be saying well I need a height 100 BH or a Min height 100 hundred BH and that sort of comes in with this question here that was asking about the webkit fill available which was sort of a solution to the 100 VH because the height of 100 VH can actually cause a lot of problems so I've added some CSS here and we're going to go back to the HTML in a second to see what it's doing but the main thing is we have this height 100 VH on the header and that is this header right here again height 100 BH should be take up the entire viewport and then inside of that header we have this div of with a classic bottom on it and this has some really important information in it that we want to make sure is visible but it's always right at the bottom of the viewport coming back here I just did a position absolute on there which is why we have a position relative of this and then we've just I've added some styling on it to make sure that it shows up there so if we jump back to our page you can see I have this header area that's taking up the entire viewport and then down here at the bottom that very important thing that must be stuck to the bottom for some reason and when I scroll down it's there but it's perfect it just lines up with the bottom of the page exactly where I want it to be and then it just you know everything works because my header area has that height of 100bh and even if we reduce that the height is always staying at 100 BH so we always have 100 of the viewport height it's exactly what you want it to be except if you go into Mobile so as you can see right here we have the mobile view of this and that red bar that has that really important information in it you can't actually see it and that's because of the address bar at the top of chrome that I have right here on my phone and 100 VH doesn't take into account those viewport elements because as you move up the viewport element actually moves off the screen and so the 100 viewport height is pretending that that the address bar is not actually there because at one point the address bar can move away and so when the page first loads the address bar is there because we haven't started scrolling yet and this is the same on all browsers whether the address bar is at the top or the bottom we run into problems like this at times now one potential fix for that is to use dvh which is dynamic viewport height so this will adapt if that UI address bar is there or other elements are there it's going to take up the 100 space but if I scroll and that bar disappears it's going to readjust that to take up the the new space because it's a dynamic viewport height this could cause problems along the way though because it does get a little bit janky you when you stop scrolling when it readjusts everything so the alternative for this is svh now what svh is doing is it's a small viewport height and what that means is it's assuming those UI elements like our address bar are always in view so it's always going to be a little bit smaller so once we scroll and that thing disappears we won't be at 100 viewport height anymore but in a way does that really matter because we've moved off from there anyway so you can't really tell that depends on the use case and exactly what you need to do but those are a couple of options that we do have now jumping back to the code to actually take a look at doing this so as I said we had the 100 VH that we don't like so the other option is dvh which is the dynamic viewport height or svh and one thing that's interesting with these is if I have svh and we look at the desktop version of it nothing is going to be different because there are no UI elements that can come in on a desktop view so it's not going to impact things on this level which might be exactly what we need but there are issues with this as well which is browser support will be being very good isn't quite there yet so one option is to actually have both and have the VH first and then the small the dynamic viewport height second if the browser understands this one it will overwrite that and won't use it but if it doesn't understand the svh or a dvh here it's just going to go and use this as the fallback which maybe not ideal but it's a small percentage of browsers that will only continue to get smaller as time goes on and browser support increases for these new viewport units now we have Dynamic viewport height and the small viewport height there is also the LVH which is the large viewport height which just assumes like that's sort of like what we started with that's always going to take up all the available space and just before you start wondering about the first option with the scroll bar issue with VW if we could use something like Dynamic viewport width or small viewport width to deal with that sadly it does not work I've already tested it out now there is another option here if you do not like this idea and that's to use the height as a percentage the downside of that is for something to have a height as a percentage it has to be based on the height of something else so the parent has to have a height so in this case my body would have to have a defined height and for this to have a defined height you'd probably want 100 you'd also need your HTML to have a defined height so that's why you often see things that have your HTML comma body height 100 and then because the body has the height hundred percent I could actually come on here and put a Min height 100 on the header or a height 100 they would both work now in general this isn't the end of the world the problem with this is the more you get nested the more issues you know the more things you're actually declaring Heights on to actually get it to work which is just really annoying to do um and I've seen some issues actually crop up with double scroll bars even on one of my own projects once because I had some things going on and some other little issues that can potentially come up because of this not saying it it's not the right choice it can be a very good way to go it's been used for a long time but just I think moving forward things like svh might be the optimal solution for a lot of the problems that have been caused so far now we're going to jump over to codepen for this next example and this one is linked down in the description if you want to play for play around with it and what I've done with this is I've basically set viewport units up for everything and I see this all the time too to create these fluid types of layouts that just the layout just flows with everything else so when you first discover this it can feel magical but it's not magical it's very problematic and we're going to go through some of the different issues that are in here that I set up so one of them is things like a font size set in just viewport units this is a very bad practice that I see down a lot and just to show why one of the reasons is as you can see my paragraph text here is getting like super super small like that becomes unreadable if you're on a phone it could be really really small and at one point things get like ridiculously large and just don't look very good either so everything is fluid but it's you're hitting like these points where it just doesn't really work even though maybe on your screen you're on a laptop the range that you're working in is it looks fine but when you start pushing things more to different extremes it just gets worse and worse along the way and there's another big problem with this and we're just going to switch this over to a live view for a second and that problem is here's where everything is gigantic again but if I zoom in or out on the page notice that nothing is changing you can see that little Zoom thing is zooming in and zooming out but there is nothing changing on the layout and that's because everything here is set with viewport units which is an exaggeration but websites are supposed to be able to zoom in and zoom out but you know I'm sure you've seen people that have font sizes on their phones that are really big maybe your parents or grandparents and they've said like they've changed the default settings on their phone to increase the font sizes people will do that on their OS level or their browser level as well we want to respect those things or you just end up on a website where the font size is too small and you want to zoom in on it if you have font sizes set with VW that does nothing because as you zoom in the viewport width isn't actually changing we're just trying to zoom in on the things that are on the page and if everything is set with viewport units we're stuck in this world where for some reason it's scrolling up and down once I've scrolled a little bit but nothing's actually changing size so so that is a big issue and we'll reset my zoom and so while it feels very fluid it causes a lot more problems than it's actually worth and for most of these things it's not really needed right like I don't need two columns to exist on a phone for something like that and if you do want to use viewport units for text instead of just using a viewport unit what I'd strongly encourage to do is use a clamp and there's even some issues around clamp as well but we could set a minimum say three REM I could set a maximum of say six RAM and then in the middle I have to provide a value here and we could say something like five viewport width often I'll also encourage to say plus one REM and you do not need to use a calc within a clamp the map is just available to us and what that's doing is it's setting a minimum and a maximum so as we get smaller at one point it will never get smaller as we get bigger at one point my six Ram is pretty big let's jump over to the live view again but now we can see as I'm zooming out where I'm zooming in things are actually changing sizes because the REM unit is being changed as I do that for that one thing not for everything but it's an improvement already and of course we'd want to go through all the different text on this and make that available to be able to be zoomed in and out as well and even for things like our margins it could be really cool to use viewport units to set them but again putting them within a clamp to sort of set minimum and maximum and have a bit more constraint on our layouts can really go a long way for here not keeping this as some fluid element that stays like that but maybe we change the font sizes here to clamps so now I get something that's a little bit more like the font sizes are changing but it's not as drastic and they're getting maximum there's like a maximum and minimum value that are coming into these now that I've set those over to clamp and over here well it's great to have that like fixed thing that's two columns it really isn't the best thing in the world in my opinion so for something like that it's probably best if we actually change things within a media query so if I really want two columns for this when we're at larger screen sizes no problem at all we have a lot of room for our text but what we can do is use the media query here where we're only setting up columns when we're on a larger screen size so with the smaller ones the items stack and also before I had a gap of 5vw which might have been great for the limited area I'm testing things on but if someone were on a really big screen that could be a huge space between the items so maybe we could use a clamp or a Min function where it means choose the smaller of the two values so as long as 5vw is smaller it's going to keep on using that 5vw but if you're on a really large screen and 5vw is bigger than 2 RAM well it means it's going to stop it from growing at 2 rem or three Ram or whatever you want your biggest size to be and a lot of the time when we end up using viewport units for is to help with that fluidity that I was sort of saying was a bad idea right now because it just seems like this magical nice trick that we want to use but in reality a lot of the time there's better ways of approaching things and a lot of the time I see people using viewport units all over the place like this is because they're having in trouble making something responsive and this sort of feels like that easy way to do it because we're reacting to the viewport but there's much simpler approaches to making responsive layouts and if making responsive layouts is something that you really do find a struggle I do have a completely free course called conquering responsive layouts it's all about getting into the mindset and understanding and working with the browser as much as possible to be able to make your layouts responsive without much of a struggle if you're interested in that there is a link just down below and with that I would really like to thank my enablers of awesome Jan Johnny Michael 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 corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 355,958

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, viewport units, vw, vh, dvh, svh, lvh, responsive, responsive css, dynamic viewport, css units, the problem with viewport units, css viewport units, css vw, responsive website, web development, responsive design, viewport units css

Id: veEqYQlfNx8

Length: 13min 23sec (803 seconds)

Published: Thu Feb 16 2023