To view Internet sites, Internet users use special programs – browsers. A few years ago, Internet visitors knew only one or two different browsers, but now the number of such programs is in the tens, especially when you consider that each of them has several versions that differ in functionality.
In this regard, the concept of cross-browser compatibility appeared – a concept that describes the property of a site to work identically and display in all browsers (usually only the most common ones are taken into account). Identity is understood as the absence of layout collapse and the ability to display material with the same degree of readability. The concept of “cross-browser compatibility” is very often confused with pixel-by-pixel correspondence, which is actually a different concept.
How to ensure cross-browser site?
In order for the site to look the same in Internet Explorer, FireFox, Opera, and Google Chrome with a wide variety of versions (from the oldest to the latest), the web designer must take care of the cross-browser of his brainchild from the very beginning of the project.
Where to begin? Well, firstly, you need to decide which browsers the site should work with. To do this, you need to study the statistics of site visits (for example, with similar topics), in which there is an opportunity to see which browsers its visitors used. Google Analytics, for example, provides this feature. Thus, having determined the most popular browsers in terms of the number of visits, you can proceed with the action.
The fact is that different browsers adhere to general rules and standards, but it may happen that the processing algorithms for html codes and cascading css tables will be different for them. And therefore, not always the same element looks the same in different browsers.
There can be several solutions to this problem. The most common method used by many web programmers is to write the so-called “hacks” – sets of special selectors or rules that are understood only by a specific browser. That is, if you need to correctly display the site, say, in three browsers, then you need to write a “hack” for each of these browsers. But for dozens of different browsers and their versions, registering “hacks” is long and irrational. Therefore, another way is to simply use those elements in the layout of html-code, which are displayed the same in all required browsers.
How to test the site for cross-browser compatibility?
It is best to test the site for cross-browser compatibility on a local computer on which different browsers are installed, different versions of browsers, and it is possible to change the resolution of the monitor. This can be done by creating several virtual machines with different operating systems on which various browsers will be installed (Linux, Windows, Mac OS and BSD browsers).
You can check the site for cross-browser compatibility by installing a web server on the local computer (ISS, Apache, …) and accessing the page through the computer’s IP address (http://127.0.0.1). The disadvantages of this method of verification: you test the site only under one OS and under browsers compatible with this OS, in most cases you will not be able to install older versions of browsers in parallel with new versions, you will spend a huge amount of time installing the web server and browsers / various versions browsers.
To facilitate checking the site for compatibility with different browsers, there are already ready-made utilities and online services. Using such services, you will save yourself from installing all the browsers you are checking, or versions of browsers, virtual machines. It will be enough just to install the utility or visit the online cross-browser checking service, and as a result, you can get screenshots of the site displayed in different browsers, and then compare and analyze them.