CSS Media Types

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.

here are currently two ways to specify media dependencies for style sheets:

Specify the target medium from a style sheet with the @media or @import at-rules.

Specify the target medium within the document language.

The @media rule:

An @media rule specifies the target media types (separated by commas) of a set of rules.

Following is the example:

<style tyle="text/css">

<!--

@media print {

    body { font-size: 10pt }

  }

  @media screen {

    body { font-size: 12pt }

  }

  @media screen, print {

    body { line-height: 1.2 }

  }

-->

</style>

The document language:

In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet:

Following is the example:

<style tyle="text/css">

<!--

<!doctype html public "-//w3c//dtdhtml 4.0//en">

<html>

   <head>

      <title>link to a target medium</title>

      <link rel="stylesheet" type="text/css"

          media="print, handheld"href="foo.css">

   </head>

   <body>

      <p>the body...

   </body>

</html>

-->

</style>

Recognized media types:

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Following is the list of various media types:

Value

Description

all

Suitable for all devices.

aural

Intended for speech synthesizers.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small screen, monochrome, limited bandwidth).

print

Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.

projection

Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.

screen

Intended primarily for color computer screens.

tty

Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.

tv

Intended for television-type devices.

NOTE: Media type names are case-insensitive.

 

ليست هناك تعليقات:

إرسال تعليق