Hi, today I will give you some knowledge about Cross Browser Compatibility. Here I am going to explain about webkit, moz, and ms in CSS for cross-browser compatibility.
Some properties of CSS doesn’t work in every browser. For example, if you write a CSS
display:flex; on your web page it will work in Google Chrome and Mozilla Firefox but not in Safari and Internet Explorer 10.
So we will need to write some extra CSS for these browsers.
Here is the example for Safari and IE 10 browser where you can see that we have used -webkit-flex for Safari and -ms-flex for IE 10.
display: -webkit-flex; /*Safari*/ display: -ms-flex; /*Internet Explorer 10*/
In the same way, we can write other properties of CSS for different browsers to make our webpage fully compatible with every browser.
For example: If you try to customize select dropdown and there is a need where you have to use
appearance: none then it will not work on Firefox. But it will work will
-moz-appearance:none. You can try these examples yourself for better understanding.
I hope this tutorial was helpful for you.
Thanks for visiting.