Friday, February 18, 2011

Stylesheet (CSS) Media Types

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Certain CSS properties are only designed for certain media. Stylesheets for different media types may share a property, but require different values for that property. For example, the 'font-size' property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.
  1. all -- Suitable for all devices.
  2. braille -- Intended for braille tactile feedback devices.
  3. embossed -- Intended for paged braille printers.
  4. handheld -- Intended for handheld devices (typically small screen, limited bandwidth).
  5. print -- Intended for paged material and for documents viewed on screen in print preview mode.
  6. projection -- Intended for projected presentations, for example projectors.
  7. screen -- Intended primarily for color computer screens.
  8. speech -- Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose.
  9. tty -- Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Should not use pixel units with the "tty" media type.
  10. tv -- Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
Notes:
  • Media type names are case-insensitive
  • Media types are mutually exclusive in the sense that a user agent can only support one media type when rendering a document.
  • User agents may use different media types on different canvases. E.g. a document may (simultaneously) be shown in 'screen' mode on one canvas and 'print' mode on another canvas.
Specifying media-dependent Stylssheets
  • Specify the target medium from a style sheet with the @media or @import at-rules.
Example(s):
@import url("fancyfonts.css") screen;
@media print {
/* style sheet for print goes here */
}
  • Specify the target medium within the document language.
<link rel="stylesheet" type="text/css" media="print, handheld" href="style.css">

3 comments:

VPS Hosting said...

but I find the CSS code to set the background image based on screen resolution than the screen width less than 1800

kids worksheets said...

One of the most important features of style sheets is that they specify how a document is to be presented on different media there is various categories available in media type.

steel forging said...

The stylesheet specify the design and the variables being use in a specific website template.

Post a Comment