Ideally, developers should use the principles of progressive enhancement and graceful degradation when using both CSS & JavaScript. In turn, these best practices create several implications for development:
- As much as possible, content should be accessible to users and search engines with or without JavaScript.
- The presentation of that content should be enhanced with CSS.
- If a UI element requires JavaScript to function, it should be generated with JavaScript.
JavaScript is brittle and intolerant of faults: place a curly brace in the wrong place and the entire thing will quit and die. Using progressive enhancement principles protects both the user and ourselves as developers: if our code fails for any reason, the basic functionality of the site should remain unaffected.
Progressive enhancement sometimes means applying a little lateral thinking to your development process. As a simple example, let’s create a simple button on the page. I recommend working directly in the console to start: that way you can see changes line by line, rather than trying to get an entire script right the first time.
First, we’ll need a basic HTML page to start. It’s common to use a container as a “reference element” from which to spawn JavaScript-generated controls; our page will use a <div>. For the sake of convenience, call the page test.html.
<!doctype html>
<html lang="en">
<head>
<title>Generated Elements with JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div id="container"></div>
</body>
</html>Open the page in a browser, start the Console (Ctrl + Shift + J / Cmd + Opt + J in Chrome, Ctrl + Shift + K / Cmd + Opt + K in Firefox) and type the following. (You can ignore any “Undefined” responses the console provides).
var button = document.createElement("button");
var container = document.getElementById("container");We create elements in JavaScript itself before attaching them to elements on the page. Continuing to work in the console, let’s add some content and an id to the button:
button.id = "clicky";
button.innerHTML = "Click Me";You can check the current state of the button and container variables by typing their names into the console. Pay attention to the visible document when you press Return after the next line:
container.appendChild(button);If everything works out, you’ll see a button featuring the words “Click Me” added to the page. Note that this element has been added to the DOM, but is treated as if it was part of the original source code of the page: it can have JavaScript events added to it, be styled with CSS, etc. Those are just a few of the things we’ll do in the next part of this series. For right now, you can copy the lines you just wrote and place them in a <script> at the bottom of the test page, making them permanent, and reload the page in the browser.
Obviously, this is a very simple example: we’ll be expanding on this exercise tremendously in future articles.
Photograph by Louis du Mont, used under an Attribution-NonCommercial-NoDerivs 2.0 Generic license.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
