How to ensure that the code works across multiple browsers?

What would be the process for ensuring that the code works as expected across multiple b开发者_C百科rowsers. What would be the best answer?

• Be XHTML compliant (w3.org validator)
• Be CSS compliant (w3.org validator)
• Use a JavaScript library that is cross-browser compatible (less direct call to JavaScript as possible)

Test, test, test during development. Not at the end!

Avoid bleeding edge code.

Yeah, I know, many of you will hate that answer. And if you've never worked in a large enterprise environment, you'll think I'm a Luddite. However, I can't tell you how many times the requirements I've been given have specifically listed "No HTML5" or "No CSS3" elements simply because the client was paranoid about IE6 working exactly as the others did.

The obvious overall answer is testing, but I'd go one step further. If you're worried about 100% operation in all browsers, you have to define your standards. For example, if you have to code back to IE6, do you have to worry about mimicking rounded corners, which is always a hack on IE6 and below? Or, will the client accept progressive enhancement such as square corners for those on browers from the dark ages and rounded for the rest of us? Does the client specify fonts that can't be told apart when pulling the page up side-by-side, or do they understand that browsers use different font rendering engines? Is it ok to work just in IE6, or do you have to also support quirks mode? What about rendering with a screen reader (accessibility) or without CSS or Javascript. How about mobile devices? All these were valid and measurable issues with my last major corporate client.

I like Adobe's Browser Labs as my first line of defense for testing. However, it's just one of many steps I take including multiple physical computers on multiple OS's connecting via multiple connections through different network proxies. You just can't test enough....and even then expect to find an error as the site is launched and matures.

Take each browser and test :D

You can use websites like browsershots.org to see how it looks on different browsers and platforms.

The most comprehensive way of doing that is to actually test in different browsers. A simple solution would be to create a virtual machine hosting server, set up multiple VMs, and then install a different browser version to different VMs to fully test your application.

Absent that, there are tools that can emulate (but not fully) browsers and you can test through those.

The best measures to adopt are:

1. Use a CSS Reset (read about it at the link, implement it however you like)
2. Use a Javascript Framework like jQuery (This will abstract a lot of cross browser quirks)
3. Validate your HTML and CSS. Make sure you are specifying a Doctype
4. You can test most browsers via Chrome, Firefox and IE8. IE8 has an IE7 mode that can be used to test for IE7. Press F12 in IE8 to get the developer window to debug and solve issues. Make sure you are prompting for all JS errors. IE6 is a tough one, but there are a number of resources available that you can probably find to help you with this.

Hope this helps. Good luck.

http://browsershots.org/

thats the site you looking for. You need to put in the url of your website, select the browsers that you want to check and click submit. It will return screenshots of the your website based on the browsers that you have selected.

​There is no one way to test the app's compatibility for web browsers. First thing to keep in mind is understand the standards set for the app, define the number of browsers and versions to support. Once we know what we need to support we can keep the following points to ensure compatibility:

1. Test during development. Not at the end.
2. Avoid bleeding edge code. New functions that come with ES5 or ES6 standards would only be supported by modern browsers, hence would need polyfills in older browsers. Therefore use the most native form of Javascript wherever possible.
3. Use jQuery functions if it's included in the project. It helps take care of most javascript cross browser issues. If not included, use just bring its particular function in your project that you might need.
4. For CSS, try to use the traditional methods of layout and styling instead of the latest CSS3 one's which might not be supported by old browsers(like transform property).
5. Tools like Browserstack can be used to see the screenshots of how the CSS turned out on different machines.
6. Actually test on different machines and browsers. Although chrome provides a superb emulator but when code actually runs on that particular OS and ecosystem, then it may misbehave. So the best way to ensure is actually test them in every ecosystem.
7. Use Tools like VirtualBox to be able to test old browsers and different OS.

There is no way to ensure it aside from testing testing testing :-)