Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 297

NOTE DOES IT WORK?

The media query does not require that a smart phone or tablet be in use, only that the
view port of the page is within the query parameters. To test this code, simply resize your
browser window beyond the defined sizes to see the page change its layout dynamically.

So far the CSS is working great. The only problem is you have a lot of CSS code in a single
page. Typically, a website has multiple pages with styles shared across different pages. As
a result, you will likely be linking an external CSS file to your HTML page. The link element
supports media queries as well, which in turn lets you share a CSS file across multiple pages.
For example, you might want to change the font-size of the text throughout your site based
on the view port size. To achieve this, move the CSS from each media query into its own CSS
file and link in your CSS files in the following way:

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="Desktop.css"/>
<link rel="stylesheet" media="screen and (max-width: 1199px) and (min-width: 401px)"
ref="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 400px)" href="phone.css"/>

With the CSS linked in this fashion, you can add and modify the styles for the different
view ports centrally for your entire website.

Hiding or disabling controls
The ability to modify the user interface positioning using media queries as shown in the last
section is very useful. In addition, some layouts might just not work in some view ports. In
this case, you might want to complete hide controls or disable controls. HTML elements are
visible by default. However, they can be made invisible by setting the visibility CSS property as
shown in the following code:

.myhiddenelements {
visibility:hidden;
}

By setting the visibility to hidden, the control is not visible to the end user of the web-
page. When hiding an element using the visibility property, the overall layout still behaves as
though the element is there. If you prefer to have the element hidden and the layout behave
as though it is not there, the display property should be used as shown in the following code:

.myhiddenelements {
display: none;
}

With the display property, the element is not visible and the layout is not affected by it.