Different web files created for different browsers
It just occurs to me that over the last decade all HTML / CSS books have always talked about browser incompatibility and how to get around this problem by adding more hacks to CSS, JS, or HTML. Why did they never advise that another way to handle this (and I think the best way) is to add code (php, c, whatever) to the first line of the html file, detecting which browser is being used, then add using CSS / JS files for this browser?
a source to share
In the past, you've added hacks to your JavaScript to determine which browser it was using and launch based on that code. There doesn't seem to be a better way to do this so that each book has its own implementation.
You will find a lot of old book code to detect the browser, and then throughout the code you will see things like:
if (NS4) {
} elseif (IE) {
}
But it's pretty much outdated.
Another important thing we have now is frameworks like jQuery that seek to deflect some of the few existing incompatibilities that still exist. It seems to me that in the past people were just rolling their own style of jQuery-esq framework, so there wasn't one one adopted by the larger community.
One of my favorite quotes about user agent strings came with the release of Chrome:
"And so Chrome used WebKit and pretended to be Safari, and WebKit pretended to be KHTML, and KHTML pretended to be Gecko, and all browsers pretending 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 line was a complete mess, and almost useless, and everyone pretended like everyone else, and the confusion abounded. "
It's a good comedy read - http://webaim.org/blog/user-agent-string-history/
a source to share
If you are using pure browser detection, you need to refresh your list every time a new browser or browser version is issued. This leads to ludicrous situations such as users of the new version who report to upgrade, to an earlier version.
Browser inconsistencies should be handled through feature testing. As others have pointed out, there are JavaScript frameworks like JQuery that handle this for you. For CSS, use conditional comments for purposes of earlier versions of Internet Explorer, as others have mentioned. Try to avoid using "hacks" as they can be fixed in a new version without fixing the problem you were trying to work with.
a source to share
To further say that Matthew Wines said conditional comments are 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 it helps :)
This is because (for the most part and "traditionally" even) CSS hacking has been / implemented by third party developers who do not always have access to server side scripts. If in the early years web development was pioneered by developers, I often thought things would be different.
I don't think this is a bad question, by the way (it was initially rejected for some reason). And, for the record, CSS conditional comments and a stable JS framework like jQuery are definitely the way to go.
a source to share
I think there is a better solution:
Simple solution, just use this JS library and you can easily apply styles for every browser / os combination:
With this, you will get the class name in the body tag with the current name and browser version also with the OS used.
After including the file:
<script src="js/browserclass.js"></script>
For example, on Windows 8.1 with the latest chrome, you will see:
<body class="chrome chrome34 win desktop">
And in your style file you can specify: (.sass styling)
body.chrome
#example
color: blue
or
body.win.chrome
#example
color: red
Note:
Operators[if] deprecated since IE10 so this is the solution for that
a source to share