What main precautions should I keep in mind for my application to work properly in different browsers?

Asked

Viewed 198 times

8

I program small systems using xhtml, ajax and php. When I mount the code I test the parts in Chrome developer tool (Ctr+I) and in phptester.net. When I finish my application I have to debug everything again to run correctly on Firefox and in the Internet Explorer. What main precautions should I take to minimize this final debugging?

php ajax xhtml

  • Do not take into account IE6.

  • I don’t do segmented debug on IE. I simply rotate all functions of the application as if it were the user and try to find strange things, what I think I’ll solve...

  • 3

    With the right +1 in Caffé’s answer, this is the kind of question that can be left unaccepted for longer because it attracts more "competitors" for a good answer.

  • I do the reverse way, produce and test on IE, getting good at it is almost certain that it will look good on others... But the element that always of the difference is the damn select, this one looks different in each browser, they can not do in a pattern!

2 answers

12


Resources that are not in the default definition of HTML, CSS and Javascript are solved differently by each browser; and even the standard features are sometimes solved differently, either by bug or by vendor’s decision.

We developers have used for example very HTML5, but this version of HTML is not yet released so it is with specific features of this version that we have more behavior difference between browsers (what is not closed is supported differently by each browser, or is even supported).

So unfortunately there is no magic: you will have to keep testing and adapting your code so that it runs well in all browsers, and the richer you want your user interface, the more incompatibilities you will find (because the most basic features are already mature and standardized among browsers).

Some practices to minimize your rework:

  • Draw your page to look good even with layout differences between browsers (using fluid layout instead of fixed positions and sizes, for example).

  • Choose a browser as your "recommended". Use specific features to improve the user experience in this browser, but don’t let your application depend on this feature to work (the application will work alternatively even less cool when not running in the browser "recommended").

  • Use frameworks that abstract behavior differences between browsers (for example Jquery).

  • When using a resource or library or framework check which browsers and their versions it supports.

  • Unfortunately the first is the saddest truth...

5

Complementing the @Caffé response:

In the specific case of Javascript, you can use a framework testing, such as the qUnit (from the same team as jQuery).

With it, you can write tests that ensure your code works correctly. And since it runs right in the browser, you can run it in each of the browsers to make sure everything is OK. But remember that depending on how your application is structured, it can be difficult to test it. The more modular, the better.

You might be interested in reading more about Test Driven Development.

And as @Caffé already said, usually the developers of frameworks and libraries like the jQuery, Bootstrap, Foundation, etc.. have tested your codes in different browsers. Thus, working on them usually decreases the margin for problems.

I particularly also recommend avoiding excessive use of Javascript. Generating HTML on the server is easier, including maintenance. Use Javascript for what’s really needed.

Browser other questions tagged php ajax xhtml

You are not signed in. Login or sign up in order to post.