What is cross-browser compatibility and how to achieve it

What is cross-browser compatibility and how to achieve it

Cross-browser compatibility is the same display and operation of the site in different browsers. If you do not think about this issue at the stage of layout, then, having created a site, you will see that in different browsers it is displayed differently and not everywhere correctly.

Where did this problem come from? The point is that browsers use different engines. The browser engine is responsible for loading, processing, displaying and calculating data. And although today there are a large number of different browsers, if we decompose them according to the engines used, we will see that there are not so many of these engines, since creating our own engine is a very laborious task.

Main engines:

  • Blink – owned by Google, open source, part of the Chromium project. Browsers are used: Chrome, Opera, Yandex.Browser, Vivaldi, etc. Many large companies are working on the development of this engine: Opera, Intel, IBM, Yandex, Vivaldi and others.
  • WebKit – owned by Apple, open source, used in the Safari browser. This engine was used by Google in its Chrome browser from 2008 to 2013.
  • Gecko – owned by Mozilla, open source, used in Firefox and Tor Browser browsers.
  • EdgeHTML – owned by Microsoft, closed source, used in the Edge browser. It replaced the Trident engine (used in Internet Explorer), with the launch of Windows 10, and only works on this operating system. On January 15, 2020, Microsoft released an update for the Edge browser (Microsoft Edge 79 stable), in which it switched to Chromium with the Blink browser engine.

Note.
Subsequent comparisons to Edge are valid for versions below 79.

The problem with different layout display is that different engines perceive and process some html tags and css styles differently, as well as the content of the tags themselves. For example, the Edge browser highlights all phone numbers and adds its own styles.

Chrome

Edge

display phones in Edge

On the site itself, these phone numbers are spelled out as plain text without links, but the Edge browser displays them as links. You can fix this by adding your own styles for the phone number, or by adding the attribute x-ms-format-detection = “none”

As a result, we get the phone number without adding styles:

fixed display of phones in Edge

We’ll tell you more about html and css below.

How to achieve the same display of the site in different browsers?

Having dealt with the concept of cross-browser layout, the question arises: how to achieve correct layout display in all these browsers? Let’s reveal some secrets of html-coders. =)

1. Using prefixes

Prefixes are browser-specific prefixes to CSS property names.

Browser manufacturers cite several reasons for using prefixes:

  • the property is written for a specific browser, and it is not contained in the standard list of properties;
  • the property is experimental, still under development;
  • property implements partial functionality.

Examples of prefixes:

  • -moz- used in Firefox;
  • -ms- used in Edge and Internet Explorer;
  • -webkit- used in Safari, Chrome and browsers based on WebKit and Blink engines;
  • -o- – used in older versions of the Opera browser running on the Presto engine. Since 2013, Opera has switched to the Blink engine.

Sample code:

-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;

  • -webkit-flex-wrap – property for Chrome 4 to 28, Safari 3.1 to 8;
  • -ms-flex-wrap is a property for Internet Explorer 10.

2. CSS hacks

This is the use of special properties that are only understood by certain browsers. Let’s look at an example of a css hack that only works in Firefox. Create a square and paint it red:

<style>
    .hackBlock {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: red
    }
</style>
    
<div class="hackBlock"></div>         

Chrome:

display in chrome without css hack

Firefox:

display in edge without css hack

Now let’s add a property that will only work in Firefox:

@-moz-document url-prefix() {
    .hackBlock {
        background: blue;
    }
}        

Chrome:

display in chrome with css hack

Firefox:

mapping to edge with css hack

3. Separating styles for browsers

The method is to define the type of browser and include a specific style file. Internet Explorer uses conditional comments, which are understood only by this browser, other browsers see this code as a normal comment.

Example for Internet Explorer 9:

<!—[if IE 9]>
    <link rel="stylesheet" href="https://1ps.ru/blog/sites/2019/chto-takoe-krossbrauzernost-sajtov/style-for-ie9.css">
<![endif]—>

The style-for-ie9.css file will only connect in Internet Explorer 9.

Let’s summarize:

  • Mostly prefixes are used for cross-browser layout, this increases the amount of code, but it remains valid and understandable.
  • CSS hacks are an unwanted way to fix bugs. Using them leads to poor readability of the code, invalidation, poor quality support in the future.
  • Splitting styles using conditional statements is used to support Internet Explorer browsers.

Let’s consider the emerging problems of cross-browser compatibility with a small example.

Let’s create an html document and see the display of elements and styles in browsers: Chrome, Firefox, Edge, Safari, Internet Explorer 9/11. In the document, create two horizontal lines, a text input field, a button and a link.

<hr>
<hr>
<input type="text" placeholder="text here"><br>
<button>click</button><br>
<ahref="https://1ps.ru/blog/sites/2019/chto-takoe-krossbrauzernost-sajtov/#">link </a>

Let’s see in browsers:

Chrome:

display in chrome

Edge:

mapping to edge

Firefox:

display in firefox

Safari:

display in safari

Internet Explorer 9:

display in internet explorer 9

Internet Explorer 11:

display in internet explorer 11

As you can see, there are differences in the display of horizontal lines (


), buttons, and there is no placeholder text in Internet Explorer 9. The placeholder attribute for input and textarea tags appeared in the html5 standard, support for which became available in Internet Explorer since version 10.

