18.07.2011

Adicionando o nome do navegador como classe na tag body no WordPress

CSS, WordPress

Um problema comum que todo desenvolvedor encontra quando desenvolve seu código html/css é a falta de compatibilidade entre os navegadores (browsers), principalmente se tratando de Internet Explorer (IE). Somos obrigados a usar de diversos meios para poder fazer com que o código seja renderizado de formas diferentes em cada navegador.

Se você está usando o WordPress e precisa criar estilos diferentes para cada navegador, uma boa maneira de fazer isso é adicionar o nome do navegador como classe no elemento body do HTML. Você iria escrever seu CSS da seguinte forma:

.minha-div {}
.ie6 .minha-div {} /* se for o Internet Explorer 6 */
.ie7 .minha-div {} /* se for o Internet Explorer 7 */
.firefox .minha-div {} /* se for o Firefox */

No código HTML do seu tema WordPress, você tem a seguinte função PHP na tag body:

<body <?php body_class(); ?>>

Para adicionar classes a função body_class, teremos de criar uma função no arquivo functions.php que usará o filtro body_class. Veja o código a seguir com a função:

<?php 
function browser_body_class($classes) { 
    $browser = $_SERVER[ 'HTTP_USER_AGENT' ];
 
    // Mac, PC ...ou Linux
    if ( preg_match( "/Mac/", $browser ) ){
        $classes[] = 'mac';
 
    } elseif ( preg_match( "/Windows/", $browser ) ){
        $classes[] = 'windows';
 
    } elseif ( preg_match( "/Linux/", $browser ) ) {
        $classes[] = 'linux';
 
    } else {
        $classes[] = 'unknown-os';
    }
 
    // Checa na seguinte ordem: Chrome, Safari, Opera, MSIE, FF
    if ( preg_match( "/Chrome/", $browser ) ) {
        $classes[] = 'chrome';
 
        preg_match( "/Chrome\/(\d.\d)/si", $browser, $matches);
        $classesh_version = 'ch' . str_replace( '.', '-', $matches[1] );
        $classes[] = $classesh_version;
 
        } elseif ( preg_match( "/Safari/", $browser ) ) {
            $classes[] = 'safari';
 
            preg_match( "/Version\/(\d.\d)/si", $browser, $matches);
            $sf_version = 'sf' . str_replace( '.', '-', $matches[1] );
            $classes[] = $sf_version;
 
         } elseif ( preg_match( "/Opera/", $browser ) ) {
            $classes[] = 'opera';
 
            preg_match( "/Opera\/(\d.\d)/si", $browser, $matches);
            $op_version = 'op' . str_replace( '.', '-', $matches[1] );
            $classes[] = $op_version;
 
         } elseif ( preg_match( "/MSIE/", $browser ) ) {
            $classes[] = 'msie';
 
            if( preg_match( "/MSIE 6.0/", $browser ) ) {
                $classes[] = 'ie6';
            } elseif ( preg_match( "/MSIE 7.0/", $browser ) ){
                $classes[] = 'ie7';
            } elseif ( preg_match( "/MSIE 8.0/", $browser ) ){
                $classes[] = 'ie8';
            } elseif ( preg_match( "/MSIE 9.0/", $browser ) ){
                $classes[] = 'ie9';
            }
 
            } elseif ( preg_match( "/Firefox/", $browser ) && preg_match( "/Gecko/", $browser ) ) {
                $classes[] = 'firefox';
 
                preg_match( "/Firefox\/(\d)/si", $browser, $matches);
                $ff_version = 'ff' . str_replace( '.', '-', $matches[1] );
                $classes[] = $ff_version;
 
            } else {
                $classes[] = 'unknown-browser';
            }
 
    return $classes;
}
 
add_filter('body_class','browser_body_class');
?>

Adicione essa função no arquivo functions.php e está pronto!
Essa função não só checa qual é o navegador do usuário, como também checa a versão e o sistema operacional (MAC, Windows, Linux).

Com um pouco de leitura do código você será capaz de customizar o código e adicionar outras classes para sua necessidade.

CSS, WordPress

Ruan Mér

Desenvolvedor Front-end - @ruanmer

Trabalho na área de desenvolvimento web a mais de 5 anos, especificamente com diagramação de interface web (front-end), usando as tecnologias xHTML, CSS, javascript com a biblioteca jQuery e a criação de sites com WordPress. Ver portfólio >>

Uma resposta a "Adicionando o nome do navegador como classe na tag body no WordPress"

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *