@media

Spec
Version
CSS2
Browser support (more…)
IE6+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Buggy Full Full Full

Syntax

@media media type,… {
ruleset
}

Description

You can use the @media at-rule to specify that one or more rule sets in a style sheet will apply only to certain media types. The at-rule must be followed by a comma-separated list of media types and a block that contains rules.

It’s up to you to decide whether you prefer to use separate style sheets for different media, or to use a single style sheet with @media rules.

In the expanded example below, the first set of rules will be applied only for screen and projection media (Opera uses the latter in its full-screen mode). The second set of rules will be applied only when the document is printed or viewed in print preview mode:

@media screen, projection {
  html {
    background: #fffef0;
    color: #300;
  }
  body {
    max-width: 35em;
    margin: 0 auto;
  }
}

@media print {
  html {
    background: #fff;
    color: #000;
  }
  body {
    padding: 1in;
    border: 0.5pt solid #666;
  }
}

Example

This rule set will be applied only when the document is printed or viewed in print preview mode:

@media print {
  body {
    padding: 1in;
    border: 0.5pt solid #666;
  }
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full

An @media rule won’t fail in Internet Explorer 6 or 7 if a media type is omitted, though it should, and appears to default to all. The same bug is apparent in Firefox versions up to and including 3.5.

User-contributed notes

ID:
#5
Contributed:
by laxman123
Date:
Tue, 13 Jul 2010 11:21:46 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Description

You can use the @media at-rule to specify that one or more rule sets in a style sheet will apply only to certain media types. The at-rule must be followed by a comma-separated list of media types and a block that contains rules.

It’s up to you to decide whether you prefer to use separate style sheets for different media, or to use a single style sheet with @media rules.

In the expanded example below, the first set of rules will be applied only for screen and projection media (Opera uses the latter in its full-screen mode). The second set of rules will be applied only when the document is printed or viewed in print preview mode:

@media screen, projection {
html {
background: #fffef0;
color: #300;
}
body {
max-width: 35em;
margin: 0 auto;
}
}

@media print {
html {
background: #fff;
color: #000;
}
body {
padding: 1in;
border: 0.5pt solid #666;
}
}

Example

This rule set will be applied only when the document is printed or viewed in print preview mode:

@media print {
body {
padding: 1in;
border: 0.5pt solid #666;
}
}

Related Products