We all agree on one thing! It’s hard to support IE browsers and even Microsoft realized it, so they have made their move out of their proprietary browser engine Trident towards the Chromium open source project.
At the time of this writing Microsoft Edge beta version for Mac is out 👏👏
IE 9 & Below
To detect IE9 & below we have conditional comments in place. We can wrap any content whether it is html or css in side conditional statements to work only for IE 9 or below browsers.
Everything between <!--[if IE]> and <![endif]--> will be picked up by Internet Explorer (This only works till IE9).
<!--[if IE 6><link href="ie.css" rel="stylesheet"><![endif]-->
<!--[if IE 7><p>This is visible only in IE</p><![endif]-->
<!--[if IE 8>…
<!--[if IE 9>…
Detect IE 10
To detect IE10, we do not have any conditional statements in place, & I would suggest having an inline script to fetch user agent to identify the browser.
Inline script is suggested here because let’s say if any javascript file has ES6 syntax or some error then it will block the remaining JS from execution and will break the page. So having inline script will execute without any issue and can detect the browser type.
JavaScript to detect browser type
<script>
var htmlTag = document.documentElement;
htmlTag.setAttribute('data-useragent', navigator.userAgent);
</script>//This will add user agent data attribute to <html> tag
<html data-useragent="user agent value">
CSS Specific to IE 9 & IE 10
For browsers IE 10 & below we have a key word MSIE in userAgent value and value ranges for 8 to 10 to detect specific version of IE browser.
html[data-useragent*='MSIE 9.0'] .css-selector {
display: block !important;
}
html[data-useragent*='MSIE 10.0'] .css-selector {
display: block !important;
}CSS Specific to IE10 & Below
html[data-useragent*='MSIE'] .css-selector {
display: block !important;
}
Comments
Loading...
Leave a reply