IE7 only CSS hacks: Explained



Targeting Internet Explorer 7

There are at least 6 ways to target IE7 only.

To see all these Hacks in action, open up IE7 Only CSS Hacks: Examples in your browser. The text will appear purple in IE7 and black/shades of grey in all other browsers

The Star (*) Hack

html>body .myClass { *color: #ff0033; } where color could be any attribute

Method:

  • Make it readable by IE with an asterisk in-front of the attribute, but not readable by any other browser. Other browsers skip over the attribute since it is not a valid attribute spelling
  • Make it not readable by IE6 by include the html>body.
    IE6 does not understand the html>body
  • This is the simplest way, but makes your CSS will not validate.

The conditional IE comment

<!--[if IE 7]>
<link rel="stylesheet" type="text/css"
href="someFileName.css">
<![endif]-->

Method:

  • This causes an extra http request, but only for IE7 users.
  • This is foolproof, and allows for correcting IE7 quirks. Quirks that i’ve
    found so far include rendering font sizes with em’s weirdly and a 3px offset on page centering.

The LANG filter

<body lang="en"> . . . </body>
(In XHTML, body should have the language attribute to make this work )

(then, you declare the IE7 and old browser value)

#item {background: red;} 
html>body {background: blue;} 

*:lang(en) #item{background: green;}

This is read by FF & Opera. remember pseudo classes hold no value in the
cascade, so either put “!important”, or declare this value second…. declare the value second since you shouldn’t use important!

#item:empty {background: green !important} 

This is read by Safari supposedly, but i have yet to test.

  • The original article on this can be found at http://www.ibloomstudios.com/article7. I added the html>body to make this an IE7 only hack. IE7 understands the html>body, but IE6 does not.
  • I am still testing this one, and haven’t looked on a mac. But the bonus is
    this validates, and telling the screen readers and search engines that your
    page is in English is always a good idea.
  • Since this validates, I consider this a “filter” rather than a “hack”

Triple X Hack

From Brothercake, this hack takes advantage of IE7 support for the substring matching attribute selector, which is an improvement over IE6, and it’s continued lack of lack of support for the negation pseudo-class. And, since Opera 9 doesn’t support the negation pseudo-class, there’s an added CSS3 media query to negate the style for Opera 9.

p.test { color:red; }
p[id$="test"] { color:green; }
p[id$="test"]:not([class="xxx"]) { color:red; }
@media all and (min-width:0px) { p[id$="test"] { color:red; } }

<p id="text" class="test">This paragraph needs to have both a class and id to be targeted by this filter.</p>

Note

  • In the brother cake explanation another hack is presented: the XMLNS hack:

    p[id$="test"] { color:green; }
    html[xmlns] p[id$="test"] { color:red; }

    That hack doesn’t work for me: IE7 undertands the substring matching attribute selector.

The Case Sensitive Attribute Hack

The quirk in IE7′s support of substring matching attribute selectors can be exploited.  IE7 employs some case-sensitivity to the value of an attribute whether or not the attribute type requires case sensitivity. While it makes sense to compare id values in a case senstive manner, attribute values for HTML are case insensitive. The XHTML specifications state that element and attribute names must be lower case, but it does not say anything about attribute values.  In this case, img[align~=LEFT] will match align="LEFT" but not match align="left" but img[align~=left] will match align="left" and align="LEFT".

Code:

p[align~=left]{color: #0000ff;}
p[align~=LEFT]{color: #ff0000;}

<p align="left">This will blue in IE7, red in Firefox and black in IE6</p>

This will blue in IE7, red in Firefox and black in IE6

Method:

  • Use attribute selectors including E[attribute], E[attribute~=value], and E[attribute|=value], where the value is not truly case sensitive (such as align, but not alt or id. IE7 incorrectly requires the attribute value to be case sensitive.

Rationale:

  • For an understanding of why this works, please see my entry IE7 CSS Selectors: How they fail. I discovered this hack while testing out all the selectors.
  • Tested with XHTML transitional, Strict and HTML 4.01 strict
  • XHTML specifications state that attribute names are case sensitive, but don’t specify that attribute values need to be, so this is indeed valide

Notes

  • For me it makes most sense to add the cased attribute to the body tag instead of the each element that needs the hack. For example,

    p.casesensitive {color: #000000;}
    body[align~=left] p.casesensitive {color: #cc33cc;}
    body[align~=LEFT] p.casesensitive {color: #666666;}

    <body align="left"> <p class="casesensitive">This will purple in IE7, grey in Firefox and black in IE6</p>

    the body attribute can be used for all child elements, so useless attributes don’t need to be added throughout the HTML document.

Aimsterloo Hack

The :first-child pseudo-element works in most cases in IE7 except when the first child is a comment. IE7 treats the comment as the first child, even though CSS specifications state that :first-child should apply to elements, and comments are not elements. Note that there is a space between the selector and the colon. 

div :first-child {font-weight: bold;} will not match the paragraph in:
<div class="happy">
<!–comment –>
<p>Hi</p>
</div>

The trick to making this hack useful site wide is to add a useless comment immediately following the opening <body> tag.

p.fchild {color: #000000;}
html>body p.fchild {
color: #cc33cc;}
body :first-child p.fchild {color: #666666;}

<body><!– useless comment –><div><p class="fchild">The div should be the first child of the body, but in IE it isn’t…

Notes

  • I can’t show some of the hacks on this page since I didn’t do the template.  However, they can all be seen in My IE7 Hack Page.

Notes:

  • To see all these Hacks in action, visit IE7 Only CSS Hacks: Examples. The text will appear purple in IE7 and black/shades of grey in all other browsers
  • To learn all about how IE7 fails to understand specific CSS Selectors, I posted details in my blog at IE7 Css Selectors: How they Fail
  • If you would like to target IE6 and less, IE7 and all others separately using the * hack, the code would be:


    p {
    color: #ff0000;
        works in all
    *color: #00ff00;     targets IE6 and IE7
    _color: #0000ff;     targets IE6, not read by IE7
    }

  • The conditional statement can be used to link to an external stylesheet (recommended, because it’s best to separate style from content) or the style can be added where the link element is located in the above example, if you are looking to reduce HTTP requests.

    <!--[if IE 7]>
    <style type="text/css">
    p {color: #ff0000;}
    </style>
    <![endif]-->

This entry was posted in CSS (including hacks), IE7, Web Development. Bookmark the permalink.

12 Responses to IE7 only CSS hacks: Explained

  1. jaschu says:

    Haha! I was looking for something else relating to javascript and IE7, stumbled onto this page, and it’s you, Estelle! Hi! :) These are great, I’m bookmarking this.

  2. Pingback: Web Design Resource List v4.0 |

  3. bookmarked for posterity, good reference for browser hacks.

  4. Estelle says:

    Rumor has it that there is a seventh hack: *+html {}. I’ll test and blog later.

  5. keebler says:

    Hey guess what? the oh so simple “underscore” hack still does the trick in IE7.
    http://wellstyled.com/css-underscore-hack.html

  6. Estelle Weyl says:

    Hi Keebler-

    The underscore hack does not do the trick for IE7. It does do the trick for IE6. To target both IE6 and IE7 you can use the star hack.

    Take a look at the star hack above. You can also do this:

    selector {
    color: red; /*all browsers */
    *color: blue; /*ie6 and IE7 */
    _color: green; /* ie6 only */
    }

    in this case, all browsers will be red. ie7 blue and ie6 will be green.

  7. ChrisG says:

    Yeah good.

    I have one notice : “This is read by FF & Opera. remember pseudo classes hold no value in the
    cascade”. I have changed the order of this property
    “*:lang(en) #item{background: green;}” but I’ve seen no difference. is it a mistake ?

    Thanks

  8. Gerren says:

    I’ve found another hack that works too… its an easy slash hack.

    http://www.gerrendesign.com/weblog/2008/05/ie7_css_hack.php#comments

  9. snoutz says:

    Thank u so much…u solve my problems..ie really sucks n your blog really usefull..

  10. speedy18us says:

    now i see that you filter tags. :(
    At "The conditional IE comment":

    <!–[if IE 7]>
    <link rel="stylesheet" type="text/css"
    href="someFileName.css">
    <![endif]–>
    The correct end is :
    <![endif]-–>

  11. Pingback: css hacks - 针对ie7 | seoANDme

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>