Cross Browser Compatibility Issues

Use CSS Reset

Every browser has its own internal behaviour and due to this browsers renders page differently if our CSS style does not override its internal behaviour. Therefore we use CSS Reset to make our CSS base in all browsers would same.

Validate HTML & CSS

Validate HTML & CSS from W3Schools validators. If once we validate our HTML & CSS from w3Schools, It will show whether your website has incorrectly coded like missing tags or not.

HTML validator
CSS validator

Test Website Using Different Browsers

Old browsers does not support modern features and this is a common problem. Its more harder when we want to support
mostly browsers and using newer features for styling like flexbox, HTML 5 Video/Audio. Before finalize our code we should test our site in all common browsers.

Vendor prefixes / Webkits

This feature started in CSS3 and very helpful for web developers / web designers. We can do anything with this feature which impossible a few years ago. for example -webkit-border-radius will be replaced by the standard border-radius. It saves a lot of time and just write the same property many times. The CSS browser prefixes that we can use are:

• Google Chrome: -webkit-
• Safari: -webkit-
• Firefox: -moz-
• Opera: -o-
• Internet Expolrer: -ms-
• Microsoft Edge: -ms-

Using a CSS style property, Add the prefixes for each browser with the standard CSS property. This demands the prefixes versions would always first and normal CSS property would come last. For example we want to use CSS3 transition property, its order like:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;