Media queries

Last updated

Media queries is a feature of CSS 3 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, [1] and is a cornerstone technology of responsive web design (RWD).

Contents

History

Media queries were first sketched in Håkon Wium Lie's initial CSS proposal in 1994, [2] but they did not become part of CSS 1. The HTML4 Recommendation from 1997 shows an example of how media queries could be added in the future. [3] 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. [4] The first public working draft for media queries was published in 2001, [5] 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. [6] [7] Media queries use the @media CSS "at-rule".

Examples

The following are examples of CSS media queries:

@mediascreenand(display-mode:fullscreen){/* Code in here only applies to screens in fullscreen */}
@mediaalland(orientation:landscape){/* Code in here only applies in landscape orientation */}
@mediascreenand(min-device-width:500px){/* Code in here only applies to screens equal or greater than 500 pixels wide */}

Media types

A media type can be declared in the head of an HTML document using the "media" attribute inside of a <link> element. The value of the "media" attribute specifies on what device the linked document will be displayed. [8] Media types can also be declared within XML processing instructions, the @import at-rule, and the @media at-rule. CSS 2 defines the following as media types: [9]

The media type "all" can also be used to indicate that a style sheet applies to all media types. [10]

Media features

The following table contains the media features listed in the latest W3C recommendation for media queries, dated 6 June 2007. [11]

FeatureValueMin/MaxDescription
colorintegerYesNumber of bits per color component
color-indexintegerYesNumber of entries in the color lookup table
device-aspect-ratiointeger/integerYesAspect ratio
device-heightlengthYesHeight of the output device
device-widthlengthYesWidth of the output device
gridintegerNoTrue for a grid-based device
heightlengthYesHeight of the rendering surface
monochromeintegerYesNumber of bits per pixel in a monochrome frame buffer
orientation"portrait" or "landscape"NoOrientation of the screen
resolutionresolution ("dpi", "dpcm" or "dppx")YesResolution
scan"progressive" or "interlaced"NoScanning process of "tv" media types
widthlengthYesWidth of the rendering surface

Related Research Articles

<span class="mw-page-title-main">HTML</span> Hypertext Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

A HTML editor is a program for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

<span class="mw-page-title-main">Håkon Wium Lie</span> Norwegian software engineer

Håkon Wium Lie 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 Style Sheets (CSS) while working with Tim Berners-Lee and Robert Cailliau at CERN in 1994.

<span class="mw-page-title-main">Tantek Çelik</span> American technologist, creator of Microformats.org

Tantek Çelik is a Turkish-American computer scientist, currently the Web standards lead at Mozilla Corporation. Çelik was previously the chief technologist at Technorati. He worked on microformats and is one of the principal editors of several Cascading Style Sheets (CSS) specifications. He is author of HTML5 Now: A Step-by-Step Video Tutorial for Getting Started Today (ISBN 978-0-321-71991-1).

JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by Netscape Communications in 1996 to provide facilities for defining the presentation of webpages. It was an alternative to the Cascading Style Sheets (CSS) technology.

<span class="mw-page-title-main">Acid2</span> Online HTML rendering test

Acid2 is a webpage that test web browsers' functionality in displaying aspects of HTML markup, CSS 2.1 styling, PNG images, and data URIs. The test page was released on 13 April 2005 by the Web Standards Project. The Acid2 test page will be displayed correctly in any application that follows the World Wide Web Consortium and Internet Engineering Task Force specifications for these technologies. These specifications are known as web standards because they describe how technologies used on the web are expected to function.

Tableless web design is a web design method that avoids the use of HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.

<span class="mw-page-title-main">Flash of unstyled content</span> Phenomenon in web browsers

A flash of unstyled content is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift may be distracting. Related problems include flash of invisible text and flash of faux text.

<span class="mw-page-title-main">Acid3</span> Online HTML rendering test

The Acid3 test is a web test page from the Web Standards Project that checks a web browser's compliance with elements of various web standards, particularly the Document Object Model (DOM) and JavaScript.

<span class="mw-page-title-main">Web typography</span> Publishing considerations for the Web

Web typography is the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the font element in 1995, which was then standardized in the HTML 3.2 specification. However, the font specified by the font element had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities.

<span class="mw-page-title-main">CSS</span> Style sheet language

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. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Arena (web browser)</span> Web browser and Web authoring tool for Unix

The Arena browser was one of the first web browsers for Unix. Originally begun by Dave Raggett in 1993, development continued at CERN and the World Wide Web Consortium (W3C) and subsequently by Yggdrasil Computing. Arena was used in testing the implementations for HTML version 3.0, Cascading Style Sheets (CSS), Portable Network Graphics (PNG), and libwww. Arena was widely used and popular at the beginning of the World Wide Web.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

Argo was part of a project to make the Internet accessible to scholars in the Humanities at the University of Groningen. The Argo web browser was created in August 1994 by Bert Bos.

<span class="mw-page-title-main">Holy grail (web design)</span> CSS programming trick for dividing a web page into three columns

The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

<span class="mw-page-title-main">Responsive web design</span> Approach to web design for making web pages render well on a variety of devices

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

The CSS Working Group is a working group created by the World Wide Web Consortium (W3C) in 1997, to tackle issues that had not been addressed with CSS level 1. As of December 2022, the CSSWG had 147 members.

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C's candidate recommendation (CR) stage. The flex layout allows responsive elements within a container to be automatically arranged depending on viewport size.

Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.

Prince is a computer program that converts XML and HTML documents into PDF files by applying Cascading Style Sheets (CSS). Prince is a commercial product, which is free to download and use for non-commercial purposes.

References

  1. ↑ Media Queries Publication History 19 June 2012
  2. ↑ Håkon Wium Lie. "Cascading HTML Style Sheets" . Retrieved 20 January 2013.
  3. ↑ "Basic HTML data types". www.w3.org.
  4. ↑ "Re: Feedback on Media Queries CR from Håkon Wium Lie on 2002-07-17 (www-style@w3.org from July 2002)". lists.w3.org.
  5. ↑ "Media queries". www.w3.org.
  6. ↑ "CSS media queries". Mozilla Developer Network and individual contributors. Retrieved 28 April 2017.
  7. ↑ "How to create media queries in Responsive Web Design". TechRepublic.
  8. ↑ "HTML link tag". W3Schools. Retrieved 28 April 2017.
  9. ↑ "Media Queries". World Wide Web Consortium. Retrieved 28 April 2017.
  10. ↑ "Media Queries". World Wide Web Consortium. Retrieved 28 April 2017.
  11. ↑ "Media Queries". Sitepoint. Retrieved 28 April 2017.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.