Detectar el navegador del usuario con WordPress, teniendo preparada una hoja de estilo ‘multi-navegador’

¿Cuántas veces hemos tenido que preparar una segunda hoja de estilo para Internet Explorer y sus devastadoras interpretaciones en CSS? Incontables.

Si normalmente la creábamos por separado y la incluíamos en el head dentro de header.php, hoy vamos a ver cómo mantener una única hoja de estilo, a la que daríamos clases e ids para los elementos gráficos que se hayan presentado inconsistentes en IE.

Abriremos primero de todo functions.php y pastearemos el siguiente código :

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';

if($is_iphone) $classes[] = 'iphone';
return $classes;
}
?>

Nos dirijiremos ahora a nuestra hoja de estilo y, al final de todo, daremos nuevo formato a los elementos a tratar bajo la clase, por ejemplo, .ie

.ie .mi-columna-lateral-maltratada-por-IE {
     padding-top: 3em;
}

Ello será efectivo gracias a que el código usado va a inscribir en el ‘body’ de nuestro HTML una clase acorde con el navegador detectado, fuera éste IE, Chrome, Safari …

<body class="chrome">

Y ello a su vez es posible porque WordPress es capaz de detectarnos el navegador del usuario[en].

Esperamos que este post os sea de utilidad.

DEJA TU COMENTARIO


− 2 = cinco