Cross browser compatibility

What is cross browser compatibility?

Cross browser compatibility means to what degree websites, webshops, or other applications function on the world wide web (www) throughout multiple web browsers. Web browsers such as Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are the modern web browsers of this time period. Web browsers such as Microsoft Internet Explorer and Netscape are seen as older web browsers and do not support all the functions that modern web browsers do.

When a website has a certain functionality, that is not possible or should be developed differently on other (older) web browsers, is being programmed in a different way or an alternative solution, then that is an example of maintaining cross browser compatibility. Below are two examples where cross browser compatibility has been maintained by either developing in a different way or with alternatives.

Examples of fixing cross browser compatibility

Below we will show some examples that may occur whilst developing websites and webshops.

WebP images are not supported by Microsoft Internet Explorer

This website uses images with file type WebP. These images are much quicker to download in comparison to regular images, such as JPEG-images or PNG-images. That is great, but Microsoft Internet Explorer (an old web browser) does not recognize this file type as an image that can be drawn, so it can not do anything with it. The reason for this, is that WebP is a file type that was introduced by Google in 2010 and was not yet used by all other web browsers, because it had to prove itself to be a succes before they are willing to use such a product that has been developed by another company: Google.

This website offers multiple image file types, so the web browser can choose what file type to us. This will ensure that if a web browser does not support WebP, that they will choose for the JPEG or PNG file type. People who still make use of browsers that do not support WebP are not able to profit off of the reduced image file size benefit that WebP images offer, which would make websites faster, but luckily they can still see the JPEG or PNG images.

Since 2020 a new file type for images has been released: AVIF. Images of this type are even smaller in file size and therefore quicker to download in comparison to the WebP file type. WebP images are, on average, 30% lighter than JPEG images, while AVIF images are, on average, 50% lighter than JPEG images.

Source: https://www.ctrl.blog/entry/webp-avif-comparison.html

Text gradient is not possible in Microsoft Internet Explorer

As you might have notived by now, Microsoft Internet Explorer is getting all the blame today. In Google Chrome it's possible to apply a gradient on texts. Unfortunately, this is not possible in Microsoft Internet Explorer, because this is a functionality that was introduced after the period of Microsoft Internet Explorer still being developed further; that is no longer the case, hence why this functionality is missing.

Fortunately, it is possible to check whether or not a web browser supports such a gradient. If a web browser does not support it, then a solid color is used and there will be no attempt to apply a gradient to the text in web browsers that do not support it. When this is attempted, however, what will happen is that the gradient gets applied to the background of the text instead of the text (which looks bad).

More programming work while search through lists

Imagine, this website needs to search for all images on the home page. Then, the website has to check what images are visible and which are not yet visible on your screen. To do this, the website has to loop through a list. This is easy to program for modern browsers. However, when dealing with older web browsers, it gets lot more lengthy (see the comparison below).

var images = document.getElementsByTagName('img');
images.forEach(function(image) {
  // .....
});

var images = document.getElementsByTagName('img');
var amountOfImages = images.length;
var iImage, image;
for(iImage = 0; iImage < amountOfImages; iImage++) {
  image = images.item(iImage);
  // .....
}

This is a big difference, since this sort of code is used pretty often by websites and webshops. This means that it is not logical to use the first example, because it does not work on older web browsers, unless there is no need to support the use of this web browser.

How do we check our websites and on which web browsers?

We develop your website or webshop while using Google Chrome, because that is the web browser is the most popular world-wide (66% market share at the end of 2020). Later, we check your website on Microsoft Edge, Mozilla Firefox, Safari, and Mobile Safari.

We check the design, the layout of elements and the functioning of your website or webshop, for instance whether or not the contact forms and expandable menus function properly.

We develop websites and webshops with cross browser compatibility in mind. When we add something, we also think about how this would function on other web browsers, namely those where we experience the most amount of website-related bugs (Safari).