CSS media detection script for all browsers:

IE, Firefox, Opera, Safari, Konqueror...

I have created a script for the CSS media types checking/detection. You may use it for free for any purposes (non-commercial and also commercial). It's available for download at the end of this page (current version: 15-apr-2009).


If you need to check/detect the current CSS medium - for example if you wish to add some page content suitable only for some media types - this script may help you. This script:

  • does NOT require any CSS nor (X)HTML changes - it's enough to add the script using a <script> tag - see an example below
  • works properly during page loading and when page is loaded - it has a solution for the KHTML layout engine (Konqueror is KHTML-based) allowing to check the media types before the whole page is loaded (and before all CSS style sheets are applied)
  • works both with HTML and XHTML languages - it has been tested with HTML 4.01 Strict and XHTML 1.1 (with an "application/xhtml+xml" MIME type HTTP header for all capable browsers - i.e. for all tested browsers except Internet Explorer and Opera 7.2x)
  • does NOT disable the Opera's Small-Screen Rendering technology when asking about the 'handheld' media type in the Opera's mobile browsers. Because a DOM element used for testing is created and destroyed dynamically, it has no impact on the Opera's Small-Screen Rendering technology - there is no static element or style sheet with the 'handheld' media type active. You can test this here: Opera Mini Simulator (Notice: a "Mobile view" option is off by default)
  • works properly with relatively old browsers - it uses the widely recognized 'color' CSS property for testing. It has also a workaround for Opera < 9.5 bug, which causes losing the CSS style sheet 'body' settings randomly when some weird conditions are met together (script uses the 'currentStyle' property during page loading (but not when page is loaded) on an element contained inside the 'body' (but not 'head') section, the CSS style sheet contains style for the '*' class, page is loaded through the HTTP (but not FILE) protocol, user has refreshed the page (F5)). The script has also a workaround for Opera 7.2x, allowing it to add new styles dynamically with success.

    Tested and works (during page loading and when page is loaded) with:
    • Internet Explorer (Trident): 5.01, 5.55, 6.0, 7.0, 8.0
    • Opera (Presto): 7.2, 7.22, 7.23, 7.5, 8.0, 8.5, 8.53, 9.0, 9.23, 9.24, 9.25, 9.26, 9.27, 9.5, 9.51, 9.52, 9.6, 9.61, 9.62, 9.63, 9.64, 10.0 alpha 1
    • Opera Mini (Presto): basic/advanced: 1.2.2960, 1.2.3214, 2.0.4062, 2.0.4509, 3.1.7196, 3.1.10423, advanced: 4.0.9751, 4.0.10406, 4.1.11313, 4.1.11355, 4.2.13212
    • Safari (AppleWebKit): 3.0, 3.0.4, 3.1, 3.1.1, 3.1.2, 3.2, 3.2.1, 4.0 public beta
    • Chrome (AppleWebKit/V8): 0.2.149.30, 0.3.154.9, 0.4.154.33, 1.0.154.36, 1.0.154.53, 2.0.169.1 beta
    • Konqueror (KHTML): 3.5.8, 3.5.9, 4.0.80, 4.1.0, 4.1.1, 4.1.2, 4.1.3, 4.1.80, 4.2.0, 4.2.1, 4.2.2
    • Firefox/IceWeasel (Gecko): 0.8, 0.9, 1.0, 1.0.4, 1.5, 1.5.0.12, 2.0.0.4, 2.0.0.14, 2.0.0.15, 2.0.0.18, 2.0.0.19, 2.0.0.20, 3.0, 3.0.4, 3.0.5, 3.0.8, 3.1 beta 3, 3.2 alpha 1 pre
    • Fennec (Gecko): 1.0 alpha 1
    • Camino (Gecko): 1.6.1, 1.6.5
    • Epiphany (Gecko): 2.14, 2.18, 2.2, 2.22
    • Flock (Gecko): 1.0.9, 1.1, 1.1.2, 1.2.1, 1.2.6, 2.0, 2.0.2
    • Galeon (Gecko): 1.3.20, 2.0.2, 2.0.4, 2.0.5, 2.0.6
    • K-Meleon (Gecko): 0.8, 0.8.2, 0.9, 1.0, 1.0.1, 1.0.2, 1.1, 1.1.2, 1.1.3, 1.1.4, 1.1.5, 1.1.6, 1.5.0, 1.5.1
    • Kazehakase (Gecko): 0.2.7, 0.4.2, 0.4.3, 0.5.4
    • Mozilla (Gecko): 1.7.8, 1.7.13
    • Netscape Navigator (Gecko): 7.1, 7.2, 8.0.2, 9.0.0.5, 9.0.0.6
    • SeaMonkey/IceApe (Gecko): 1.0.9, 1.1.5, 1.1.8, 1.1.9, 1.1.13, 2.0 alpha 2

    Tested and does NOT work (neither during page loading nor when page is loaded) with:
    • Internet Explorer (Trident): 4.01-
    • Opera (Presto): 7.11 b-
    • Safari (AppleWebKit): 2.0.4-
    • K-Meleon (Gecko): 0.7 sp 1-
    • Netscape Navigator (Gecko): 7.0-


Currently W3C defines following CSS 2 and CSS 2.1 media types:

  • aural (CSS 2)
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • speech (CSS 2.1)
  • tty
  • tv

The 'screen' medium is used most often.


Calling examples:

IsMediaType('screen') - check if the current CSS medium is 'screen'
IsMediaType('screen, projection, tv') - check if the current CSS medium is 'screen' or 'projection' or 'tv'


Complete usage example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>CSS media types checking/detection script usage example</title>
  </head>
  <body>

    <p>An example...</p>

    <!-- may be appended here or inside the 'head' section -->
    <script type="text/javascript" src="./mediatypechecker.js"></script>

    <script type="text/javascript"><!--
        function installSpecialEffects()
        {
            // Exit if small screen found (palmtop etc.)
            if(parseInt(screen.width) < 640)
                return;
            if(parseInt(screen.height) < 480)
                return;

            if(IsMediaType('screen, projection, tv') > 0)
                document.write('<script type="text/javascript" src="./SOME_SPECIAL_EFFECTS.js"><\/script>');
        }
        installSpecialEffects();
    --></script>

  </body>
</html>


Test:

Enable JavaScript to get this working!
Enable JavaScript to get this working!


The script is available for download here: mediatypechecker.js (current version: 15-apr-2009).


Contact: If you have any notices, improvements to this script or if you want to report a bug, you may find the contact information inside the script file. Please contact me in the matter of this script only, and don't ask me for help. I'm a very busy person, so I will have to ignore e-mails with help requests.

Valid HTML 4.01 Strict Valid CSS Level Triple-A conformance, W3C-WAI WCAG 1.0

Hosted by pemor.pl