What is the best way to ensure a website works on all browsers?
Do you research the code line by line? Or is there a better way of testing?
Thanks for your help! 
Write the code yourself and donât let any one else mess with it
Joking aside there is no full-proof way to make sure code works on all browsers but there are approaches you can take to minimise disruption.
First of all the phrase âAll Browsersâ means nothing really. You need to define the criteria for your browser support and then work towards that in the code you use. If you want to support IE5 then you can do that quite easily but you can only use the most basic of css and no positioning or layout techniques.
Once youâve decided what browsers to support then you choose code that you know is supported in those browsers.
Bear in mind that even though you may use valid code and modern CSS there are occasional bugs, differences and accepted browser behaviours that mean the display may not look the same in all browsers.
The way I approach a page design is to decide what browser support is required (usually modern browsers only and not IE). If this is for a client then thatâs the first question you should ask. Itâs no good a client asking for a design that works on all browsers because thatâs not possible unless they want plain text. I often see questions on the forums from developers who have developed a page for a client but the clientâs boss has an old ie5 mac that he uses all the time and canât access the site. This question should never occur if youâve done your job correctly from the start.
When coding the page start from the basic page layout (outside to in and top to bottom). After every structural element/section is completed open as many browsers as you can on your desktop and check them all and open and close each from large to small to make sure there is no overflow.
If you do this at every stage you will soon find elements that break a layout before you move on to the next. When you gain more experience you can do this less often but for intermediate coders I would suggest they do this every 15 minutes or so and also validate the html and css at this time. Itâs so easy to make a mistake and build on it and then have to undo everything later when you discover the error.
Avoid plugins and frameworks unless you are expert at controlling them. Avoid code you donât understand. That doesnât mean you canây use third party code but you must have a basic understanding of what its doing and how to fix it if it goes wrong.
Avoid unnecessary stuff like dancing Kittens and cursor trails. Avoid slideshows unless they are unobtrusive, accessible and necessary.
Keep tight control of all the code you use and test, test test. Then test again.
If you do this at every stage then when uou get to the end you;ve already done the testing.
Never ever code for one browser only and then when finished decide to try it on say IE11. If you want to support IE11 then you must test on IE11 at every stage.
Even when you have done all that there are still browser bugs to trip you up or browsers interpret the specs slightly differently so you still need to check in as many browsers as you can muster. There are sites you can subscribe to to test browsers but there is nothing like having the real thing in front of you.
Before I retired I had about 5 computers and 3 or 4 laptops running different platforms (Mac & PC) and would test in all. These days browsers are pretty much standard and if you have never had to code for IE5 or IE6 then you donât know youâre born
7 Likes
Thanks for that awesome response!
The project Iâm working on right now isnât really for a client. It is more so to learn and have something for my portfolio to show companies.
Would it make sense to test it in the current version of all the main browsers? So far I tested it in Chrome, FireFox, and Safari.
I found this article: https://blog.logrocket.com/should-you-support-internet-explorer/
It says " As of today, IE is very much disliked and many big websites, including YouTube, GitHub, CodePen, and Apple, no longer support it.".
I would also add Edge, which is what replaced IE, as it may grow. But hereâs a site (random I just googled it) that shows browser usage and might be a way to decide which ones to actively test against: https://gs.statcounter.com
2 Likes
Yes it is good to include Edge but it is likely to be as compatible as Chrome since it is based on Chromium as stated in Download the new Microsoft Edge based on Chromium.
Another browser is Opera.
As for relying on testing, for most software development, errors caught in testing are more difficult to fix than if the errors were caught during development. So software developers in the past have been told to develop software that is as bug-free as possible prior to testing. In this context since it is mostly the UI it is less of a problem to fix errors discovered by testing. It is however ideal to know what the rules are prior to testing as much as possible. See Can I use⌠Support tables for HTML5, CSS3, etc to determine what is supported. Also CSS Reference Browser Support might help. HTML5test - How well does your browser support HTML5? seems to do the same thing as the first. How To Make A Cross Browser Compatible Website? looks interesting.
I disagree with the suggestion to avoid all libraries (plugins and frameworks or whatever). Many of them explicitly are developed for browser independence, such as jQuery.
The best way to ensure a website works on all browsers is using a tool. I have heard about the
tool named LambdaTest that can test website compatibility for all browsers. Please check about
this tool and then give it a try.
No! The best way is to use a real browser. Only, thatâs not very practical. Using a tool is second-best.
3 Likes
Also the more design specific your coding the more browsers will trip you up for instance
<p>Hello World</p>
Would work on all browsers but once you start using more specific styling, particularly CSS the more browser specific it becomes. Try and use CSS supported on a wide variety of browsers otherwise you need to define multiple CSS for different browsers.
https://www.caniuse.com/ is great for seeing which css works whith which browsers.
Also you can look at using a framework such as Bootstrap or a CMS and check which browsers it supports, but you lose that compatibility if you customise.
I would NOT try and support all browsers, just decide the oneâs you need to based on popularity.
You can also include a message on your site something like âWorks best with XXXXXâ and provide a download link.
Surely the aim is to make it as easy as possible for visitors to use your site, not to require them to download a new browser first.
I know what I would do if I came across a message like that.
1 Like
That fad went out in the 1980s.
1 Like
Are the 80âs over ? ! - I bet hit counters will be dropped next
1 Like
Fair comment
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.