different web files created for different browsers

Question

It just occurs to me that for the past decade, all books on HTML/CSS always talk about browser incompatiblities and how to get around that issue by adding more "hacks" to CSS, JS, or HTML. Why is that they never advised that the other way to deal with that (and I believe the best way) is to add code (php, c, whatever) in the first line of a html file, detecting which browser is being used then add appropiate CSS/JS files for that browser?

Answer 1

It is because of the Server / Client divide. It is not possible to detect a clients settings from code that runs on the server.

There are Conditional Comments in HTML that will allow you to load alternate CSS or Javascript files if you so choose.

A Quickie reference on Conditional Comments

Answer 2

Because then you have to maintain two sets of css and js files. That's not really any different than adding "hacks" to one, except you have to make changes to two files any time you make a change.

Answer 3

To further what Matthew Vines said the conditional comments look a bit like this...

<!--[if lte IE 6]><link href="LayoutIE6.css" type="text/css" rel="stylesheet" /><![endif]-->
<!--[if gte IE 7]><link href="LayoutIE7.css" type="text/css" rel="stylesheet" /><![endif]-->
<!--[if !IE]><link href="Layout.css" type="text/css" rel="stylesheet" /><![endif]-->

Hope this helps :)

Answer 4

It's because (for the most part and 'traditionally' even) CSS hackery was/is implemented by front-end developers, who don't always have access to back-end scripting. If web-development had been driven by back-end developers in the early days I've often thought that things would be very different.

I don't think this is a bad question at all by the way (it was initially voted down for some reason). And, for the record, conditional comments for CSS & a stable JS framework like jQuery are definitely the way to go.

Answer 5

In the past you would add hacks in your JavaScript to determine which browser the client was using and run code based on that. It seems like there wasn't a decided on best way to do it so every book had it's own implementation.

You will find in a lot of old books code to determine the browser and then throughout the code you would see things like:

if (NS4) {

} elseif (IE) {

}

But largely that's obsolete now.

Another big thing we have now are frameworks like JQuery which look to abstract some of the few existing incompatibilities that are still there. It seems to me in the past, people would just roll their own style JQuery-esq frameworks so there wasn't a unified one accepted by the larger community.

One of my favorite quotes about user agent strings came with Chrome was released:

"And thus Chrome used WebKit, and pretended to be Safari, and WebKit pretended to be KHTML, and KHTML pretended to be Gecko, and all browsers pretended to be Mozilla, and Chrome called itself Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13, and the user agent string was a complete mess, and near useless, and everyone pretended to be everyone else, and confusion abounded."

It's a good comedy read - http://webaim.org/blog/user-agent-string-history/

Answer 6

If you use purely browser detection, you need to update your list each time a new browser or browser version is released. This causes ridiculous situations like users of a new version being told to upgrade downgrade to an older version.

Browser inconsistencies should be handled by testing for capabilities. As others have mentioned, there are JavaScript frameworks like JQuery which handle this for you. With regards to CSS, use conditional comments to target older versions of Internet Explorer as others have mentioned. Try to avoid using "hacks" because they could be fixed in a newer version without fixing the problem you were trying to work around.