Making Your Website Google Chrome Compatible

Navneet Kaushal By Navneet Kaushal
Expert Author
Article Date:

After the launch of Google Chrome in September last year, many webmasters and web developers have raised questions on how to make their sites look good in Google Chrome. As a response to these questions, Glenn Wilson, Product Manager, Google Chrome is giving few tips in his post that will provide a stellar look to your website.

Detecting Google Chrome

As Safari and Google Chrome are web-kit based browsers, most of the sites will look same on both. If you think your site looks right in Safari, then it will definitely appear right in Google Chrome too.

Because of Google Chrome being new, many sites confuse it with another browser. If you find your site not looking quite good in Chrome in comparison to Safari, there is a possibility that your site is not recognizing Chrome’s user-agent string.

Most of the platforms and browsers adopt WebKit as rendering engine, there are chances that your site automatically detects and supports them with right JavaScript checks. In maximum cases, sites use JavaScript to ‘sniff’ the navigator.userAgent property for both the browsers, Safari and Chrome. But, it is always better to use proper object detention. Even Gmail is detecting Webkit properly in Chrome from the very first day.

Google Chrome

For detecting the user-agent type, use this JavaScript to detect the WebKit:

var isWebkit =

navigator.userAgent.indexOf(“AppleWebKit”) > -1;

If you want to make sure that the version of WebKit is a certain version, or if you want to use a new WebKit feature:

var webkitVersion =

parseFloat(navigator.userAgent.split(“AppleWebKit/”)[1]) ||

undefined;

if (webkitVersion && webkitVersion > 500 ) {

// use spiffy WebKit feature here

}

Here are some of the browser releases and versions of WebKit used by them:

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

Do not add ‘Google’ or ‘Apple’ to navigator.vendor checks for detecting the WebKit or Google Chrome, as this will be unable to detect other WebKit or Chromium-based browsers.

Other Tips:

  • Google Chrome supports NPAPI plugins but, do not support Active X plug-ins. This will enable you to show plugins in Flash and Java in Google Chrome, just like it is done on Safari and Firefox.
  • If you are finding the text on the site a bit off, check if proper content type and character encoding information is provided in HTTP response headers or at the starting of the page. A placement near the top of the section is more preferred.
  • It is wrong to block elements inside the inline elements.

    • Wrong: <a><div>This will look wrong.</div></a>
    • Right: <div><a>This will look right!</a></div>
  • If JavaScript is not working in Google Chrome, debug using Chrome’s in-built JavaScript debugger, under ‘page’ menu-> ‘Developer’ -> ‘Debug JavaScript’ menu option.

If you want to know more about detecting WebKit, visit at http://trac.webkit.org/wiki/DetectingWebKit.

Comments

About Navneet Kaushal
Nav is the founder and CEO of Page Traffic, a premier search engine company known for its assured SEO service, web design and development, copywriting and full time SEO professionals.

Navneet has wide experience in natural search engine optimization, internet marketing and PPC campaigns. He is a prolific writer and his articles can be found in the "Best Articles" section of many websites and article banks. As a search engine analyst , he has over 9 years of experience and his knowledge is in application here.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • 152×252
  • 336×280
  • Newsletter Signup
    Get The Email Newsletter! Please subscribe using your company email address
  • 336×280
  • 336×130