C'è qualcosa di sbagliato nel prendere di mira l'attributo alt in css?

11

Ho provato a indirizzare l'attributo alt in css. La mia soluzione ha funzionato in Firefox / Mozilla, ma non funziona in Safari-Chrome / Webkit. C'è qualcosa di sbagliato nello stile di un tag alt? In caso contrario, come pensi che io risolva i problemi con Webkit.

Ecco un esempio:

CSS

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

HTML

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

5

L'ho provato e funziona perfettamente per me. Nota che le proprietà colore font-sizenon avranno alcun effetto in Chrome, poiché non viene visualizzato alcun testo. (Firefox visualizza il testo alternativo se non è possibile trovare l'immagine.) L'uso della proprietà width, ad esempio, mostra che funziona correttamente. Pubblicherò il mio codice qui sotto per farti vedere.

Tuttavia, alla tua domanda originale, il targeting di ciò che è essenzialmente un campo "testo libero" nei CSS è soggetto a contrattempi. È molto facile cambiare un attributo alt senza pensare alle ripercussioni nei CSS (al contrario di cambiare un nome di classe dove dovrebbe essere ovvio).

Inoltre, poiché stai già scegliendo come target un ID, devi solo utilizzare quel selettore: un ID può essere utilizzato solo una volta per pagina.

<!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

Un buon punto sull'uso del testo libero come parte del selettore CSS.

— Lèse majesté,

1

Dai un'occhiata ai nuovi attributi dei dati in html5, potrebbe essere proprio quello di cui hai bisogno.

— Thomas,

2

Poiché il selettore di attributi è definito nelle specifiche CSS del W3C, dovresti essere in grado di usarlo. Ma le implementazioni dei browser variano e sono più o meno affidabili.

Come puoi vedere sul supporto di riferimento di SitePoint per il selettore di attributi CSS , il supporto di Webkit è difettoso. Potresti anche vedere che il supporto del selettore di attributi css di IE varia da una versione all'altra.

Pertanto, questo selettore non è ancora supportato da tutti i browser.

Come modo più affidabile, è necessario utilizzare il selettore ID, che è supportato da tutti i browser:

#logo {color: # 999; dimensione carattere: 2em; }

— Matthieu FAURE
fonte

1

Dopo aver eseguito alcuni test, non sembra che i browser basati su webkit supportino lo stile del testo dell'attributo alt. Quindi le tue osservazioni sembrano essere corrette e inevitabili.

— John Conde
fonte

Hai un esempio, perché ha funzionato bene per me.

— DisgruntledGoat

Ha funzionato per te in Chrome?

— John Conde

Sì, l'applicazione degli stili utilizzando il selettore di attributi ha funzionato correttamente. Chrome non visualizza il testo alternativo per le immagini in nessun caso AFAIK, quindi non c'è nulla di stile nel testo.

— DisgruntledGoat

@Goat: se posso chiamarti capra .., ho pensato quando ho provato l'ultima notte che Chrome ha visualizzato il testo alternativo quando non sono stati applicati stili all'immagine. Dovrò giocarci di nuovo dopo il lavoro e vedere se la mia memoria è buona.

— John Conde

Ho intenzione di pubblicarlo, ma potrebbe essere un problema con il personaggio spaziale che hai lì ...

— Gup3rSuR4c,

0

Il selettore CSS sta selezionando il tag, quindi influenza il modo in cui il tag viene visualizzato. Abbastanza sicuro se si disattivano le immagini e si guarda il testo alternativo visualizzato in quel luogo viene visualizzato come è scritto nel tuo CSS.

Potresti voler aprire un bug per il progetto webkit affinché possa risolverlo, se ritengono che il comportamento di Firefox sia quello che vogliono fare lì.

— Evgeny
fonte

Il selettore di attributo è CSS2, non CSS3.

— DisgruntledGoat

Hai ragione, rimosso la risposta stupida che ho fatto in precedenza ...

— Evgeny,