- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Media Types
CSS2 and HTML 4 were designed so that different style sheets could be used for different media. So it's possible to design different style sheets for print, screen, projection, and other predefined media and have the browser apply the appropriate one depending on whether the page is being printed, being displayed by a projector, and so on.
HTML 4 and CSS2 both support a range of media types, including projection, screen, handheld, and print. The reality is that support for this concept has never been widespread, and even though most browsers support the screen and print style sheets, allowing us to create different style sheets for printing and onscreen display, the other possible values are far less widely supported. Opera supports the projection media type, and uses style sheets with a media type of projection when the browser is in full screen mode. Some mobile devices support the handheld media type, but the iPhone does not use handheld style sheets.
As we'll see in Chapter 14, the concept of targeting different media via CSS has been refreshed with CSS3 and is already well supported. With CSS3 media types, it's the features of the medium, such as color depth or window width, rather than the medium itself that is particularly important. Here we'll touch on the key technical aspects of CSS media types—see Chapter 14 for details.
Media-Specific CSS
There are three ways in which we can specify specific CSS for a particular media type. We can use a link to a style sheet that includes a media attribute that specifies which media the style sheet is intended for; we can add a media attribute to the style element in the head of an HTML document; or we can use an @media statement inside the CSS itself.
Linking with Media Types
When we link to an external style sheet, it's possible to specify the media type using the media attribute. This takes one of several values, the most common of which are all, screen, handheld, print, projection, and screen. For example, if we wanted to link to a style sheet for print use only, we could use this statement:
<link rel="stylesheet" href="style/style.css"
type="text/css" media="print">
|
We can also specify more than one media type by separating media types with a comma as the value of the media attribute.
Embedding Based on Media Types
Similarly, we can add a media attribute to an embedded style sheet's style element, specifying one or media for which the embedded style sheet applies. As mentioned earlier, embedding style sheets is not the best way to include CSS in an HTML document.
@media
You can also specify CSS inside a style sheet to apply only to particular media, using the @media statement. @media statements are like subsets of a style sheet. They have the following form:
@media projection, screen {
p {
color: black
}
}
|
where one or more statements that only apply to a particular medium or set of media are contained within curly brackets, and the media to which these statements should apply are specified after the keyword @media as a comma-separated list of media keywords, taken from the predefined list in CSS2 and HTML 4.
All commonly used browsers support all of these approaches, and there's no enormous advantage of one over the other. We've mentioned that embedding is to be avoided where possible. The @media approach has the advantage over linking because it requires fewer individual requests to a server. When there are a significant number of server requests (for example a number of external style sheets, script files, images, and so on), site performance can suffer, so minimizing linked files is a good practice.
To date, using media types to create style sheets for particular media has not been common, but we'll see in Chapter 14 that with CSS3, it's possible to create far more tailored style sheets for devices and media based on their specific characteristics, like window width, color depth, and even orientation. Targeting different media and devices with CSS is likely to become much more common now that these features are widely supported in browsers.