For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won't work all legacy browser version. Note: You can find browser support information for technologies by looking up the different features on MDN — the site you're on!

You should also consult caniuse. com , for some further useful details. Now on to the development of the site. You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc.

You might then further subdivide these — implement a common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.

Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don't leave all the testing till the end! After each implementation phase, you will need to test the new functionality.

To start with, you should make sure there are no general issues with your code that are stopping your feature from working:. Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross-browser issues see the next article for more information on determining your target browsers.

For example:. The most lo-fi option is to just do all the testing you can by yourself pulling in teammates to help out if you are working in a team. You should try to test it on real physical devices where possible.

This is a very popular choice, especially in some circumstances — for example, Windows doesn't let you have multiple versions of Windows installed simultaneously on the same machine, so using multiple virtual machines is often the only option here. Another option is user groups — using a group of people outside your development team to test your site.

This could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide results.

Finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time.

You can set up your own testing automation system Selenium being the popular app of choice that could for example load your site in a number of different browsers, and:. If you wish to invest money in testing, there are also commercial tools that can automate much of the setup and testing for you such as Sauce Labs and Browser Stack.

These kinds of tools usually enable a continuous integration workflow, where code changes are automatically tested before they are allowed to be submitted into your code repository.

This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version.

The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform s , device s , browser version s , etc.

Try it on similar configurations e. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform to see how widely the bug persists. It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it.

It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly version 52 , then they have fixed it.

If it is not fixed, then you may want to file a bug see Reporting bugs , below. If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug again, see Debugging HTML , Debugging CSS , and What went wrong?

Troubleshooting JavaScript. Once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers.

Find sources: "Cross-browser compatibility" — news · newspapers · books · scholar · JSTOR July Learn how and when to remove this template message. World Wide Web Consortium.

Archived from the original on Retrieved Web browsers. Features standards protocols. Bookmarks Extensions Privacy mode. HTML v5 CSS DOM JavaScript IndexedDB Web storage WebAssembly WebGL WebGPU. HTTP Cookies Third-party cookies Encryption OCSP WebRTC WebSocket. Google Chrome Chromium Arc Avast Blisk Brave Citrio Coc Coc Dragon Epic Falkon Maxthon Microsoft Edge Opera Otter Puffin Samsung Internet Silk Sleipnir Sputnik SRWare UC Vivaldi Whale Yandex.

Firefox GNU IceCat PirateBrowser SlimBrowser Tor Browser Gecko forks Basilisk K-Meleon LibreWolf Pale Moon SeaMonkey Waterfox. Safari Dolphin Dooble GNOME Web iCab Konqueror Midori Roccat surf. Beaker Flock Redcore Rockmelt SalamWeb Torch.

Beonex Communicator Camino Classilla Conkeror Firefox Lite Galeon Ghostzilla IceDragon Kazehakase Kylo Lotus MicroB Minimo Mozilla suite Pogo Strata Swiftfox Swiftweasel TenFourFox Timberwolf xB. Internet Explorer AOL Deepnet GreenBrowser MediaBrowser NeoPlanet NetCaptor SpaceTime ZAC.

Arora BOLT Opera Coast Fluid Google TV Iris Mercury OmniWeb Origyn QtWeb Shiira Steel Browser for Symbian Uzbl WebPositive xombrero. abaco Amaya Arachne Arena Avant Blazer Cake Charon CM Browser Deepfish Dillo Edge Legacy ELinks Gazelle HotJava IBM Home Page Reader IBM WebExplorer IBrowse KidZui Line Mode Mosaic MSN TV NetPositive Netscape Skweezer Skyfire ThunderHawk Vision WinWAP WorldWideWeb.

Category Comparisons List. Categories : Web browsers Interoperability. Hidden categories: Articles needing cleanup from July All pages needing cleanup Cleanup tagged articles with a reason field from July Wikipedia pages needing cleanup from July Articles that may contain original research from July All articles that may contain original research Articles needing additional references from July All articles needing additional references Articles with multiple maintenance issues All articles with unsourced statements Articles with unsourced statements from July Toggle limited content width.

Devices such as smartphones and tablets can reach the internet just like your home or office PC, and each one has different ways to render a website depending on the type of hardware in use. Browser compatibility describes how your website or web application functions across different types of hardware, operating systems and devices.

Each of these variables may have subtle differences that can display your website slightly differently. Despite the website using the same underlying code, each system implements its own rendering methods.

For instance, a user visiting your website with Microsoft Edge on Windows can have a different experience than someone using Apple Safari on macOS. It can also occur between devices—like an Android smartphone and an iPhone—or even on the same type of system with different versions of the same browser.

As mentioned above, your customers have various ways to access your website, each with its distinctive method of rendering the page. Browser compatibility testing is the process of going through your site to ensure it functions as intended no matter how the site is accessed.

