Project Conditional CSS - Discovering what conditional CSS and conditional comments are and how they related to cascading stylesheets

Purpose
The purpose of this project is to determine what conditional CSS is, conditional comments and what that means for cascading stylesheets and your website.

What is "Conditional CSS"?
Conditional CSS is attributed to a server-side script that is executed in order to serve back either a stylesheet or a modified stylesheet filled with simple commands. The invocation of the server-side script may be something such as an ISAPI filter or the page_preinit() directive in .Net lingo. Whatever the case may be, the server-side script gets web browser user-agent data and serves back an entire stylesheet unique to that user-agent data or parses the stylesheet and serves back the result. This process adds additional CPU overhead to the web server.

What are "Conditional Comments"?
Conditional comments, from the syntax and similarity to conditional CSS, appear to be the forefather of Conditional CSS which is not a W3C standard. Conditional comments have been around for many years, are unique to Internet Explorer and allow you to create simple logic that the Internet Explorer web browser executes; all other web browsers ignore the logic. In CSS parlance, you can perform the same thing, client-side (the web browser) as what can be done server-side. However, there are a few caveats:

The way conditional comments work can vary based on the version of Internet Explorer
Defining an inline style with conditional comments in other web browsers is interpreted as being invalid; thus logic is ignored and attributes in a style is used (which you may not want)

Some Examples
Look below at some examples (targeted for Internet Explorer 8) and other web browsers:

NOTE: Works in Internet Explorer but the style is also picked up and used by Firefox (Firefox merely ignores the "if IE" and "endif" logic.

<style type="text/css">
.cItem {
	display: block;
	background-color: #454343;
	width: 360px;
	height: 19px;
	padding-left: 5px;
	padding-top: 3px;
}
</style>
<!-[ if IE]>
	<style type="text/css">
	.cItem {
		background-color: red;
		width: 360px;
		height: 22px;
		padding-left: 5px;
	}
	</style>
<![endif]->

NOTE: Internet Explorer does not detect the conditional statement since it is in a true comment tag, but neither does Firefox.

<style type="text/css">
	.cItem {
		display: block;
		background-color: #454343;
		width: 360px;
		height: 19px;
		padding-left: 5px;
		padding-top: 3px;
	}
</style>
<!--[ if IE]>
	<style type="text/css">
	.cItem {
		background-color: red;
		width: 360px;
		height: 22px;
		padding-left: 5px;
	}
	</style>
<![endif]-->

NOTE: Internet Explorer does not detect the conditional statement because it resides in a comment block (which is unfortunate), but neither does Firefox.

<style type="text/css">
	.cItem {
		display: block;
		background-color: #454343;
		width: 360px;
		height: 19px;
		padding-left: 5px;
		padding-top: 3px;
	}
</style>
<!--
<!-[ if IE]>
	<style type="text/css">
	.cItem {
		background-color: red;
		width: 360px;
		height: 22px;
		padding-left: 5px;
	}
	</style>
<![endif]->
-->

Reliably Using "Conditional CSS" Client-Side
If you don't want to place additional load on the web server to send back a specific stylesheet or parse through a stylesheet, you can reliably tailor inline CSS for specific web browsers using Javascript (as web browsers become more standardized, however, this need should eventually go away). The example code below demonstrates how you can do it:

		<script language="javascript" type="text/javascript">
                if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) { /*IE*/
                                document.write("<style type=\"text/css\">")
                                document.write(".cItem {")
                                document.write("background-color: #454343;")
                                document.write("width: 360px;")
                                document.write("height: 21px;")
                                document.write("font-size: 0;")
                                document.write("padding-left: 5px;")
                                document.write("padding-top: 3px;")
                                document.write("}")
                                document.write("</style>")
                }
                else {
                                document.write("<style type=\"text/css\">")
                                document.write(".cItem {")
                                document.write("display: block;")
                                document.write("background-color: #454343;")
                                document.write("width: 360px;")
                                document.write("height: 19px;")
                                document.write("padding-left: 5px;")
                                document.write("padding-top: 4px;")
                                document.write("}")
                                document.write("</style>")
                }
                </script>