style Media
Description
The media attribute from style element
lets you specify when a style should be applied to the document.
Example
The following code gives an example of how you can use this attribute.
<!DOCTYPE HTML>
<html>
<head>
<style media="screen" type="text/css">
a {<!-- w w w . ja v a 2s . co m-->
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
<style media="print">
a{
color:Red;
font-weight:bold;
font-style:italic
}
</style>
</head>
<body>
<p>This is a test.</p>
<a href="http://java2s.com">Visit java2s.com</a>
</body>
</html>
The code above defined two style elements with different media value.
The browser will apply the first style when the HTML is displayed onscreen, and the second style when the page is printed.
Condition
You can create very specific conditions for a style.
First, you can specify the device. Possible values are listed in the following table.
| Device | Description |
|---|---|
| all | Apply this style to any device (this is the default). |
| aural | Apply this style to speech synthesizers. |
| braille | Apply this style to Braille devices. |
| handheld | Apply this style to handheld devices. |
| projection | Apply this style to projectors. |
| Apply this style in print preview and when the page is printed. | |
| screen | Apply this style when the content is shown on a computer screen. |
| tty | Apply this style to fixed-width devices, such as teletypes. |
| tv | Apply this style to televisions. |
Feature
Using the media features allows you to be even more specific.
The following code adds specificity to a style Element.
<!DOCTYPE HTML>
<html>
<head>
<style media="screen AND (max-width:500px)" type="text/css">
a {<!-- ww w.j a va2 s . c o m-->
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
color:Red;
font-style:italic;
}
</style>
</head>
<body>
<p>This is a test.</p>
<a href="http://java2s.com">Visit java2s.com</a>
</body>
</html>
The code above used the width feature to differentiate between two styles.
The first will be used when the browser window is narrower than 500 pixels, and
the second when the window is wider than 500 pixels.
You can used AND to combine a device with a feature.
In addition to AND, you can also use NOT, or a comma (,) to represent OR.
This allows you to create complex and quite specific conditions in which to apply a style.
The available features, along with their modifiers, are listed in the following table.
Unless otherwise noted, you can modify these features with min- or max- to create
thresholds rather than specific values.
widthspecifies the width of the browser window.
Units are expressed as px for pixels.
Example:width:200pxheightSpecifies the height of the browser window.
Units are expressed as px for pixels.
Example:height:200pxdevice-widthSpecifies the width of the entire device and not just the browser window.
Units are expressed as px for pixels.
Example:min-device-width:200pxdevice-heightSpecifies the height of the entire device and not just the browser window.
Units are expressed as px for pixels.
Example:min-device-height:200pxresolutionSpecifies the pixel density of the device.
Units are dpi (dots per inch) or dpcm (dots per centimeter).
Example:max-resolution:600dpiorientationSpecifies the orientation of the device.
The supported values are portrait and landscape.
There are no modifiers for this feature.
Example:orientation:portraitaspect-ratioSpecifies the pixel ratio of the browser window device.
Values are expressed as the number of width pixels over the number of height pixels.
Example:aspect-ratio:16/9device-aspect-ratioSpecifies the pixel ratio of the browser window or the entire device.
Values are expressed as the number of width pixels over the number of height pixels.
Example:min-aspect-ratio:16/9color monochromeSpecifies the number of bits per pixel of color or monochrome devices.
Example:min-monochrome:2color-indexSpecifies the number of colors that the display can show.
max-color-index:256scanSpecifies the scanning mode of a TV. The supported values are progressive and interlace.
There are no modifiers for this feature.
Example:scan:interlacegridSpecifies the type of device. Grid devices use fixed grids to display content; for example, character-based terminals and one-line pager displays.
The supported values are 0 and 1, where 1 is a grid device. There are no modifiers for this feature.
Example:grid:0