This seems to be a perfect way to target IE8. Anything I’m overlooking here?
#onoff li+li+li a {
float:left; /* Target IE8 /
margin-right:-14px; / Target IE8 /
}
#onoff li:nth-child(2) a, #onoff li:nth-child(3) a {
position:absolute; / Cancel target IE8 /
z-index:1;
color:green;
font-weight:bold;
margin:0; / Cancel target IE8 */
}
Ie8 doesn’t understand the nth-child so you can give rules to other browsers to counteract the ie8 rules set by other means. However, you realise that li + li + li a will select the third list plus any list elements that follow and not just the third like nth-child.
No I actually did not realize that. But there are only 3 list items anyway so it works in this case. I messed with > and ~ (admittedly not my best known rules) but couldn’t seem to target it.
I didn’t double check to see if that works, but wouldn’t IE conditional comment classes be cleaner?
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Yes I usually advocate CCs for IE8 but I happen to know that Eric doesn’t like them so I sidestepped the issue.
There is an issue with specificity in using the boiler plate method as you are adding a class to the rule unlike plain old fashioned hacks or separate CCs. In the end it does boil down to preference and as long as you are consistent it doesn’t make a lot of difference.
This is true. I haven’t used CC’s for the last 5 years. Why? They make my code look ugly
Forgive my ignorance. I’ve always just used classes and such to target lesser versions of IE. Now that IE8 is as low as I go I have a few more options. Having a little trouble fully understanding this…
#onoff li a {
color:green;
}
#onoff li+li a {
color:red;
}
#onoff li+li+li a {
color:green;
}
So if I wanted to get this list item color back to green (and target ie8) then I’d have to overwrite the 2nd list item? Then they would all be green from there on out. Anyway to target ie8 without classes? Or any browser for that matter without using li:nth-child(2)?
This is true. I haven’t used CC’s for the last 5 years. Why? They make my code look ugly
I’m baffled that you consider your proposed hacks to be less ugly, but… OK.
There are plenty of people that don’t use CC’s. If I’m resourceful enough to get by without them then more power to me. Plus I don’t like to maintain two stylesheets.
Yes that’s correct you need the extra rule to reset anything that follows.
Anyway to target ie8 without classes? Or any browser for that matter without using li:nth-child(2)?
You can use :last-child on the body to give rules to other browsers:
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p.test{background:red}/* ie8 by default*/
* html p.test{background:green}/* ie6*/
*+html p.test{background:orange}/* ie7*/
body:last-child p.test{background:black;color:#fff}/* all good browsers*/
</style>
</head>
<body>
<p class="test">Good browsers are black<br>IE6 is green<br>IE7 is orange<br>IE8 is red</p>
</body>
</html>
There are some other invalid hacks around but some of the ie8 ones hit IE9 as well which is why you have to be careful with hacks.
Ahh yes. I just found that one out this morning but didn’t put 2 and 2 together. That works well. All three of those work perfect! Any other ones Paul that you know of like the ie6/7 ones that you don’t have to overwrite? I know those are more dangerous. But for whatever reason I know that the ie6/7 ones are deamed safe. So any deamed safe ones found yet for ie8 that one doesn’t have to overwrite? Thanks
Oh wait. Would the p then have to be the last child to be targeted?
What about body p {red} body:nth-child(1) p {blue}. Without testing I think that would work?
Ahhh…
"Anyway, I'd like to clear up something about :last-child (and, by
extension, :first-child). ‘body:last-child’ means “select any body
element that is the last child of its parent element”. It does NOT
mean “select the last child element of the body element”. To do the
latter, you’d write ‘body > *:last-child’. If you just write ‘body
*:last-child’, that would select any element that is the last child
of another element and is also a descendant of the body element.
‘body > *:last-child’ selects any element that’s the last child of
another element and is also a child of the body element, which pretty
much restricts you to just the body’s last child.
Similarly, ‘body:first-child’ would select any body element that’s
the first child of its parent (which is html) – and since every
document I’ve ever seen has at least a head element before the body
element, ‘body:first-child’ would fail to find any matches. To do
your own translations of selectors like this, check out the
SelectORacle at <http://gallery.theopalgroup.com/selectoracle/>.
Anyway, this could be (and apparently is being) used as a CSS hack
to feed “advanced” CSS to browsers that understand :last-child, in a
manner very much similar to the ‘html>body’ hack. Whether that’s
actually a good idea probably depends on your opinion of CSS hacks in
general."
–
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
“CSS is much too interesting and elegant to be not taken seriously.”
– Martina Kosloff (http://mako4css.com/)
I think you misunderstood the way it was suggested to use CCs. You won’t need two stylesheets. Just one normal stylesheet, except that you can use an “.ie8” class selector.
Please show me how you mean?
Here is a cool one I just thought of…
<!doctype html><html><head><meta charset=“utf-8”>
<title>Testing | http://www.visibilityinherit.com/</title>
<style>
#test {color:red}
:not(ie8) #test {color:blue}
</style>
</head>
<body>
<p id=“test”>test</p>
</body>
</html>
The article I linked to earlier has the full details, but the gist is…
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
A conditional comment to set a class on the <html> element, so that anywhere in your CSS, you can write .ie8 selector {}.
Ahh yes thank you. Yeah I know that stuff. I wrote 5 other ways to do it to http://www.visibilityinherit.com/code/target-ie.php
But you still consider the CSS from your original post to be cleaner?