Mozilla

a short introduction to media queries in Firefox 3.5

This post is by Eric Shepherd, who leads Mozilla’s documentation project at the Mozilla Developer Center.

In this day and age, it’s important for web content to support rendering on an increasingly wide variety of devices. Not only do users expect to use your content on their home computer, or read it printed on paper, but they want to use it on handheld devices, cell phones, and assorted other gadgets that have distinct capabilities, both in terms of performance and in terms of display fidelity.

CSS 2 introduced the notion of media types, which allow you to specify different style rules based on what type of device the content is being rendered onto. For example, you can include a specific style sheet when your content is being rendered for printing like this:

<link rel="stylesheet" media="print" href="print.css">

This was a good first step; however, this doesn’t provide the ability to fine-tune the rendering of your content based on things such as device resolution, aspect ratio, or whether the content is being viewed in portrait or landscape orientation.

Firefox 3.5 supports media queries — a new feature of CSS 3 — which make it possible to define much more precisely what styles to apply under what circumstances.

This works by establishing queries that look at the values of various media features. There are a large number of these, including color depth, rendering area width and height, pixel resolution, whether or not the display is color, and so forth. You can find a complete list in the Mozilla Developer Center article on media queries.

Media queries are quite powerful, but very easy to use. Take a look at the example web page I put together for this article.

The example page uses two style sheets, which are specified using the following rules:

<link rel="stylesheet" media="all and (orientation:portrait)"
 href="portrait.css">

This one uses the media query all and (orientation:portrait) to indicate that the portrait.css style sheet should be used if the content is being rendered in a display area (such as the window in Firefox) is taller than it is wide.

<link rel="stylesheet" media="all and (orientation:landscape)"
 href="landscape.css">

This one specifies that the landscape.css style sheet should be applied when the content is being rendered on a surface that is wider than it is tall.

What’s very cool about media queries is that they are evaluated every time the display mode changes; for example, if you open the example page and start resizing the window, you’ll find that when the window is wider than it is tall (i.e., it’s in landscape orientation), the toolbar is located on the left side of the page.

When you resize the window so that it is in portrait orientation, the toolbar moves to the top of the window. This is done live while you’re resizing the window.

If you look inside the landscape.css file, you’ll find that there are some media queries used there, as well, that override the style of the <body> element based on the width of the window. By default, the body text is 14 pixels tall.

@media all and (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

However, this media query indicates that if the window is at least 600 pixels wide, the font size for the body text should be increased to 16 pixels.

@media all and (min-width: 700px) {
  body {
    font-size: 20px;
  }
}

Similarly, this media query makes the body’s font size 20 pixels when the window reaches at least 700 pixels wide. And another, similar media query makes the font even larger when the window is at least 800 pixels wide.

So as you resize the window, you’ll see that not only does Firefox automatically switch between the portrait.css and landscape.css style sheets as the window’s width changes, but while rendering using the landscape.css style sheet, the styles change based on exactly how wide the window is, too.

Another great use for this is to adjust the number of columns your content is displayed in based on the width of the display area.

Media queries are currently supported by Firefox 3.5, Safari 3, and Opera 7 and later, with successive versions often adding support for additional media features.

You can get details about which media features Firefox supports in the MDC article on media queries. Opera 9.5’s media features support is outlined near the bottom of this article. I wasn’t able to find specifics on WebKit’s media queries support.

Media queries offer a great way to improve how your content looks on a variety of devices; using appropriate queries, you can render differently based on screen size, resolution, and more, thereby optimizing your content no matter how the user is accessing it.

13 comments

Comments are now closed.

  1. Dan wrote on June 15th, 2009 at 08:50:

    That’s cool.

  2. Kim Sullivan wrote on June 15th, 2009 at 09:04:

    At first I thought that the font size selection was broken, but then I realized it conflicts with the portrait mode ;-) Basically, the window has to be less than 600 pixels high to fully appreciate this effect.

  3. anon wrote on June 15th, 2009 at 18:10:

    I doubt this will be very widely used, only because as the commenter above stated, and maybe only with this example, a very small percentage of users will notice this “feature”. I think the issue with code like this is while useful selling it to a business owner or your own manager will be a tough sell…unless you are in an niche market where all you do is this kind of code. I’d love to be able to dive into something like this and really find cool ways to use it, but a lot of times people want products quickly and stuff like this falls to the side. (See Attribute Selectors)

  4. Pingback from 颠覆网络35天 ─ Firefox 3.5中媒介查询简介 < MJiA on June 16th, 2009 at 02:52:

    […] 原文地址:a short introduction to media queries in Firefox 3.5 系列地址:颠覆网络35天 […]

  5. Gerv wrote on June 18th, 2009 at 04:03:

    The example web page” link is throwing a download window for a “PHTML” file for me…

    Gerv

  6. Pingback from First look to Firefox 3.5 RC2 - Mozilla Links on June 19th, 2009 at 22:38:

    […] a CSS feature that allows embedding of fonts in web pages so visitors get the content as intended; media queries, a blurry name for a cool feature that will allow sites deliver content based on the specific […]

  7. Pingback from 谋智社区 » Blog Archives » 颠覆网络35天 ─ Firefox 3.5中媒介查询简介 on July 22nd, 2009 at 22:10:

    […] 原文地址:a short introduction to media queries in Firefox 3.5 系列地址:颠覆网络35天 […]

  8. Mike wrote on August 19th, 2009 at 11:50:

    @anon Yes, a niche market like developing for mobile devices. No one uses those things…

  9. Pingback from Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine on May 6th, 2010 at 06:07:

    […] except IE, and there are lots of great articles and tutorials explaining how to use them right now:A short introduction to media queries in Firefox 3.5 (applies to other browsers too, from Mozilla Hacks)Safe media queries (Opera Developer […]

  10. Pingback from Modern CSS3 (2. rész): Alapvető technikák | WebRagacs on June 2nd, 2010 at 07:13:

    […] ez alól az IE ismét kivétel (szerencsére a mobil eszközökön Safari és Opera uralkodik). A Bevezetés a média lekérdezésekbe FireFox 3.5  alatt c. cikket ajánlanám, aki angolul kevésbé ért annak is tanulságos lehet a sok példa […]

  11. Randall wrote on March 1st, 2011 at 02:05:

    I like this! What I would also like to see is how you moved the navbar from the top to the side. Can we see the portrait.css and landscape.css files?

  12. Randall wrote on March 1st, 2011 at 11:36:

    LOL. Let’s try this again. It bloody DOES NOT WORK on my iPhone.

  13. Dave wrote on March 1st, 2011 at 19:30:

    I know nothing about mobile phones, do only the highest end ones (iphone, android) support this? I added a media query to a site I did that switched style sheets when the window size is 320px wide or less (ie a phone). It works fine resizing my desktop browser, but people I know with full touch-screen phones say the page is not re-styling.

Comments are closed for this article.