Ad 468 X 60

Senin, April 22, 2013

Cara Menata Styling Tag CSS di IE

Posted By Unknown , Senin, April 22, 2013 Be the first to comment!
Setelah muter muter cari tag <abbr>  yang bisa dimasukin ke CSS, ternyata eh ternyata masih tidak ketemu juga, dan akhirnya kutikan singkat inilah yang saya dapat, judulnya : Styling <abbr> in IE dari : http://www.sovavsiti.cz/css/abbr.html
sebenarnya pengen nulis ini berdasarkan apa yang saya dapat, tapi memang susah untuk mendekskripsikan segala sesuatu mengenai seluk beluk  CSS,  akhirnya hasil Copas telah kembali menghantui jiwa saya.. heheh , silahkan baca : atau kalau lumayan jago B.Inggris langsung klik link yang ada diatas. 

Pengantar
Internet Explorer untuk Windows tidak mendukung elemen <abbr> yang harus digunakan pada halaman web untuk markup yang tepat dari singkatan. Meskipun Anda dapat menerapkan cascading style sheets (CSS) pada <acronym> di IE, Anda tidak dapat melakukan hal yang sama untuk <abbr>. Selain itu, IE menampilkan atribut judul elemen <acronym> sebagai tool tip, tetapi mengabaikan <abbr> tersebut.


Bug ini IE (atau fitur) membuat beberapa webmaster percaya bahwa elemen <abbr> tidak berguna sama sekali, namun itu tidak benar. Misalnya baik Mozilla dan Opera menanganinya dengan benar dan itu cukup penting untuk aksesibilitas konten web juga. Itulah mengapa saya sedang mencari solusi dan akhirnya menemukan satu.
larutan

Solusi ini didasarkan pada fakta sederhana: meskipun IE mengabaikan unsur <abbr>, unsur-unsur lain bersarang di denda kerja <abbr>. Jadi saya membungkus isi <abbr> dengan <span>, mengatur judul dan atribut kelas dan voila-the <abbr> mulai berperilaku seperti <acronym>.
contoh Kode

Lihatlah kode berikut, menunjukkan contoh singkatan sederhana:

<abbr title="Cascading Style Sheets">CSS</abbr>

Dan sekarang, bandingkan dengan kode setelah perubahan:

<abbr title="Cascading Style Sheets">
<span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>

Otomatisasi

Secara Manual memasukkan unsur <span> ke setiap <abbr> mungkin ini tidak masuk akal. tapi akan cukup melelahkan dan Selain itu tidak diperlukan untuk browser seperti Mozilla atau Opera. Untungnya, ada solusi otomatis berdasarkan pada script sisi klien.

Sepertinya Anda mungkin melihat, singkatan pada halaman ini memiliki tips alat bahkan di IE dan ditata dengan berlari garis bawah dan tanda tanya kursor. Namun, jika Anda melihat pada kode sumber, Anda akan menemukan ada unsur <span> dijelaskan di atas. Hal ini karena JavaScript sederhana yang melekat ke halaman:

function styleAbbr() {

        var oldBodyText, newBodyText, reg

        if (isIE) {

          oldBodyText = document.body.innerHTML;

          reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;

          newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');

          document.body.innerHTML = newBodyText;

        }

      }

      

      window.onload = function(){

        styleAbbr()

      };

      

      isIE = (document.all) ? true:false;

Script memeriksa apakah browser IE dan kemudian menggantikan semua kejadian dari elemen <abbr> dengan versi modifikasi (dengan <span> terpasang). Perhatikan, bahwa kita harus menggunakan ekspresi reguler dan milik innerHTML bukan metode DOM standar, karena IE tidak dapat mengakses elemen <abbr> melalui DOM.
 
Menata
 
Akhirnya, mari kita lihat pada style sheet yang digunakan di halaman ini. Ini cukup sederhana:

abbr, acronym, span.abbr {

        cursor: help;

        border-bottom: 1px dashed #000;

      }

Mozilla and Opera take use of the abbr and acronym selectors, while IE uses the acronym and the span.abbr selectors. In any case, both <abbr> and <acronym> elements are styled with the question mark cursor (on mouse hover) and the dashed underline.

Get Free Email Updates Daily!
Label:

0 komentar:

Langganan: Posting Komentar (Atom)