These tests aim to ensure cross browser compatibility for your websites and applications. Cross browser compatibility is the capacity for a website to work well regardless of which browser renders it.

By performing cross-browser testing, your organization can help more people reach and use their sites and web applications.

On the one hand, we have browser compatibility testing, which covers a lot of ground. Nowadays, we have so many ways to connect to the internet—PCs, smartphones, tablets and more.

Compatibility testing helps us check how our sites behave across diverse equipment and software. Cross browser testing, on the other hand, is a subset of compatibility testing focused on ensuring your website works consistently with different browsers. However, for most organizations mainly operating on the internet, cross-browser testing gets the most out of testing by assuring a site works for target browsers.

This mindset required web developers to implement hacks and expend tons of effort to ensure their sites worked on the most-used browsers. Those issues are far less pervasive nowadays—much to the joy of web developers across the world—but they still exist.

Some cross browser compatibility issues are easy to spot, like a page displaying text, images or styles different than intended. While no one wants to have their site change its look because a browser decided to render something slightly differently, these are minor issues that are easily corrected.

Other issues are more subtle. Web developers need to spot these issues early during cross browser testing to prevent users from having a bad experience. The first step to ensure cross browser compatibility is determining your target browsers. Depending on your needs, you can research which browsers and devices your audience uses the most or the features your application uses.

Tools like Telerik Test Studio allow testers to automate their cross-browser tests effortlessly. Test Studio makes it dead-simple to record your tests and execute the test suite against different browsers like Google Chrome, Mozilla Firefox and Microsoft Edge with the click of a button.

One thought that comes across the minds of organizations is whether or not cross browser compatibility is still relevant nowadays. You can make cross-browser testing easier by using a tool like Test Studio to automate repetitive tasks.

Dennis Martinez is a freelance automation tester and DevOps engineer living in Osaka, Japan. He has over 19 years of professional experience working at startups in New York City, San Francisco, and Tokyo.

Dennis also maintains Dev Tester , writing about automated testing and test automation to help you become a better tester. You can also find him on LinkedIn and his website. Subscribe to be the first to get our expert-written articles and tutorials for developers!

Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy. You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info.

By submitting this form, I understand and acknowledge my data will be processed in accordance with Progress' Privacy Policy. I understand I may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication received.

By submitting this form, you understand and agree that your personal data will be processed by Progress Software or its Partners as described in our Privacy Policy.

You can set up your own testing automation system Selenium being the popular app of choice that could for example load your site in a number of different browsers, and:.

If you wish to invest money in testing, there are also commercial tools that can automate much of the setup and testing for you such as Sauce Labs and Browser Stack. These kinds of tools usually enable a continuous integration workflow, where code changes are automatically tested before they are allowed to be submitted into your code repository.

This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version.

The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform s , device s , browser version s , etc.

Try it on similar configurations e. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform to see how widely the bug persists.

It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly version 52 , then they have fixed it.

If it is not fixed, then you may want to file a bug see Reporting bugs , below. If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug again, see Debugging HTML , Debugging CSS , and What went wrong?

Troubleshooting JavaScript. Once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers.

The general approach is usually to fork the code in some way, for example use JavaScript feature detection code to detect situations in which a problem feature doesn't work, and run some different code in those cases that does work. Once a fix has been made, you'll want to repeat your testing process to make sure your fix is working OK, and hasn't caused the site to break in other places or other browsers.

Just to reiterate on what was said above, if you discover bugs in browsers, you should report them:. This article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing. Armed with this knowledge, you are now ready to move on and start learning about Cross-browser testing strategies.

Skip to main content Skip to search Skip to select language. Guides Tools and testing Cross browser testing Introduction to cross-browser testing Article Actions English US. Prerequisites: Familiarity with the core HTML , CSS , and JavaScript languages.

Objective: To gain an understanding of the high-level concepts involved in cross-browser testing. Different devices, from desktops and laptops to tablets and smartphones, to smart TVs, with varying hardware capabilities.

People with disabilities, who may rely on assistive technologies like screen readers, or use only a keyboard. Cross-browser issues commonly occur because: sometimes browsers have bugs, or implement features differently. This situation is a lot less bad than it used to be; back when IE4 and Netscape 4 were competing to be the dominant browser in the s, browser companies deliberately implemented things differently from each other to try to gain a competitive advantage, which made life hell for developers.

Browsers are much better at following standards these days, but differences and bugs still creep through sometimes. some browsers may have different levels of support for technology features than others.

This is inevitable when you are dealing with bleeding edge features that browsers are just getting around to implementing, or if you have to support very old browsers that are no longer being developed, which may have been frozen i. no more new work done on them a long time before a new feature was even invented.

As an example, if you want to use cutting-edge JavaScript features in your site, they might not work in older browsers. If you need to support older browsers, you might have to not use those, or convert your code to old-fashioned syntax using some kind of cross-compiler where needed.

