¿Hay algo malo en apuntar al atributo alt en css?

11

Intenté apuntar al atributo alt en css. Mi solución funcionó en Firefox / Mozilla, pero falla en Safari-Chrome / Webkit. ¿Hay algo malo en diseñar una etiqueta alt? Si no es así, ¿cómo supone que soluciono los problemas de Webkit?

Aquí hay un ejemplo:

CSS

img#logo[alt="Site Title"] { color: #999; font-size: 2em; }

HTML

<img id="logo" src="" alt="Site Title" width="" height="" />

5

Lo probé y funciona perfectamente para mí. Tenga en cuenta que los colory font-sizelas propiedades no tendrán ningún efecto en Chrome, ya que no hay texto se visualiza. (Firefox muestra el texto alternativo si no se puede encontrar la imagen). El uso de la propiedad de ancho, por ejemplo, muestra que funciona bien. Publicaré mi código a continuación para que lo veas.

Sin embargo, a su pregunta original, apuntar a lo que es esencialmente un campo de "texto libre" en CSS es propenso a contratiempos. Es muy fácil cambiar un atributo alt sin pensar en las repercusiones en CSS (en lugar de cambiar el nombre de una clase donde debería ser obvio).

Además, dado que ya está apuntando a una ID, solo necesita usar ese selector; una ID solo se puede usar una vez por página.

<!DOCTYPE html>
<html>
<head>
  <style>img#logo[alt="Site Title"] { width:200px }</style>
</head>
<body>
  <img alt="Site Title" src="bullet.png" id="logo" />
</body>
</html>

— Cabra descontento
fuente

Buen punto sobre el uso de texto libre como parte de su selector CSS.

— Lèse majesté

1

Eche un vistazo a los nuevos atributos de datos en html5, podría ser justo lo que necesita.

— Thomas

2

Como el selector de atributos está definido en la especificación CSS del W3C, debería poder usarlo. Pero las implementaciones de los navegadores varían y son más o menos confiables.

Como puede ver en el soporte de referencia de SitePoint para el selector de atributos CSS , el soporte de Webkit es defectuoso. También puede ver que el soporte del selector de atributos css de IE varía de una versión a otra.

Por lo tanto, este selector aún no es compatible con todos los navegadores.

Como una forma más confiable, debe usar el selector de ID, que es compatible con todos los navegadores:

#logo {color: # 999; tamaño de fuente: 2em; }

— Matthieu FAURE
fuente

1

Después de hacer algunas pruebas, no parece que a través de los navegadores webkit admitan el diseño del texto del atributo alt. Entonces sus observaciones parecen ser correctas e inevitables.

— John Conde
fuente

Tienes un ejemplo, porque funcionó bien para mí.

— DisgruntledGoat

¿Funcionó para ti en Chrome?

— John Conde

Sí, aplicar estilos usando el selector de atributos funcionó bien. Chrome no muestra el texto alternativo para las imágenes bajo ninguna circunstancia AFAIK, por lo que no hay nada para diseñar el texto.

— DisgruntledGoat

@ Cabra: Si puedo llamarte cabra ..., pensé cuando probé anoche que Chrome sí mostraba el texto alternativo cuando no se aplicaban estilos a la imagen. Tendré que volver a jugar con él después del trabajo y ver si mi memoria es buena.

— John Conde

Solo voy a publicar esto, pero podría ser un problema con el personaje espacial que tienes allí ...

— Gup3rSuR4c

0

El selector CSS está seleccionando la etiqueta, por lo que afecta la forma en que se muestra la etiqueta. Estoy bastante seguro de que si apaga las imágenes y mira el texto alternativo que se muestra en ese lugar, aparece tal como está escrito en su CSS.

Es posible que desee abrir un error para el proyecto webkit para que lo solucionen, si sienten que el comportamiento de firefox es lo que quieren hacer allí.

— Evgeny
fuente

El selector de atributos es CSS2, no CSS3.

— DisgruntledGoat

Tienes razón, eliminó la tonta respuesta que hice anteriormente ...

— Evgeny