|
|
CSS Media Types |
Using stylesheets, we can control all aspects of the layout of the page as viewed on the user's screen, but not all layouts that look good on the screen are also going to work well if the page is printed out. For some websites, this is not really a concern, yet for others it can be very important - for example, if a site selling tickets to a show wants it's users to print out their receipt, which is on their page, the presence of large menus and header images may make it difficult to read the ticket itself. Informational pages such as encyclopedia articles or tutorials may want to save space by not having large menus alongside their text when printing the page. To do this without sacrificing the usability of our website, we need to use a part of stylesheets which allows us to set the "Media Type".
There are two ways of doing this - first, we can tell the link tag to load a stylesheet only for a certain type of media with a new attribute, and second we can use a special type of rule in our stylesheet called the @media rule. In both cases, we need to specify the exact media type that the stylesheet file or rule section relates to by using one of the pre-defined media types. The most common of these are the screen, and print media types, which represent the computer's screen and printer respectively. Other media types exist for other purposes, and are fully listed here.
To set what media you wish to use a stylesheet file for using the link tag, you simply need to add a media attribute to the tag, like this:
In the example above, three stylesheet files are being loaded - the first one, one.css does not have a media attribute, so it will be applied to all versions of the page, regardless of what type of media the page is viewed in.
The second, two.css has a media attribute with the value "print" - this means that the stylesheet properties set in that stylesheet will only be applied to the page when it is being printed out. To see how this affects a stylesheet, you can simply go to the file menu in the browser, and select the print preview option. This media type can be used to set up your printouts to remove un-necesary menus and advertizements, as well as to re-arrange the colouring on your site to make it more friendly to printers. (ie: white background and black text.)
The third stylesheet loaded, three.css, has a media type of "screen", which means that any stylesheet properties set in it will not be applied to printouts, or to any other type of media that the page may be displayed in. This is useful for when your page style is already optimal for printouts or other media such as handheld devices, but you want to add some additional optimization to the display when it shows up on a computer's screen. This would typically be used on a page that was designed with small handheld devices like PDAs and CellPhones in mind, as they typically respond to the media type "handheld" instead of "screen".
The @media rule can also be added into a stylesheet to provide a smaller section which covers only a single media type, inside of a stylesheet that does not specify a media type. (ie: The stylesheet as a whole applies to all types, but the section in the @media rule only applies to the specified media such as the screen or print type of media. As a small example of this, you could set your font to be different on screen versus on the printout, by creating a stylesheet like this:
The @media rule acts very similar to a stylesheet selector, except that instead of containing a list of stylesheet properties, it contains a list of selectors and their properties.
In the above example, the @media rule is followed by the media type print, which means that the rule applies only to printed media, and any properties set there will not show up on screen. Viewing a page that uses this example, the font on screen will be arial, but in the print-preview for it, it will show up as the times font, which is very different.
Now that we've covered the basics of what the media types are, we can move on to something more practical - let's say we've got a website with a large navigation menu on the left (such as Wikipedia) and we want it to dissapear when the page is printed out. This can be done easily with the @media rule, or a specific stylesheet keyed to the print media. The exact details of how we do this will depend however, on how our website's HTML and CSS were set up to create the menu to begin with. Our examples will use the @media rule for simplicity - all of the parts of the example will then be contained in the same file. It should be noted however, that the same effects could be attained by placing the content of the @media rule into a separate stylesheet file, and loading it with a link tag set to the appropriate media type. These examples will be given further detail in class, but to see how they are done, you can simply go to the example and select view source from your browser's menus. Remember to both look at the page on screen regularly, and also through the Print Preview option in your browser.