@media

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value all
Reference to specification http://www.w3.org/TR/CSS21/cascade.html#at-import

Description
The rule "@media" allows to indicate a medium type for which indicated style will be used. Printers, monitors and other devices are mediums. Some of them are given in the table 1 below:

Tab.1 Medium types and their description
Type Description
all All types. This is a default value.
aural Speech synthesizers and programs for aloud text reproduction, such as speech browsers
braille Devices which are meant for the blinds. These devices are based on the Braille system
handheld Pocket (palm) computers and similar devices
print Printing devices such as the printers
projection Projector
screen Monitor screen
tv TV set

Syntax

@media type1 [, type2] {
  Style description
}

Values
One ore more mediums types shown above are going after the keyword "@media". In the case when there are more than one type, they are separated by coma. Braces are required after that and standard algorithm descriptions are within them.

Example 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>@media</title>
  <style type="text/css">
   @media screen { /* Style for imaging in the browser */
    BODY {
     font-family: Arial, Verdana, sans-serif; /* Sans-serif type */
     font-size: 90%; /* Font size */
     color: #000080; /* Text color */
    }
    H1 {
     background: #faf0e6; /* Background color under the text */
     border: 2px dashed #800000; /* Frame around the title */
     color: #a0522d; /* Text color */
     padding: 7px; /* Fields around the text */
    }
    H2 {
     color: #556b2f; /* Text color */
     margin: 0; /* Remove indents */
    }
    P {
     margin-top: 0.5em; /* Top indent */
    }
   }
   @media print { /* Style for printing */
    BODY {
     font-family: Times, 'Times New Roman', serif; /* Font with serifs */
    }
    H1, H2, P {
     color: #000; /* Black color of the text */
    }
   }
  </style>
 </head>
 <body>
   <h1>Method of the lion-hunting in the desert</h1>
   <h2>Linear search method</h2>
   <p>Let the loin have overall  dimensions LxWxH, where L is lion's length from the  tip of nose
   to the switch of tail, W — lion's width, and H — its height. After this we divide the desert  into
   a row of elementary rectangles, the size of which concurs with lion's width and height. 
   Taking into consideration that the lion may be not on the strictly specified  area but  simultaneously on 
   two of them, the cage for hunting must have bigger size notably 2Lx2W. 
   Thanks to this you will avoid an error when only the lion's half will be catched in the cage 
   or its tail that is worse.</p>
   <p>Forther sequentially cover each marked rectangleof the desert with the cage
   and check whether the lion is  caught. When the lion is in the cage the hunting procedure
   is considered to be over.</p>
 </body>
</html>

Two styles are input in this example. One of them is aimed for changing the elements’ look when they are imagined in the browser as usual, and the second one is aimed for the page’s output for printing. The document’s face differs very much for different mediums, for example, like it is shown on the figures 1 and 2.




You can preview the document where CSS is set as "print" type if you’ll type the specified page. Or you can be sly and substitute the word "print" to the word "screen" for imaging the total in the browser. The figure 2 was derived in this way.
The command "@media" is used mainly for formatting of one style file which is divided in blocks according to medium types. Sometimes it is necessary to create several different CSS-files – one file fore printing and another one for imaging in the browser, and to connect them to the document as necessary. In a such case you may use the tag <Link> with the parameter "media"; its values are the types enumerated in the table 1.

Example 2

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>@media</title>
  <link media="print, handheld" rel="stylesheet" href="print.css" type="text/css">
  <link media="screen" rel="stylesheet" href="main.css" type="text/css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Two sheets of coupled styles are used in this example; one of them is aimed for imaging in the browser, and another one for document printing and its preview at the pocket computer. Though two different styles are loaded on the page simultaneously they are used only for specified mediums.