Digital Web Magazine

The web professional's online magazine of choice.

CSS Not([hacks]) : Comments

By Brian Suda

January 7, 2008

Comments

Vincent

January 8, 2008 7:01 AM

I don’t quite agree that this solution is safer: in later versions, IE might be supporting some of the selectors but, for one reason or the other, it might still not support some feature you needed and for which you used the selector to hide it.

I do agree, however, that this is a better solution then hacks: after all, what’s the use of standards when you’re not conforming to them?

Milo

January 8, 2008 7:05 AM

Nice idea. The only downside with this solution is that it can dramatically alter the specificity if your rules. This means that some of your rules will be ignored (and debugging that can be a pain) and will ultimately lead to lots of !important rules, creating a maintenance nightmare.

Still a nice idea, though. I’m sure there are situations in which it beats using hacks.

David Storey

January 8, 2008 7:52 AM

> Finally, using only-child or last-child, we can target just Firefox.

This is very dangerous advice, and is a hack in my book. As you may know, Opera now supports these and the other selectors. There will come a time when Safari and IE will do the same. If you use properties that are part of a standard to target one browser, you are always going to get into trouble and break those other browsers. An example is when developers used a similar technique to target Opera by using Media Queries. Not only did it break Opera when we fixed the bugs those hacks were targeting, but it also broke Safari when they added Media Query support. A Yahoo! site (I forget which one) is a high profile example of a site where this happened.

I’d advise against using this technique in any way. IE can be targeted much more safely with conditional comments. For other browsers it is much more difficult. Although I don’t like it, browser and version sniffing can be used for the other browsers, if it is something that can’t be worked around or object detection can’t be used (CSS for example).

Ryan Fitzer

January 8, 2008 10:36 AM

Great article at starting to find smart ways around IE’s incompatibility.

My though is that while hacks are not valid to the CSS spec, bloated selectors take away from semantic code. I’d rather read and write simple hacks that have specific meaning, than selectors that are all over the place just to target IE.

I do think that this is a great option and thanks for sharing it.

Andy Stratton

January 8, 2008 12:11 PM

First great article, Brian, and thanks for writing it. Definitely a great method of tackling, what we can call ‘valid CSS hacks’, if we should even call them hacks.

I guess the hack nomenclature is more easily adopted and understood, bu it’s not like we’re changing the behavior or functionality of CSS itself, we’re hacking the browsers with CSS, kind of like you’d hack your iPhone with 3rd party apps, etc.

I have to also agree with Vincent above. We’re dealing with two or more beasts in these situations: the browser’s rendering engine, CSS support, and CSS parsing/syntax support.

Any of those being inconsistent then you’re in for a problem. If the rendering issues is not fixed when more of the new CSS spec is supported, then you’ve still got a problem. Gotta love our jobs ;]

John Faulds

January 8, 2008 2:04 PM

I tend to agree with David Storey because:

“This is assuming that when IE8 supports the :lang() pseudo selector it will also be capable of displaying the image.”

can be a dangerous assumption to make.

ppk

January 10, 2008 1:18 AM

I agree with David: using this technique is not a good idea. It has exactly the same problem as the CSS hacks of old: it assumes that if a browser starts supporting, say, :first-child, it will also have solved all CSS bugs that you wanted to work around. That is a dangerous assumption.

A browser might opt not to support :first-child but solve the CSS bug nonetheless, or it might start to support :first-child and don’t solve the bug. In either case your CSS misfires.

If you’re thinking of using this technique, please read my old column Keep CSS Simple before proceeding.

Brian Suda

January 10, 2008 6:34 AM

Thank for everyone’s comments.

@Milo, you are correct, this would change the specificity so this is something to look out for and be careful of.

This article is intended to show alternatives to hacks. As i said, everything in moderation. Microsoft recommends to use conditional comments, and there will always be times when hacks will be needed. No matter what, hack or no hack, with each version of any new browser it might correctly match these CSS3 selectors (or you hacks) and still not render correctly. As a developer we need to decided on trade-offs. This article is meant to make others aware of options besides hacks.

Case-in-point, from the time i wrote this article to now, Opera 9.5 beta has matured and supports many of these CSS3 selectors.

Keep your hacks as ugly as possible so it hurts each time you see them – you’ll never forget they exist. Keep your CSS as simple as possible. Somewhere there is a middle ground and these ideas should not be out-right dismissed – they are just another tool for a developer to be used in the right situations.

John B

January 10, 2008 7:15 AM

It should be noted that Safari 2’s implementation of “last-child” is buggy (http://bugs.webkit.org/show_bug.cgi?id=4812). Which pretty much prevents using this selector at all.

I’m not sure if it’s fixed in safari3.

cruster

January 12, 2008 5:01 AM

If you included a Webkit 3 beta, you might have include Opera Kestrel (9.5) beta as well. I’ve gone through the tests and all of them seem to work in 9.5.

Jens

February 4, 2008 1:41 PM

I’m not convinced.

For one it complicates the CSS code. For another you seem to imply that all code is in one file.

I like to create a separate file for all IE bug fixes using conditional comments in my HTML. If the fixes are extensive (as with a recent project) I even use separate files for both IE6/7 and IE6 only.

This way all CSS is valid, no hacks required.

And should that happy day arrive when IE6 no longer needs to be supported, all I do is delete the specific CSS file and, with a global search&replace, the corresponding conditional HTML comments.

Jared B.

May 28, 2008 1:10 PM

Great article. Very informative right when i needed it. I really like the info you provide on this website. I just started a blog and added this Digital Web to my blogroll. Good info here.

I run into css3 problems all of the time. Sometimes i just want to throw it all away and just upload a new screenshot of the web page every time i edit it. One of the major bugs that i’ve had to handle in css3 is the “last child” as John B. has stated already. but everything seems to run pretty smooth for me outside of that. Jens, i like your idea of running separate files for ie hacks.
-Jared B.
http://jacksonvillewebsitedesign.com/

Sorry, comments are closed.

Media Temple

via Ad Packs