- The presentation of that content should be enhanced with CSS.
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.
<div>. For the sake of convenience, call the page test.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");
id to the button:
button.id = "clicky"; button.innerHTML = "Click Me";
You can check the current state of the
container variables by typing their names into the console. Pay attention to the visible document when you press Return after the next line:
<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.