@zaneray/css-browser-selector
Advanced tools
<!-- Main hero unit for a primary marketing message or call to action --> CSS Browser Selector + A Cross-browser Responsive Design Helper
<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
FAQs
<!-- Main hero unit for a primary marketing message or call to action --> CSS Browser Selector + A Cross-browser Responsive Design Helper
The npm package @zaneray/css-browser-selector receives a total of 185 weekly downloads. As such, @zaneray/css-browser-selector popularity was classified as not popular.
We found that @zaneray/css-browser-selector demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Next.js has patched a critical vulnerability (CVE-2025-29927) that allowed attackers to bypass middleware-based authorization checks in self-hosted apps.
Security News
A survey of 500 cybersecurity pros reveals high pay isn't enough—lack of growth and flexibility is driving attrition and risking organizational security.
Product
Socket, the leader in open source security, is now available on Google Cloud Marketplace for simplified procurement and enhanced protection against supply chain attacks.