soy Kseso y esto EsCSS

Responsive @Media Queries: cómo usar display:none

Responsive @Media Queries: cómo usar display:none

·Por Kseso ✎ 5

Lectura recomendada por KsesoCss

Artículo de Tim Kadlec en su página Media Query & Asset Downloading Results sobre qué ocurre (tráfico, peticiones al servidor, descarga) con las imágenes al utilizar display:none cuando están por medio las reglas @media queries.

Hace un tiempo , mencioné que estaba haciendo algo de investigación sobre cómo se descargan las imágenes cuando las media queries están involucradas. Para ayudarme con eso, escribí algunas pruebas automatizadas en Javascript que podrían determinar si la imagen ha sido solicitada y los resultados. He publicado algunos resultados iniciales, pero creo que tengo suficientes datos ahora para poder entrar un poco más en detalles.

El primer test

En esta página trató de ocultar una imagen contenida en un div con display: none. El código HTML y CSS es:

<div id="test1"> <img src="images/test1.png" alt="" /> </div> @media all and (max-width: 600px) { #test1 { display:none; } }

Los resultados

Si hay un método de ocultar las imágenes que puedo decir con un 100% de certeza que se debe evitar es éste, se trata de utilizar display: none. Es completamente inútil. Parece que en Opera Mobile y en Opera Mini no se descarga la imagen (ver en el post inicial las razones del porqué), pero la imagen es solicitada por todos los demás.

A continuación de cada test te muestra una tabla con el resultado.
Si estás interesado en conocer los detalles de cada test y el método que recomienda el autor, no dejes de leer el artículo original.

Tim Kadlec: quién es y qué hace

Tim Kadlec

@tkadlec en Twitter.
Web

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso