Assignment: Browser Filters

Create a browser compatibility solution that you will use in your final project. You may use any of the solutions discussed in your book or in class. You don’t have to have specific overrides in effect but you should have either browser specific CSS files that will load dynamically or a dynamic browser named class being applied to your body tag (so you will have the capacity to add browser filters). This assignment will be evaluated as part of your final project and does not need to be posted on your assignments portal. It must be in your final assignment though :)

Reading

Book: CSS Mastery
Chapter: 7-8 – Hacks and Filters

Lecture Notes

Hacks and Filters

Your book talks about various hacks and filters in chapter 8. These are good to experiment with but hacks have a bad habit of not working the next time there’s an automatic Windows update that carries an IE fix. Firefox also does regular builds and updates but you won’t find many hacks out there for Firefox.
For the most part, I’m going to leave the hacks in the book up to you to play with. It’s good to know how to do them but the best way to get what you want is by using standards compliant conditional CSS.

Conditional CSS

Using PHP or a JavaScript library, you can identify the user’s browser. With that information, you can add a CSS class to your body with an indicator of the browser type.
Example.

With browser detection, an IE6 browser might get a page that renders like so:

..
<body class="browser-ie6">
<div class="box"></div>
</body>

A Safari browser would see something like this:

..
<body class="browser-safari">
<div class="box"></div>
</body>

The CSS loaded in either case is this:

.box {
   /* css that applies to all browsers for .box */
}
.browser-ie6 .box {
   /* css to only apply to the box for ie6 */
}
.browser-safari .box {
   /* css to only apply to the box for safari */
}

An Example Using jQuery

Download the Browser-detect.min.js here

More jQuery Browser Detection Resources

http://docs.jquery.com/Utilities/jQuery.browser
http://github.com/alexrabarts/jquery-platformselector/tree/master

Conditional Comments

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="ie-5-6.css" />
<![endif]-->

In Class Demo

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>jQuery Browser Detect Example</title>
 
		<!-- make sure your paths are correct! -->
		<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
		<!--using a 'v' query parameter as a cache buster to specify the version of our library-->
        <script type="text/javascript" src="lib/jquery/jquery.browserDetect.min.js?v=1"></script>
        <style type="text/css">
		<!--
		.browserFirefox a {
			border: 1px solid #900;
			background-color:#036;
			display:block;
			width:100px;
			height:100px;
			color:#fff;
		}
		.browserIE a {
			border: 1px solid #900;
			background-color:#9cf;
			display:block;
			width:100px;
			height:100px;
			color:#000;
		}
 
		* { /* every element on the page */
		}
		/* ie6 hack */
		* html a {
		}
 
		.iebox {
			border:1px solid #ccc;
			background-color:#036;
			color:#fff;
			width:100%;
			height:100px;
		}
 
		.browserFirefox .supportAlert
		/* add all supported browsers to this */
		{
			display:none;
		}
		-->
		</style>
        <!--[if IE]>
        	<link rel="stylesheet" type="text/css" href="ie.css" />
        <![endif]-->
        <!--[if lt IE 7]>
          <link rel="stylesheet" type="text/css" href="ie-5-6.css" />
        <![endif]-->
	</head>
	<body>
    	<div class="supportAlert">Sorry, we don't support your browser, please download...</div>
		<a href="http://jquery.com/">jQuery</a>
        <!--[if IE 7]>
        	<div class="iebox">Sorry but we don't support IE7, please download Firefox :)</div>
        <![endif]-->
	</body>
</html>

Intellectual Pirates

Week 8