Coyote Lab » CSS http://coyotelab.org/blog Thu, 19 Aug 2010 06:21:25 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 CSS Browser Hack http://coyotelab.org/blog/css/css-browser-hack http://coyotelab.org/blog/css/css-browser-hack#comments Wed, 18 Nov 2009 19:26:11 +0000 admin http://coyotelab.org/blog/?p=105 Browser hack right or wrong, some developer use it for different reasons, following describes different techniques to make that approach

Inline Hacks

	.container {
		width: 200px;
		margin: 0 auto;
		height: 300px;
		background-color: #CCC;
		*background-color: #000; /* IE 7 */
		_background-color: #F00; /* IE 6 */
		display: block;
	}
	/* SAFARI */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	.container {background-color: #003366;}
	}
	/* OPERA */
	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	.container { background-color: #fefafe; }
	}
	/* FIREFOX VERSION 1 - 2 */
	body:empty .container { background-color: #009966; }
	/* FIREFOX ALL VERSION */
	@-moz-document url-prefix() {
	.container { background-color: #339966; }
	}

Wrong approach, style sheet will not pass the validation

IE Conditional Comments

	<!--[if IE 6]>
	<style type="text/css">
	background-color: #000;
	</style>
	<![endif]-->
	<!--[if IE 7]>
	<style type="text/css">
	background-color: #F00;
	</style>
	<![endif]-->
	<!--[if IE 8]>
	<style type="text/css">
	background-color: #898989;
	</style>
	<![endif]-->

Style sheet will pass the validation. Just works on internet explorer 6, 7, 8 or older version

Client side CSS browser selector

	<script type="text/javascript" src="css_browser_selector.js"></script>
	<style type="text/css">
	.opera .container {
		background-color: #000;
	}
	.win.ff3 .container {
		background-color: #339966;
	}
	.linux.gecko .container {
		background-color: #009966;
	}
	.mac.safari3 .container {
		background-color: #CCC;
	}
	</style>

created by Rafael Lima It work on any browser with javascript enabled, developer have option to choose between browser as well as operating system. Complete documentation can be find here

Sever side CSS browser selector

	<?php require("css_browser_selector.php"); ?>
	<!DOCTYPE html>

	<html lang="en" class="<?php echo css_browser_selector() ?>">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>untitled</title>
		<style type="text/css">
		.container {width:300px; height:400px; margin:0 auto;}
		.mac.ff3 .container {
			background-color: #339966;
		}
		.mac.safari4 .container {
			background-color: #CCC;
		}
		.win.ff3 .container {
			background-color: #F00;
		}
		.linux.gecko .container {
			background-color: #009966;
		}
		</style>
	</head>

	<body>
		<div class="container"></div>
	</body>
	</html>

PHP version of Rafael Lima’s CSS browser selector, Complete documentation can be find here

]]> http://coyotelab.org/blog/css/css-browser-hack/feed 0