CSS Browser Selector +

CSS Browser Selector +

Hi-dpi screen Pixel-ratio > 1 and < 2 Pixel-ratio >= 2

A Cross-browser Responsive Design Helper

CSS Browser Selector + is a very small javascript which empowers CSS selectors.

See an example:

<html lang="pt-br" class="">

CSS Browser Selector Download

Github

  • Best part

    • no more hacks
    • all compliant code

  • Cross-browser Media Queries like 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
    • HiDPI (Retina) screen detection and Pixel Ratio detection
    • orientation screen detection (landscape or portrait).

More info:
(http://rafael.adm.br/css_browser_selector)

beta/experimental versions:
(https://github.com/delka/css_browser_selector/)
(https://github.com/verbatim/css_browser_selector/)

Identifies

  • browsers: Firefox; IE; Edge; Opera; Safari; Chrome, Konqueror, Iron
  • browser versions: (like chrome46, firefox41, ie6, ie7, ie8, ie9, ie10, ie11, ie edge, …)
  • rendering engines: Webkit; Mozilla; Gecko
  • platforms/OSes: Mac; Win: Win10, Win8.1, Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
  • devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; Windows Phone; J2me; RIM Playbook; mobile (generic)
  • viewport: min-width/max-width screen detection
  • retina: HiDPI (Retina) screen detection and Pixel Ratio detection
  • orientation: landscape or portrait
  • 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, 0.8:

  • improve and update features for cross-browser development
    https://github.com/ridjohansen/css_browser_selector/
  • new Win OS, Browsers and WinPhone detection, save existing html classes:
    https://github.com/delka/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
  • no-js to js:
    paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/
  • mac versioning
    https://github.com/haraldmartin/css_browser_selector

Version History

  • v0.81 2015-10-30
    Fix IE8 error
  • v0.8 2015-10-29
    Add support for Windows 8.1 and Windows 10
    Add support for Windows Phone OS 7,8,10.
    Add IE Edge Support
    Save existing html classes
    Prevent global variables - wrap code into anonymous function
  • v0.71 2014-01-23
    Add IE11 detection
  • 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>

dataURI Selector

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

Hi-dpi and Pixel-Ratio Selector

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

Media Queries (Screen Width)

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

Media Queries (Orientation)

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

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)
  • Ihor Zenich (http://github.com/delka)
  • 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