HTML and CSS Reference
In-Depth Information
The first
<link>
element tells the browser that if the device's minimum width is 800 pixels, it should
attach
Desktop.css
to the page. The second
<link>
element says that if this device has a maximum width
of 480 pixels and is using portrait mode, the browser should attach
Mobile.css
to the page.
Note the use of the
and
operator in the second
<link>
element, to check multiple conditions. You can
also use the
all
,
not
, and
only
keywords:
all
indicates that the style sheet applies to all media types,
not
negates the result of the query, and
only
hides style sheets from older browsers. Although older browsers
ignore such a style sheet, browsers that support CSS3 media queries process media queries starting with
only
as if the
only
keyword wasn't present.
If you don't have a mobile device on which to test this page, you can change the
min-device-width
property to something higher than your desktop screen resolution and then view the page in your desktop
browser. Because none of the
<link>
elements match the criteria, the browser won't apply a style sheet,
resulting in a plain default rendering of the HTML elements. Then change
min-device-width
to a value
smaller than the screen resolution and view the page again. The browser should display the HTML
elements as per the style rules defined in
Desktop.css
.
Changing a Style Rule Using Media Queries
In the preceding example, you changed the entire style sheet at runtime based on device properties. This
approach works well if the two style sheets are different. However, if only a few CSS rules need to be
tweaked to target different devices, you can put them in a single style sheet. In this case, you need to use a
@media
block in your style sheet. The following example illustrates how to use a
@media
block:
@media (min-device-width: 800px) {
body {
background-color:blue;
color:white;
}
}
@media (max-width: 480px) and (orientation:portrait) {
body {
background-color:red;
color:white;
}
}
The first
@media
block groups CSS rules for a device whose minimum screen width is 800 pixels. The
second
@media
block groups CSS rules for devices with a maximum width of 480 pixels and portrait
orientation. This style sheet is attached to a web page as usual:
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
If you run a web page with this style sheet attached on a desktop computer, you should see the web
page background painted blue color. On mobile phones, the background is red.
Using Modernizr to Apply CSS3-Specific Features
As mentioned earlier, CSS3 is an evolving specification. Not all browsers support all CSS3 features. If you
know that your web application will be used by the modern browsers, you can use the CSS3 features that
they all support. The advantage of this approach is that you have a good number of CSS3 features at your
