I'm working on email and want to toggle section on browser specific. Please check the code below:
<!--Showing on Internet explorer-->
<table class="showing-on-ie-gmail">...</table>
<!--Showing on Chrome-->
<table class="showing-on-chrome-gmail">...</table>
Is there a way to achieve this?
Any help is really appreciate.
Thanks in advance!
Looks like you want to apply specific CSS class based on browser.
You can refer an examples below may help to identify IE and Chrome.
To identify Internet Explorer 9 and lower : You could use conditional comments to load an IE-specific style sheet for any version (or combination of versions) that you wanted to specifically target.like below using external style sheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
To identify Internet Explorer 10 & 11 : Create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
To identify Google Chrome (29+) :
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}
}
References:
(1) How to target only IE (any version) within a stylesheet?
