CSS Browser Selector +

CSS Browser Selector +

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

Um Auxiliador no Desenvovimento Responsivo Cross-Browser

CSS Browser Selector + é um javascript muito pequeno, que habilita seletores CSS.

Veja o exemplo:

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

CSS Browser Selector Download

Github

  • Melhor parte

    • chega de sujeira (hacks)
    • todo o código compatível.

  • Auxiliador parecido com Media Queries (CSS3)

    Método alternativo de Media Queries para o desenvolvimento de projeto ágil para navegadores mais antigos.

  • Agora você pode escrever código para

    • navegador
    • versão do navegador
    • plataforma
    • versão de plataforma
    • dispositivos
    • versão do dispositivo
    • min-width e max-width
    • retina
    • detecção de orientação da tela (paisagem ou retrato)

Mais Informações:
(http://rafael.adm.br/css_browser_selector)

Versões Experimentais:
(http://github.com/delka/css_browser_selector/)
(http://github.com/verbatim/css_browser_selector/)

Ele identifica

  • Navegadores: Firefox; IE; Edge; Opera; Safari; Chrome, Konqueror, Iron
  • Versões dos navegadores: (like chrome46, firefox41, ie6, ie7, ie8, ie9, ie10, ie11, ie edge, …)
  • Motores de renderização: Webkit; Mozilla; Gecko
  • Sistemas Operacionais/Plataformas: Mac; Win: Win10, Win8.1, Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
  • Dispositivos: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; Windows Phone; J2me; RIM Playbook; mobile (generic)
  • Tecnologia habilitada: JS (usado em conjunto com <html class="no-js"> para ainda ter mais controle)
  • detecção de max-width e min-width (Método alternativo de Media Queries para o detecçãode largura)
  • detecção de retina
  • detecção da orientação navegador (Método alternativo de Media Queries para a detecçãode da orientação)
  • Detecção de idioma

Contribuidores recentes to 0.5, 0.6, 0.6.2:

  • melhorar e atualizar recursos para o desenvolvimento cross-browser
    https://github.com/ridjohansen/css_browser_selector/
  • Detecção IE mais detalhada
    https://github.com/kevingessner/css_browser_selector/
  • Detecção do Windows mais detalhada
    https://github.com/saar/css_browser_selector
  • no-js para js:
    http://paulirish.com/2009/avoiding-the-fouc-v3/
  • Detecção do Mac mais detalhada
    https://github.com/haraldmartin/css_browser_selector

Histórico de versões

  • 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
    adicionar novos recursos para o desenvolvimento cross-browser
    atualizar a largura dispositivos comuns (com base em Bootstrap Twitter)
    melhorar continuamente avalia navegador max-width e min-width (auxiliar para mediaqueries-como tela aulas de largura)
    melhorar continuamente avalia orientação navegador (auxiliar para mediaqueries-como orientação classes)
  • v0.6.1 2012-03-14
    iOS versão detecção
    beta: detectar se está sendo executado em aplicativo para iPad.
    (de: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript)
  • v0.6.0 2012-01-24
    apoio mais detalhada para o Opera, Chrome, Safari (e revisão no suporte ao Firefox)
    versão para o Chrome, Blackberry, Android, Mac
    detecção de dispositivos Android
    alterado como 'mobile' é deterimed para ser adicionado à classe String
    detecção de idioma
    suporte ao RIM Playbook
    avalia continuamente largura do navegador max (em caso de redimensionamento)
    avalia continuamente orientação navegador (retrato ou paisagem)
  • v0.5.0 2011-08-24
    qualquer versão do Firefox
    mais versões do Windows (Win8 [provisória], Win2k Win7, Vista, XP,)
    mais versões do IE em condições únicas
    se "não-js" na aula de HTML: remove e substitui por "js" (<html class="no-js">)

Recursos

  • 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
  • história da userAgent string:
    http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/
  • lista de idiomas:
    http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx
  • Lista dos windows nt
    http://en.wikipedia.org/wiki/Windows_NT
  • interpretação do userAgent string do blackberry:
    http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862
  • compressão do javascript:
    http://minifyjavascript.com
  • resoluções de tela
    http://responsinator.com/
  • 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
  • Detecção do iOS:
    http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript

Other Versions

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

Exemplo

Navegador, dispositivo, sistema operacional e detecção de Javascript

<style>
.ie .exemplo { background-color: yellow; }
.ie7 .exemplo { background-color: orange }
.gecko .exemplo { background-color: gray; }
.win.gecko .exemplo { background-color: red; }
.linux.gecko .exemplo { background-color: pink; }
.opera .exemplo { background-color: green; }
.konqueror .exemplo { background-color: blue; }
.webkit .exemplo { background-color: black; }
.chrome .exemplo { background-color: cyan; }
.exemplo { 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 (Largura da tela)

<style>
@media (max-width: 767px) {
.exemplo {
border: 2px solid purple!important;
}
}
/* or */
.minw_0 .exemplo, .maxw_767 .exemplo {
border: 2px solid purple!important;
}

@media (min-width: 768px) and (max-width: 979px) {
.exemplo {
border: 2px solid green!important;
}
}
/* or */
.minw_768.maxw_979 .exemplo {
border: 2px solid green!important;
}

@media (min-width: 1200px) {
.exemplo {
border: 2px solid orange!important;
}
}
/* or */
.minw_1200 .exemplo {
border: 2px solid orange!important;
}
</style>

Media Queries (Orientação)

<style>
@media (orientation: landscape) {
.exemplo {
border: 2px solid red!important;
}
}
/* or */
.orientation_landscape .exemplo {
border: 2px solid red!important;
}

@media (orientation: portrait) {
.exemplo {
border: 2px solid blue!important;
}
}
/* or */
.orientation_portrait .exemplo {
border: 2px solid blue!important;
}
</style>

Licença

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

Autor original:

Rafael Lima: http://rafael.adm.br

Com base na idéia do site 37signals

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

Contribuidores

  • 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