spacer
Yehuda Shiran June 18, 2000
The @media Construct
Tips: June 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

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

Now that so many devices can display HTML code, you probably want to customize the way your page looks like on each device. Cascaded Style Sheet (CSS)'s rules can specify the target media for which the rules apply. The types are separated by commas. The @media construct allows style sheet rules for various media in the same style sheet. Here are some examples:

@media print {
    BODY {font-size: 10pt}
  }
@media screen {
    BODY { font-size: 12pt }
  }
@media screen, print {
    BODY { line-height: 1.2 }
  }

A CSS media type names a set of CSS properties. A user agent (such as a wireless device) that claims to support a media type by name must implement all of the properties that apply to that media type. The names chosen for CSS media types reflect target devices for which the relevant properties make sense. Here they are:

Media NameTarget
allSuitable for all devices.

auralIntended for speech synthesizers. See the section on aural style sheets for details.

brailleIntended for braille tactile feedback devices.

embossedIntended for paged braille printers.

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

printIntended for paged, opaque material and for documents viewed on screen in print preview mode.

projectionIntended for projected presentations, for example projectors or print to transparencies.

screenIntended primarily for color computer screens.

ttyIntended 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.

tvIntended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media type names are case-insensitive. Due to rapidly changing technologies, CSS2 does not specify a definitive list of media types that may be values for @media. Future versions of CSS may extend this list. Authors should not rely on media type names that are not yet defined by a CSS specification.


People who read this tip also read these tips:

Look for similar tips by subject:


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 >
Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS · Sending an HTML and Plain Text E-newsletter with ASP.NET, Part 2
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Kingston Debuts Power-Saving Memory Upgrades · Web Marketing Tools: What's Your Reputation? · Ecommerce Marketing Tips: Writing Better Copy