Assembling Forms and Applications - HTML5 with CSS3 - page 283

Figure 8-31. Progress bars—both indeterminate and determined—as rendered by Firefox for Mac OS X on the left and
by Firefox for Windows 7 on the right.
The style of the rendered bar depends on the browser and operating system. Chrome and Firefox, for
example, use the operating system's native progress bar styling (complete with animated effects in some
cases), so they'll look quite different between platforms. Opera renders its own progress bar in a style
similar to its style for meter elements, so Opera's bars look roughly the same on Windows, Mac, and
Linux. Safari and Internet Explorer don't yet support the progress element at the time we're writing this
book, but they probably will soon.
As with the meter element, styling progress bars with CSS is currently difficult and inconsistent, with some
browsers honoring some CSS properties or providing their own proprietary properties and selectors, while
other browsers don't currently allow any styling of progress bars at all. Not every browser yet supports this
element, so be mindful when and if you choose to employ it.
Required Attributes
The progress element doesn't require any attributes. Without any attributes it represents an indeterminate
progress state. Some operating systems will render indeterminate progress bars with a sweeping or
scrolling animation to indicate that something is happening.
Optional Attributes
 value : a number specifying how much of the task has been completed. This attribute's value
cannot be less than 0 or greater than the maximum indicated by the max attribute, or, in the
absence of a max attribute, the value can't be greater than the default maximum of 1.
 max : specifies how much work the task requires in total, represented by a positive number. For
example, max="100" could indicate a percentage scale, max="5" could indicate a series of 5 total
steps, or max="12595.2" could indicate 12,595.2 total kilobytes (12.3 megabytes) to download a
file.
Interactive Elements
The HTML language started out with an emphasis on static text documents, and to a large degree that
remains its primary purpose. HTML is a fine way to mark up a limitless variety of content for easy reading.
But the Web hasn't been entirely static for a long time; these days it's much more than a collection of
academic research papers. The advent of the web app has advanced the Web beyond its roots as a cross-
referenced document repository.
Previous versions of HTML didn't provide meaningful elements for all the different kinds of interactive
content web apps call for. Developers have long made due with the elements at hand, thrusting new