CSS Cookbook, 3rd Edition

Chapter 14. Interacting with JavaScript

Introduction

JavaScript is part of a three-legged stool when it comes to building a successful website.

Web developer Steven Champeon compared the relationship of web technologies to the building blocks of the English language: JavaScript is the verb, while HTML is the noun and CSS is the adjective.

With HTML as the base describing the content through semantic markup, you can efficiently apply stylesheets to render a good-looking site.

JavaScript allows action to take place on the web page. By “action,” I do not mean just moving things around the page, like a bad Flash animation. JavaScript enables you to manipulate or change a page that’s already loaded within the document.

In this chapter, we will look at how to change the stylesheet in a web page based on the time of day or the screen resolution. Also, we’ll look at how to use a popular JavaScript framework to make backward-compatible websites and add a bit of flair to rollovers.

Determining Whether JavaScript Is Available Within a Browser

Problem

You want to determine whether a browser can handle JavaScript.

Solution

Use the noscript element, placed within the body element, to let users know that JavaScript is not available in their browser, as shown in Figure 14-1:

<body>
 <noscript>
  <p>JavaScript is not enabled. Some features of this website
  will not work.</p>
 </noscript>
</body>

Figure 14-1. A notice ...