¿Deberían definirse todas las imágenes de presentación en CSS?

He estado aprendiendo (X) HTML & CSS recientemente, y uno de los principios principales es que HTML es para la estructura y CSS para la presentación.¿Deberían definirse todas las imágenes de presentación en CSS?

Teniendo esto en cuenta, me parece que un buen número de imágenes en la mayoría de los sitios son solo para presentación y como tal deberían estar en el CSS (con un div o span para mantenerlas en el HTML) - por ejemplo logotipos, imágenes de encabezado, fondos.

Sin embargo, mientras que los ejemplos en mi libro ponen algunas imágenes en CSS, todavía están a menudo en el HTML. (Solo estoy hablando de imágenes 'de presentación', no 'estructurales' que son una parte clave del contenido, por ejemplo, fotos en un sitio de fotos).

¿Deberían todas esas imágenes estar en CSS? ¿O hay razones técnicas o lógicas para mantenerlos en el HTML?

Gracias, subvención

Fuente

2010-06-16 Grant Crofton

Buena pregunta. Me he preguntado lo mismo de vez en cuando. En general, incluyo todo en el CSS si no es específico de la página (excepto los botones/enlaces de imagen), aunque no sé cómo manejar cosas como gráficos de logotipos. – strager

Los logotipos no son de presentación. Ellos comunican información. – Quentin

Es un punto justo, los logotipos probablemente no son puramente de presentación en la mayoría de las circunstancias. Pero creo que el objetivo de las preguntas sigue siendo válido. –

Si una imagen es "contenida", diga en un artículo periodístico, la imagen editorial, luego use la etiqueta img. Si es parte de su UI, tema o máscara o cualquiera que sea el nombre, entonces sí, colóquelo CSS.

Lecturas recomendadas

Proyectos con los estándares web (Zeldman)
diseño de la bala prueba Web (Dan Cederholm)
CSS Dominio (Andy Clark, Andy Budd, Cameron Moll)

Fuente

2010-06-16 10:43:40 redben

Supongo que por "UI" solo se refiere a la parte decorativa de la IU. Si hay, por ejemplo, imágenes usadas como enlaces, esas deberían estar en HTML. Solo las imágenes que son puramente decorativas e insignificantes para los contenidos deben colocarse en CSS. – PauliL

Supongo que el verdadero problema es decidir qué contenido contiene. Por ejemplo, estoy haciendo una página de lista de regalos para una boda que incluye algunas imágenes de artículos, no una parte central del contenido, sino también algo más que decoración. De todos modos, esto confirma bastante lo que originalmente pensé, y parece ser la sugerencia popular, ¡así que obtienes la respuesta! –

Una de las razones para poner esas imágenes en CSS podría ser para servir a diferentes navegadores desde el mismo sitio web, simplemente cambiando el CSS: por ejemplo, si se detecta un/bolsillo móvil/incrustado navegador podría darles el mismo HTML pero con un CSS que no incluye imágenes.

Fuente

2010-06-16 10:29:31 ChrisW

Puede 'mostrar: ninguno;' en una imagen usando CSS, sin embargo. – strager

La propiedad src de una etiqueta img es obligatoria según HTML 4.01/XHTML 1.0 DTD. Es por eso que siempre debe incluirse en el HTML.

Puede especificarlo en el CSS para fines de dibujo, pero la mayoría de las imágenes en la mayoría de los casos son estáticas y no cambian, por lo que colocarlo en CSS es un paso innecesario.

Fuente

2010-06-16 10:31:03

¿Pero qué hay de dejar la etiqueta img por completo, y simplemente tener (por ejemplo) un lapso, que se llenó con una imagen en CSS? Como ciertas imágenes son solo para decoración, esto es lo que parece ser sugerido por la división HTML/CSS. También de esta manera, como sugirió ChrisW, puedes tener una imagen diferente o ninguna imagen, dependiendo del tipo de espectador. –

Puedes, pero solo es reinventar la etiqueta de la imagen para ser honesto. Usted también (creo) no puede usar texto alternativo que puede ser importante para la accesibilidad. –

Los puse en CSS si es posible. Una razón es que creo que pertenecen allí como usted mencionó y la otra es la posibilidad de usar sprites. Esto puede reducir significativamente el tiempo de carga de su página.

Fuente

2010-06-16 10:31:55

Bueno, depende. Por ejemplo, si desea hacer algunos efectos cuando el mouse está sobre una imagen, debe estar en el HTML. Cuando pones la imagen en el HTML, puedes ubicarla más libremente que en CSS. Además, hasta donde yo sé, las imágenes incluidas con CSS no se rastrean (puede interesarle que los usuarios rastreen el logotipo de su empresa).

Si piensa en la accesibilidad, las imágenes HTML incorporadas pueden tener información de alt y título. Entonces, por ejemplo, cuando coloca el mouse sobre el logotipo de su empresa, el navegador podría mostrar el lema de su empresa si lo inserta con el atributo title = "motto" en la etiqueta img. No puedes hacer eso con CSS.

También se utilizan personas para poner imágenes en el HTML, no CSS y los comportamientos son algo difícil de cambiar.

En conclusión, dependiendo de sus necesidades, CSS no es lo suficientemente flexible para satisfacer sus necesidades y debe poner las imágenes en el HTML. Pero si CSS se adapta a sus necesidades de imágenes de interfaz de usuario, entonces CSS es una mejor idea.

Fuente

2010-06-16 10:43:45 Matachana

puedes hacer roll overs con css. En realidad tienes más posibilidades con css. con sprites de CSS, por ejemplo, tiene una imagen que contiene los estados normal y estacionario, apilados. En css a: hover, simplemente cambia la posición de la imagen de fondo et voila. > CSS no es lo suficientemente flexible ... cuestionable. Hay muchos buenos libros sobre esto, "CSS Mastery" por ejemplo – redben

Sí, estamos de acuerdo en las reinversiones. Si desea realizar la reinversión solo en la imagen, debe usar img: hover y la etiqueta img debe estar presente en el (X) HTML. Si desea poner un atributo de título en la imagen, no hay forma de hacerlo en CSS, por lo que para esa tarea CSS no es lo suficientemente flexible. CSS es muy flexible en general, pero para algunas tareas específicas no es lo suficientemente flexible. – Matachana

No me refiero a rollover con cosas como el menú desplegable, no use la etiqueta img. ej. item 1 Luego, en CSS, tendría algo como #item {background: url (...) arriba a la izquierda;} a.item: hover {background-position: bottm left;} Ahora poniendo un título en una imagen significa que la imagen está contenida, luego debe cargarse desde html con el contenido, no desde css. Esto no tiene nada que ver con que css no sea flexible para algunas tareas específicas. Al menos esto es lo que pienso :) – redben

A veces, cargar imágenes de IU mediante CSS también impide que los usuarios descarguen sus imágenes de IU en sus unidades, al mismo tiempo que guardan una página.

Pero, por supuesto, hay otras maneras de guardarlas, pero solo un punto para agregar.

Y los navegadores tienden a priorizar CSS más que HTML, por lo que cargar imágenes a través de CSS podría ser un poco más rápido en comparación con HTML.

Fuente

2010-06-16 11:40:42 Starx

¿Deberían definirse todas las imágenes de presentación en CSS?

Respuesta

Cuestiones relacionadas