CSS Browser Selector + is a very small javascript which empowers CSS selectors; Best part - no more hacks, all compliant code; Cross-browser Mediaqueries-like (CSS3) helper - Alternative method of mediaqueries for developing responsive design for older browsers; You can now write code for - browser, browser version, platform, platform version, device, device version, min-width and max-width screen detection, orientation screen detection (landscape or portrait).
<p>
CSS Browser Selector + is a very small javascript which empowers CSS selectors.
</p>
<p>
<a href="http://ridjohansen.github.com/css_browser_selector/" target="_blank">http://ridjohansen.github.com/css_browser_selector/</a>
</p>
<h4>See an example:</h4>
<html lang="pt-br" class="webkit chrome chrome46 win win10 js retina_2x hidpi minw_1200 orientation_landscape datauri">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<p>
<a download href="https://raw.githubusercontent.com/ridjohansen/css_browser_selector/gh-pages/js/vendor/css_browser_selector.js" class="btn btn-block btn-large btn-success">
CSS Browser Selector Download
</a>
</p>
</div>
</div>
<div class="row-fluid">
<ul class="unstyled">
<li class="span4">
<h3 class="btn btn-block btn-large btn-primary">Best part</h3>
<ul>
<li>no more hacks</li>
<li>all compliant code</li>
</ul>
</li>
<li class="span4">
<h3 class="btn btn-block btn-large btn-primary">Cross-browser Media Queries like helper</h3>
<p>Alternative method of mediaqueries for developing responsive design for older browsers.</p>
</li>
<li class="span4">
<h3 class="btn btn-block btn-large btn-primary">You can now write code for</h3>
<ul>
<li>browser</li>
<li>browser version</li>
<li>platform</li>
<li>platform version</li>
<li>device</li>
<li>device version</li>
<li>min-width and</li>
<li>max-width screen detection</li>
<li>HiDPI (Retina) screen detection and Pixel Ratio detection</li>
<li>orientation screen detection (landscape or portrait).</li>
</ul>
</li>
<li class="span4">
<h3 class="btn btn-block btn-large btn-primary">Optional namespace</h3>
<p>Add a name space like 'ns-webkit' to all class names by defining 'var css_browser_selector_ns = "ns-";' before loading script. </p>
</li>
</ul>
</div>
</div>
<p>
<strong>More info:</strong>
<br>(http://rafael.adm.br/css_browser_selector)
</p>
<p>
<strong>beta/experimental versions:</strong>
<br>(https://github.com/delka/css_browser_selector/)
<br>(https://github.com/verbatim/css_browser_selector/)
</p>
<li>
<strong>no-js to js:</strong>
<br>paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/
</li>
<li>
<strong>mac versioning</strong>
<br>https://github.com/haraldmartin/css_browser_selector
</li>
<style> .ie .example { background-color: yellow; } .ie7 .example { background-color: orange } .gecko .example { background-color: gray; } .win.gecko .example { background-color: red; } .linux.gecko .example { background-color: pink; } .opera .example { background-color: green; } .konqueror .example { background-color: blue; } .webkit .example { background-color: black; } .chrome .example { background-color: cyan; } .example { width: 100px; height: 100px; } .no-js, .no_js, .nojs { display: block; } .js { display: none; } </style>
<div class="span4">
<h3 class="btn btn-block btn-large btn-primary">dataURI Selector</h3>
<style> .datauri .example_bg { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC'); } .no-datauri .example_bg { background-image: url('bg_default.png'); } .datauri .img_default, .no-datauri .img_uri { display: none !important; } </style> <div class="example_bg"> <img class="img_uri" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" alt="with dataURI" /> <img class="img_default" src="img_default.png" alt="without dataURI" /> </div>
</div>
<div class="span4">
<h3 class="btn btn-block btn-large btn-primary">Hi-dpi and Pixel-Ratio Selector</h3>
<style> .img_hidpi { display: none; } .no-hidpi .example_bg { background-image: url('bg_default.png'); } .hidpi .img_default, .no-hidpi .img_hidpi { display: none !important; } .retina_1x .example_bg { background-image: url('bg_hidpi_1x.png'); } .retina_2x .example_bg { background-image: url('bg_hidpi_2x.png'); } .retina_2x .img_default, .retina_2x .x1 { display: none !important; } .retina_1x .img_default, .retina_1x .x2 { display: none !important; } or /* http://bjango.com/articles/min-device-pixel-ratio/ */ @media only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .example_bg { background-image: url('bg_hidpi_1x.png'); } .img_default, .x2 { display: none; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .example_bg { background-image: url('bg_hidpi_2x.png'); } .img_default, .x1 { display: none; } } </style> <div class="example_bg"> <img class="img_hidpi x2" src="img_hidpi_2x.png" alt="with pixel-ratio >= 2" /> <img class="img_hidpi x1" src="img_hidpi_1x.png" alt="with pixel-ratio > 1 and < 2" /> <img class="img_default" src="img_default.png" alt="with pixel-ratio 1 or default" /> </div>
</div>
<div class="span4">
<h3 class="btn btn-block btn-large btn-primary">Media Queries (Screen Width)</h3>
<style> @media (max-width: 767px) { .example { border: 2px solid purple!important; } } /* or */ .minw_0 .example, .maxw_767 .example { border: 2px solid purple!important; } @media (min-width: 768px) and (max-width: 979px) { .example { border: 2px solid green!important; } } /* or */ .minw_768.maxw_979 .example { border: 2px solid green!important; } @media (min-width: 1200px) { .example { border: 2px solid orange!important; } } /* or */ .minw_1200 .example { border: 2px solid orange!important; } </style>
</div>
<div class="span4">
<h3 class="btn btn-block btn-large btn-primary">Media Queries (Orientation)</h3>
<style> @media (orientation: landscape) { .example { border: 2px solid red!important; } } /* or */ .orientation_landscape .example { border: 2px solid red!important; } @media (orientation: portrait) { .example { border: 2px solid blue!important; } } /* or */ .orientation_portrait .example { border: 2px solid blue!important; } </style>
</div>
</div>
http://creativecommons.org/licenses/by/2.5/
Rafael Lima http://rafael.adm.br
http://37signals.com/svn/archives2/browser_selectors_in_css.php