CSS - Media Type (Screen, Paper, ...)

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types.

For example, a document may use:

  • on a screen, sans-serif fonts when displayed
  • when printed, and serif fonts.

screen and print are two media types that have been defined.

Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

Style sheet specify how a document is to be presented on different media

Advertising

3 - Property

CSS properties can be applied :

  • only for certain media (e.g., the 'page-break-before' property only applies to paged media).
  • for different media types. For example, the 'font-size' property is useful both for screen and print media.

4 - Type

Media type names are case-insensitive.

Name Visual Paged Designation
all - - Suitable for all devices.
braille No - Intended for braille tactile feedback devices.
embossed No Yes Intended for paged braille printers.
handheld Yes - Intended for handheld devices (typically small screen, limited bandwidth).
print Yes Yes Intended for paged material and for documents viewed on screen in print preview mode.
projection Yes Yes Intended for projected presentations, for example projectors. paged media
screen Yes No Intended primarily for color computer screens.
speech No - Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural'
tty Yes - Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the “tty” media type.
tv Yes - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
Advertising

5 - Group

  • continuous or paged.
  • visual, audio, speech, or tactile.
  • grid (for character grid devices), or bitmap.
  • interactive (for devices that allow user interaction), or static (for those that do not).
  • all (includes all media types)

5.1 - Paged

Paged media (e.g., paper, transparencies, pages that are displayed on computer screens, etc.) differ from continuous media in that the content of the document is split into one or more discrete pages.

6 - Management

6.1 - Declaration

6.1.1 - @media

@media print {
    /* style sheet for print goes here */
    body { font-size: 10pt }
}
@media screen {
    /* style sheet for screen goes here */
    body { font-size: 13px }
  }
@media screen, print {
    /* style sheet for screen and print goes here */
    body { line-height: 1.2 }
  }

6.1.2 - @import

@import url("fancyfonts.css") screen;

CSS - @import rule

Advertising

In HTML 4, the “media” attribute on the LINK element specifies the target media of an external style sheet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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>

7 - Documentation / Reference

web/css/media.txt · Last modified: 2019/02/09 11:40 by gerardnico