Targeting Internet Explorer 9 with 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 check out my [Live CSS Hacks Test Page at Bitbucket] MIRROR at [Live CSS Hacks Test Page at GitHub] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

A while back I saw the need for methods of targeting different versions of Internet Explorer other than old ones. Nothing existed to target version 9 for example, and the Conditional Comment was rather cumbersome in that you could not include it within an existing style sheet. That of course would not work with a ‘greater than or equal’ IE 9 CSS block. Here are several methods I have created for this purpose.

First is the IE property combination with :root to rule out IE 8 and lower:

:root .selector { property:value\0; } /* IE 9+ (and old Firefox) */

Author: Jeff Clayton

Example Usage:

:root .selector { color:red\0; } /* IE 9+ (and old Firefox) */

Author: Jeff Clayton

Old versions of Firefox that would be most likely deemed unimportant do still show up, but I am one who loves to do surgical and direct methods, so try this one instead:

_::selection, .selector { property:value\0; } /* IE 9+ (Only) */

Author: Jeff Clayton

And the example then becomes:

_::selection, .selector { color:red\0; } /* IE 9+ (Only) */

Author: Jeff Clayton

This has been tested up through IE 11 which is current at the time of this posting.
For one-liners this is great but also I like to have media queries or @supports blocks. This one works for IE 9 and another I have crafted for IE 9+.

/* Internet Explorer 9 (Only) */

@media screen and (min-width:0) and (min-resolution:.001dpcm) {

    .selector {
        property:value;
    }

}

Author: Jeff Clayton

And for the Internet Explorer 9+ version:

/* Internet Explorer 9+ (Only) */

@media screen and (min-width:0) and (min-resolution:+72dpi) {

    .selector {
        property:value;
    }

}

Author: Jeff Clayton

Enjoy!

Jeff

Advertisements

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. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

Tagged with: , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Hacks, Internet Explorer, Internet Explorer-All, Software, Tech, Web, Web Browser, Web Browsers
2 comments on “Targeting Internet Explorer 9 with CSS Hacks
  1. Priyanka Naik says:

    Hey found your CSS hacks to be so useful thanks for sharing..!! Keep up the good work

    Like

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: