CSS3 Media Queries

This page documents a few resources for learning/using CSS3 Media Queries and references for browser support.

Simple Mobile @-rule

Works for Android Webkit; need to test BlackBerry Bold, Palm Pre, iPhone.

@media handheld, screen and (max-device-width: 480px) {
/* enter style rules like "body { padding:2em }" here */

}

W3C spec 

• http://www.w3.org/TR/css3-mediaqueries/

Firefox support

• https://developer.mozilla.org/En/CSS/Media_queries

WebKit support

Safari and iPhone Safari both use WebKit.

• CSS 2.1 @media rule support: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3
• iPhone specific CSS tutorial with min-device-width, max-device-width examples:
  • http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html
• source code: http://trac.webkit.org/browser/trunk/WebCore/css/MediaQueryEvaluator.cpp
• proposed extensions to CSS3 Media Queries: http://webkit.org/specs/MediaQueriesExtensions.html
• features unimplemented but requested
  • 'aspect-ratio', 'orientation' : https://bugs.webkit.org/show_bug.cgi?id=25197

Old URLs

• http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/chapter_3_section_2.html

Return to FrontPage.