Atribut SCOPED Dalam Tag Style

The Scoped Attribute on Style Tag - Attribut Scoped ini sebenarnya telah saya jelaskan dalam artikel sebelumnya. Namun karena masih banyak pertanyaan seputar validasi HTML5, saya akan coba jelaskan agak mendetail supaya lebih mudah difahami.

Harap diperhatikan, attribut scoped ini bisa diaplikasikan dalam kondisi apapun, tidak hanya diperlukan dalam validasi HTML5 saja.

Scoped merupakan atribut dari <style>, sebelum menjelaskan lebih jauh tentang scoped ini, pengetian scoped kurang lebih seperti ini:

Scoped attribute merupakan Boolean atribut. Apabila scoped ini digunakan, maka CSS hanya akan berlaku pada elemen tertentu saja dan keluar dari elemen utama.

Untuk lebih memahami fungsi atribut scoped ini, silahkan simak contoh di bawah ini :

Tag h4 pada template saya memiliki warna abu-abu tua atau h4 {color:#4a4a4a}, kemudian saya membuat dokumen seperti ini :

<h4>
Ini seharusnya berwarna abu-abu tua</h4>

<div>
<style scoped="" type="text/css">
h4 {color:red;}
</style>
<h4>
Tapi ini seharusnya berwarna merah</h4>
</div>

Maka hasilnya seperti ini :



Apabila sobat menggunakan browser Chrome, coba buka halaman ini menggunakan FireFox, maka sobat akan melihat perbedaan warna. Perbedaan warna tersebut dikarenakan attribut scoper yang digunakan pada penulisan kode <style scoped="" type="text/css"> Atribut scoped ini hanya support di FireFox.

Attribute Scope dan Validasi HTML5

Walaupun atribut scoped ini hanya support di Firefox, dalam validasi html5 sangat diperlukan apabila CSS disimpan di widget atau postingan. Sebagaimana dijelaskan di atas, bahwa CSS berlaku untuk keseluruhan template blog. Dengan menambahkan attribut scoped, maka memberitahukan kepada browser bahwa CSS hanya diperuntukan untuk area tertentu saja.

Utuk validasi HTML5, selalu gunakan attribute SCOPED pada CSS yang bersatu dengan HTML atau JavaScript pada widget.

Banyak tutorial yang menyertakan seluruh kode CSS, HTML, dan JS dalam satu kesatuan dan disimpan di widget atau postingan. Hal ini akan menyebabkan error apabila kode CSS diawali dengan <style type='text/css'> sebagai solusinya tambahkan tag scoped, untuk penulisannya menjadi :

<style type='text/css' scoped>

atau

<style type='text/css' scoped=''>

atau

<style type='text/css' scoped='scoped'>

dan masih ada puluhan alternatif penulisan lainnya.

Boolean Attribute

Boolean attribute diperkenalkan oleh seorang ahli Matematika dan Filsafat dari Inggris yaitu George Boole. Boole merupakan penyumbang ide dalam logika komputer. Oleh karena itu diperkenalkanlah nama Boolean Attribute.

Apa itu Boolean attribute? Secara singkat, bolean attribute adalah atribut yang apabila ditulis artinya 'true' apabila tidak ditulis, artinya 'false'. Sehingga dalam penulisan html tidak diperlukan lagi 'true' atau 'false'.

Sebagai contoh saya membuat dua ceklis ini :

Kata orang saya ganteng
Kata orang saya tidak jelek

Untuk menandai ceklis pada kotak kecil di atas, cukup dengan kode seperti ini :

<input id="opt1" type="checkbox" checked />Kata orang saya ganteng
<input id="opt1" type="checkbox" />Kata orang saya tidak jelek

Tidak diperlukan lagi kode true dan false seperti ini :

<input id="opt1" type="checkbox" checked='true' />Kata orang saya ganteng
<input id="opt2" type="checkbox" checked='false' />Kata orang saya tidak jelek

Hal tersebut dikarenakan boolean atribut sudah cukup ditulis dengan kata checked yang berarti di ceklis, apabila tidak ditulis, berarti tidak di ceklis.

Beberapa atribut boolean diantaranya : checked, compact, scoped, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly dan selected.

Variasi Penulisan Boolean Attribute

Ada puluhan variasi penulisan yang diperbolehkan dalam penulisan atribut boolean ini. Misalkan saya membuat kolom isian, salah satunya saya non aktifkan :

<input type='text' name='Contoh1' disabled />

sebagai alternatif penulisan :

<input type='text' name='Contoh1' disabled="" />
<input type='text' name='Contoh2' disabled='' />
<input type='text' name='Contoh3' disabled='disabled' />
<input type='text' name='Contoh4' disabled="disabled" />
<input type='text' name='Contoh5' disabled="DISABLED" />
<input type='text' name='Contoh6' disabled="DisABleD" />
dst.. dengan pengacakan huruf