Separating Internet Explorer 10 and 11 via CSS Hacks

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

If you have looked for CSS style sheet hacks for Internet Explorer you most likely have run into this media query which handles both versions 10 and 11:

/* Internet Explorer 10+ */

@media screen and (-ms-high-contrast:active),
 (-ms-high-contrast:none) {

    .selector {
        property:value;
    }

}

It is easy enough to modify it to target only Internet Explorer 10 using the slash-9 property hack for Internet Explorer:

/* Internet Explorer 10 */

@media screen and (-ms-high-contrast:active),
  (-ms-high-contrast:none) {

    .selector {
        property:value\9;
    }

}

Recently I crafted one-liners to do this as well. The slash-9 hack helps here as well. Here is the Internet Explorer 10 set:

/* Internet Explorer 10+ */
_:-ms-input-placeholder, :root .selector { property:value; }

/* Internet Explorer 10 (Only) */
_:-ms-input-placeholder, :root .selector { property:value\9; }

Author: Jeff Clayton

Here is a new one that targets Internet Explorer 11 and newer:

/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { property:value; }

Author: Jeff Clayton

I have sent these to BrowserHacks.com for inclusion. I hope you find use for them. I have.

Jeff

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind.

Tagged with: , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Hacks, Internet Explorer, Internet Explorer-All, Software, Tech, Web, Web Browser, Web Browsers

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: