Posted By

wizard04 on 01/13/09

Tagged

Versions (?)

Last Edited at 01/13/09 10:28am

Statistics

Viewed 1002 times

Favorited by 0 user(s)

Related snippets

CSS Media Type Support

/ Published in: CSS

Test page to check the support of different CSS media types in browsers. If you go into Print Preview, for example, the Print media type should show as "In Use" if it is supported.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

**************************************************
********************** HTML **********************
**************************************************
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
	<title>CSS Media Type Support</title>
 
	<link rel="stylesheet" href="mediaTest.css" media="all" type="text/css">
 
	<style type="text/css" media="all">
		table {
			border-collapse:collapse;
			font-family:Arial, Helvetica, sans-serif;
			font-size:0.9em;
		}
		caption {
			margin-bottom:0.5em;
		}
		th, td {
			border:1px solid gray;
			padding:0.5em;
			text-align:center;
			width:50%;
		}
		th {
			white-space:nowrap;
			width:auto;
			font-weight:bolder;
		}
	</style>
 
</head>
<body>
 
	<p><a href="/">Back to main page</a></p>
 
	<table summary="List of CSS media types and an indication if they are in use.">
		<caption>CSS Media Types</caption>
		<tr>
			<th>Media Type</th>
			<th>Applied?</th>
		</tr>
		<tr>
			<td>Audio</td>
			<td class="audio"><span>is in use</span></td>
		</tr>
		<tr>
			<td>Aural</td>
			<td class="aural"><span>is in use</span></td>
		</tr>
		<tr>
			<td>Braille</td>
			<td class="braille"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Embossed</td>
			<td class="embossed"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Handheld</td>
			<td class="handheld"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Print</td>
			<td class="print"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Projection</td>
			<td class="projection"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Screen</td>
			<td class="screen"><span>In Use</span></td>
		</tr>
		<tr>
			<td>Speech</td>
			<td class="speech"><span>is in use</span></td>
		</tr>
		<tr>
			<td>TTY</td>
			<td class="tty"><span>In Use</span></td>
		</tr>
		<tr>
			<td>TV</td>
			<td class="tv"><span>In Use</span></td>
		</tr>
	</table>
 
	<p>
	I've found that Opera supports the most, including Aural, Handheld, Print, Projection (full screen), Screen, and 
	Speech. Firefox supports Print, Projection, and Screen. Safari, IE, and K-Meleon only support Print and Screen.
	</p>
 
</body>
</html>
 
**************************************************
********************** CSS ***********************
**************************************************
 
.audio, .aural, .braille, .embossed, .handheld, .print, .projection, .screen, .speech, .tty, .tv { background-color:#FFF; }
.audio span, .aural span, .braille span, .embossed span, .handheld span, .print span, .projection span, .screen span, 
.speech span, .tty span, .tv span { display:none; }
@media audio { .audio { background-color:#CF9; } .audio span { display:inline; } }
@media aural { .aural { background-color:#CF9; } .aural span { display:inline; } }
@media braille { .braille { background-color:#CF9; } .braille span { display:inline; } }
@media embossed { .embossed { background-color:#CF9; } .embossed span { display:inline; } }
@media handheld { .handheld { background-color:#CF9; } .handheld span { display:inline; } }
@media print { .print { background-color:#CF9; } .print span { display:inline; } }
@media projection { .projection { background-color:#CF9; } .projection span { display:inline; } }
@media screen { .screen { background-color:#CF9; } .screen span { display:inline; } }
@media speech { .speech { background-color:#CF9; } .speech span { display:inline; } }
@media tty { .tty { background-color:#CF9; } .tty span { display:inline; } }
@media tv { .tv { background-color:#CF9; } .tv span { display:inline; } }