CSS Media Type Support


/ Published in: CSS
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  1. **************************************************
  2. ********************** HTML **********************
  3. **************************************************
  4.  
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6.  
  7. <html>
  8. <head>
  9.  
  10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  11.  
  12. <title>CSS Media Type Support</title>
  13.  
  14. <link rel="stylesheet" href="mediaTest.css" media="all" type="text/css">
  15.  
  16. <style type="text/css" media="all">
  17. table {
  18. border-collapse:collapse;
  19. font-family:Arial, Helvetica, sans-serif;
  20. font-size:0.9em;
  21. }
  22. caption {
  23. margin-bottom:0.5em;
  24. }
  25. th, td {
  26. border:1px solid gray;
  27. padding:0.5em;
  28. text-align:center;
  29. width:50%;
  30. }
  31. th {
  32. white-space:nowrap;
  33. width:auto;
  34. font-weight:bolder;
  35. }
  36. </style>
  37.  
  38. </head>
  39. <body>
  40.  
  41. <p><a href="/">Back to main page</a></p>
  42.  
  43. <table summary="List of CSS media types and an indication if they are in use.">
  44. <caption>CSS Media Types</caption>
  45. <tr>
  46. <th>Media Type</th>
  47. <th>Applied?</th>
  48. </tr>
  49. <tr>
  50. <td>Audio</td>
  51. <td class="audio"><span>is in use</span></td>
  52. </tr>
  53. <tr>
  54. <td>Aural</td>
  55. <td class="aural"><span>is in use</span></td>
  56. </tr>
  57. <tr>
  58. <td>Braille</td>
  59. <td class="braille"><span>In Use</span></td>
  60. </tr>
  61. <tr>
  62. <td>Embossed</td>
  63. <td class="embossed"><span>In Use</span></td>
  64. </tr>
  65. <tr>
  66. <td>Handheld</td>
  67. <td class="handheld"><span>In Use</span></td>
  68. </tr>
  69. <tr>
  70. <td>Print</td>
  71. <td class="print"><span>In Use</span></td>
  72. </tr>
  73. <tr>
  74. <td>Projection</td>
  75. <td class="projection"><span>In Use</span></td>
  76. </tr>
  77. <tr>
  78. <td>Screen</td>
  79. <td class="screen"><span>In Use</span></td>
  80. </tr>
  81. <tr>
  82. <td>Speech</td>
  83. <td class="speech"><span>is in use</span></td>
  84. </tr>
  85. <tr>
  86. <td>TTY</td>
  87. <td class="tty"><span>In Use</span></td>
  88. </tr>
  89. <tr>
  90. <td>TV</td>
  91. <td class="tv"><span>In Use</span></td>
  92. </tr>
  93. </table>
  94.  
  95. <p>
  96. I've found that Opera supports the most, including Aural, Handheld, Print, Projection (full screen), Screen, and
  97. Speech. Firefox supports Print, Projection, and Screen. Safari, IE, and K-Meleon only support Print and Screen.
  98. </p>
  99.  
  100. </body>
  101. </html>
  102.  
  103. **************************************************
  104. ********************** CSS ***********************
  105. **************************************************
  106.  
  107. .audio, .aural, .braille, .embossed, .handheld, .print, .projection, .screen, .speech, .tty, .tv { background-color:#FFF; }
  108. .audio span, .aural span, .braille span, .embossed span, .handheld span, .print span, .projection span, .screen span,
  109. .speech span, .tty span, .tv span { display:none; }
  110. @media audio { .audio { background-color:#CF9; } .audio span { display:inline; } }
  111. @media aural { .aural { background-color:#CF9; } .aural span { display:inline; } }
  112. @media braille { .braille { background-color:#CF9; } .braille span { display:inline; } }
  113. @media embossed { .embossed { background-color:#CF9; } .embossed span { display:inline; } }
  114. @media handheld { .handheld { background-color:#CF9; } .handheld span { display:inline; } }
  115. @media print { .print { background-color:#CF9; } .print span { display:inline; } }
  116. @media projection { .projection { background-color:#CF9; } .projection span { display:inline; } }
  117. @media screen { .screen { background-color:#CF9; } .screen span { display:inline; } }
  118. @media speech { .speech { background-color:#CF9; } .speech span { display:inline; } }
  119. @media tty { .tty { background-color:#CF9; } .tty span { display:inline; } }
  120. @media tv { .tv { background-color:#CF9; } .tv span { display:inline; } }

URL: http://test.dragonzreef.com/mediaTest2.htm

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.