Apakah ada yang salah dengan menargetkan atribut alt di css?

11

Saya mencoba menargetkan atribut alt di css. Solusi saya berfungsi di Firefox / Mozilla, tetapi gagal di Safari-Chrome / Webkit. Apakah ada yang salah dengan menata tag alt? Jika tidak, bagaimana menurut Anda saya memecahkan masalah untuk Webkit.

Ini sebuah contoh:

CSS

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

HTML

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

5

Saya mencobanya dan itu bekerja dengan baik untuk saya. Perhatikan bahwa colordan font-sizeproperti tidak akan memiliki efek apa pun di Chrome, karena tidak ada teks yang ditampilkan. (Firefox menampilkan teks alt jika gambar tidak dapat ditemukan.) Menggunakan properti width, misalnya, menunjukkan bahwa ia berfungsi dengan baik. Saya akan memposting kode saya di bawah ini untuk Anda lihat.

Namun, untuk pertanyaan awal Anda, penargetan yang pada dasarnya adalah bidang "teks bebas" di CSS cenderung mengalami kecelakaan. Sangat mudah untuk mengubah atribut alt tanpa memikirkan dampak dalam CSS (sebagai lawan mengubah nama kelas yang seharusnya jelas).

Selain itu, karena Anda sudah menargetkan ID, Anda hanya perlu menggunakan pemilih itu - ID hanya dapat digunakan satu kali per halaman.

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

Poin bagus tentang menggunakan teks gratis sebagai bagian dari pemilih CSS Anda.

— Lèse majesté

1

Lihatlah atribut data baru di html5, mungkin hanya hal yang Anda butuhkan.

— Thomas

2

Karena pemilih atribut didefinisikan dalam spesifikasi CSS W3C, Anda harus dapat menggunakannya. Tetapi implementasi browser bervariasi, dan lebih atau kurang dapat diandalkan.

Seperti yang Anda lihat pada dukungan Referensi SitePoint untuk pemilih atribut CSS , dukungan Webkit buggy. Anda juga dapat melihat bahwa dukungan pemilih atribut css IE bervariasi dari satu versi ke versi lainnya.

Jadi pemilih ini belum didukung oleh semua browser.

Sebagai cara yang lebih andal, Anda harus menggunakan pemilih ID, yang didukung oleh semua browser:

#logo {color: # 999; ukuran font: 2em; }

— Matthieu FAURE
sumber

1

Setelah melakukan beberapa pengujian, sepertinya browser yang didukung webkit tidak mendukung styling teks atribut alt. Jadi pengamatan Anda tampaknya benar dan tidak dapat dihindari.

— John Conde
sumber

Apakah Anda punya contoh, karena itu berfungsi dengan baik untuk saya.

— DisgruntledGoat

Itu bekerja untuk Anda di Chrome?

— John Conde

Ya, menerapkan gaya menggunakan pemilih atribut berfungsi dengan baik. Chrome tidak menampilkan teks alt untuk gambar dalam keadaan apa pun AFAIK, jadi tidak ada yang bergaya teks.

— DisgruntledGoat

@Goat: Jika saya dapat memanggil Anda goat .., saya pikir ketika saya menguji tadi malam bahwa Chrome memang menampilkan teks alt ketika tidak ada gaya yang diterapkan pada gambar. Saya harus bermain dengannya lagi setelah bekerja dan melihat apakah ingatan saya bagus.

— John Conde

Saya hanya akan meletakkan ini di luar sana, tapi itu bisa menjadi masalah dengan karakter ruang yang Anda miliki di sana ...

— Gup3rSuR4c

0

Selektor CSS memilih tag, sehingga memengaruhi cara tag ditampilkan. Cukup yakin jika Anda mematikan gambar Anda dan melihat teks alternatif yang ditampilkan di tempat itu muncul seperti yang tertulis dalam css Anda.

Anda mungkin ingin membuka bug untuk proyek webkit bagi mereka untuk memperbaikinya - jika mereka merasa bahwa perilaku firefox adalah apa yang ingin mereka lakukan di sana.

— Evgeny
sumber

Selektor atribut adalah CSS2, bukan CSS3.

— DisgruntledGoat

Anda benar, menghapus jawaban bodoh yang saya lakukan sebelumnya ...

— Evgeny