Existe algo errado em direcionar o atributo alt em css?

11

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="" />

5

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>

— DisgruntledGoat
fonte

Bom argumento sobre o uso de texto livre como parte do seu seletor de CSS.

— Lèse majesté 26/10/10

1

Dê uma olhada nos novos atributos de dados em html5, pode ser exatamente o que você precisa.

— Thomas

2

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:

#logo {color: # 999; tamanho da fonte: 2em; }

— Matthieu FAURE
fonte

1

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.

— John Conde
fonte

Você tem um exemplo, porque funcionou bem para mim.

— usar o seguinte

Funcionou para você no Chrome?

— John Conde

Sim, a aplicação de estilos usando o seletor de atributos funcionou bem. O Chrome não exibe o texto alternativo para imagens em nenhuma circunstância, AFAIK; portanto, não há nada para estilizar em texto.

— usar o seguinte

@Goat: se posso chamá-lo de cabra .., eu pensei quando eu testei isso ontem à noite que o Chrome fez exibir o texto alternativo quando há estilos foram aplicados à imagem. Vou ter que brincar com ele novamente depois do trabalho e ver se minha memória está boa.

— John Conde

Eu só vou colocar isso lá fora, mas pode ser um problema com o caractere de espaço que você tem lá ...

— Gup3rSuR4c

0

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á.

— Evgeny
fonte

O seletor de atributo é CSS2, não CSS3.

— usar o seguinte

Você está certo, removeu a resposta idiota que fiz anteriormente ...

— Evgeny