If you are a web designer, the thing you hate most when designing pages is browser compatibility. Every browser supports CSS and JavaScript differently. Your CSS might look perfectly fine in Chrome, but show different results in Firefox. This happens most often with IE, because IE has the weakest support for CSS and JavaScript. Other browsers might just look a little different, while in IE the effect may not show up at all… So this article shows you how to apply specific code or CSS only to IE, or only to non-IE browsers.
Some people use JavaScript to detect the browser and apply the matching code. But detecting the browser with JavaScript isn’t really the best approach: if the user has disabled JavaScript, the page can end up in a mess. Instead, you can check the browser directly in HTML: whether it is IE, and which IE version. This is called an IE conditional.
IE Conditionals:
First, check whether the browser is IE:Second, check the IE version:Third, when the browser version is lower than X:Fourth, when the browser version is higher than X:These four forms are the most common. When you write this HTML, the browser checks whether it meets the condition. If it does, it shows the content inside the tag. If it doesn't, the browser simply skips it.Note that the syntax above only works for IE. For example, suppose you want content shown only to IE 8 and above. With the syntax above, visitors using Chrome, Firefox, or other browsers won’t see that content either. If you want to show content “when the browser is not IE 8, or when using other browsers,” use:
<--Conditional Keywords: lte, gte, lt, gt
You may have noticed the keywords lte, gte, lt, and gt in the conditions above. Here is a quick look at what each one does:- lte: shown when the version is not greater than (less than or equal to)
- lt: shown when the version is less than
- gte: shown when the version is not less than (greater than or equal to)
- gt: shown when the version is greater than