Siempre tendemos a condicionar nuestro CSS pensando en los navegadores antiguos, haciendo uso de los condicionales o hacks para complementar las excepciones que navegadores como IE6,7 requieren para funcionar «correctamente», pero … ¿y si añadieramos como excepciones las funcionalidades más modernas?
Desde 456 Berea St., recomienda usar las media queries de CSS3 para unir el CSS más moderno y solo será visible para los navegadores que las soporten, de esta forma estamos cambiando el chip y optimizar el uso de los CSS’s en los navegadores de los usuarios.
Típico CSS
.block {
width: 100%;
position: fixed;
-moz-border-radius:1em; // IE no lo detecta
-webkit-border-radius:1em; // ...
// ...
}
Imaginemos que entramos con IE y cargamos este CSS, si seguimos el proceso de ejecución CSS secuencial deberemos evaluar cada una de las líneas aunque no las tengamos soportadas. Esto, en grandes aplicaciones con miles de líneas de CSS en navegadores antiguos pueden provocar lentitud (doy fé de ello).
Para solventar el problema y unificar el código «moderno» deberíamos cambiar el chip y unificarlo de la siguiente forma.
Usando media queries
@media only screen {
.block {
-moz-border-radius:1em; // IE no lo detecta
-webkit-border-radius:1em; // ...
// ...
}
}
.block {
width: 100%;
position: fixed;
}
De esta forma, IE no reconoce la palabra «only» del @media y omite el resto del código incluido en su interior. De esta forma únicamente realizamos una sola comprobación que omitirá o no dependiendo de las capacidades del navegador.
18 comentarios, 0 referencias
+
#