CSS design principles
CSS3 as CSS2 and CSS1 before it, is based on a set of design principles:
-
Forward and backward compatibility. CSS2 user agents will be able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2 style sheets and discard parts they don’t understand. Also, user agents with no CSS support will be able to display style-enhanced documents. Of course, the stylistic enhancements made possible by CSS will not be rendered, but all content will be presented.
-
Complementary to structured documents. Style sheets complement structured documents (e.g., HTML and XML applications), providing stylistic information for the marked-up text. It should be easy to change the style sheet with little or no impact on the markup.
-
Vendor, platform, and device independence. Style sheets enable documents to remain vendor, platform, and device independent. Style sheets themselves are also vendor and platform independent, but CSS2 allows you to target a style sheet for a group of devices (e.g., printers).
-
Maintainability. By pointing to style sheets from documents, webmasters can simplify site maintenance and retain consistent look and feel throughout the site. For example, if the organization’s background color changes, only one file needs to be changed.
-
Simplicity. CSS2 is more complex than CSS1, but it remains a simple style language which is human readable and writable. The CSS properties are kept independent of each other to the largest extent possible and there is generally only one way to achieve a certain effect.
-
Network performance. CSS provides for compact encodings of how to present content. Compared to images or audio files, which are often used by authors to achieve certain rendering effects, style sheets most often decrease the content size. Also, fewer network connections have to be opened which further increases network performance.
-
Flexibility. CSS can be applied to content in several ways. The key feature is the ability to cascade style information specified in the default (user agent) style sheet, user style sheets, linked style sheets, the document head, and in attributes for the elements forming the document body.
-
Richness. Providing authors with a rich set of rendering effects increases the richness of the Web as a medium of expression. Designers have been longing for functionality commonly found in desktop publishing and slide-show applications. Some of the requested rendering effects conflict with device independence, but CSS2 goes a long way toward granting designers their requests.
-
Alternative language bindings. The set of CSS properties described in this specification form a consistent formatting model for visual and aural presentations. This formatting model can be accessed through the CSS language, but bindings to other languages are also possible. For example, a JavaScript program may dynamically change the value of a certain element’s ‘color’ property.
-
Accessibility. Several CSS features will make the Web more accessible to users with disabilities:
- Properties to control font appearance allow authors to eliminate inaccessible bit-mapped text images.
- Positioning properties allow authors to eliminate mark-up tricks (e.g., invisible images) to force layout.
- The semantics of !important rules mean that users with particular presentation requirements can override the author’s style sheets.
- The new ‘inherit’ value for all properties improves cascading generality and allows for easier and more consistent style tuning.
- Improved media support, including media groups and the braille, embossed, and tty media types, will allow users and authors to tailor pages to those devices.
- Aural properties give control over voice and audio output.
- The attribute selectors, ‘attr()’ function, and ‘content’ property give access to alternate content.
- Counters and section/paragraph numbering can improve document navigability and save on indenting spacing (important for braille devices). The ‘word-spacing’ and ‘text-indent’ properties also eliminate the need for extra whitespace in the document.
