Nowadays internet users have many browsers options, so this availability creates a lot of work for developers and designers to make compatible sites which look good and also works well in all browsers. Google Chrome, Mozilla Firefox and Internet Explorer are standard browsers. Safari and Opera also have audience using them so developers and designers can’t ignore them.

Usually, the user faces many compatibility issues when the user opens a site in the different browser. Designers and developers should know issues and their solution to develop any perfect site.

Missing Valid HTML / CSS 

Many browsers interpret HTML and CSS code differently, and some are more than others.

EXAMPLE:  It happens that you forgot to close one ‘<div>’. So may be Firefox and Chrome find the mistake and add missing ‘</div>’ and will render correctly. Other browsers may not be rendered mistake and layout do not display correctly. And finding the missing closing tag is quite frustrating, especially on the large project.

Incorrect (or no) DOCTYPE 

The so called Doctype should always be the very first line in your html. It looks  like this:

 

<!DOCTYPE html>

 

This one line of code makes all difference between a cleanly rendered website and a poorly rendered website. This is true for Internet Explorer as it falls back to its own Quirksmode where it interprets some standards entirely different.

So when any browsers act up differently check your HTML DOCTYPE first. 

Vendor Specific CSS Styles and Handling CSS prefixes

The @supports CSS at-rule provides us browser support for one or more CSS features. This is called “feature query”. This rule you can be placed at the top in CSS file or nested inside any other conditional group at-rule.

 

@supports (display: flex) {

div {

display: flex;

}

}

@supports not (display: flex) {

div {

float: left;

}

}

 

Now we face a problem which solved with CSS prefixes  — these are a technique or a process which used by browser vendors to add a new CSS or JavaScript feature while it is in experimental state, so they can test and observe this feature and make it perfect without conflicting other browser’s implementations, or the unprefixed implementations.

EXAMPLE:

  • -ms for Microsoft (Internet Explorer)
  • -moz for Mozilla Foundation (Firefox)
  • -o for Opera Software
  • -webkit for Safari and Chrome

Here’s some examples:

.wb-image-container {

-webkit-transform: rotate(90deg);

background-image: -moz-linear-gradient(left,green,yellow);

background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));

background-image: linear-gradient(to right,green,yellow);

}

.wb-image {

-ms-opacity: 0.6;

-webkit-opacity: 0.6;

opacity: 0.6;

}

 

 

 

 

Welcome to Wbcom Designs!  - Get 10% off on all plugins & themes
Coupon : HELLO10