290 Chapter 12—Finishing Touches:Some Global AttributesFigure 12.6 “Live” editing of styles and image sizesThe editing options for images are as yet not very impressive. Firefox allows for at
least changing the image size by dragging eight available anchor points. The idea
of changing styles live within a style element is more exciting. This idea comes
from Anne van Kesteren who first demonstrated this effect via a simple trick (see
http://bit.ly/dtnyIJ). As with Anne van Kesteren’s example, the style element in
our application is first made visible with display:block and then editable with
contenteditable=true. The result is astonishing. Changes become effective im-
mediately. In our case, after changing the CSS instruction for the code element,
the corresponding objects appear in the named color teal with font-size 180%.
Try it out!Summary
Seven selected global attributes, some of them new, and their JavaScript APIs
are the focus of the final chapter of this book. We encounter five of them in more
detail while developing our 1-2-3-4! game. The starting point is a new method for
the class attribute: the classList interface. It drastically simplifies manipulat-
ing the individual class components. The same applies to the dataset property,0321772741BOOK.indb 290 5/31/11 3:38 PM
http://www.it-ebooks.info