Cross-browser means web application works with all versions of all browsers. To claim cross-browser compatibility, the website is nowadays expected to support browsers such as Mozilla Firefox,Google Chrome, Opera, and Safari in addition to Internet Explorer and Netscape. Here are the basic tips to make your website cross browser compatible.
1. Define Valid Doctype:
Your doctype tells the browser what rules you’ll be using in your code. If you don’t specify, the browser has to guess, and different browsers will guess differently. When you design in “strict mode,” Internet Explorer 6 and above will show behavior much closer to that of Firefox, Safari and other modern browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Otherwise, Internet Explorer runs in a “quirks mode” where it attempts to emulate the behavior of older browsers.
2. CSS Reset:
By default, Different browsers behave as per their default css rules. You need to explicitly define css to make same behavior for different browsers. I like Eric’s CSS reset:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://meyerweb.com/eric/tools/css/reset/index.html
3. Conditional Comments:
Try to use conditional comments instead of CSS hacks.
With conditional comments you can link to separate style sheets for different browsers.
<link type="text/css" href="style.css" />
<!--[If IE]>
<link type="text/css" href="IEHacks.css" />
<![endif]-->
<!--[if !IE]>
<link type="text/css" href="NonIEHacks.css" />
<![endif]-->
4. Try to use javascript library like jQuery, YahooUI, MooTools, Dojo abstract away the differences in the DOM, AJAX and JavaScript.
5. You can use Css Frameworks like BluePrint, 960 Grid. These are mostly cross browser compatible.
See following to know which css framework is suitable for you.
http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/
6. Validate:
The W3C Validation Service validates multiple versions of XHTML and HTML, outputting many useful errors and warnings to help users create a perfect website.
W3C Validator: http://validator.w3.org/
W3C Css Validator: http://jigsaw.w3.org/css-validator/
7. Testing:
I would suggest you to start with firefox and then move to IE. Use Firebug, a firefox addon and IE Developer Toolbar for IE to set layout. To test website on different browser, there are some online and offline utilities like
browsershots,
IETester,
browsercam.
See following to get more app for testing cross browser compatibility:
http://designm.ag/resources/cross-browser-testing/
http://www.bestpsdtohtml.com/7-awesome-resources-to-test-cross-browser-compatibility-of-your-website/
If you are designer you must know difference between different browsers. For this, See followings:
http://www.iecss.com/
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
If you use other ways to make your site cross browser compatible, please leave a comment and share it. If you liked this article don’t forget to digg or share it.
Thanks for sharing this nice blog..
appreciate it a great deal this amazing site is actually proper and also casual
Hi..
actually im facing a problem currently ongoing project my website run very well in IE but GOOGLE CHROME UI not proper working.and my website made by since 2001.so please tell me the error check in page
thanks
Hi,
I actually want to share your post with my friends on my social profiles,
Thank you
good website, thank you.
Very very Thanks for this blog.
But i want browser compatible tutorial for wirdpress website. Can anybody tell me?
I followed most of the suggestions and I must say that my website is better now in terms of browser compatibility. Thanks for sharing.
Hello,
Thanks for sharing such informative and helpful blog post and you are doing a good job so keep posting such amazing articles
thankyou for this blog..
Hey thanks for sharing the tips. In today’s fast paced marketing world if your website is not browser’s compatible than you run the risk of losing significant amount of traffic. A website with cross browser compatibility is a must. Great post.
Good information. Nice post.
These 7 tips are very helpful to me. And with the help of this, you make website cross-browser compatible. In the browser, I am basically used in my email account. If I want any help with this, I am going to the Gmail support phone number.
There is always a compatible browser which we like to access all the time we open the internet. Thus the websites which we access must be supported to all the browsers or the specific browser which we are using. Thus the article recommends us the details about the way to make our browser compatible to support all types of websites.
hi sir ,
i am suresh kumar gupta fraser level java developer ,
some times facing cross browser problem , when ever test the report on browse then some browser not a comfort ,so plz i will request how can solve these problem ,can you help me ?plz….
The website is nowadays expected to support browsers such as Mozilla Firefox, Google Chrome, Opera, and Safari in addition to Internet Explorer and Netscape.
When some one searches for his necessary thing, therefore he/she wants to be available that in detail, so
that thing is maintained over here.
In my form select option drop down having with white background color on google chrome those i don’t want. i want transparent background for all browser. Is there browser compatibility issues. can you give me solution?
Nice blog…… i don’t such thing i have to do for browser compatible design….. Thanks
Wonderful.. This is what we need… thanks for share this tricks