CSS:Devices

From virtualMV2015wiki
Jump to: navigation, search
 Home  CSS <

Introduction

A really clever technique that you can use, is to have a style sheet that is device specific. For example, you can put a menu in a div tag and show it when displayed on the screen but hide it when printed.

Icon Objective.png

Objective Cascading Style Sheets

By the end of this page you will be able to:

  • Add the code to change the output depending on device

Media attribute

The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

  • screen (the default value), for presentation on non-paged computer screens;
  • print, for output to a printer;
  • projection, for projected presentations;
  • aural, for speech synthesizers;
  • braille, for presentation on braille tactile feedback devices;
  • tty, for character cell displays (using a fixed-pitch font);
  • tv, for televisions;
  • all, for all output devices.

Examples:

<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="color8.css" 
      title="8-bit Color Style" media="screen, print">
<link rel="Alternate StyleSheet" type="text/css" href="color24.css"
      title="24-bit Color Style" media="screen, print">
<link rel="StyleSheet" type="text/css" href="aural.css" media="aural">

(WDG,2007)[1]

Icon References.png References

  1. WDG (2007) Linking Style Sheets to HTML. Retrieved March 31, 2008 from http://htmlhelp.com/reference/css/style-html.html

CSS:Devices. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 16, 2017, from http://www.virtualmv.com/wiki/index.php?title=CSS%3ADevices    (zotero)