Responsive @Media Queries: cómo usar display:none 15.6.12
Responsive @Media Queries: cómo usar display:none
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
Kseso
the obCSServer ᛯ 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 Kseso
Bueno, lo primero.. QUE GRAN POST!! SIIII SEÑOR!!
ResponderEliminarY 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...
Hola
ResponderEliminarCreo 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.
Thank you!
ResponderEliminarMuito Obrigado, era isso que estava procurando!
ResponderEliminarFunciona prefecto. Gracias!
ResponderEliminarComo haces el efecto de la linea de arribas de colores?
ResponderEliminarVía background-image: linear-gradient() posicionado al centro y de inicio con un tamaño 0 en 'x' que en un momento dado pasa a ocupar el 100% con una transición en el cambio de tamaño.
EliminarUso el pseudoelemento .top-bar::after {} para crearlo sin necesidad de marcado HTML extra.
Todas las declaraciones necesarias puedes verlas (es CSS) en el inspector de tu navegador.
Un saludo