Helping your site look great with Google Chrome

Friday, March 27, 2009

Since launching Google Chrome last September, we received a number of questions from webmasters and web developers about how to make their sites look great in Google Chrome. The questions were very insightful and illuminating for the Chrome team, and I want to respond with a few helpful tips for making your site look stellar in Google Chrome.

Detecting Google Chrome

Most sites will render the same in both Safari and Google Chrome, because they're both WebKit-based browsers. If your site looks right in Safari, then it should look right in Google Chrome, too.

Since Chrome is relatively new, many sites have confused Google Chrome with another browser. If your site doesn't look quite right in Chrome but works fine in Safari, it's possible your site may just not recognize Chrome's user-agent string.

As platforms and browsers adopt WebKit as their rendering engine, your site can detect and support them automatically with the right JavaScript checks. Commonly, sites use JavaScript to 'sniff' the navigator.userAgent property for "Chrome" or "Safari", but you should use proper object detection if possible. In fact, Gmail has been detecting WebKit properly in Chrome since day one!

If you must detect the user-agent type, you can use this simple JavaScript to detect WebKit:

var isWebkit =  navigator.userAgent.indexOf("AppleWebKit") > -1;

Or, if you want to check that the version of WebKit is at least a certain version—say, if you want to use a spiffy new WebKit feature:

var webkitVersion = parseFloat(navigator.userAgent.split("AppleWebKit/")[1]) || undefined;
if (webkitVersion && webkitVersion > 500 ) {
  // use spiffy WebKit feature here

For reference, here are a few browser releases and the version of WebKit they shipped:

Browser Version of WebKit
Chrome 1.0 525.19
Chrome 2.0 beta 530.1
Safari 3.1 525.19
Safari 3.2 525.26.2
Safari 4.0 beta 528.16

We do not recommend adding "Google" or "Apple" to your navigator.vendor checks to detect WebKit or Google Chrome, because this will not detect other WebKit or Chromium-based browsers!

You can find more information about detecting WebKit at

Other helpful tips

  • Google Chrome doesn't support ActiveX plug-ins, but does support NPAPI plug-ins. This means you can show plug-in content like Flash and Java in Google Chrome the same way you do with Firefox and Safari.
  • If text on your site looks a bit off, make sure you provide the proper content type and character encoding information in the HTTP response headers, or at the beginning of your pages, preferably near the top of the <head> s