some devices may have constraints that cause a website to run slowly, or display badly. For example, if a site has been designed to look nice on a desktop PC, it will probably look tiny and be hard to read on a mobile device.

If your site includes a load of big animations, it might be OK on a high-spec tablet but might be sluggish or jerky on a low-end device. In later articles, we'll explore common cross-browser problems, and look at solutions to those.

You should compile a list of the potential problem areas. There are multiple general strategies to cross-browser development, for example: Get all the functionality working as closely as possible in all target browsers.

This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a Polyfill to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.

Accept that some things aren't going to work the same on all browsers, and provide different acceptable solutions in browsers that don't support the full functionality. Sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site.

Accept that your site just isn't going to work in some older browsers, and move on. To start with, you should make sure there are no general issues with your code that are stopping your feature from working: Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or Edge.

Do some lo-fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.

Test on a mobile platform, such as Android or iOS. At this point, fix any problems you find with your new code. For example: Try to test the latest change on all the modern desktop browsers you can — including Firefox, Chrome, Opera, Edge, and Safari on desktop Mac, Windows, and Linux, ideally.

Test it in common phone and tablet browsers e. You can set up your own testing automation system Selenium being the popular app of choice that could for example load your site in a number of different browsers, and: see if a button click causes something to happen successfully like for example, a map displaying , displaying the results once the tests are completed take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.

Web development has come a long way since the days of a single browser monopoly. Today, users access the web through a plethora of browsers, each with its unique quirks and features.

Cross-browser compatibility refers to the ability of a website or web application to function correctly and uniformly across these different web browsers. Each browser has its rendering engine, which can interpret code differently.

This can lead to variations in how a website appears and functions on different browsers. Cross-browser compatibility is an important factor in front-end development , as it aims to minimize these differences, providing a consistent user experience regardless of the browser used.

This diversity brings challenges in ensuring a consistent user experience across different platforms. Cross-browser testing is an essential practice in web development that addresses these challenges. By understanding and addressing the unique challenges of various browsers and devices, developers can create websites that are accessible and enjoyable for a wide audience.

Achieving cross-browser compatibility is not a one-time task, but a continuous process that involves a series of best practices:. Testing your website across multiple browsers can be a daunting task, but several tools and techniques can make the process more manageable:.

Despite your best efforts, you may encounter some common cross-browser compatibility issues. By understanding and addressing these issues, you can ensure a more consistent user experience across different browsers.

Remember, cross-browser compatibility is not a one-time task, but a continuous process that requires regular testing and updates as new browser versions are released. Cross-browser testing is a type of compatibility testing.

While compatibility testing checks how well your website or application works in different environments like operating systems, devices, and network conditions , cross-browser testing specifically checks how it works across different web browsers.

The best technique depends on the complexity of the script and the resources available. Manual testing can be effective for simple scripts, but for complex scripts or large websites, automated testing using tools like Selenium, BrowserStack, or LambdaTest can be more efficient.

Ensuring cross-browser compatibility involves following web standards, validating your code, using feature detection, progressive enhancement, and graceful degradation techniques, testing on a variety of browsers, and using cross-browser testing tools.

Cross-browser testing is the process of checking your website or web application on different browsers to ensure it works correctly and provides a consistent user experience.

Compatibility testing includes browser compatibility testing, operating system compatibility testing, mobile compatibility testing, hardware compatibility testing, and network compatibility testing. In the context of software testing, the three types of compatibility are hardware compatibility, operating system compatibility, and browser compatibility.

The "best" compatibility test depends on the specific needs of your website or application. However, a comprehensive compatibility testing strategy should include browser, operating system, and device testing at a minimum.

In software, compatibility refers to the ability of a system to work well in different environments. Types of compatibility include hardware compatibility, software compatibility including operating system and browser compatibility , and network compatibility.

The 4 C's of compatibility typically refer to Character, Chemistry, Commitment, and Communication in the context of relationships. In the context of software, it could be adapted to Code following standards , Consistency across browsers , Compatibility with different environments , and Continuous testing.

A compatibility tool is a software tool that helps check how well your website or application works in different environments. This can include cross-browser testing tools, mobile emulation tools, and more. Compatibility testing is typically performed by software testers or quality assurance QA teams.

However, developers may also perform some compatibility testing during the development process. The three phases of compatibility testing are typically planning identifying what environments to test , execution performing the tests , and analysis reviewing and acting on the results.

Cross-Browser Compatibility and Testing In the diverse digital landscape, ensuring a consistent user experience across various platforms is crucial.

This article explores the importance of cross-browser compatibility, a critical aspect of web development. It delves into the intricacies of cross-browser compatibility, its testing, and the best practices to achieve it.

From understanding the importance of cross-browser testing in web development to addressing common compatibility issues, the article provides a comprehensive guide for developers aiming to optimize their websites for a multitude of browsers.

by Yarema Yurchyshyn. Updated: November 22, Table of Contents. What is cross-browser compatibility and why is it important?