The term “hack” implies that a legitimate solution to the problem exists. Yet, in order to save time, or perhaps due to lack of knowledge, a sloppy fix is applied to just get the job done. “Let’s hack at it, ’till it works”. But is this the case in terms of CSS hacks? Sure, we call them “hacks”, when in reality they’re really patches. Patches that fix known, documented problems in certain browsers.
I know it’s really just a term, but the problem is this: by using “hack” to describe often necessary code, a negative connotation can be attached, even if what we’re really doing is compensating for a browser’s shortcomings. When you hear someone say: “I avoid all hacks”, you’ve witnessed this negative connotation. Heck, we’d all love to avoid hacks — but we’re also realistic, living in the real world, and designing in 2005.
Now think about the term “patch”. It brings to mind, mending something that’s broken. It’s rip or tear is clearly visible — we know it’s broken, and we know what we need to do to make it look better. We’re not cutting corners, we’re applying a fix.
Perhaps from now on, I’ll refer to fixes for gems like the double float margin bug, or the three-pixel text jog as, well… patches.
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
55 Comments
Come on, the web community loves the word “hack.” I don’t know if it can be considered a buzzword, but it certainly sells books.
i think people know it’s intentionally using a negative connotation for something positive. like “bad” actually means good.
Like a nicotine patch? Helps you to quit IE. God I’m so funny.
In most cases, the original CSS *is* the correct solution, it’s the browser that has the flaw. Deliberately feeding a browser incorrect CSS in order to trick it into behaving the correct way really is a hack in the classical sense, and deserves all the negative connotations that come with it. “This is wrong, but it gets the desired result.”
For example, applying a 1% height to invoke layout in IE/Win in order to correct some weird float bug is most definitely a hack. It’s wrong and wouldn’t be needed in a perfect world. But IE is not rendering CSS correctly, forcing us to use incorrect CSS. It’s a hack.
When a CSS hack is really just a means of serving different rules to different browsers, I prefer to call it a “filter”. The “star-html hack” is really the star-html filter, which may in turn be used to deliver a hack. E.g.: * html #somebox { height: 1%; } is a filter delivering a hack.
If we’re nitpicking about connotations, a “CSS patch” connotes that you’re applying a fix, correcting the original flaw instead of altering your CSS to accomodating that flaw.
Semantics rock!
I think in the case of CSS hacks, there are almost always alternative solutions, even if it is the fault of the various browsers. For instance, the box model hack can be avoided by simply adding margin / padding to the content inside of it, such as H1, P, etc. This also keeps you from having to use negative margins mentioned in the “exceptionally negative” article, as you’ve got yourself an inherant system of indentation. Rather than using hacks to force the box model and save time using padding within, it’s easier and hack-free to do it the other way.
“Hack” doesn’t really have to do with whether a different solution exists, much less a better one.
> “The word hack doesn’t really have 69 different meanings”,
> according to MIT hacker Phil Agre. “In fact, hack has only
> one meaning, an extremely subtle and profound one which
> defies articulation. Which connotation is implied by a given
> use of the word depends in similarly profound ways on the
> context. Similar remarks apply to a couple of other hacker
> words, most notably random.”
>
> Hacking might be characterized as ‘an appropriate
> application of ingenuity’. Whether the result is a
> quick-and-dirty patchwork job or a carefully crafted work of
> art, you have to admire the cleverness that went into it.
From The Meaning of ‘Hack’.
“Patch” would imply that the thing is something indisputably good. Which is most definitely not the case, as a recent IEBlog entry shows.
I have to agree with what Craig C. has said, a patch is something that fixes the bug or exploit. How about using the term workaround?
http://dictionary.reference.com/search?q=workaround
I like the term “Patch” but I think it should be used specifically to define CSS workarounds that are used to combat problems encountered on browsers that are no longer being developed being definitive workarounds. The term “Hack” could then refer to workarounds that are used to combat problems encountered on browsers that are current and/or workarounds that may only be effectively used on a specific browser and maybe problematic on others and will therefore not be bulletproof (definitive) workarounds.
Simply put…
Hack: Describes a non-definitive workaround.
Patch: Describes a definitive workaround.
I guess a hack becomes a patch when you systematically use it in a recurring situation. When it becomes the obvious and perfect workaround for a specific problem, it’s really more a patch than a hack.
To me the term “hack” conjurs the idea of uncertain results, a technique that might not hold water under some unknown conditions.
I guess the same could be said for most workarounds, but it’s really about how you feel about it.
“we’re also realistic, living in the real world, and designing in 2005″… for a 2001 browser.
I had the same thought as Carl, Craig et.al – “patch” implies a fix applied to the original system (i.e. the browser), whereas “workaround” is seems to me to more accurately represent the idea that the code works around identified flaws in other software/systems etc.
Heck, ‘hack’ sounds so much cooler and aren’t those ‘fixes’ actually ‘hacks’ that are not the orginal intended usage of CSS?
We ‘hack’ through a problem to reach all browsers. A ‘patch’ sounds like the problem has been fixed by the W3C through a new version of CSS.
Aren’t semantics fun? ;-)
“applying a 1% height to invoke layout in IE/Win in order to correct some weird float bug is most definitely a hack. It’s wrong and wouldn’t be needed in a perfect world. But IE is not rendering CSS correctly, forcing us to use incorrect CSS. It’s a hack.”
Agreed that it’s wrong — but isn’t it the browser that’s wrong? The fact that
height: 1%;fixes the problem is well documented, and I didn’t have to try a dozen things to get it to work. And I end up having to use it everyday. In this case, it just doesn’t feel like I’m “hacking” to get things to work.The essence of this late-night post should hopefully be this: some folks connotate “hacks” as purely negative, while these fixes often solve real-world problems. Why the negative connotation? I guessed it was the term itself, but reading the comments so far, perhaps I was wrong.
For many of these workarounds, they often seem like patches. “Oh, yep, that’s the double float-margin bug. I need to add
display: inline;for IE.”Like many of you, I inititally develop for standards-aware browsers, then later apply the CSS patches that enable IE to get over itself. This “patch kit” is certianly not the correct, intended use of CSS — but the fact that we know this, and that we know exactly why it’s there and what it’s fixing, to me, is not “hacky”. “Hacky” (to me, and perhaps to me alone) would imply I’m throwing any code in there that I hope may work, and then maybe some of it does.
I tend to lean more toward “filters” myself, as most of my hacking these days uses * html and the IE5 mid-pass filters. But when it comes down to it, we ARE, after all, using technically-valid but usually counterintuitive CSS to exploit parsing errors, which is pretty much a hack first, and any other label second.
I think its good to use a negative connotation.
This puts pressure to IE developers to fix what works incorrectly. Dont you think?
Keep the negative connotation !!!
I think if it were a patch, you’d only apply it once on a single system. However, the problem is not fixed after that.
It remains an issue, and you still have to use your “hack”. That’s why I’d call it a workaround as well. You cannot solve the problem, so you try to work around it…
And BTW, Matt (#3), I love the idea with the IE patch!
I can’t believe no one has said it yet:
“Patches? We don’t need no stinkin’ patches!”
Now that it is out of the way, I think we should call CSS hacks “creative kluges”.
“The term “hack” implies that a legitimate solution to the problem exists.”
Now does it? I agree it implies the use of a technique which is not very straightforward/in line with existing standards. In my opinion, however, it doesn’t imply that a more standard/clean technique exists.
For example, when I’m absolutely positive “good” solutions can’t be found in order to solve a certain problem, I start being more creative (like Will already stated ;)). Now, while building professional software, there’s almost always “good” ways to be found (though they may take a while, depending on the situation). Unfortunately (as we all know), browsers have the tendency to break certain rules, contain rendering bugs, etc. It just makes it so more attractive to find dirty workarounds, or hacks, or features (actually, MS paid me to say that :P).
But patches? Which bug did we solve, then? It’s not like we changed the improved the browser source, and then rebuilt it, is it?
And when my XHTML doesn’t validate it’s not invalid, it’s structurally challenged.
It is at that point that I consider a realignment.
It’s not a hack nor is it a patch. It’s a “workaround”. Your working around the bug in the browser.
Personally, I can’t wait until MSIE renders correctly because there is no way in hell most people are going to switch browsers anytime soon. Most people are so integrated with MS and IE that they refuse to try anything else.
It’s like the guy that has to air up his tires on his car all the time and won’t buy new ones because they cost too much. Sure you can patch a tire, but it’s still an old, wore out tire. (in MSIE’s case, it’s a defective tire)
I guess my time is worth more to me.
Please excuse the rant.
Phill: I’m afraid the wait for MSIE to render CSS correctly and for people to actually use the “fixed IE” will take a real long while.
Soft language lets Microsoft off the hook. “Patches” is softer than “hacks.” There is more shame for them in the phrase, “Hacks to make CSS work in IE,” than if you replace hacks with patches. So calling them hacks is a political term designed to shame Microsoft into fixing their crap (which they are reportedly doing, but the jury is still out).
Also, in generic terms, patches are often (but not always) proactive/positive, whilst hacks are almost always reactive/negative.
Do you have a choice?
To use or not to use ‘hacks’?
I think you can’t decide it…
“In this case, it just doesn’t feel like I’m “hacking” to get things to work.”
Well, it’s because you’re not hacking. From Aristotle’s post, hacking is ‘an appropriate application of ingenuity’ – you’re not using ingenuity, you are using someone else’s “hack”, or a “hack” you came up with when you were hacking.
To say that you don’t feel like you’re hacking just means that you’ve found solutions to the CSS problems you have, so have stopped pushing the CSS envelope.
Douglas
“Hacker” has that sexy, dangerous connotation, like maybe you’ll get busted by The Man for fixing that Three Pixel Text Jog.
No way you’ll pick up as many chicks with “I’m a computer patcher.”
Has anyone ever experienced an issue with IE (wait, that’s not the entire question) 6 when you have for example a text link within a div and on a:hover IE for some odd reason causes the height of the box to expand?
Thanks
I like the term “hack” because it conjures up images of fighting my way through an impenetrable thicket of (mainly) IE tangles, machete in hand, pith helment on head, trying to find a clearing of CSS!
I’m reading your book. Good stuff here. I’m one of those table html guys trying to get rid of it once and for all. Very pleased with the book, keep up the good work.
Patch sounds nice! :-)
A patch is permanent, A hack is temporary. When the browsers start to support CSS correctly, we can then remove the hacks from our markup.
I think patches is a good way to define certain workarounds. Though as a programmer I generally regard a patch as a fix to a bug. It is a toss-up. But in this case i think patches works.
Bravo! I was thinking the same thing recently…
Hack hack. Filter-patch, ammendment fix workaround. We should write a song with this.
Sometimes ‘Hack’ can be used for the folks that like to call themselves ‘a CSS hack’ – the ones who can only modify someone elses CSS, but not write their own. Eg. Fred Flinstone is a CSS Hack. Eric Meyer is…a fix (can we say that?). Sheesh, consider this a late night comment to a late night post.
I agree. I think you stand right in the middle on this one. I get annoyed when people do hacks… er… ‘patches’ before trying to find a better solution, but on the other hand, a patch is sometimes just a necessary evil. Maybe eventually IE will be fixed and we can all be happy…or not.
‘Patch’ suggests that the browser has been ‘fixed’—it hasn’t. It’s been fooled/exploited (on a case-by-case basis) into achieving a specific presentational/layout effect.
The
height: 1%;rule (Holly hack) is used, not to create an element that is 1% the height of the view port/containing element etc., but to overcome an issue with IE’s rendering engine. In fact, IE ignores theheightvalue and expands to accommodate the content the element contains.This is why ‘hack’ should be the preferred term: the CSS rule achieves an effect that is counter to what is expected when the CSS specification is correctly implement by the browser. There is no logical connection between the means and the end.
I Like the term “patch”. Many people see a piece of software as a religion and could feel insulted when you tell them that their browser has errors (which cannot be possible).
Many software vendors do this. Almost nobody is using terms like “bugfix”. “Enhancement”, “update” (where update is more a bugfix than a real update), “hotpatch” or “service pack” are the terms they use.
I have responded to this in relatively great lenght in my new post, Buzzword banter. In short, I’m pretty violently opposed to using the word “patches” for CSS hacks. Detailed explanation in the post, for those who care to know.
And my response.
No need to be “violently” opposed. Geesh.
Paul Graham describes it as follows:
the noun “hack” also has two senses. It can be either a compliment or an insult. It’s called a hack when you do something in an ugly way. But when you do something so clever that you somehow beat the system, that’s also called a hack.
Seems to explain the lot.
Dan,
My apologies about the “violently” – after submitting, I realized it was way too strong a word, but alas, no editing options.
Patch Definition
I refer readers to item 8 under “patch” and item 5 under “patched”.
This is how I’ve always viewed a patch. We are still waiting for the bugs of IE to be fixed and so in the interim we need to apply patches to correct bugs.
I’ve recently been in a situation where a site I developed was not displaying correctly in IE/mac. My boss got rather worried when I started talking about hacks to get the site to render correctly. I had to explain to him what I meant by using the term.
The problem is that the word has both bad and good definitions. Most people on the street would probably only know about the bad definition. In order to promote standards based development we need to find more positive ways to communicate with others on these types of issues.
“patch” might not be the best word to use but it is better than “hack”.
Jon Bourke said:
“My boss got rather worried when I started talking about hacks to get the site to render correctly.”
Thank you.
This is exactly the type of scenario I was referring to. That you, the designer, knows that it’ll be necessary to add fixes for IE, etc., but your boss equates “hacks” with a solution that’s perhaps cutting corners, or that will be difficult (and perhaps costly) to maintain in the future. This might also cause your boss (or others like him or her) to put less faith in CSS, apprehensive about getting behind something that (in their mind) requires trial and error developing (which isn’t the case for well-documented workarounds).
That’s an excellent real-world example of the negative connotation.
Realistically, will we stop using the term “hack”? No. But we can at least think about the ways in which necessary fixes are justified to those that aren’t in the trenches, and their importance in making CSS work with our current crop of browsers.
I would say that even mentioning CSS to the people who don’t quite know what it is might not be a good idea.
To an extent, yes, we need to raise awareness of CSS and design practices. But it’s not always the case. What matters most is that the site gets developed using good practices, clean, semantic markup and uses CSS for presentation. In many scenarios, that’s not really a concern for the powers that be, only for the actual developers (and those who directly supervise the development process).
In the end, it’s the developers that produce the code. If, however, the powers that be start to get themselves involved (and likely try and get you to use bad practices, not intentionally but through ignorance), -then- it’s important to start explaining concepts to them.
But to those people, I wouldn’t ever use the word “hack” in the first place, nor would I use a word like “patch”. If I even mention the whole difference between IE and other browsers in the first place, I would use the point of view of “IE is buggy and we need to work around its buggy problems.”
“How?”
“By adding extra CSS to fix IE’s mistakes.”
They’re not the people who need to know that such fixes are CSS Hacks, and I don’t see them as people who would need to know the fixes can also be labelled “CSS Patch”.
@ Faruk Ates
I agree that one should not speak about CSS (or any other technical subject) using jargon that others don’t understand.
I should clarify and say that in fact my boss is also a developer (I work for a smallish company) and so has some understanding of CSS.
In cases where people have only skimmed over the surface of CSS they may not be so familiar with the jargon as those who are. The word “hack” then takes on a whole different meaning to them.
The point is we should not be using words that have undesirable meaning when trying to promote the use of CSS because some people get worried that CSS is buggy when it is not.
I don’t have time to read all the entries here in detail so I apologize if I’m repeating someone here.
To me a patch is something you put over a hole. You patch a tire, a pair of pants, a crack in your driveway.
Hack is something you do when you are forced to fit a square peg into an round hole. You hack at both until something gives and they eventually fit – sort of.
So perhaps “adaptation” might be a more apt term to use. What you’re really doing is adapting your code to work within the environment of a given browser or application, right?
I know it doesn’t quite conjure the humorous mental image of chopping at an algorithm through brute-force programming, or vulcanizing a leaking logic loop with a piece of code of just the right size, but it has a sort of Darwinian aspect to it that I think is appropriate to our evolution as web designers and coders adapting to a constantly changing environment.
Just a suggestion.
While Faruk’s post and first comment was overdoing it in being violent and raving, I think he makes a good point saying that we should avoid go into details and labeling when discussing with managers, decision makers etc, for as long as possible.
Then, if the need really arises, I’m not sure hack nor patch is a good name.
How about Non-standardized CSS, maybe?
Dan, your typical CSS workaround will potentially require future maintenance, because it relies on specific behaviour from specific versions of web browsers, which may change in new versions. Thus a negative connotation is appropriate, since ongoing maintenance of the workaround may be required.
But how, for example, will the 3-pixel text jog bug disappear from IE6, when IE7 is released? Unfortunately, it won’t. Plenty will still be using IE6, and therefore I’d like my patches (I said it!) to remain. At least until marketshare for IE6 dwindles. Which will be years. We’re still supporting IE5 (in general)!
This is where hack (or patch!) managment becomes really useful. Keeping things separate, for pruning later on down the road. Most likely, “down the road” will be several years.
There is no guarantee for some of the CSS workarounds that they will work properly with new releases of all browsers; they might trigger an entirely new bug, for example, or they might continue to work with one browser but fail in another one. Thus the workarounds may need to be fixed with each new release of all browsers, and checking for this is an ongoing task that gets more complicated with more complicated workarounds.
I know there are reasons for disliking IE conditional comments, but because they clearly target the specific buggy browser version, I think patch might be a better fit for this case (for example, I might be more inclined to call Dean Edwards’s IE7 scripts, when installed as per his instructions, a patch to IE).
I think there will always be CSS Patches/Hacks/Workarounds. CSS is not an exact science, at least not as long as the different browsers render CSS declarations so differently. I SERIOUSLY doubt IE 7 will be workaround/Hack/Patch free. For that matter even the “good” browsers require certain “adjustments” from time to time.
Personally I call em hacks, just so that others know what the hell I’m talking about. And for them to realise that IE is f***ed up. ‘Work-a-round’ sounds a bit like you’re not trying hard enough, ‘hack’ sounds like your breaking it to make it work and patch implies to me that you are fixing at or near the source itself. But the source of the problem is not in the CSS but in IE. ‘Filter’ sounds okay, it sounds safe and non threatening. Which in many cases could be understating the problem. So there isn’t any word that feels right. Hack to me is the closest, because the fix is often an exploit of a non supported but valid W3C feature in CSS. I tend not to use exploits of a non-valid CSS nature because I know that I will have to fix it later. It’s not like I have nothing better to do! :)
Why not use the terms Microsoft likes best. If they knew about it but didn’t fix it yet, it’s a “bug”. If they didn’t know about it or don’t intend to fix it, it’s a “feature”. If they can’t figure out how to fix it permanently (yet), they issue a “hotfix” (“hack”). If they find some company that’s figured out how to fix it, it’s called an “acqusition”.
personally i only use the term Hack if it creates invalid w3c code otherwise its a patch.
To use the term ‘patch’ would be to indicate that you’ve fixed the root cause of the problem. In fact, you’ve just treated the symptoms – the underlying browser flaw remains – so this is at best a workaround. If you have to use an alternative term, that’s the one you should use.
Well, I think of it as an injury. An injury to your layout. Now if you were bleeding you wouldn’t “hack” you injury would you? You’d patch it up! Of course, this wouldn’t get rid of the problem, only time can do this, no, it simply mends it up so that, to the eye, all is well.