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 chrome25 win win8 js orientation_landscape minw_980 maxw_1199 no-hidpi datauri">

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <p>
                <a href="https://github.com/ridjohansen/css_browser_selector/zipball/master"
                   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>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/ridjohansen/css_browser_selector/)
    <br/>(https://github.com/verbatim/css_browser_selector/)
</p>

Identifies

browsers: Firefox; IE; Opera; Safari; Chrome, Konqueror, Iron
browser versions: (most importantly: ie6, ie7, ie8, ie9)
rendering engines: Webkit; Mozilla; Gecko
platforms/OSes: Mac; Win: Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; J2me; RIM Playbook; mobile (generic)
enabled technology: JS (use in conjunction with <html class="no-js"> for even more granular control)
language detection

Recent contributors to 0.5, 0.6, 0.7:

improve and update features for cross-browser development
https://github.com/ridjohansen/css_browser_selector/
more detailed IE detection:
https://github.com/kevingessner/css_browser_selector/
more detailed WIN detection:
https://github.com/saar/css_browser_selector

<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>

Version History

v0.7 2013-04-01
Add support to Hi-dpi displays Selector
Add Pixel Ratio support for 1.5 and 2
Add support to dataURI's Selector
v0.6.2 2012-09-10
add new features for cross-browser development
update the commons devices width (based on Twitter Bootstrap)
improve continuously evaluates browser max-width and min-width (helper for mediaqueries-like screen width classes)
improve continuously evaluates browser orientation (helper for mediaqueries-like orientation classes)
v0.6.1 2012-03-14
iOS version detection
beta: detect if being run in iPad app.
(from: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript)
v0.6.0 2012-01-24
more detailed support for Opera, Chrome, Safari (and revised support for Firefox)
versioning for Chrome, Blackberry, Android, Mac
Android device detection
altered how 'mobile' is deterimed to be added to the class string
language detection
RIM Playbook added
continuously evaluates browser max width (in case of resizing)
continuously evaluates browser orientation (portrait vs. landscape)
v0.5.0 2011-08-24
any version of Firefox
more versions of Windows (Win8 [tentative], Win7, Vista, XP, Win2k)
more versions of IE under unique conditions
if "no-js" in HTML class: removes and replaces with "js" (<html class="no-js">)

Resources

navigator.userAgent strings:
http://en.wikipedia.org/wiki/User_agent
http://www.useragentstring.com/pages/useragentstring.php
http://www.user-agents.org
http://www.zytrax.com/tech/web/mobile_ids.html
history of the user agent string:
http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/
language list:
http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx
windows nt list
http://en.wikipedia.org/wiki/Windows_NT
blackberry user agent string interpertation:
http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862
javascript compression:
http://minifyjavascript.com
screen resolutions:
http://cartoonized.net/cellphone-screen-resolution.php
aspect ratio:
http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
iOS detection:
http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript

Other Versions

Ruby on Rails Plugin by Reid MacDonald
http://latimes.rubyforge.org/svn/plugins/css_browser_selector/
PHP CSS Browser Selector by Bastian Allgeier
http://bastian-allgeier.de/css_browser_selector/
Wordpress Plugin by Adrian hanft
http://wordpress.org/extend/plugins/browser-specific-css/

Example

Browser, Device, OS and Javascript detection

<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>

License

http://creativecommons.org/licenses/by/2.5/

Original Author

Rafael Lima http://rafael.adm.br

Based on idea by 37signals

http://37signals.com/svn/archives2/browser_selectors_in_css.php

Contributors

Richard Duchatsch Johansen @ridjohansen (http://github.com/ridjohansen)
William Bruno (http://github.com/wbruno)
Niyaz (http://github.com/niyazpk)
Marcio Trindade (http://github.com/marciotrindade)
rbottarelli (http://github.com/rbottarelli)
Bryan Chow (http://github.com/bryanchow)
Derek Lio (http://github.com/dereklio)
Paul Irish (http://github.com/paulirish)
Preston Badeer
Upekshapriya
André Lopes
Tazio Mirandola - copiaincolla pubblicità
Reid MacDonald (http://geminstallthat.wordpress.com)
Vinicius Braga (http://viniciusbraga.com)
Chris Preece (http://www.mmtdigital.co.uk)
Dominykas
M@ McCray
Daniel Westermann-Clark
Steve Clay (http://mrclay.org/)
Jeff Bellsey
Jean Pierre
Micah Snyder
Derek (http://amphibian.info)
Jesse Scott
Moises Kirsch (http://www.moiblog.com/)
Alex Wiltschko
Chris Warren and Tony Nelson (http://www.imagetrend.com)
glasser

Name		Name	Last commit message	Last commit date
Latest commit History 76 Commits
.idea		.idea
css		css
img		img
js		js
tests		tests
.gitignore		.gitignore
.htaccess		.htaccess
README.md		README.md
bower.json		bower.json
crossdomain.xml		crossdomain.xml
favicon.ico		favicon.ico
index.html		index.html
index_en.html		index_en.html
index_pt.html		index_pt.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

CSS Browser Selector +

A Cross-browser Responsive Design Helper

Identifies

Recent contributors to 0.5, 0.6, 0.7:

Version History

Resources

Other Versions

Example

Browser, Device, OS and Javascript detection

License

Original Author

Based on idea by 37signals

Contributors

About

Releases

Packages

Languages

taguchimail/css_browser_selector

Folders and files

Latest commit

History

Repository files navigation

CSS Browser Selector +

A Cross-browser Responsive Design Helper

Identifies

Recent contributors to 0.5, 0.6, 0.7:

Version History

Resources

Other Versions

Example

Browser, Device, OS and Javascript detection

License

Original Author

Based on idea by 37signals

Contributors

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages