Eu tentei direcionar o atributo alt em css. Minha solução funcionou no Firefox / Mozilla, mas falha no Safari-Chrome / Webkit. Há algo de errado em estilizar uma tag alt? Caso contrário, como você acha que eu soluciono problemas no Webkit.
Aqui está um exemplo:
CSS
img#logo[alt="Site Title"] { color: #999; font-size: 2em; }HTML
<img id="logo" src="" alt="Site Title" width="" height="" />Eu tentei e funciona perfeitamente para mim. Observe que as propriedades colore font-sizenão terão efeito no Chrome, pois nenhum texto é exibido. (O Firefox exibe o texto alternativo se a imagem não puder ser encontrada.) O uso da propriedade width, por exemplo, mostra que ela funciona bem. Vou postar meu código abaixo para você ver.
No entanto, para sua pergunta original, segmentar o que é essencialmente um campo de "texto livre" em CSS é propenso a problemas. É muito fácil alterar um atributo alt sem pensar nas repercussões no CSS (em vez de alterar o nome de uma classe onde deveria ser óbvio).
Além disso, como você já está segmentando um ID, você só precisa usar esse seletor - um ID pode ser usado apenas uma 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 o seletor de atributos é definido na especificação CSS do W3C, você deve poder usá-lo. Mas as implementações dos navegadores variam e são mais ou menos confiáveis.
Como você pode ver no suporte à Referência do SitePoint para o seletor de atributos CSS , o suporte do Webkit é incorreto. Você também pode ver que o suporte ao seletor de atributos css do IE varia de uma versão para outra.
Portanto, esse seletor ainda não é suportado por todos os navegadores.
Como uma maneira mais confiável, você deve usar o seletor de ID, suportado por todos os navegadores:
fonte
Depois de fazer alguns testes, não parece que os navegadores com Webkit suportam o estilo do texto do atributo alt. Portanto, suas observações parecem corretas e inevitáveis.
fonte
O seletor CSS está selecionando a tag, afetando assim a maneira como a tag é exibida. Certamente, se você desligar as imagens e observar o texto alternativo exibido nesse local, ele será exibido conforme está escrito em seu css.
Você pode abrir um bug para o projeto webkit para que eles o consertem - se eles acharem que o comportamento do firefox é o que eles querem fazer lá.
fonte