spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / authoring / languages / xhtml / beginning / chap13 / 1 To page 1To page 2current pageTo page 4To page 5
[previous] [next]

Beginning XHTML

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

Style Sheet Properties Appropriate to a Media Type

Not every style sheet property is appropriate for every target device. The volume property, for example, refers to what's known as the median volume of a waveform. This property is clearly related to aural media types (i.e. sound) and not to visually oriented media types.

In fact, it turns out that there are relationships between the different media types. These relationships are called media groups, and the World Wide Web Consortium identifies four of these media groups:

  • Continuous or paginated media
  • Visual, aural, or tactile media
  • Grid or bitmap media
  • Interactive or static media

Each media type is a member of one or more of these media groups. For example, the screen media type is a member of the continuous, visual, bitmap, interactive, and static media groups.

Continuous or paginated media refers to the surface on which content is rendered. If the surface can always extend to hold all of the content, the media is considered continuous. If the surface has a limited size and additional surfaces must be created to hold all of the content, the media is said to be paginated. Computer screens are continuous and printed pages are paginated. We will talk about paginated media later in this chapter.

Visual, aural, or tactile media refers to how the information is presented to the user:

  • If the user must use their eyes to consume the content, then the media is said to be visual.
  • If the user must use their ears to consume the content, then the media is said to be aural.
  • If the user must use touch to consume the content, then the media is said to be tactile.

Computer screens are visual, aural browsers are aural, and Braille printers are tactile.

Grid or bitmap media refers to how the visual or tactile information is rendered. If the information is rendered in a predefined grid layout (every 'character' has the same amount of space), then the media is said to be grid-based. If the information is rendered pixel by pixel (every 'character' uses whatever space it needs), then the media is said to be bitmap-based. Teletypes are grid-based and computer screens are bitmap-based.

Interactive or static media refers to whether the user can interact with the content. As would be expected, when the user can interact with the content, the media is said to be interactive. When the user cannot interact with the content, the media is said to be static. Computer screens are said to be interactive and printed pages are said to be static.

The table below summarizes the relationships between media types and media groups.

Media TypesMedia Groups
Continuous or Paginated Visual, Aural, or Tactile Grid or Bitmap Interactive or Static
aural continuous aural neither both
braille continuous tactile grid both
embossed paginated tactile grid both
handheld both visual both both
print paginated visual bitmap static
projection paginated visual bitmap static
screen continuous visual bitmap both
tty continuous visual grid both
tv both visual, aural bitmap both

Each Cascading Style Sheet property is only valid for one or more media groups. When you are tailoring a presentation to a particular media type, you need to identify the appropriate media group and determine whether you can control the desired property for that media group.

Associating Style Sheets with Media Types

In a previous chapter, you learned how to embed and link style sheets to documents. This same mechanism may be used to associate style sheets with different devices and media types. In summary, there are four different mechanisms for specifying dependencies between style sheets and media types:

  • the style element for embedding CSS
  • the link element for external CSS
  • @media rules
  • @import rules

The following sections describe each of these mechanisms and some strategies for selecting an appropriate mechanism (in other words, which mechanism should we use?).

Using the <style> Element

The first mechanism for associating style sheets with media types is to use the style element's media attribute.

The <style> element's media attribute specifies the intended destination media for the enclosed style information. This means that the style will only be applied if the device matches the style's media type, and ignored otherwise. For example, if you write:

<head>
  <style type="text/css" media="print">
  <!--
    h1 { font-size: 10; text-align: center }
  -->
  </style>
</head>

you are indicating that when the document is printed, the content of a first level header should be rendered using a 10-point font and center-aligned.

The value of the media attribute can be any one of the media type descriptors previously defined (all, aural, braille, etc.). If you want to apply a style sheet to more than one media type, you can separate the media type descriptors using a comma:

<head>
  <style type="text/css" media="print, screen">
  <!--
    h1 { font-size: 10; text-align: center }
  -->
  </style>
</head>

In this example, the media attribute is set to print and screen. Therefore, the first level header will appear the same on the printer as on the screen.

Likewise, you can have different style sheets associated with different devices as you will see in the next exercise.

home / authoring / languages / xhtml / beginning / chap13 / 1 To page 1To page 2current pageTo page 4To page 5
[previous] [next]

Copyright 1999 Wrox Press Ltd. and


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger


Created: March 27, 2001
Revised: March 27, 2001


URL: http://webreference.com/authoring/languages/xhtml/beginning/chap13/1/