CSS 3
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technol ...
allowing content rendering to adapt to different conditions such as screen resolution (e.g. mobile and desktop screen size). It became a W3C recommended standard in June 2012,Media Queries Publication History 19 June 2012 and is a cornerstone technology of responsive web design (RWD).
History
Media queries were first sketched in
Håkon Wium Lie
Håkon Wium Lie (born July 26, 1965) is a Norwegian web pioneer, a standards activist, and the Chief Technology Officer of Opera Software from 1998 until the browser was sold to new owners in 2016. He is best known for developing Cascading Styl ...
's initial CSS proposal in 1994, but they did not become part of CSS 1. The
HTML4
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript ...
Recommendation from 1997 shows an example of how media queries could be added in the future. In 2000, W3C started work on media queries and also on another scheme for supporting various devices: CC/PP. The two address the same problem, but CC/PP is server-centric, while media queries are browser-centric. The first public working draft for media queries was published in 2001, and the specification became a W3C Recommendation in 2012 after browsers added support.
Usage
A media query consists of a ''media type'' and one or more expressions, involving ''media features'', which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Media queries use the @media CSS "at-rule".
Examples
The following are examples of CSS media queries:
@media screen and (display-mode: fullscreen)
@media all and (orientation: landscape)
@media screen and (min-device-width: 500px)
Media types
A media type can be declared in the head of an
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...
document using the "media" attribute inside of a element. The value of the "media" attribute specifies on what device the linked document will be displayed. Media types can also be declared within
XML
Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. T ...
processing instructions, the @import at-rule, and the @media at-rule. CSS 2 defines the following as media types:
* all (suitable for all devices)
*
braille
Braille (Pronounced: ) is a tactile writing system used by people who are visually impaired, including people who are Blindness, blind, Deafblindness, deafblind or who have low vision. It can be read either on Paper embossing, embossed paper ...
* embossed
*
handheld
A mobile device (or handheld computer) is a computer small enough to hold and operate in the hand. Mobile devices typically have a flat LCD or OLED screen, a touchscreen interface, and digital or physical buttons. They may also have a physical ...
* print
* projection
* screen
* speech
* tty
* TV
The media type "all" can also be used to indicate that a style sheet applies to all media types.
Media features
The following table contains the media features listed in the latest W3C recommendation for media queries, dated 6 June 2007.