The CSS Corner: CSS3 Media Queries

Artikkeli
01/12/2011

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:

@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

Anonymous
January 12, 2011
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
Anonymous
January 12, 2011
Interesting that there is a distinction between greyscale and color depth.
Anonymous
January 12, 2011
Can you please answer steve's post!
Anonymous
January 12, 2011
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.
Anonymous
January 12, 2011
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.
Anonymous
January 12, 2011
@Nick did you try the demo linked to in the post? yes, the media does change dynamically.
Anonymous
January 12, 2011
@Steve, How long have you been trolling?
Anonymous
January 12, 2011
@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.
Anonymous
January 12, 2011
@Steve I'm pretty sure they stopped it to discourage companies from continuing to support IE6.
Anonymous
January 12, 2011
So... how about releasing the final version?
Anonymous
January 12, 2011
I'm with Steve. Give us some answers.
Anonymous
January 12, 2011
@Steve: 7) Use ThinApps.
Anonymous
January 12, 2011
@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.
Anonymous
January 13, 2011
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?
Anonymous
January 13, 2011
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.
Anonymous
January 13, 2011
@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.
Anonymous
January 13, 2011
@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.
Anonymous
January 13, 2011
The comment has been removed
Anonymous
January 13, 2011
@steve - the Virtual PC images are the best environments available for development/testing. I've used them for years without any problems.
Anonymous
January 13, 2011
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.
Anonymous
January 13, 2011
The comment has been removed
Anonymous
January 13, 2011
i'm thankful that my company has finally moved on from IE6.... :D Hopefully, they'll be getting rid of IE7 by this year too.... :D
Anonymous
January 13, 2011
The comment has been removed
Anonymous
January 14, 2011
@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.
Anonymous
January 14, 2011
like this man..
Anonymous
January 14, 2011
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.
Anonymous
January 14, 2011
@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.
Anonymous
January 14, 2011
The comment has been removed
Anonymous
January 15, 2011
v
Anonymous
January 15, 2011
please move the tabs on the title bar, like in Firefox 4.0 beta 9
Anonymous
January 15, 2011
体
Anonymous
January 15, 2011
体
Anonymous
January 16, 2011
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

Anonymous
January 16, 2011
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.
Anonymous
January 16, 2011
The comment has been removed
Anonymous
January 16, 2011
It would be great if there was also a media query for the DPI value.
Anonymous
January 16, 2011
@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.
Anonymous
January 17, 2011
@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.
Anonymous
January 17, 2011
slicknet - "IE9 incorrectly reports hasFeature("UIEvents", "2.0") as true even though it implements zero of the specified events." Agreed!
Anonymous
January 17, 2011
Could someone from this blog please remove all posts that have nothing to do with the article above (90% or so)
Anonymous
January 18, 2011
hAl: +1 from me! Harry
Anonymous
January 22, 2011
@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!
Anonymous
January 22, 2011
"some they" should be "some day" in my previous post. Sorry i'm not a native English speaker.
Anonymous
March 09, 2015
l;k;lkklk;k;k

Jaa