How to ensure that the code works in multiple browsers?

Question

What will be the process of ensuring that the code works as expected in multiple browsers. What would be the best answer?

Answer 1

Avoid short-term bleeding code.

Yes, I know many of you will hate this answer. And if you have never worked in a large corporate environment, you will think that I am Luddite. However, I can’t tell you how many times the requirements that were provided to me specifically listed the elements “No HTML5” or “No CSS3” simply because the client was paranoid about IE6, working exactly the same way as others did .

The obvious general answer is testing, but I would go further. If you are worried about 100% performance in all browsers, you should define your standards. For example, if you need to return code to IE6, you need to worry about how to simulate rounded corners, which is always a hack in IE6 and lower? Or, will the client agree to progressive improvement, for example, square corners for those on dark age browsers and rounded for the rest of us? Does the client indicate fonts that cannot be shared with each other when you lift the page side by side, or do they understand that browsers use different font rendering mechanisms? Is it possible to work only in IE6, or do you need to also support quirks mode? As for rendering with a screen reader (accessibility) or without CSS or Javascript. What about mobile devices? All these were real and measurable problems with my last major corporate client.

I like Adobe Browser Labs as the first line of defense for testing. However, this is just one of the many steps that I take, including several physical computers on several OSs that connect through multiple connections through different network proxies. You simply can’t check enough .... and even then expect to find an error when starting and maturing the site.

Answer 2

• Be compatible with XHTML (w3.org validator)
• Corresponding CSS (w3.org validator)
• Use a cross-browser compatible JavaScript library (less direct JavaScript call possible)

Testing, testing, testing during development. Not at the end!

Answer 3

Take each browser and check: D

You can use websites such as browsers to see how it looks on different browsers and platforms.

Answer 4

The most complete way to do this is to actually test in different browsers. A simple solution would be to create a virtual machine hosting server, configure several virtual machines, and then install a different browser version for different virtual machines to fully test your application.

If not, there are tools that can emulate (but not completely) browsers, and you can test them.

Answer 5

Best measures to take:

• Use CSS Reset (read about it here, implement it however you like)
• Use a Javascript Framework such as jQuery (this will abstract a lot of cross-browsers).
• Validate your HTML and CSS. Make sure you specify Doctype
• You can test most browsers through Chrome, Firefox, and IE8. IE8 has IE7 mode, which can be used to test IE7. Press F12 in IE8 to get a developer window for debugging and troubleshooting. Make sure you request all JS errors. IE6 is tough, but there are a number of resources available that you are likely to find to help you with this.

Hope this helps. Good luck.

Answer 6

http://browsershots.org/

this is the site you are looking for. You need to enter the URL of your website, select the browsers you want to check, and click Submit. It will return screenshots of your site based on your selected browsers.

Answer 7

Unable to ensure disable testing testing ensure

Answer 8

There is no way to check application compatibility for web browsers. The first thing to keep in mind is to understand the standards set for the application, to determine the number of supported browsers and versions. Once we know what we need to support, we can save the following points to ensure compatibility:

• Verification during development. Not at the end.
• Avoid short-term code. New features that come with ES5 or ES6 standards will only be supported by modern browsers, so older browsers will require multithreading. Therefore, whenever possible, use the most common form of Javascript.
• Use jQuery functions if they are included in the project. This helps take care of most problems with cross javascript browser. If they are not included, use only your specific function in your project, which you may need.
• For CSS, try using traditional layout and styling methods instead of the latest CSS3, which may not be supported by older browsers (for example, the transform property).
• Tools like Browserstack can be used to view screenshots of how CSS ended up on different machines.
• Actually test on different machines and browsers. Although chrome provides an excellent emulator, but when the code really works on this OS and ecosystem, it may work erroneously. Thus, the best way to ensure you actually test them in every ecosystem.
• Use tools like VirtualBox to test older browsers and different OSs.