Tambahkan gaya ke tag abbr di IE

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 00:31:34

Perkenalan

<abbr> digunakan untuk menambahkan tag XHTML berlabel tepat ke singkatan di halaman web (Catatan Penerjemah: Di sini, singkatan dan singkatan dianggap terpisah, rentang singkatan lebih besar dari singkatan, gunakan tag <acronym> untuk inisial singkatan), browser IE untuk Windows saat ini tidak mendukung tag <abbr>. Di IE, Anda dapat menerapkan CSS ke tag <acronym> tetapi tidak ke tag <abbr>. IE akan menampilkan prompt untuk atribut title dari tag <acronym>, tetapi abaikan tag <abbr>.

Bug (atau fitur) IE ini menyebabkan beberapa orang situs web berpikir bahwa tag <abbr> tidak berguna sama sekali, dan ini jelas salah. Tag ini masih ditangani dengan benar di Mozilla dan Opera, dan sangat penting untuk keterbacaan dan semantik konten web. Makanya saya terus mencari solusinya, dan akhirnya saya menemukannya.

Larutan

Metode ini didasarkan pada fakta sederhana: bahkan jika IE mengabaikan tag <abbr>, tag lain yang bersarang di dalam tag <abbr> masih normal. Jadi saya menyematkan tag di dalam <abbr>, mengatur atribut judul dan kelas , dan kemudian <abbr> mulai menjadi sama dengan tag <acronym>.

contoh kode

Perhatikan kode di bawah ini, contoh singkatan sederhana:

Sekarang, bandingkan kode yang dimodifikasi:

operasi otomatis

Menyematkan secara manual ke setiap tag <abbr> jelas tidak mungkin - membosankan dan tidak diperlukan untuk Mozilla dan Opera. Untungnya, kini ada solusi otomatis berbasis skrip sisi klien.

Anda mungkin telah memperhatikan bahwa kata-kata yang disingkat pada halaman ini (Catatan Penerjemah: halaman penulis asli) diminta bahkan di IE, dan gaya CSS (garis bawah putus-putus dan kursor mouse berbentuk tanda tanya) ditambahkan. Namun jika dilihat dari source codenya, Anda tidak akan menemukan tag yang disebutkan di atas. Hal ini dicapai berkat JavaScript sederhana yang memuat halaman ini:

fungsi gayaAbbr() {
var oldBodyText, newBodyText, reg
jika (adalahIE) {
oldBodyText = dokumen.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1>$2</ABBR>');
document.body.innerHTML = newBodyText;
}
}
jendela.onload = fungsi(){
gayaAbbr()
};

isIE = (dokumen.semua) ? benar: salah;

Skrip ini akan memeriksa browser klien dan, jika itu IE, ganti semua tag <abbr> dengan versi yang dimodifikasi (tertanam ). Perhatikan bahwa kita harus menggunakan ekspresi reguler dan atribut innerHTML daripada metode DOM standar, karena IE tidak dapat memperoleh atribut <abbr> melalui DOM.

Penataan gaya

Terakhir kali melihat CSS yang digunakan di halaman ini. Cukup sederhana:

abbr, akronim, span.abbr {
kursor: bantuan;
border-bottom: 1px putus-putus #000;
}

Mozilla dan Opera menggunakan penyeleksi atribut abbr dan akronim, dan IE menggunakan akronim dan span.abbr. Apapun itu, <abbr> dan <acronym> diberi gaya - dengan tanda tanya kursor mouse (saat mouse berada di atas) dan garis bawah putus-putus.