Media Types and CSS
Media and CSS – Part 1
Foreword: In this part of the series, I talk about media types and CSS.
By: Chrysanthus Date Published: 28 Dec 2015
Introduction
Pre-Knowledge
At the bottom of this page, you have links to the different series you should have read before coming here, in order to understand this series better.
Media
The word, media is the plural of medium. In CSS, media has a slightly different meaning from the ordinary use of the word. In CSS, media constitute screen, paper, speech synthesizer, braille, visual device, audio device and tactile device.
Screen
Examples of screen devices are the computer monitor and smartphones
Paper
Printing is done on paper.
Speech Synthesizer
This is a device that can produce speech (talking), not necessarily a prerecorded speech. There are people who cannot see, so a web page can be rendered to them by talking.
Audio Device
Any device such as the radio, MP3 device that sends out information as sound!
Visual Device
This is any device that sends out information as vision. The TV is both an audio and a visual device. Some people cannot hear, but they can see. So they need a visual device for communication.
Braille
A system of printing for blind people in which the letters of the alphabet and numbers are printed as raised dots that can be read by touching them.
This is any device connected with the sense of touch.
Media Characteristics
Media has characteristics:
Continuous
The screen for example has a continuous medium. A web page is produced continuously downward. It is not normally broken into pages like the printer does with papers.
Paged
The printer or printing press produces information in paper pages. The pages can be individual papers or in a book.
Visual
Visual deals with only vision (seeing).
Speech
Speech deals with only talking.
Audio
Audio deals with talking and music.
Tactile
Connected with the sense of touch, e.g. a Braille device.
Bitmap
Information can be presented on paper or on screen by addressing the pixels (smallest dots). Photographs and drawings are presented like that. A medium can have a bitmap characteristic.
When you draw equally spaced horizontal lines, and after that you cross the lines with equally spaces vertical lines, you form a grid. It is possible to use a grid as a fundamental way of representing information. For example, you can display text, where each character goes into a grid cell.
Static
The web page of basic mobile phones are static as they do not support ECMAScript (JavaScript). ECMAScript makes a web page interactive.
Interactive
The web page of a computer monitor is interactive as it supports ECMAScript. The page is not just displayed; the user can interact with it.
Media Groups
More than one media characteristics can be found in one device. Characteristics can be grouped by their similarities. There are four groups as follows:
- continuous/paged
- visual/audio/speech/tactile
- grid/bitmap
- interactive/static
These groups do not really have names; that is, there is no name per group.
Media Types by CSS
In order to use media in code, CSS provides media types. These are names you can use in code. Media types are braille, embossed, handheld, print, projection, screen, speech, tty, tv and all. The meanings of these media types are as follows:
braille
This type is intended for braille tactile feedback devices.
This type is intended for paged braille printers.
handheld
This type is intended for handheld devices (typically small screen, limited bandwidth).
This type is intended for paged material and for documents viewed on screen in print preview mode.
projection
This type is intended for projected presentations, for example projectors.
screen
This type is intended primarily for color computer screens.
speech
This type is intended for speech synthesizers.
tty
This type is intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors (programmers) should not use pixel units with the "tty" media type.
tv
This type is intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
all
This type is for any device.
One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media). On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the 'font-size' property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to say that a style sheet, or a section of a style sheet, applies to certain media types.
In a style sheet, any section that is not associated with any media type, applies to all media types. The style sheets you have seen in this volume (series before this) apply to all media types. The computer monitor screen was simply assumed as the media type.
Specifying Media Dependent Section in a Style Sheet
Specifying a media dependent section in a style sheet is simple: Have all the declaration blocks in one place. Surround the declaration blocks with curly brackets, {}. Precede the curly bracket with, @media. In between @media and the declaration block, you have one or more media types. If there is more then one media type, you separate the media types with commas. The following illustrates this, for the print media type (printer):
@media print
{
/* style sheet for print goes here */
}
The following illustrates this for the computer screen and printer:
@media screen, print
{
body { line-height: 1.2 }
}
The value, 1.2 is a variation of the reserved word (value), normal, for the line-height property. It will be interpreted on the screen and at the printer slightly differently, but appropriately for the particular device.
@media and its block (and nested blocks) is an example of what is called an at-rule. @media is a reserved word.
The rest of the style sheet outside the at-rule is for all media.
You can have the media type style sheet in a server. In this case you will need to import the declaration blocks into the style sheet of the current document, using the @import at-rule. This uses a URL. You can do this as follows:
@import url("fancyfonts.css") screen;
After the @import reserved word in the rule, you have the url() function call. The argument to the function call is the URL of the style sheet file at the server. After that you have one or more media types. If there is more than one media type, you separate the types with commas.
Note: the @import at-rule ends with a semicolon, while the @media at-rule does not end with a semicolon (ends with } ).
The @import and @media rules fit themselves in the current style sheet.
The HTML Link Element
The server style sheet can be imported using the HTML link element as follows:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF=" fancyfonts.css">
The link element is typically coded in the HTML head element. In this case, the imported style sheet is independent of the current style sheet, but, they still work together.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
NEXT