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="" />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>
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:
fuente
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.
fuente
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í.
fuente