This is a prime example of progressive
enhancement.
Using HTML, CSS, and JavaScript Appropriately
HTML is for content and structure, CSS is for presentation, and JavaScript (in the context of
the browser) is for interactivity. They were each designed for their specific purpose and are the
best at their particular job. It??™s very common, however, for developers to get into the habit of
letting HTML do some of the presentation (with
, for example, just because you want
something bold, in-line style attributes, and so on) or even letting CSS do some of the interactivity
(a big example being CSS-only drop-down menus), but the biggest temptation lies
within JavaScript.
CHAPTER 9 n A DYNAMIC HELP SYSTEM 205
JavaScript has a special role in the browser in that it has the power to manipulate presentation
and content very easily. Even though this is the case, it??™s still normally advantageous to
avoid manipulating style properties or adding content to the page. If you want to change the
visual state of an element from JavaScript, do so by adding a class name (as you did using the
with-help class earlier). Similarly, instead of generating lots of HTML from a script, ensure
that it is in the document to begin with. The only common exception is animation, which necessarily
manipulates the values of style properties over time.
One main advantage of working this way is that it enables you to change the look and
feel of the application without going anywhere near the JavaScript itself.
Pages:
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288