Advanced Search

Return to Snippet

Revision: 10765
at January 13, 2009 12:16 by wizard04
Updated Code 
**************************************************
********************** 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; } }

Revision: 10764
at January 13, 2009 10:28 by wizard04
Initial Code 
**************************************************
********************** 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>Supported?</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; } }
Initial URL 
http://test.dragonzreef.com/mediaTest2.htm
Initial Description 
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.
Initial Title 
CSS Media Type Support
Initial Tags 
css, browser, support
Initial Language 
CSS