Tan Hack Crazy

2...3...4...5...6...good lord!

[createErrorMsg]

I'm working on a project for a client who wants a fairly complicated layout, involving eye-leading lines that zig zag across the page. I managed to pull it off for Mozilla and IE6 without too many problems, but to get it functional in IE5.x, I had to Tan Hack the poor thing to death. Seriously, there's like 8 Tan Hacks in there.

My Question: Does anyone see any reason (beyond purist ones. I mean any practical reason) to avoid all those hacks? The Tan Hack is supposed to be pretty safe, effecting IE 5x Win and possibly IE mac 4x only, and forward compatible barring any unforseen proprietary moves by certaIn wEb browsers.

Any thoughts? I could, theoretically deconstruct the site and try a different approach, but I would, obviously, rather not.

Thanks in advance. I look forward to hearing what the 'panel' thinks.

[isitreal]

Use server side browser detection and deliver different stylesheets, that will remove the risk of failure if a browser one day doesn't support the tan hacks.

This is what sites like the newly CSS designed macromedia.com do.

That way you don't have to have a stylesheet filled with hacks, you can have one for standards browsers, and one for IE 5x windows browsers. Less chance of coding errors, forgetting some line of code to neutralize the hacks, etc

[createErrorMsg]

That's an idea I hadn't thought of, probably because my server-side scripting experience is limited to form processing, and even that is limited to nothing more than processing the content of a 'comments' form to make it legible.

What method would you use for the server-side script? ANd is there a language I can use that is similar enough to javascript (where most of my scripting experience lies) that I could learn it fast?

[thesheep]

I would use PHP to do this. It's not quite the same as Javascript but well worth learning.

You could get an existing browser detection script and have it up and running fairly easily.

What's a Tan Hack anyway?

[j4mes]

I'm currently using SSI to do my browser-sniff-n-pick-style-sheet, because it's so fantastically easy :)

Something like this'll pick between browsers and insert style sheets accordingly:

<!--#if expr="$HTTP_USER_AGENT = /MSIE 6./" -->
<link rel="stylesheet" href="[b]IE_6_STYLE[/b]" type="text/css" />
<!--#elif expr="$HTTP_USER_AGENT = /MSIE 5./" -->
<link rel="stylesheet" href="[b]IE_5_STYLE[/b]" type="text/css" />
<!--#elif expr="$HTTP_USER_AGENT = /Gecko/" -->
<link rel="stylesheet" href="[b]MOZILLA_NETSCAPE_STYLE[/b]" type="text/css" />
<!--#else -->
<link rel="stylesheet" href="[b]COMPATIBLE_STYLE[/b]" type="text/css" />
<!--#endif -->

And when I poke through your source as a Firefox user I'll be shown just

<link rel="stylesheet" href="[b]MOZILLA_NETSCAPE_STYLE[/b]" type="text/css" />

Obviously this can be made as complicated as you like, but that's the basic layout.

Nice huh?

J.

[edited by: j4mes at 7:48 pm (utc) on June 29, 2004]

[createErrorMsg]

It's a way to feed styles to IE browsers only. It looks like this...

*html YOURSELECTOR {
IE ONLY STYLE RULE
}

...any styles in it are not seen by non-ie browsers.

It's primarily used to fix the Box Model in IE 5.x, but IE has many other issues that the Tan Hack can fix, provided you don't mind bloating your CSS with them (as I have done).

[createErrorMsg]

j4mes, what is necessary to run those SSIs? Do they go in the sourc code or a a script in the cgi-bin?

[j4mes]

Nope, just stick them straight in your source code where you'd normally just stick

<link rel="stylesheet" href="style.css" type="text/css" />

and then either change the extensions of your pages to ".shtml" (so your server parses them) or if you'd rather keep them as ".html" or ".htm" (I do) then add the following to your .htaccess file to make sure ".html"s and ".htm"s get parsed:

AddType text/x-server-parsed-html .html
AddType text/x-server-parsed-html .htm

Good luck :)

J.

I'm assuming you're using a Linux server btw, in case it isn't working!

[j4mes]

Whoops! Just realised I messed that SSI up by putting MSIE 6. in twice :P

I fixed it, so try now (re-copy), I just tested it and it works like a charm :)

[SuzyUK]

you could also use (instead of the tan hack) IE conditonal comments [msdn.microsoft.com], which should never be outdated by future version releases as they are IE propietary and at the very least they should honour their own rules ;) Note you can specify the version number so things like the float model that requires different rules according to version number can be adequately covered...

Suzy

[Wertigon]

J4mes: Nice solution. But what happens if the browser happens to be Opera or Mozilla spoofing as IE? Doesn't it mean it gives the IE-specific Stylesheet for those browsers?

[isitreal]

But what happens if the browser happens to be Opera or Mozilla spoofing as IE

And a bunch of other possibilities, that test is not nearly robust enough for today's browsers, I'd either use the method suzyUK recommends if only IE Windows browsers need to be detected, which is fool proof, forward compatible, and not dependent on any outside methods, or find a real browser detection script on the web, there's a few good ones out there if you look.

The above SSI test could fail for Opera, Konqueror, Safari, any Gecko browser, and won't distinguish between the reasonably standards compliant IE 5x Mac browsers and the non standards compliant IE 5x windows browsers.