¿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