For Internet Explorer 9 to have a placeholder, you have to use JavaScript. You can write your own solution, or use the ready-made Placeholders.js plugin. To use this script, you need to connect the plugin itself to the jQuery page:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
<script src="placeholders.min.js"></script>

You don’t need to perform any more actions, the plugin will do everything on its own. This plugin supports a wide range of browsers, including Internet Explorer 6.

displaying placeholder in internet explorer

Add padding to all elements, color: red and see what has changed:

Chrome:

display in chrome

Edge:

mapping to edge

Firefox:

display in firefox

Safari:

display in safari

Internet Explorer 9:

display in internet explorer 9

Internet Explorer 11:

display in internet explorer 11

In Firefox, the horizontal lines are red, and in Chrome, Edge, and Safari, the placeholder is black. Add color for the placeholder in the remaining browsers, increase the height of the horizontal line and fill it with red:

input[type="text"]::placeholder {
    color: red;
}            

Chrome:

display in chrome

Edge:

mapping to edge

Firefox:

display in firefox

Safari:

display in safari

Internet Explorer 9:

display in internet explorer 9

Internet Explorer 11:

display in internet explorer 11

All horizontal lines are red, but in Firefox the thickness is different. This is due to the fact that in the Firefox browser, the color: red style colors the border around the element, while in other browsers this style does not affect the border, and it remains transparent. Let’s remove the border and the color: red property. To fix the color of the placeholder for the text field in Edge, you need to use the prefixes: -ms-input-placeholder and -ms-input-placeholder:

hr {
    background-color: red;
    margin: 20px 0;
    height: 5px;
    border: none;
}

input[type="text"]:-ms-input-placeholder {
    color: red;
}

input[type="text"]::-ms-input-placeholder {
    color: red;
}        

Edge:

mapping to edge

Firefox:

display in firefox

Let’s add the rest of the styles:

Chrome

display in chrome

Edge:

mapping to edge

Firefox:

display in firefox

Safari:

display in safari

Internet Explorer 9:

display in internet explorer 9

Internet Explorer 11:

display in internet explorer 11

The appearance is different only for Internet Explorer browsers.

Let’s start with the 11th version. We made the link in the form of a black button and placed the text in the center. For this we used the display: flex property, but specifically added the min-height: 40px property. Internet Explorer flex support since version 10, but with some bugs, one of which we have demonstrated. If an element has a minimum height, then vertical alignment does not work in IE 11. Let’s fix this with a css hack, add properties that will only work in IE 11:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    a {
        display: table-cell;
        min-height: 40px;
        vertical-align: middle;
        text-align: center;
        margin: 10px auto;
        margin-left: 100px;
    }
}        

We get the correct display:

display in internet explorer 11

As mentioned above, flex support in Internet Explorer became available only from version 10, which is why the link in version 9 is displayed as a display: inline inline element.

Let’s fix this by adding a conditional comment to the html document, in which we will include a new stylesheet.

<!—[if IE 9]>
    <link rel="stylesheet" href="https://1ps.ru/blog/sites/2019/chto-takoe-krossbrauzernost-sajtov/style-for-ie9.css">
<![endif]—>

And we will write the styles for the link in a new file:

a {
    display: table-cell;
    height: 42px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}        

Apart from displaying the link incorrectly, the button has no gradient background. This is also due to the fact that support for linear gradients appeared in Internet Explorer 10th version. Create a gradient.svg file with a linear gradient graphic and, in IE9 styles, set the background to the image of the created gradient background: url (gradient.svg).

We get the following styles for IE9:

a {
    display: table-cell;
    height: 42px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}

button {
    background: url(gradient.svg);
}        

As a result, you will get the same appearance of all elements as in other browsers:

display in internet explorer 9

From the above example, we can see that the main cross-browser problems arise when developing for Internet Explorer. Is it advisable to support older browsers? The answer to this question depends on the traffic to your site. It is necessary to analyze the statistics of visits by browsers to your site. Statistics from statcounter.com show that in Russia the share of Internet Explorer is only 3%, and statistics from liveinternet.ru – 1.5% (as of June 2019).

statcounter statistics

liveinternet statistics

For modern sites, it is worth dropping support for Internet Explorer, because without using all the modern CSS capabilities, you will have to perform almost the second layout of the site for a browser with a share of 1.5-3% But, as stated above, it all depends on the users visiting your site.

Cross-browser check: our recommendations

Alas, it is impossible to install all versions of browsers on a computer, you can use services that provide an opportunity to check the site in all kinds of browsers. Let’s take a look at some of them:

  • browsershots.org

    browsershots.org website

    browsershots.org results

  • browserstack.com

    browserstack.com website

    browserstack.com results

The service allows you to select the operating system, browser and its version, after which the selected browser is emulated on the server. The service is paid, but there is a free period: it provides 30 minutes and several types of latest versions of browsers.

Output

Modern browsers render sites according to accepted standards, and often problems arise with older versions of sites and new, experimental css properties. To make the site look the same in all browsers and their versions, you need to use prefixes, think over the layout and try to avoid using CSS hacks. In large projects, you need to think about Internet Explorer users as well.

Would you like to have your site cross-browser checked and bugs fixed? Just let us know about your desire – we will check the cross-browser compatibility, we will tell you what to fix.

Leave a Reply

Your email address will not be published. Required fields are marked *