HTML and CSS Reference
In-Depth Information
Browser Support for Media Queries
Media queries are supported by the following browsers:
•
Chrome 4+
•
Firefox 3.5+
•
IE 9+
•
Opera 9.5+
•
Safari 4+ (slightly buggy support since 3.1)
•
Android 2.1+
•
iOS Safari 3.2+
•
Opera Mini 5+
•
Opera Mobile 10+
•
Windows Phone 7.5+
Although this breadth of support is encouraging, IE 8 and earlier don't understand media queries. Feature
phones with fewer capabilities than smartphones tend not to support media queries, either.
■
The fact that media queries aren't universally supported is not a barrier to using them. All that's necessary
is to provide basic styles in an ordinary style sheet, and use media queries to refine the way your pages look in
browsers that understand them. you'll see how to do so later in this chapter.
Tip
How Media Queries Work
Media queries use conditions that test a device's features. You set the conditions when specifying the media type
with the
media
attribute in a
<link
>
tag, or in
@import
or
@media
rules. If the device satisfies the conditions, it uses
the styles. Otherwise, it ignores them.
Media Features
In CSS3, you can test for the 13 media features listed in Table
17-1
. The Min/Max column indicates whether the
feature can be prefixed with
min-
or
max-
to indicate a minimum or maximum value.
