Professional CSS: Build a Website from Scratch

Fallback for No JavaScript

Kevin Powell

Kevin Powell

Kevin Powell Media Inc.
Professional CSS: Build a Website from Scratch

Check out a free preview of the full Professional CSS: Build a Website from Scratch course

The "Fallback for No JavaScript" Lesson is part of the full, Professional CSS: Build a Website from Scratch course featured in this preview video. Here's what you'd learn in this lesson:

Kevin discusses the importance of considering users who do not have JavaScript enabled when building a website. He suggests adding a simple fallback solution by hiding certain elements and using JavaScript to enable them when it is available.

Preview
Close

Transcript from the "Fallback for No JavaScript" Lesson

[00:00:00]
>> Kevin Powell: Now one thing that often surprises people, is that sometimes users don't have JavaScript enabled. Sometimes it's through their own choice and sometimes it's not. And we have a decision that we have to make in terms of how we're gonna treat it if somebody doesn't have JavaScript running.

[00:00:14]
There's a number of reasons why they don't. The general consensus is about 1% of users, don't have JavaScript. When they visit your site, it could be a slow connection and if a connection is really slow on a mobile network, the browser can decide on its own just not to bother.

[00:00:30]
It could be they've disabled it. There's all sorts of different reasons it happens, it does happen from time to time. Sometimes the situations are it's really hard to come up with an alternative, like with our mobile navigation as an example. Luckily there, if they're on a hopefully on a larger screen, at least they can still access the navigation properly.

[00:00:50]
But in situations like that, it can just be, it is what it is. I don't like really saying that. Maybe we could come up with a solution to solve in those situations. You could actually do it with what we're doing now as well. But with our filter, there's actually a really easy way that we could also deal with it.

[00:01:09]
And you could build fallbacks in if you really wanted to keep your filtering as well. But for me, this is one of those like super easy progressive enhancements, where we could just hide the filters. And then, use JavaScript to enable them. The other one though is using the CSS-only fallback.

[00:01:25]
I'm not gonna come in, but if you wanted to, we could add a no JS class to your body. And then, if that's on there, we're using the CSS filtering option that I talked about earlier. And then, if JavaScript's enabled, then we get the JavaScript version of it.

[00:01:40]
The advantage with the JavaScript version is we do have that message that's gonna be popping up, if none of the filters match. And the other advantages we're gonna see when we start adding some animations and more fun things, much more robust, if you're using JavaScript for it. So there's reasons to be going down that route.

[00:01:55]
I'm just gonna go with the very simple version that we have right here. Where if we come back over to here, in our document, as is one of those things just to ask yourself, like, when you're creating something, just what would happen if the user doesn't have JavaScript?

[00:02:14]
Maybe it just completely breaks it, you might have an app that's completely reliant on JavaScript, it happens. But if you have a simple feature, that just is better with JavaScript, and it's really easy to check for these things. It's easy enough just to come on both of these, and add a hidden attribute.

[00:02:31]
So by default, if a user comes on this page, and for some reason JavaScript's not working, they just don't know there would be any filters in the first place. They just have to look through them all, they get that information, it's all there, no problem whatsoever. But we could come down, and just say function enable filtering, and all this is doing is grabbing, we already have them selected to the top, it's our seasonalFilter.hidden = false, and our edibleFilter.hidden = false.

[00:03:09]
And then we can just say enable filtering at the bottom, like that. Because that means, if the page loads the JavaScript file,this function is firing, it's removing those hidden attributes, javaScript is working. It's a really simple version of this, just to sort of give an excuse to talk about it a little bit.

[00:03:29]
It's something that a lot of people don't think about, and it really does depend on the feature. But if it's a really simple thing like this, it's an extra three lines or something that would just improve the user experience, cuz if a user got here and they had the dropdowns and they start using them and they're not working, it can be frustrating.

[00:03:43]
So, it's just a nice little simple alternative that you can build in for what you're doing. But again, it's really case by case it depends on what you're building, and you can do much bigger enhancements than this, where you're taking just some like a basic list and turning it into a full tab.

[00:03:58]
Where you're reworking the DOM in a very heavy way to make a tab system, whereas without it, the JavaScript, you're just getting a basic list. So, you can do this at a lightweight level, like we're looking at here, or you can take it to a much bigger level depending on what you feel like doing.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now