molly.com
Sunday 27 November 2005
On CSS Hacking: The Post You Must Read
IF THERE IS ONE POST ALL WEB DESIGNERS AND DEVELOPERS MUST READ this year, it’s Tantek Çelik’s eye-opening “Pandora’s Box (Model) of CSS Hacks And Other Good Intentions.”
The piece chronicles the fascinating history of CSS hacks, how they came to be, and why. And who better to cover this issue than one of the most infamous creators of CSS hacks, despite all best intention? Tantek continues beyond the historical to discuss the challenges that browser developers face when dealing with hacks, including commentary on Microsoft IE 7.0 and the very real and problematic impact that certain kinds of hacks can cause.
Wrapping up with some excellent advice about what we can all be doing now to avoid trouble in the future both near and far, Tantek’s article, originally posted to his own site and now to WaSP, proves to be as practical as it is philosophical.
Filed under: standards, software, WaSP
Posted by: Molly | 4:04 am |
November 27th, 2005 at 4:24 am
This is why I am (and always have been) steadfast in my refusal to use box model hacks etc etc.
If you can’t do something without hacking it into place, perhaps its worth reconsidering what you’re trying to do so that it works on whatever you’re viewing it with. At least this way it will function just as well on newer browsers.
I’ve never understood the fetish for perfectionism across all browsers - you will never get it with a reasonbly complex layout, there will alwyas be a discrepancy … but isn’t your job to make sure that the discrepancy doesn’t interrupt the conveyance of information to the user? After all, they can always turn off styles and get the raw information if it is semi-obscured by a misbehaving entity.
Thoughts?
November 27th, 2005 at 5:26 am
Amazing article. How things can get out of hand.
I believe that there is someone, somewhere, out there, that can write a similar article about how tables and pixel size images were thought about, and what happened since then. Think about it.
November 27th, 2005 at 5:32 am
Ranaan: see “The Web is Ruined and I Ruined It” ( http://www.xml.com/pub/a/w3j/s1.people.html ). Note that this was written 8(!) years ago.
November 27th, 2005 at 7:23 am
It’s a great history of hacks; but it’s a pity the conclusion still has to include "wait for browsers to get better"
November 27th, 2005 at 7:56 am
Great article, but I can’t see the final call for action (rely on standards), working until browsers support them; and even then it won’t be good enough for some clients. Like a certain UK government site that requires XHTML, CSS-P, WCAG A and compatibility with IE3; whilst demands like this are in place what hope have we got!
November 27th, 2005 at 5:01 pm
His article goes into much more depth than my own, but I find it interesting that we hit on so many similar points. My article is located here: CSS Hack and Slash
http://blocklevel.com/weblog/open_standards/css_hack_and_slash/
November 27th, 2005 at 5:28 pm
Hey Robin, i enjoyed that link. Kind of strange to read knowing it was written so long ago.
November 27th, 2005 at 6:21 pm
Interesting comparison between the articles by Tantek and David Siegel but I don’t think Tantek (and others) ruined the web (again!) by introducing workarounds or hacks.
David Siegel was talking about hijacking code to make it do something it wasn’t meant to. CSS *was* created for visual layout — it just isn’t consistently supported.
CSS workarounds are an opt-in decision. They are usually used when designers want a more precise or complicated layout. You can create perfectly usable, hackless, layouts with just a little knowledge of box model support.
A far cry from the spacer-GIF, stacked-tables, font-tagged, frame-based mess of the ’90s.
November 27th, 2005 at 9:17 pm
@Steven Woods: I’ve never understood the fetish for perfectionism across all browsers - you will never get it with a reasonbly complex layout, there will alwyas be a discrepancy … but isn’t your job to make sure that the discrepancy doesn’t interrupt the conveyance of information to the user? After all, they can always turn off styles and get the raw information if it is semi-obscured by a misbehaving entity.
I think you hit the nail on the head. Visual styles across browsers shouldn’t be identical if it means sinking huge amounts of money and time into the design/code. Good design should be practical. Practical design should be flexible enough to allow for minor differences in browser presentation. Unfortunately, usually these differences are not minor, but mammoth, and they usually involve IE –the largest installed base of browsers. Just as you shouldn’t prevent disabled people from using your site, you shouldn’t prevent the bulk of the internet population from using your site. So some time-sink is necessary so everybody has a good user experience.
November 27th, 2005 at 10:08 pm
” After all, they can always turn off styles…”
I keep reading this in different places, but I have never heard any evidence that the average user would know how to turn off styles in IE (or would care to). Heck, I am not sure if I know!
Does anyone have any supporting info?
November 28th, 2005 at 1:59 am
[…] gs: browsers, css, hack, Molly, Tantek Celik, web standards. Molly says: “IF THERE IS ONE POST ALL WEB DESIGNERS AND DEVELOPERS M […]
November 28th, 2005 at 4:21 am
I am sure glad I read this and your right a article that is a must read.Browers must get better Ben as they no doubt will!!
November 28th, 2005 at 5:35 am
Hackery costs
Hackery costs: Tantek Celic discusses the long-term effects of getting overly tricksy with CSS. The article is long, starts with detail and bounces back between viewponts, but I think the main point is “stay in the mainstream when rendering on…
November 28th, 2005 at 10:36 pm
The one point I don’t understand, as Anne also mentioned, is his opposition to * html. Yes IE6 is not obsolete yet, but it has CSS bugs that are mighty difficult to get around even when coding by the specs. Is he suggesting use html>body and limit to real CSS2.1 browsers? It makes more sense to me to leave the good CSS2.1 in the regular style declarations, then use a * html to send special CSS to correct bugs, knowing no other browser will pick it up - it’s targeted to IE5/6.
Agreed, though, his article is a must-read and quite timely.
November 29th, 2005 at 10:59 pm
Love to read your website for the little tidbits of information.
Best Wishes,
November 30th, 2005 at 4:32 pm
Tantek’s article is utterly brilliant (as expected)….but I’m left feeling that all the mastery of hacks and workarounds shouldn’t be neccessary at all if the browser technology had got it right in the first place….(but where’s the challenge in that eh?!)
He makes numerous really good points - and hacks are still going to be gracing code for years to come yet.
December 1st, 2005 at 9:30 am
I completely disagree with all of this.
Afterall, designing would be so boring without hacks.
December 4th, 2005 at 11:48 am
Edward J. S. Atkinson:I with you disagree.
December 7th, 2005 at 1:02 pm
Ho…… YES,
Use the right tool for the right job…..
The swiss made product!
December 19th, 2005 at 7:41 pm
November 28, 2005 Tantek on CSS Hacking Molly Holzschlag, of the Web Standards Project, writes IF THERE IS ONE POS […]
January 20th, 2006 at 6:57 pm
[…] 올해부터는 IE6 아하 버전의 CSS랜더링 버그를 위한 대표적 Tantek핵을 사용하지 말라는 경고(via Tantek, Molly도 있던데, 얼머나, 어떻게 개선됐는지 궁금하다. […]
December 11th, 2006 at 11:53 pm
[…] Molly says: “IF THERE IS ONE POST ALL WEB DESIGNERS AND DEVELOPERS MUST READ this year, it’s Tantek Çelik’s eye-opening “Pandora’s Box (Model) of CSS Hacks And Other Good Intentions”.” My conclusion on this: learn the proper CSS codes, do it, validate it, and wait for some browsers’ company built one that actually support it. And why did Molly wrote that line in all capital and bold font? It must’ve been really good. […]
July 21st, 2007 at 2:12 am
I don’t like hacking, this word sound bad in my ear,what is the synonym for this bad word?
August 23rd, 2007 at 4:02 am
I have been using CSS for several years now, and always try to avoid any of the CSS hacks when I can. I think I have probably used them just once or twice.
The way I look at it is that with the different browsers our there, one can never really have their sites identical down to the last detail on the different browsers. All we can really do is to try and make sure that the pages work as they should, and appear as close to how we want them as possible, without resorting to using CSS hacks that make things work in one browser but not the other.
September 22nd, 2007 at 5:42 pm
Love to read your website for the little tidbits of information.
September 22nd, 2007 at 5:43 pm
a like here
September 22nd, 2007 at 5:43 pm
ok
October 19th, 2007 at 10:14 am
Hacks sure are a problem. The minute i connected my website on the web i had some php bot crawling my content to find php vulnerabilities. I wish we could just all try to get along and stop trying to hack each other stuff :/
January 23rd, 2008 at 1:03 am
very nice
January 29th, 2008 at 1:10 pm
thanx
March 5th, 2008 at 6:48 am
interesting hack method from css.
March 11th, 2008 at 1:35 pm
Thanks.
March 11th, 2008 at 7:36 pm
Thank You.
March 30th, 2008 at 10:35 am
thanks
May 28th, 2008 at 12:37 pm
thanks for your sharing
May 29th, 2008 at 2:37 pm
thanksss
May 29th, 2008 at 2:37 pm
thankss