Css Browser Selector

quarta-feira, 10 de Fevereiro de 2010

CSS Browser Selector Que atire a primeira pedra quem nunca usou um hack para acertar algum erro entre navegadores e é por este motivo que estou escrevendo este post.

Cansado de ficar fazendo sempre um css diferente para os navegadores resolvi facilitar a minha vida. Hoje quando desenvolvo acabo utilizando o safari como navegador principal, que ainda bem não tem muita diferença em relação ao Firefox, porém quando você passa para um navegador como o InternetExplorer a dor de cabeça aparece e o Rafael Lima resolveu dar uma mãozinha criando o script CSS Browser Selector escrito em javascript que é super simples e minimalista que adiciona algumas classes na tag html de acordo com o navegador, sistema operacional e engine que você está utilizando.

Veja alguns exemplos de como você pode colocar um css pra cada navegador e sistema operacional:

              example.css
                    
        .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 { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
        
        
        
        
        
        
        
        
        
      
.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 { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

Veja alguns exemplos da tag html.

              example.html
                    
        <html class=" webkit safari safari4 mac js">
<html class=" webkit chrome mac js">
<html class="gecko ff3 ff3_5 mac js">
<html class="gecko ff3 ff3_6 mac js">
        
<html class=" webkit safari safari4 mac js">
<html class=" webkit chrome mac js">
<html class="gecko ff3 ff3_5 mac js">
<html class="gecko ff3 ff3_6 mac js">

Para instalar é muito simples basta fazer um clone do projeto no Github ou fazer o download e adicionar o script css_browser_selector.js em seu projeto.

              application.html.erb
                    
        <html>
<head>
  <script src="/javascripts/plugins/css_browser_selector/css_browser_selector.js" type="text/javascript"></script>
</head>
</html>
        
<html>
<head>
  <script src="/javascripts/plugins/css_browser_selector/css_browser_selector.js" type="text/javascript"></script>
</head>
</html>

Espero que este script possa facilitar a forma de escrever css para todos que trabalham com desenvolvimento de interface.