Este ceva în neregulă cu direcționarea atributului alt în css? (Webmasteri, Css, Html, Firefox, Google Chrome, Safari)

Ben Ackles a intrebat.

Am încercat să țintesc atributul alt în css. Soluția mea a funcționat în Firefox/Mozilla, dar eșuează în Safari-Chrome/Webkit. Este ceva în neregulă cu stilizarea unui etichet alt? Dacă nu, cum credeți că ar trebui să rezolv problema pentru Webkit.

Iată un exemplu:

CSS

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

HTML

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

4 răspunsuri
DisgruntledGoat

Am încercat și mie îmi funcționează perfect. Rețineți că color și font-size nu vor avea niciun efect în Chrome, deoarece nu se afișează niciun text. (Firefox afișează textul alt dacă imaginea nu poate fi găsită.) Folosind proprietatea width, de exemplu, se vede că funcționează bine. Voi posta codul meu mai jos pentru ca să vedeți.

Cu toate acestea, în ceea ce privește întrebarea dvs. inițială, țintirea a ceea ce este în esență un câmp de „text liber” în CSS este predispusă la ghinion. Este foarte ușor să schimbi un atribut alt fără să te gândești la repercusiunile în CSS (spre deosebire de schimbarea unui nume de clasă unde ar trebui să fie evident).

În plus, din moment ce vizați deja un ID, trebuie să folosiți doar acel selector – un ID poate fi folosit doar o singură dată pe pagină.


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

Comentarii

  • Bună observație cu privire la utilizarea textului liber ca parte a selectorului CSS. –  > Por Lèse majesté.
  • Aruncați o privire la noile atribute data- din html5, ar putea fi exact ceea ce vă trebuie. –  > Por Thomas.
Matthieu FAURE

Deoarece selectorul de atribute este definit în specificația W3C CSS, ar trebui să îl puteți utiliza. Dar implementările browserelor variază și sunt mai mult sau mai puțin fiabile.

După cum puteți vedea pe SitePoint Reference suport pentru selectorul de atribute CSS, suportul Webkit este eronat. De asemenea, ați putea vedea că Suportul pentru selectorul de atribute CSS al IE variază de la o versiune la alta.

Astfel, acest selector nu este încă suportat de toate browserele.

Ca o modalitate mai fiabilă, ar trebui să folosiți selectorul ID, care este acceptat de toate browserele:

#logo { color: #999; font-size: 2em; }

John Conde

După ce am făcut câteva teste, se pare că browserele care utilizează webkit nu acceptă stilizarea textului atributului alt. Așadar, observațiile dumneavoastră par a fi corecte și inevitabile.

Comentarii

  • Aveți un exemplu, pentru că pentru mine a funcționat bine. –  > Por DisgruntledGoat.
  • A funcționat pentru tine în Chrome? –  > Por John Conde.
  • Da, aplicarea stilurilor cu ajutorul selectorului de atribute a funcționat bine. Chrome nu afișează textul alt pentru imagini în niciun caz AFAIK, deci nu există nimic de stilizat în ceea ce privește textul. –  > Por DisgruntledGoat.
  • @Goat: Dacă îmi permiteți să vă numesc capră…, când am testat acest lucru aseară am crezut că Chrome a făcut afișa textul alt atunci când nu se aplicau stiluri imaginii. Va trebui să mă joc din nou cu el după muncă și să văd dacă memoria mea este bună. –  > Por John Conde.
  • Am de gând să pun asta acolo, dar este ar putea fi să fie o problemă cu caracterul spațiu pe care îl aveți acolo… –  > Por Gup3rSuR4c.
Evgeny

Selectorul CSS selectează tag-ul, deci afectează modul în care este afișat tag-ul. Destul de sigur că dacă dezactivezi imaginile și te uiți la textul alternativ afișat în acel loc este apare așa cum este scris în css-ul tău.

Poate ar fi bine să deschizi un bug pentru proiectul webkit pentru ca ei să îl rezolve – dacă consideră că comportamentul din firefox este ceea ce vor să facă acolo.

Comentarii

  • Selectorul de atribute este CSS2, nu CSS3. –  > Por DisgruntuntledGoat.
  • Aveți dreptate, am eliminat răspunsul prostesc pe care l-am făcut anterior … – -.  > Por Evgeny.