Atribut SCOPED Dalam Tag Style - Kadang sobat pernah mencoba untuk memvalidasikan template blog sobat akan tetapi w3 validator mengatakan anda harus menambahkan atribut scoped dalam tag style sehingga sobat menyerah karena tidak tahu cara memperbaikinya.
Sebenarnya saya pada awalnya tidak mengerti juga maksud dari atribut scoped dalam tag syle, tetapi setelah belajar dari blog sebelah akhirnya saya mengerti juga pada akhirnya. Saya akan mencoba untuk menjelaskan secara detail masalah ini, silahkan simak post berikut ini!!!
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 :
Ini seharusnya berwarna abu-abu tua
Ini seharusnya berwarna merah
Warna di atas hanya akan terlihat berbeda saat dilihat di FireFox.
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 attributscoped, 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 bisa juga seperti ini
<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
