SummArg | Cursos y recursos para webmasters

02/02/2011

Identificar navegador y asignar un CSS específico con CssUserAgent

CssUserAgent es un script que inserta clases a la etiqueta <html> con el agente de usuario de los navegadores. De este modo se pueden generar estilos CSS específicos contemplando el funcionamiento de cada navegador. Quedaría algo como en el ejemplo:

<html class="ua-gecko ua-gecko-1 ua-gecko-1-9 ua-gecko-1-9-2 ua-gecko-1-9-2-13 ua-firefox ua-firefox-3 ua-firefox-3-6 ua-firefox-3-6-13">
<head>…</head>
<body>…</body>
</html>

Desde el CSS podemos señalar una versión de navegador que abarque subversiones (ej. ie-5 incluye IE 5.0 e IE 5.5) o que apunte directamente a una versión dada (ej. ie-5-5 sólo para IE 5.5). Se puede apuntar al engine (ej. webkit) o al navegador (ej. safari).

/* CssUserAgent lets you target specific browsers without CSS hacks */
.logo-area {
background-image: url(logo.png);
 background-repeat: no-repeat;
 background-position: left top;
}
 /* target IE 5.0, 5.5, 6.0 */
 .ua-ie-5 .logo-area,
 .ua-ie-6 .logo-area {
/* IE versions < 7.0 don't fully support transparent 24-bit PNGs */
 background-image: url(logo.gif);
} 

cssuseragent.org

Dejar un comentario