Adicionando o nome do navegador como classe na tag body no 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.
Uma resposta a "Adicionando o nome do navegador como classe na tag body no WordPress"