The CSS Corner: CSS3 Media Queries


As we announced with our second Platform Preview last year, IE9 supports CSS3 Media Queries. CSS3 Media Queries enable you to style pages based on different display surface factors such as width, height, orientation, resolution, etc. Developers can use these factors to customize their sites for viewing on different devices such as a small-screen netbook or a widescreen monitor. In this post, I talk more about CSS3 Media Queries and the various scenarios they enable.

Evolution of Media Queries

Internet Explorer has supported the ‘screen’ and ‘print’ CSS2 media types since IE5. The print media type is especially useful if you want to change your printed page layout. It eliminates the need for Web sites to host a separate print-friendly version of their site and enables some useful print optimizations such as expanding hyperlinks. The CSS 2.1 media types spec includes definitions for many media types including handheld devices, speech synthesizers, and televisions. However, in practice only screen and print were widely adopted.

CSS3 Media Queries expands the notion of optimizing for a particular media type by making it possible to optimize for particular properties of the media. ‘Screen’ is a useful media type, but there are many types of screens—from mobile phones with tiny screens to laptops with averages screens to desktop machines connected to widescreen monitors as large as 30″; newer screens may be higher resolution than screens of the recent past. As a Web developer, you may want to reflow your Web page for each of these devices in order to give site vistors the best experience on their device. CSS3 Media Queries enable you to target your CSS as generally or as specifically as you like.

Basic Example

To write a media query which targets screens which are 1250px wide you could write the following (note: ‘screen’ width and height actually refer to the width and height of the browser window, not the physical display):

@media screen and (width:1250px) { … }

However, targeting a screen (browser) which is exactly 1250px wide isn’t really that useful because it’s not often that the browser window will be exactly 1250px wide. Instead it’s more useful to target a range of sizes, such as 900px to 1300px:

@media screen and (min-width:900px) and (max-width:1300px) { … }

On the IE Test Drive site you can find a CSS3 Media Queries demo which illustrates the use of a few different media queries to alter the page layout based on your screen (browser) width. The page is optimized for both widescreen sizes and very narrow sizes. To see the effect, be sure to change your browser window size as you view the page.

In a widescreen view, the page uses a side by side layout with large images and descriptive text:

CSS3 Media Queries illustrated on wide window

In a narrow view, the page uses cropped images and removes the titles and descriptions.

CSS3 Media Queries illustrated on narrow window

In addition to writing @media rules within your CSS files, you can also use CSS3 media queries in the media attribute of link and style tags and within an @import block. A few examples:

<link rel=”stylesheet” media=”screen and (min-width:100px)” href=”widescreenStyleSheet.css” />

<style type=”text/css” media=”print and (orientation:portrait)”> … </style>

@import “widescreenStyleSheet.css” screen and (min-width:100px);

Media Features

In addition to width, IE9 supports the following media features:

  • width – width of the display area
  • height – height of the display area
  • device-width – width of the device rendering surface
  • device-height – height of the device rendering surface
  • orientation – landscape or portrait
  • aspect-ratio – ratio of the ‘width’ to ‘height’ media features
  • device-aspect-ratio – ratio of the ‘device-width’ to ‘device-height’ media features
  • resolution – resolution of the output device
  • color – number of bits per color component of the output device
  • color-index – number of entries in the color lookup table of the output device
  • monochrome – number of bits per pixel in a monochrome frame buffer (0 if the device is not monochrome.)

With the exception of orientation, all IE9 supported media features can be used with the ‘min-’ and ‘max-’ prefixes.

Next Steps

The types, sizes, and capabilities of the displays that people browse with are growing more and more diverse. CSS3 Media Queries make it easy for web developers to build one site that delivers a great experience on all displays.

If you’ve found CSS3 Media Query bugs in your testing of IE9 Beta or the Platform Previews, please file them on Microsoft Connect.

—Sharon Newman, Program Manager


Comments (44)

  1. steve says:

    I hate to repeat this here but once a post on the IE blog is not the latest post it gets ignored.

    Can someone from Microsoft please make a statement about shutting down the IE6/IE7/IE8/IE9 images at http://www.spoon.net/

    ======================================================================================================

    This was **THE** most useful resource for testing multiple versions of IE and the shutdown really ticked developers off!

    As a long time web developer of Enterprise Web Applications I've tried all the options out there to try and simplify testing IE and the lack of realistic options is a royal PITA.

    1.) Multiple IEs – IE8 breaks the functionality of IE6's textboxes – thus its a NO-GO

    2.) IETester – works great until you need to test popup interaction and then it fails – thus a NO-GO

    3.) Virtual PC with timebombed images of IE6, IE7, IE8 – works ok, but the 12Gigs of HD space needed is frustrating when each full image of Windows dies 4 times a year, running a full Windows image is slow and you have to beg for updates because the releases are not co-ordinated and announced well at all – thus its a NO-GO

    4.) IE Super Preview – Last I checked this did not allow full testing of IE user interaction, JavaScript DOM changes, popups etc. – thus its a NO-GO

    5.) Multiple PC's to run multiple versions of windows and IE.  With all the hardware, software, and physical space needed – its a NO-GO

    6.) Spoon.net IEs – They work, they work just like local native apps once running, and there's no hacking of my real local IE install. – the **ONLY** problem with these IE's is that Microsoft shut them down

    Please understand that we (developers) just want something that works.  Testing in multiple versions of IE is a pain to begin with and with IE9 on the horizon it is only getting worse.

    I'm not sure where the issue stands with Spoon, but I would really like a solution worked out fast.

    Steve

  2. Bruno says:

    Interesting that there is a distinction between greyscale and color depth.

  3. john says:

    Can you please answer steve's post!

  4. a different john says:

    hey steve, could you please stop spamming this blog with that post? it's pretty annoying and there are much more appropriate places where you can submit concerns like that.

  5. Nick says:

    It seems like basing the media selection on the size of the browser screen is a bad idea.  Will the media change dynamically as the browser window is resized?

    I see a future of support calls from people saying "My website is all messed up and looks funny" just because their browser started at an odd size and now they're seeing a mobile stylesheet on their desktop.

  6. a different john says:

    @Nick did you try the demo linked to in the post? yes, the media does change dynamically.

  7. oh please says:

    @Steve,

    How long have you been trolling?

  8. Chris says:

    @Nick there is width and device-width so you can either do the view port width or the screen size regardless of the view port. It's really up to the HTML dev to decide the correct behavior for their site.

  9. anonymous says:

    @Steve

    I'm pretty sure they stopped it to discourage companies from continuing to support IE6.

  10. Mark says:

    So… how about releasing the final version?

  11. Ian says:

    I'm with Steve. Give us some answers.

  12. Stifu says:

    @Steve: 7) Use ThinApps.

  13. Steve says:

    @a different john – Re: "there are much more appropriate places where you can submit concerns like that"

    Sure Thing – Name One.

    This is the IE Blog, this is the ONLY place where developers concerns receive visibility unless we shell out a few 1,000 bucks once a year to visit Mix and attempt to have our concerns addressed there.

    (PS That fails too, because under the public spotlight, the responses are very ambiguous when MSFT is presented with a issue they don't have a plan to fix yet)

    Until then – all Web Application Developers across the planet wait (im)patiently for Microsoft to respond to the question.  Why did they shut down the BEST development resource available for Debuging Internet Explorer – and when do they plan to fix this mistake.

  14. Inquiring mind says:

    One wonders why these media queries get so much prime-time: two blog posts and a demo on the test-drive.

    Will Microsoft announce an IE9 update for WP7, once IE9 has been released to web?

  15. Chris says:

    Steve – Great post. Dont stop spamming until we get answers. MS put developers in this situation by not enforcing upgrades and having unusual bug/css rules in their software.

  16. Ooh says:

    @Steve: Please stop to post your comment under every single blog post.

    > @a different john – Re: "there are much more appropriate places where you can submit concerns like that"

    > Sure Thing – Name One.

    Connect (https://connect.microsoft.com/). Other people can vote for your suggestion to bring back Spoon, the IE team at Microsoft can track the suggestion (plus the number of votes) and you can get an official answer.

  17. Steve says:

    @Ooh – If you've used connect in the past – you've learned that Connect is the best way to get your concerns ignored.

    more importantly Connect is for filling "bugs" in IE – filing a request to remove a restriction on a non-Microsoft property website is instant grounds for closing the request.

  18. a different john says:

    @Steve at least if you file your complaint with connect then it will be ignored somewhere that doesn't annoy the hell out of the rest of us. Maybe you could click the "email the blog author" link at the top of this page, or use any other of the many ways to get in touch with a Microsoft employee. You can't seriously think that spamming blog comments is anything above a juvenile way of getting attention.

  19. willpeavy.com says:

    @steve – the Virtual PC images are the best environments available for development/testing. I've used them for years without any problems.

  20. Steve says:

    I agree I'm completely stupid and I'm posting my request here because I supposedly get ignored when posting on Connect (which I never did about this specific issue, but sill) and I didn't notice yet it's the same here: Microsoft is not responding me because I'm asking something which is outside the scope of the blog authors which are not Microsoft lawyers but Internet Explorer *developers* who never contacted Spoon.net. I also didn't notice I'm annoying everyone else reading the blog.

    Sorry for being so dumb. I promise I'll never do it anymore.

  21. Steve says:

    Thanks fake "@Steve" – but no.  I asked a legitimate question affecting developers worldwide.  Debugging IE is the worst aspect of Web Development and thus I asked a reasonable question about what Microsoft plans to do to make it easier for developers especially that they just made it a whole bunch harder by shutting down Spoon.net.

    @Stifu – agreed, VMWare has some nice options for this but multiplying out the cost of the additional Windows licenses times dozens of developers make it cost prohibitive.

    @willpeavy.com – VPC is ok but as noted the sheer size of the VMs and the constant re-installing due to timebombs makes it an unpleasant experience. Not only that but the timebombs are not triggered on the install date.  Thus if I download VMs today – they expire in 18days – that is unacceptable.  When will the next images be available? Typically they have not been a priority and thus appear too late.

    I'm not expecting miracles here – I would just like Microsoft to step up and respond to why they shut down Spoon.net and when and how they plan to resolve this issue.

  22. mocax says:

    i'm thankful that my company has finally moved on from IE6…. 😀

    Hopefully, they'll be getting rid of IE7 by this year too….  😀

  23. David S says:

    @Steve and @Fake Steve

    Lol you guys are hilarious. But seriously can you please let IE6 die? It's a 10 year old software. Show me one 10 year old software that is usable today. Use your freaking developer tool to see what pages look like in IE7 – IE9. All companies that rely on IE6 will vanish like AOL when broadband became mainstream. Really, stop please.

    PS. I was really hoping the fake Steve is for real

  24. willpeavy.com says:

    @Steve –

    On my current dev machine, I'm using IE VPC images that I installed in 2009, and they still work great.

    Also, disk space is cheap now. You can get a terabyte drive for under $100, and run all store all the VPC's you could ever want.

  25. suhendi says:

    like this man..

  26. Matt says:

    I'm with Steve. There's nothing that could ever get posted on this blog that's as important to me as getting Spoon back.

  27. Aethec says:

    @Steve: The solution is extremely simple: Don't support IE6, and add a "Update your browser" thing using conditional comments. The reason people don't update is because they don't feel the need to do so.

  28. Ben Collier says:

    You messed up the demo, you don't want width: 100%; height: 100% on the images as that screws up the aspect ratio. Just width: 100%..

  29. suc says:

    please move the tabs on the title bar, like in Firefox 4.0 beta 9

  30. net says:

    My wishlist for IE9:

    – Tabs on top (like the latest Firefox 4.0 beta 9)

    – Paste&Go command in the context menu over the address bar

  31. Steve says:

    To all of you complaining about the removal of Spoon, have you actually considered that Spoon may have been breaking the law and/or the licensing terms of Windows/IE?

    Spoon works by the application binary being downloaded to your machine. How would you like it if some other company 'stole' your software, meddled with it, and started providing to its customers?

    They were great tools, and i'm sad they're gone… but you can't really blame Microsoft for wanting them removed.

  32. Kevin says:

    If Spoon was breaking licensing terms – thats ok, but why wasn't this stated? – better yet, since the major reason why people were using it was to support development and debugging of OLD IE browsers MSFT should be making efforts to help developers – not torture them.

    The problem is that you can't download IE6 or IE7 by themselves.  If we could I would GLADLY pay $19.99 to install these on my machine for testing purposes but the problem is that I CAN'T!

    I have to download an entire copy of an old version of Windows (uhm, oddly enough that's hard to do at my local BestBuy!) then I have to buy VMWare so that I can create a legal image of my old Windows Disc so that I can chew up Gigs of HD space so that I can test IE6.

    Anyone else notice that this scenario is utterly annoying?

    How much $ does MSFT want from us to get a copy of some 10 year old software? Just let me know where I can send by money to so that I can continue to use Spoon.

    However getting back to brass tacks – if Spoon is launching/running the apps from their server (and you can't use them without their server) then only Spoon needs to pay for their licensing of IE – no one else.

  33. Björn says:

    It would be great if there was also a media query for the DPI value.

  34. David F says:

    @Kevin:

    "However getting back to brass tacks – if Spoon is launching/running the apps from their server (and you can't use them without their server) then only Spoon needs to pay for their licensing of IE – no one else."

    I'm not so sure, as the application and it's related files (DLLs, etc) are still downloaded to your machine.

    I'm pretty sure it's just a support issue for MS. They won't make the older versions work together as they'll have to support them, which I assume will cost too much to do.

  35. Nick G. says:

    @David F – Why would Microsoft need to support any version of IE6 that Spoon hosts on their servers?  More importantly as a developer using the Spoon service I just want basic IE6 usability as-is.

    Like @Steve I just want to be able to test my code in old, cruddy versions of IE because although my technically savvy audience wouldn't dream of using IE – there are many that are stuck at work with no choice about their browser due to IT regulations.  The scary thing is that end users still on IE6 is a Waaaaaay bigger security issue than users running Firefox or Chrome because they want a decent non-IE user experience.

  36. on behalf of slicknet says:

    slicknet – "IE9 incorrectly reports hasFeature("UIEvents", "2.0") as true even though it implements zero of the specified events."

    Agreed!

  37. hAl says:

    Could someone from this blog please remove all posts that have nothing to do with the article above (90% or so)

  38. Harry Richter says:

    hAl:

    +1 from me!

    Harry

  39. Roel says:

    @Steve: This is the whole problem of the development of the web. You should not want this, these users need a reason to upgrade otherwise they never will be. All webmasters must stand together and stop suporting very old browsers. Otherwise progress will stall. (As it does right now) I'm not saying you have to disappoint all your customers. But just stop supporting very old version like IE 6 and give a light but acceptable experiance on IE 7 etc.. Even big companies have to progress to newer technology some they, and they need a reason! It's the chicken or the egg story!

  40. Roel says:

    "some they" should be "some day" in my previous post. Sorry i'm not a native English speaker.

  41. /'';;;';;';;;lk;lkl;klk says:

    l;k;lkklk;k;k