Posted By

wizard04 on 01/13/09


Tagged

css browser type media support


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

LeeRJohnson


CSS Media Type Support


 / Published in: CSS
 

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

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.

  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; } }

Report this snippet  

You need to login to post a comment.