<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>iyeler.com &#124; Design, Development, Tricks, CSS, Javascript, Portfolio &#187; Blog</title>
	<atom:link href="http://www.iyeler.com/category/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.iyeler.com</link>
	<description>Simple, Creative, Beautiful</description>
	<lastBuildDate>Mon, 19 Oct 2009 14:16:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Browser-specific CSS hacks</title>
		<link>http://www.iyeler.com/2009/10/19/browser-specific-css-hacks/</link>
		<comments>http://www.iyeler.com/2009/10/19/browser-specific-css-hacks/#comments</comments>
		<pubDate>Mon, 19 Oct 2009 12:11:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Technical Notes]]></category>

		<guid isPermaLink="false">http://www.iyeler.com/?p=6</guid>
		<description><![CDATA[I don&#8217;t use CSS hacks anymore. Instead I use IE&#8217;s conditional comments to apply classes to the body tag.
Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I&#8217;ve seen. Plus there&#8217;s no way to provide stylesheets to only Safari, I believe.
So here are go:
/***** Selector Hacks ******/
/* IE6 and below */
* [...]]]></description>
			<content:encoded><![CDATA[<p>I don&#8217;t use CSS hacks anymore. Instead I use IE&#8217;s conditional comments to apply classes to the body tag.</p>
<p>Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I&#8217;ve seen. Plus there&#8217;s no way to provide stylesheets to only Safari, I believe.</p>
<p>So here are go:</p>
<p>/***** Selector Hacks ******/</p>
<p><span style="color: #808080; font-style: italic;">/* IE6 and below */</span><br />
<span style="color: #00aa00;">*</span> html <span style="color: #cc00cc;">#uno</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* IE7 */</span><br />
<span style="color: #00aa00;">*</span><span style="color: #3333ff;">:first-child</span><span style="color: #00aa00;">+</span>html <span style="color: #cc00cc;">#dos</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}<span id="more-6"></span></span></p>
<p><span style="color: #808080; font-style: italic;">/* IE7, FF, Saf, Opera  */</span><br />
html<span style="color: #00aa00;">&gt;</span>body <span style="color: #cc00cc;">#tres</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* IE8, FF, Saf, Opera (Everything but IE 6,7) */</span><br />
html<span style="color: #00aa00;">&gt;</span><span style="color: #808080; font-style: italic;">/**/</span>body <span style="color: #cc00cc;">#cuatro</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Opera 9.27 and below, safari 2 */</span><br />
html<span style="color: #3333ff;">:first-child </span><span style="color: #cc00cc;">#cinco</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Safari 2-3 */</span><br />
html<span style="color: #00aa00;">[</span>xmlns<span style="color: #00aa00;">*=</span><span style="color: #ff0000;">""</span><span style="color: #00aa00;">]</span> body<span style="color: #3333ff;">:last-child </span><span style="color: #cc00cc;">#seis</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* safari 3+, chrome 1+, opera9+, ff 3.5+ */</span><br />
body<span style="color: #3333ff;">:nth-of-</span>type<span style="color: #00aa00;">(</span><span style="color: #cc66cc;">1</span><span style="color: #00aa00;">)</span> <span style="color: #cc00cc;">#siete</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* safari 3+, chrome 1+, opera9+, ff 3.5+ */</span><br />
body<span style="color: #3333ff;">:first-of-type </span><span style="color: #cc00cc;">#ocho</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* saf3+, chrome1+ */</span><br />
<span style="color: #a1a100;">@media screen and (-webkit-min-device-pixel-ratio:0) {</span><br />
<span style="color: #cc00cc;">#diez</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span><br />
<span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Safari 2 &#8211; 3.1 */</span><br />
html<span style="color: #00aa00;">[</span>xmlns<span style="color: #00aa00;">*=</span><span style="color: #ff0000;">""</span><span style="color: #00aa00;">]</span><span style="color: #3333ff;">:root </span><span style="color: #cc00cc;">#trece</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Safari 2 &#8211; 3.1, Opera 9.25 */</span><br />
<span style="color: #00aa00;">*</span>|html<span style="color: #00aa00;">[</span>xmlns<span style="color: #00aa00;">*=</span><span style="color: #ff0000;">""</span><span style="color: #00aa00;">]</span> <span style="color: #cc00cc;">#catorce</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Everything but IE6-8 */</span><br />
<span style="color: #3333ff;">:root </span><span style="color: #00aa00;">*&gt;</span> <span style="color: #cc00cc;">#quince</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* IE7 */</span><br />
<span style="color: #00aa00;">*+</span>html <span style="color: #cc00cc;">#dieciocho</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Firefox only. 1+ */</span><br />
<span style="color: #cc00cc;">#veinticuatro</span><span style="color: #00aa00;">,</span> x<span style="color: #3333ff;">:-moz-any-link </span><span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Firefox 3.0+ */</span><br />
<span style="color: #cc00cc;">#veinticinco</span><span style="color: #00aa00;">,</span> x<span style="color: #3333ff;">:-moz-any-link</span><span style="color: #00aa00;">,</span> x<span style="color: #3333ff;">:<span style="color: #993333;">default</span> </span><span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #993333;">red</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/***** Attribute Hacks ******/</span></p>
<p><span style="color: #808080; font-style: italic;">/* IE6 */</span><br />
<span style="color: #cc00cc;">#once</span> <span style="color: #00aa00;">{</span> _color<span style="color: #00aa00;">:</span> <span style="color: #000000; font-weight: bold;">blue</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* IE6, IE7 */</span><br />
<span style="color: #cc00cc;">#doce</span> <span style="color: #00aa00;">{</span> <span style="color: #00aa00;">*</span><span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #000000; font-weight: bold;">blue</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* Everything but IE6 */</span><br />
<span style="color: #cc00cc;">#diecisiete</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #808080; font-style: italic;">/**/</span><span style="color: #00aa00;">:</span> <span style="color: #000000; font-weight: bold;">blue</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* IE6, IE7, IE8 */</span><br />
<span style="color: #cc00cc;">#diecinueve</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00aa00;">:</span> <span style="color: #000000; font-weight: bold;">blue</span>\<span style="color: #cc66cc;">9</span><span style="color: #00aa00;">;</span> <span style="color: #00aa00;">}</span></p>
<p><span style="color: #808080; font-style: italic;">/* IE7, IE8 */</span><br />
<span style="color: #cc00cc;">#veinte</span> <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #808080; font-style: italic;">/*\**/</span><span style="color: #00aa00;">:</span> <span style="color: #000000; font-weight: bold;">blue</span>\<span style="color: #cc66cc;">9</span><span style="color: #00aa00;">;</span> <span style="color: #00aa00;">}</span></p>
<p>Target: <a href="http://paulirish.com/2009/browser-specific-css-hacks/">http://paulirish.com/2009/browser-specific-css-hacks/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iyeler.com/2009/10/19/browser-specific-css-hacks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
