Cross Browser Compatibility
CSS / HTML

What is Cross Browser Compatibility

Cross Browser Compatibility
Use of -webkit- and -moz- and -ms- in CSS

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.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

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