Browser specific CSS
Load only the CSS for the current browser to reduce the bandwidth usage.
A month ago I wrote about how to write IE specific CSS code, it is all fine, but what should be done if you have to pass W3c Validation (IE hack is not specified in any CSS standard). After looking around a bit I found out, that it is batter to make one CSS file with all the rules, while on CSS file for each browser containing browser specific rules. There are several ways to import special CSS files, JavaScript or any other server-side language like PHP, JSP, ASP, etc. can be used. Or just plian HTML comments can be useful sometimes.
PHP Example:
<style type="text/css">
<?php
$browser = $_SERVER["HTTP_USER_AGENT"];
if (preg_match("/^Firefox/", $browser)) {
echo "@import \"FF.css\"";
} elseif (preg_match("/^MSIE/", $browser)) {
echo "@import \"IE.css\"";
}
?>
</style>
HTML Comments:
<!--[if IE 6]>
<link rel="stylesheet" href="IE.css" type="text/css" />
< ![endif]-->