During the design phase of a web site many developers do not take into account the medium through which the web pages will ultimately be viewed. What many developers do not fully appreciate is that the web is increasingly a multi-medium information source, and that many people prefer to access web pages via alternative medium such as the printed page, aural or Braille browsers, and television screens (CSS and Media Types). When designing a web site it is important to ensure that the web pages can be adequately viewed regardless of the medium being used to view them. By employing the specification of media types in style sheets a developer can control the presentation of the web pages depending on the type of medium they are being displayed on.
The font size used for displaying the text content of a web site on the screen of a computer monitor may not be the best font size for displaying the same text on a printed page, or on the screen of a hand held device. A way to specify the print font to be used depending on the medium accessing the web page would be by the employment of the @media rule in a style sheet. A @media rule specifies the target media types of a set of rules, thus allowing style sheet rules for various media within the same style sheet (Media Types). Therefore, by using the @media rule, a developer could assign a font size of 12pt when the text of a paragraph is displayed on a monitor screen, and a font size of 10pt when the web page containing that text is printed. The @media rule gives the web developer the option of targeting style rules to specific media types, allowing one to explicitly request that one or more style rules will only apply when rendering to a particular device (Style Sheet Media Types).
CSS2 recognizes 10 different media types that can be utilized for assigning style rules to particular media within a style sheet. The media type descriptors supported by CSS2 conforming user agents, that may be used for the assignment of style rules to medium are: all, aural, Braille, embossed, handheld, print, projection, screen, tty and tv (Code Style: Media dependent style sheet glossary). The all descriptor is used for declaring style rules for all media. The aural descriptor is for targeting speech related medium such as sound synthesizers, while the Braille and embossed descriptors target touch-feedback and Braille paged printing devices respectively. The handheld media descriptor is targeted for small or handheld devices with small screens, limited bandwidth or display capabilities. The print descriptor is for when the web page content is transmitted to the printed page. The projection descriptor is for web pages that are displayed via slides onto a projection screen, while the screen descriptor is targeted for continuous, non-paged color computer screens. The tty descriptor is for assigning style rules to media using fixed-pitch character grids such as terminals or teletypes, and the tv descriptor targets television related devices.
At one time it was widely assumed that web pages were viewed exclusively via a personal computer with a monitor, but there are numerous ways to access a web page and each of these different media have their own characteristics (Learn web standards:: css guide - media ). The @media rule and the number of media type descriptors available for assigning style rules to media types in a style sheet, provide a way for web developers to ensure that the web site content is suitably displayed no matter the type of media used for viewing the content. Media rules are easy to construct, provide numerous options for formatting web content to the device being used to display it, and can contribute greatly in ensuring that the web site content is accessible to the widest circle of potential viewers as possible. All web developers should liberally employ media rules in their style sheets when constructing sites that may potentially be viewed by a large and diverse community.
References
CSS and Media Types
Retrieved September 15, 2007 from
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html
Media Types
Retrieved September 15, 2007 from
http://www.w3.org/TR/REC-CSS2/media.html#at-media-rule
Style Sheet Media Types
Retrieved September 15, 2007 from
http://www.eskimo.com/~bloo/indexdot/css/topics/media.htm
Code Style: Media dependent style sheet glossary
Retrieved September 16, 2007 from
http://www.codestyle.org/css/media/Glossary.shtml
Learn web standards:: css guide - media
Retrieved September 16, 2007 from
http://www.westciv.com/style_master/academy/css_tutorial/advanced/media.html
No comments:
Post a Comment