Posted in CSS

CSS : Differentiate Styles between IE and Other Browser

There are times when we need to write browser specific CSS. But, without any JavaScript code, just like media queries are used to write responsive CSS, we can use plain CSS to differentiate styles across IE and other browsers.

We may need this IE and other browser differentiating styles in order to make our application compatible with old un-upgraded IE engine, but still want to give the good layer of coating to support new browsers with fancy styles which almost are broken in Internet Explorer.

Following media query can be used to apply CSS styles only to IE 10+ versions:

/* IE10+ specific CSS styles */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* Styles written here will be applied only to IE browsers */   
}

-ms-high-contrast is an IE specific property that will not be parsed by other browsers. This allows CSS styles to be available only to IE.

Following support query can be used to apply CSS styles to all browsers except IE:

/* Styles not applicable for IE */
@supports not (-ms-high-contrast: none) {
    /* Styles written here will be applied in all browsers except IE */
}

The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features. However, unlike @media query, @supports is not compatible with just IE browsers.

There are bunch of other browser specific hacks. You can find the exhaustive list here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s