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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google to Shake Up Browsers With Own Launch
Mozilla's Ubquity Mashup: For The Masses?
iPhone Users Just Want to Have Fun
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:



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency
Intel eBook: Managing the Evolving Data Center
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Symantec eBook: The Guide to E-Mail Archiving and Management
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization
HP Webcast: Disaster Recovery Planning
Go Parallel Video: Performance and Threading Tools for Game Developers
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control
IBM Energy Efficiency eKIT: Learn How to Reduce Costs
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
HP Demo: StorageWorks EVA4400
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
The Partial Function Application in JavaScript · Creating Dynamic RSS Feeds with Ajax · Performance Optimizations for High Speed JavaScript
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Cablevision Deploys More Hotspots for Commuters · Dell Joins the Netbook Movement with its Inspiron Mini 9 · It's Official: Dell Enters the Netbook Fray