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="" />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>
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:
sumber
Setelah melakukan beberapa pengujian, sepertinya browser yang didukung webkit tidak mendukung styling teks atribut alt. Jadi pengamatan Anda tampaknya benar dan tidak dapat dihindari.
sumber
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.
sumber