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 {
@media (max-width: 480px) and (orientation:portrait) {
body {
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
Search WWH ::

Custom Search