Apply conditional CSS

From Cosmin's Wiki

Jump to: navigation, search

Home > PHP > Apply conditional CSS

It is quite clear that browsers behave differently, with respect to rendering at least. The BIG exception (with different flavors, depending on its version), has always been Microsoft's Internet Explorer (IE). As such, the major split when talking about applying conditional CSS refers to IE or non-IE. To refine this, because as already said, IE comes in different flavors of complying with the rest of the world's standards, depending on its version (IE5.5, IE6, IE7, IE8, ...), of course we can add conditional CSS for each and every of these versions.


Now, to the code. To load CSS files (in your <head> tag), you have basically 2 formats: one for non-IE browsers and then the rest for IE browsers.
Pay attention to the commenting start and ending in both cases !!!

Load css file for all non-IE browsers

	<!--[if !IE]><!-->  
		<link rel="stylesheet" type="text/css" media="screen" href="/style/non-ie.css" />

Load css file for IE8 and above

	<!--[if gte IE 8]>
		<link rel="stylesheet" type="text/css" media="screen" href="/style/ie8plus.css" />

Load css file for IE7

	<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" media="screen" href="/style/ie7.css" />

Load css file for IE6 and below

	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" media="screen" href="/style/ie6.css" />