CSS3 Examples

CSS2 Generated content

CSS2 includes several mechanisms that allow content to be generated from style sheets:

• the :before and :after pseudo-elements and the 'content' property. When used together, these allow authors to insert markers (e.g., counters and constant strings such as "End Example" in the examples below) before or after and element's content.
• the 'cue', 'cue-before', and 'cue-after' properties. This properties allow users to play a sound before or after an element's content.
• List styles, which may be numbers, glyphs, or images (usually associated with the LI element in HTML). CSS2 adds international list styles to the styles defined in CSS1. See th 'list-style-type' and 'content' properties.

Generated content can serve as markers to help users navigate a document and stay oriented when they can't access visual clues such as proportional scrollbars, frames with tables of contents, etc.

For instance, the following user style sheet would cause the words "End Example" to be generated after each example marked up with a special class value in the document:

DIV.example:after {
  content: End Example
}

Users could also, for example, number paragraphs so that they could locate their current reading position in a document:

P:before {
  content: counter(paragraph) ". " ;
  counter-increment: paragraph
}

Aural Cascading Style Sheets

CSS2's aural properties provide information to non-sighted users and voice-browser users much in the same way fonts provide visual information. The following example show how various sound qualities (including 'voice-family', which is something like an audio font) can let a user know that spoken content is a header:

H1 {
   voice-family: paul;
   stress: 20;
   richness: 90;
   cue-before: url("ping.au")
   }

The following properties are part of CSS2's aural cascading style sheets.

• 'volume' controls the volume of spoken text.
• 'speak' controls whether content will be spoken and, if so, whether it will be spelled or spoken as words.
• 'pause', 'pause-before', and 'pause-after' control pauses before and after content is spoken. This allows users to separate content for better comprehension.
• 'cue', 'cue-before', and 'cue-after' specify a sound to be played before and after content, which can be valuable for orientation (much like a visual icon).
• 'play-during' controls background sounds while an element is rendered (much like a background image).
• 'azimuth' and 'elevation' provide dimension to sound, which allows users to distinguish voices, for example.
• 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' control the quality of spoken content. By varying these properties for different elements, users can fine-tune how content is presented aurally.
• 'speak-punctuation' and 'speak-numeral' control how numbers and punctuation are spoken, which has an effect on the quality of the experience of aural browsing.

Furthermore, the 'speak-header' property describes how table header information is to be spoken before a table cell.

No Comment | Posted in » Advance CSS3, W3C CSS3