Biggest Challenge : Browser Compatibility Issue's

Now let's cover this topic. Which is a one of the important topic, while we are talking about FRONT-END ENGINEERING.

Generally Firefox and Chrome does a great job while implementing HTML elements and CSS properties but IE doesn't.

Browser Compatibility, means your layout which is good on Chrome, may be some feature of that layout have distorted on Mozilla or IE, due to the unsupported HTML element or unsupported CSS property.

Generally i have used these method for dealing those issue's.

1:) HTML5Shiv JS: created by Sjoerd Visscher, which enables styling of unsupported element of HTML 5 on IE version prior to 9.

You can take this file from: https://cdnjs.com/libraries/html5shiv/

Way to use:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>

2:) Using Conditional Comment: Only for IE, here is one concept, which helps you for rendering your website in a right way is, Conditional Comment, within Conditional Comments, you can use special css instructions, which works only on Conditional Comments.

Below are the Syntax:

<!--[if IE 6]>
According to the conditional comment this is for IE 6
<![endif]--> <!--[if lte IE 7]>   According to the conditional comment this is IE lower or equal to 7 <![endif]--> <!--[if gte IE 8]>    According to the conditional comment this is IE 8 or higher<br /> <![endif]--> <!-- [if (gt IE 5)&(lt IE 7)]>    The AND operator. Returns true if both condition satisfied. <![endif]--> <!-- [if (IE 6)|(IE 7)]>    The AND operator. Returns true if both condition satisfied. <![endif]--> 3:) CSS Hacks : When you need to target some particular browser only then you can go for it. For Chrome: @media screen and (-webkit-min-device-pixel-ratio:0) {       // Instructions       .selector/#selector{property:value;} } For Firefox: @-moz-document url-prefix() {      // Instructions       .selector/#selector{property:value;} } For IE: IE 10 & IE 11 for below versions, use conditional comments structure. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    // Instructions   .selector/#selector{property:value;} }