Originally spawned in
this thread [webmasterworld.com], a member here asked via PM if there was any documentation for "what defines a hack" and asked to open a discussion on it without derailing that thread.
--------------------------------------------------
This thread explores "hacks" for browsers only, a separate entity from the other usages of "hack": to pose as something you are not and pass yourself off as professional, to violate a server or domain's security and damage a site in some way (which is actually an incorrect term,) or, if you're into the RC racing world, to drive like a 7 year old and ram my truck into the pipe. :-) Feel free to open discussions of other definitions in another thread.
-------------------------------------------------- Before beginning, note that
hacks are not always a bad thing. Hacking a Wordpress module or perl module to alter it's behavior is really more of a modification and can often be nothing short of genius. But in browsers, most often, they can be very bad.
Having no authoritative definition, let's refer to the
Wikipedia page [en.wikipedia.org]: Hacking (English verb to hack, singular noun a hack) refers to the re-configuring or re-programming of a system to function in ways not facilitated by the owner, administrator, or designer. The term(s) have several related meanings in the technology and computer science fields, wherein a "hack" may refer to a clever or quick fix to a computer program problem, or to what may be perceived to be a clumsy or inelegant (but usually relatively quick) solution to a problem (see also "kludge").
The first sentence I do not entirely agree with (in some cases, this is more of a version development) but the second seems to fit with my own opinion (in spite of the clumsy grammar!) Anything you do to "trick" a system or device into behaving and that trick steps outside of the (often loosely defined) standards, is what I consider a hack. Some classic examples few would argue:
Browser bugs: These hacks "trick" browsers into doing what we tell them to by use of a bug in the browser: star hack, Holly Hack, etc.
Up-side: Internet Destroyer 5 stops destroying, we get to sleep tonight.
Down sides: These hacks may break in future versions of the browser, which means we need to go back and revise the site using them.
My solution: Knowing the previous, if my hack-it finger twitches even for a moment, I know I am far better off calling the client, explaining the delay, and tearing it down/reconstructing in such a way it doesn't need a hack. This is the long road, and though it doesn't make a lot of sense, turns out to be the shorter road . . . in the long run.
A second example of a browser hack - though I don't know if it classifies as a bug or not - is the "stock" methods used to deploy Flash. To this day, Adobe still publishes this same ugly junk of code:
<object id="">
<param name="">
<embed src="">
</object>
<Embed> is invalid inside the <object> element. Moz browsers never really took to the <object> element well and require <embed>. If you put both on the page alone, un-nested, it would validate but then you get two instances to display.
Up-side: Many Flash developers, and the clients behind them, are interested in presentation over semantics, and everyone goes home on time.
Down sides: Does not validate, which means Quirks Mode, which means it's a pain in the patootie to get it cross browser compatible. That is, unless you hack the hack and "throw it in a table" . . .
My solution: The guys/gals at deconcept are awesome, use SWFObject.
Markup hacks- There are many, just a few heavy hitters:
- Tables for layout: Often argued, using a table to lock up a layout, no matter how reliable, is still a hack. Tables are for tabular data, an intersection of two data sets by row and column. Up-side: reliable layout container, across all browsers in both Quirks and Standards Compliance Mode. Down sides: Even when using the summary attribute suggested by WCAG, it still makes for a confusing journey using a screen reader, particularly nasty with nested tables. My solution: Use semantic elements and when absolutely necessary, generic div elements to divide a page into a layout with CSS styles for positioning.
- <br><br>, or <br /></ br> for XHTML enthusiasts: This one is one of those things that shouldn't be annoying, but is forever annoying to me. :-) I can only think of a few situations where the line break is really appropriate or needed, but it is one of the most abused little buggers on the 'net, used in place of <p> or other semantic elements to gain line space. Up-side: You don't have to spend time properly adjusting your CSS for a semantic element (and you should, instead.) Down side: Often used to avoid the previous, often when you find multiple break tags, you will also find no semantic container, <p>. My solution: Take the time to consider, can I remove this <br><br> and use a semantic element?
- I can only say "ugh." Anywhere you use this hack, you can apply margin or padding to the element you want to push around.
- <img src="spacer.gif" width="600" height="1" border="0" alt=""> I still see these in table-less layout, often as a hack to fix cantankerous old browsers, or when the developer just can't figure it out. Up-side: Easy quick fix. Down sides: Increased page weight, unnecessary markup, non-"content" content; this is not a displayable image, it is a image file used to force the presentation to our ends. My solution: See "scrap it and start over" above.
- Proprietary hacks: Microsoft browser conditionals come to mind, and I still say this is a hack. Why? Because you are modifying your document to get IE to play along. As all of the above, I would rather tear it down and rebuild in such a way that it's not needed before I'll type <!--if [IE].......
Why does it make a difference? Like anything else, it gets to be a habit. A bad one. Next thing you know, your site is 50K pages deep and all of a sudden you're getting reports it's broken in this browser or that browser, and off you go to spend another sleepless night fixing everything . . . and maybe with a hack on the hack. If you avoid them like the <font> tag, stick to standards, you won't (shouldn't) have to worry about it. True, this scenario may come to be anyway, with new devices emerging daily - but it certainly reduces your odds.
So what defines a hack for you? Got examples no one thinks about?
