SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Browser Check?

    So, I'm looking for a JS code that will check the current browser and then use a different background image accordingly.

    Mainly for browsers like Flock and etc. that aren't yet CSS3 friendly (background-size:cover; etc.)

    I'm not looking for an alternative to CSS3, because, well, I like it! Just a way to check if the current browser is CSS3 friendly.


    [EDIT]

    I just started reading an article about Object Detection (http://www.quirksmode.org/js/support.html). Seems like a better alternative to browser detection. However, how do I use JS to check if the browser supports a CSS3 statement???

    [EDIT2]

    Okay so now I've found some JS that detects css3/html5 capabilities (http://www.aryweb.nl/projects/mooModernizr/). My only problem is I need some help figuring out how to use the JS. I'm very new to JS!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    First you need to go to http://mootools.net/download/get/moo...2.4-core-yc.js and save the contents as a .js file as you will need mootools in order for this detection script to work.

    Next you will need to also save the contents of http://www.aryweb.nl/projects/mooMod...dernizr-min.js as a .js file then do the following...

    NOTE: Only the options in the
    List of CSS3/HTML5 feature tests

    can be used. Anything else not in the list will return undefined.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>CSS3 Tester</title>
    <script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script>
    <script type="text/javascript" src="mooModernizr-min.js"></script>
    <script type="text/javascript">
        alert(Browser.Features.textshadow);
    </script>
    </head>
    <body>
    
    {content_here}
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •