Cara menggunakan JavaScript dan CSS dengan benar dalam dokumentasi XHTML

Di semakin banyak situs web, penggunaan XHTML menggantikan HTML4 dengan kecepatan yang sangat cepat. Namun, beberapa browser arus utama saat ini tidak mendukung XHTML, dan beberapa pembuat halaman web tidak memahami perbedaan antara XHTML dan HTML4, yang membuat XHTML lambat dalam pengembangan web.

Saat ini, salah satu kesalahpahaman utama tentang XHTML adalah bahwa itu adalah versi lain dari HTML. Salah satu fakta yang menyebabkan kesalahpahaman ini adalah bahwa Microsoft Internet Explorer hanya mendukung XHTML dengan teks format mime/html dan bukan aplikasi yang disarankan/format xhtml+xml.

Ketika halaman XHTML diuraikan dalam format MIME dari Teks/HTML, ia tidak memiliki perbedaan dari halaman HTML, dan ketika diuraikan dalam format MIME dari Teks/XML atau Aplikasi/XHTML+XML, itu akan mematuhi penulisan XML yang ketat dan aturan tampilan.

Isi di dalam gaya dan tag skrip akan menyebabkan beberapa perbedaan berbeda ketika XHTML diuraikan dalam format XML (bukan format HTML).

<type skrip = teks/javascript>

var i = 0;

while (++ i <10) {

// ...

}

</script>

CATATAN: Kode sampel di atas bukan format XHTML yang baik karena menggunakan tag yang tidak diizinkan dalam xhtml atau xml <

Penulis yang akrab dengan HTML biasanya memahami bahwa menempatkan gaya tag gaya dan skrip dalam tag komentar akan menyembunyikan konten ini di browser, tetapi beberapa browser tidak dapat memahaminya.

<Tipe Gaya = Teks/CSS>

<!-

tubuh {latar belakang-warna: biru; Warna: kuning;}

->

</tyle>

<type skrip = teks/javascript>

<!-

var i = 0;

var sum = 0;

untuk (i = 0; i <10; ++ i)

{

jumlah += i;

}

alert ('sum =' + sum);

// ->

</script>

Contoh di atas menunjukkan cara mengabaikan konten di tag komentar di browser. Pada saat yang sama, contoh ini juga menunjukkan perbedaan antara konten browser dalam format teks/XML dan format aplikasi/xhtml+xml.

Mozilla 1.1+ / opera 7

Tidak ada CSS yang diterapkan, tidak ada javascript yang dieksekusi

Netscape 7.0x / Mozilla 1.0.x

Tidak menerapkan CSS, tetapi mengeksekusi javascript

Internet Explorer 5.5+

Dokumen tidak ditampilkan. (Lihat: https://developer.mozilla.org/ta ... _in_xhtml_documents)

Masalah lain muncul saat menggunakan tag komentar untuk diproses di JavaScript pada halaman XHTML adalah bahwa akan ada dua bilah horizontal berturut-turut (-) di JavaScript:

<type skrip = teks/javascript>

<!-

var i;

var sum = 0;

untuk (i = 10; i> 0; --i)

{

jumlah += i;

}

// ->

</script>

Menempatkan konten di dalam tag skrip ke dalam blok CDATA dapat menangani masalah dua bilah berturut -turut di komentar dengan baik, tetapi ini akan membuatnya tidak didukung oleh beberapa versi browser yang lebih rendah karena mereka tidak dapat memahami XML. Untungnya, kita dapat mengomentari blok CDATA dengan menggunakan komentator dalam JavaScript untuk mencapai kompatibilitas.

<type skrip = teks/javascript>

// <! [CDATA [

var i = 0;

sementara (++ I <10)

{

// ...

}

//]]>

</script>

Jangan menulis gaya dan skrip secara langsung di halaman xhtml. Alternatif yang baik adalah menggunakan file eksternal untuk menulis CSS dan JavaScript sebelum memperkenalkannya di XHTML.

Solusi rekomendasi ini terlihat sangat bagus. Bagaimanapun, itu membuat halaman berubah dari teks/html ke aplikasi/xhtml+xml, setidaknya dalam beberapa tahun ke depan.