Contenido

Usa media queries para ocultar CSS3 a navegadores antiguos

27 Jun

+ 18

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.

  • Ni una sola línea de carga extra para los usuarios actualizados.

    Entiendo que para usos excepcionales este post está bien pero eso de cargar código redundante en un navegador moderno es hacer pagar a justos por pecadores.

    Lo que yo hago.

    Maqueto los selectores/atributos css3 que tienen la mayoría de los navegadores ocupando el mínimo de código.

    Luego comentarios condicionales sólo para IE8/7 y hago una hoja de estilo grande para que rule ahí.

    Para que te hagas cargo yo ni sobreescribo los background rgba en el código inicial. ¿porque voy a añadir una línea más al de carga a los usuarios que han tomado la decisión acertada de tener su navegador actualizado?

  • A mi me parece un sistema muy elegante y cómodo, gracias por compartirlo 😀

  • Hola ya que estamos con el tema de las media querys.
    Alguien sabe xq me hace estos estraños al empequeñecer la pantalla en esta pagina apuntar.net :S

    Por cierto la página es nueva y sirve para guardar código de desarrolladores exarla un ojo y me comentaris

  • La verdad que es muy útil y confiable.

  • No sé, en lo personal no estoy del todo de acuerdo con esto.

    No creo que deba ser necesario reescribir reglas dos veces cuando CSS es un lenguaje tan flexible a la hora de asimilar errores (cuando no detecta una regla, símplemente la salta).

    No sé si me he explicado: ¿No sería mejor esto:

    .miclase {
        display: block;
        width: 100px;
        height: 100px;
        /*ignorado por IE 9-*/ 
       -webkit-border-radius:50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }
    

    que esto:

    
    .miclase {
        display: block;
        width: 100px;
        height: 100px;
    }
    @media only screen {
        .miclase {
            -webkit-border-radius:50px;
            -moz-....
        }
    }
    

    PD: Acabo de descubrir tu blog, y me encanta. Felicidades por el trabajo que realizas 😉

    • @Emilio Cobos: Buenas Emilio, gracias a ti por molestarte en comentar.

      CSS es un lenguaje muy flexible y por lo general bastante liviano en los navegadores web, pero con la llegada de los dispositivos móviles cualquier optimización puede marcar la diferencia.

      En el ejemplo que pones, en el primer caso (solo la class .miclase) efectivamente va a detectar una regla no válida y la va a omitir, 3 veces. Por lo tanto, el procesador interno del navegador deberá realizar 3 comprobaciones para realizar, o no, tareas con ellas.

      Por contra, en el caso 2 (el de @media) solo realizará una, para omitir, o no, el contenido.

      De esta forma, en hojas de estilo complejas con cantidad de excepciones por navegador ahorramos unos milisegundos bastante interesantes 😀

    • @aNieto2k: Pero igual que alivias unos milisegundos con los navegadores antiguos, haces que los motores de CSS de los navegadores modernos hagan comprobaciones de más, además de volver a reseleccionar, en este caso, a todos los elementos del DOM que tengan la clase miclase (que en una hoja más compleja serían más).

      Por lo tanto estás haciendo «sufrir» (nótense las comillas) a los navegadores modernos (aunque es cierto que sus motores de CSS son más rápidos) para aliviar mínimamente a los antiguos…

      PD: Lo siento, pero en el comentario anterior no sabía que se podían usar etiquetas <pre> 😉

  • interesante el articulo en realidad me parece buenissimo!!!

  • @Emilio cobos En todo caso el criterio de usar o no el codigo de optimización seria: el objetivo (de la pagina) y tipo de publico al que este dirigida la pagina…
    Ademas si estamos hablando de navegadores actualizados por lo general estamos hablando de una PC (relativamente) potente, y se puede tener el criterio de priorizar un poco navegadores antiguos que por lo general están en PC menos potentes como locutorios o ciber cafe, es bueno tener en cuenta este criterio!
    @aNieto2k Muy buen Blog!

  • Me parece que cambiar la regla cssno seria mejor manual como siempre

  • buen articulo lo intentaremos gracias

  • Es muy util todos estos datos. los tendre en cuenta. Gracias por compartirlos.

  • ¿Y si con PHP se carga el CSS dependiendo del navegador? ¿Sería mejor? 🙂

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.