soy Kseso y esto EsCSS

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

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

xPor 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

Comentarios: 5

  1. Anónimo18/6/12

    Bueno, lo primero.. QUE GRAN POST!! SIIII SEÑOR!!

    Y lo segundo, tengo una duda que no se si tú podrás solucionarmela.

    En los ejemplos de la web en los test, ponen códigos como por ejemplo:

    "<;div id="test2">;<;/div>;"

    ¿Que funcion tienen los ";"? yo nunca jamas los he visto implementados de esa manera...

    ResponderEliminar
  2. Hola
    Creo que debe ser que un ";" repetido del html entity.
    Supongo que si introduce el símbolo "<" diréctamente en el post te lo toma como parte del etiquetado html, no de la info, así que se utiliza la codificación "& lt;" (sin el espacio) en el código para que muestre el símbolo "<" como texto, no código.
    Supongo que se le coló un 2º ";"

    Por cierto, gracias.

    ResponderEliminar
  3. Muito Obrigado, era isso que estava procurando!

    ResponderEliminar
  4. Funciona prefecto. Gracias!

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap