Home | About Chris Hope | Contact Chris Hope | Search:

Work out the Webkit version with Javascript

Posted September 21st, 2008 in Javascript

This post looks at how to extract the Safari and/or Webkit version number from the web browser's user agent string using Javascript so you can do different things depending on the Webkit version used.

The reason for doing this

One of the websites I work on uses jQuery extensively and we discovered that it would crash Safari 2.0.0 and 2.0.2; 2.0.4 and higher were fine. The site is still usable without jQuery but just loses some useful functionality, so we decided to not use any of the useful stuff for Safari earlier than 2.0.4. According to Google Analytics there are actually a few visitors who use these older versions of Safari and it made sense to put the small effort into preventing the browser crash because it may save a potential e-commerce order.

The Javascript used in this post is not jQuery specific; I just thought it useful to include a reason why I needed to create such a function.

User agent strings

A couple of example user agent strings using Apple's Webkit are shown below. The first one is from Google Chrome and the second from Safari 3.1.2 on Windows.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 
  (KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 
  (KHTML, like Gecko) Version/3.1.2 Safari/525.21

Note that the Version/X.Y.Z part in the user agent string examples above is present only from Safari 3 on and not in the earlier versions. It is also not present in the Google Chrome user agent string, so for compatibility purposes it is best to look at the Safari/XXX.YY and/or AppleWebKit/XXX.YY values instead.

For some reason in Safari the two AppleWebKit and Safari version numbers are often different. A list of the webkit version numbers versus the Safari version numbers can be found here at Wikipedia. From testing various versions of Safari on OSX I have found the version numbers on the Wikipedia page relate to the Safari/XXX.YY version so use that in the Javascript below to extract the web kit version number.

The Javascript

function webkit_version() {
   
    var version = 0;
   
    var regexp = /Safari\/([\d.]+)/;
    var result = regexp.exec(navigator.userAgent);

    if(result) {
        version = parseFloat(result[1]);
    }

    return version;
   
}

The webkit_version() function returns either 0 or the web kit version number as a float. This means that you can do comparisons against the returned value and take the appropriate action.

In the website I was initially referring to, where we only wanted to take action if the browser wasn't Safari or it was Safari 2.0.4 or higher, we could do this, given that the webkit version reported by Safari 2.0.4 was 419.3:

var webkit_version = webkit_version();
if(webkit_version == 0 || webkit_version >= 419.3) {
    ...
}

I hope you find this useful - the code above can be easily modified to suit your particular purpose.

Comments

blog comments powered by Disqus