Helping your site look great with Google Chrome
Webmaster Level: Intermediate to Advanced
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:
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 webkit.org.
Other helpful tips
Help us improve Google Chrome!
If you'd like to help even more, we're looking for sites that may be interested in allowing Google to use their site as a benchmark for our internal compatibility and performance measurements. If you're interested in having Google Chrome development optimized against a cached version of your site, please contact us about details at chrome-webmasters@google.com.
Please keep the feedback coming, and we'll keep working to improve Google Chrome!
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 webkit.org.
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 section.
- Don't put block elements inside inline elements.
Wrong:This will look wrong.
Right:
- If your JavaScript isn't working in Google Chrome, you can debug using Chrome's built-in JavaScript debugger, under the "page" menu -> 'Developer' -> 'Debug JavaScript' menu option.
Help us improve Google Chrome!
If you'd like to help even more, we're looking for sites that may be interested in allowing Google to use their site as a benchmark for our internal compatibility and performance measurements. If you're interested in having Google Chrome development optimized against a cached version of your site, please contact us about details at chrome-webmasters@google.com.
Please keep the feedback coming, and we'll keep working to improve Google Chrome!