Many websites don’t bother to fix this thing which significantly improves the UX when browsing websites on small screens (smartphones, etc.). Overflows cause the webpage to drift when attempting to scroll down, and it can be a frustrating experience (at least, for me, especially when I have to re-adjust because the initial size of the text is small because somewhere down the page there is a long string of monospace text or code piece in a <pre> tag).
Thanks a lot. One follow up tho if I may. How do you determine the markup and styling if the layout changes significantly from browser to desktop? Do you ship 2 different versions of the HTML and style them accordingly? My struggle is often about how to make the HTML and CSS so I don’t repeat anything if possible. One example is having a list of navigation links in HTML once should be enough and show correctly on desktop and mobile via CSS only. But that is how a lot of UI frameworks usually do it. They have 2 different navigation markup. One for mobile as a drawer and one for desktop as a navbar. Only one is active at a time. The navigation link list is usually defined as a JS object but I don’t feel like that’s the way to do it properly.
I see what you mean. Ignore learning from frameworks. They are bad. They are messy, chaotic, and they are not tailored for your website, they are generalized for any use case, so things are awkward, bloated, etc.
So, try to avoid duplicating things. The rule of thumb is: if you want to duplicate something, then something is not right. And your feelings about it are on point. I will show an example of how I do things below. What I also try to avoid is using JavaScript when the same exact thing is possible to achieve with pure HTML+CSS (think of cases when someone has JS off). CSS is powerful enough for you to be able to create a DOOM-like game.
Good news is, you don’t need JavaScript to create such a navbar. And many people still don’t know how to properly create navbars, e.g. they are using lists (ul,li) or might still use tables. SO, it all comes to your knowledge of CSS and how to “refer” to elements (e.g. your knowledge of “>” and “~”).
Suppose we have an HTML where I define a header with a navbar:
<header> <div class="logo"></div> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> </header>Notice how it does not use any lists, the links are not items–those are simply links, and I am also using semantically-correct tags (even though you can still use
div class="navbar"). Then, in CSS:header { display: flex; justify-content: space-between; } .logo { background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png"); width: 32px; height: 32px; background-size: 32px; } nav { display: flex; gap: 20px; } nav a { text-decoration: none; }I want you to also notice how I have this “logical progression” in how CSS reflects exactly the flow of HTML elements, to keep it clean and intuitive (sounds like something very obvious, but from my experience it’s still rare). This is me doing to for “desktop”, the next concern would be making it “mobile-friendly”. This is done using a “trick” where you add an invisible checkbox and make it look like a button, and once you click on it, it triggers the navbar. But I will post the full thing below, to not turn it into a full blown tutorial, I don’t know if there are character limits here.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } header { display: flex; justify-content: space-between; align-items: center; padding: 20px; } .logo { background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png"); width: 32px; height: 32px; background-size: 32px; } nav { display: flex; gap: 20px; } header input, header label { display: none; cursor: pointer; } @media only screen and (max-width:500px) { header { position: relative; } nav { display: none; position: absolute; top: 100%; right: 0; flex-direction: column; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); } nav a { padding: 20px; } header label { display: block; width: 20px; height: 20px; background-image: url("https://www.svgrepo.com/show/94793/menu-button-of-three-horizontal-lines.svg"); background-size: 20px; } #menu_toggle:checked ~ nav { display: flex; flex-direction: column; width: 100%; } } </style> </head> <body> <header> <div class="logo"></div> <input id="menu_toggle" type="checkbox"> <label for="menu_toggle"></label> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> </header> </body> </html>I don’t want to assume things you know or don’t know, but I want to still point out some things like how I start my CSS with resetting certain values, like margins and paddings, and also setting box-sizing. It’s an absolute must-have (believe me, back in a day I spent lots of hours trying to understand what is wrong when the reason was all because of box-sizing).
[Edit]: Also, one thing with positioning the nav menu is that in header you have to specify “relative”, and the menu (nav) should be “absolute”. That’s because the “absolute” is being set relative to the header, so the element’s properties are going to be relative to the header, i.e. if you do not set the “relative”, it will assume it’s relative to the body and navbar will appear at the bottom of the page. This is also one of the concepts that at first might be confusing and annoying, but once you get a grasp of it, you’ll be more confident with writing vanilla CSS and not touching frameworks ever again.
Anyways, try not to overthink and always keep in mind that things should not be complicated and the best way to do something is the simplest way.
Whoa. Thanks a lot for the in depth explanation! I really appreciate it. I do come from a time when HTML didn’t even have a semantic tag and CSS was still having difficulty of styling combo box across browser. Good ol times of PHP “SSR” as the modern development calls it. I moved to more backend development stuff with occasional hardware/firmware so that’s why I am so rusty when it comes to web front end stuff. However, I am now opening my own company and I want to understand the technology that I will actually use even if I will hand it off to a front end person eventually.
This is what’s sad about the current situation in the industry: some things are being preferred not because it’s better for quality and performance, but to reduce the friction in learning. So, if you’re using a framework that everyone does, you’d expect your next hire/whoever is going to use it next to be familiar with it.
I don’t want to give you a bad advice telling you to go against whatever the industry agreed upon. I am personally doing things the way I think is the best, without caring who is going to use it next, because usually there’s no next. It’s either my stuff or work I do for someone else who just wants things to work.
Yeah, I remember when semantics were not a thing, and people would do everything using tables, and when the Grid was introduced, I was a bit skeptical because I thought, while it is useful, it might not be compatible with most browsers used at the time. Today, though? Most of the people are on browsers that support flexbox, Grid, semantics (which is also important for accessibility), etc.