Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Atribut SCOPED Dalam Tag Style

Memahami arti atribut SCOPED dan Boolean Attribute sarta fungsinya dalam Validasi HTML5.
wajib baca
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 :

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 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

83 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Permanax...
  2. Admin
    Komentar ini telah dihapus oleh pengarang.
  3. Mantap kang, pertanyaan saya langsung di bahas tuntas. :-d. Oh ya kang penyimpanan tag CSS tidak boleh berada di bawah tag </div> ya ??
    1. bener sob.. kadang saya ga kontrol juga
  4. Komplit...plit..plit...heheheehe...maknyus penjelasannya kang...langsung nyerep hehehehe....
    Asa emut jaman sakola kapungkur... :D
    1. wkwkkwwk.. pan abdi teh pa guru :)
  5. Untung baca neh,,kalo nggak jadi dosa he.....
    Di chrome ko ga bs coment kang.....
    1. Ini saya balas dengan chrome kang...
  6. naon eta contohna warnana abu2 kabeh ningan!
    makek class ateuh, jigana bentrok jeung kode bawaan template didinya...xixixi
    1. bingung jawabna kang... baca heula nembe komplen.. :P
  7. Belajar lagi dan mengenal atribut scoped di sini
    1. iya sob.. semoga bermanfaat... :)
  8. I like this <3 .. :D
    selalu jelas dan bermanfaat kang :-d
    1. sama2 sob..
  9. Ijin nambah ilmu kang ...
    1. wkwkw. silahkan sob...
  10. wih keren kang, makasih infonya :D
  11. dengan kata lain tag scoped mempermudah kita melakukan Demo langsung pada postingan
    1. iya, benar gan :D
  12. maaf gan masih belum paham
    1. dibaca baik2 pasti ngerti :)
  13. kang penjelasan na mantaf lgsung kasedot kang


    pertanyaan abi pami ditambih atribut -op atanapi -webkit ngefek teu nyak ngarah teu firefox ungkul
    1. duka pami kitu mah.. soalna pami scoped mah memang supportna di FF, pami hoyong sami mah nganggo class nu beda we :)
  14. Kang, salah tidak jika saya menggunakan domain gratis [dot]tk, apakah akan mengurangi kualitas blog saya atau bagaimana ?
    1. ga salah sih.. cuman kalau ga salah, dor tk ga bagus di Google
  15. wew mantab kang, infox bermanfaat bener nih ^_^
    salam damai kang ismet! <-- blog baru lagi!
    1. beuuuuh... lanjutkan sob
  16. Kang maaf sebelumnya kalau ngrepotin maaf juga kalau oot, kalau sampean ada waktu bikinin tutorial buat kalau sebuah link di klik muncul semacam popup lightbox, seperti navigasi menu Kontak di blog.kangismet ini. Ane pingin belajar tentang itu, udah googling kok masih bingung cara menerapkan di blog itu gimana? hehe :) Thanks sebelumnya kang. Jujur saja saya lebih ngeh alias srek dengan gaya pembahasannya kang ismet sofyan :) just my opinion
    1. itu namanya lightbox evolution.. nanti sya share :)
  17. Kang, bagaimana yah cara membuat comment blog kita menjadi comment Google+ ?
    1. Gampang ko sob..

      Tutorialnya : [url=http://blog.kangismet.net/2013/04/memasang-atau-mengaktifkan-komentar-google-plus.html]Memasang atau Mengaktifkan Komentar Google Plus[/url]
  18. wah gak ngerti aku :) bang kenapa ya kok saya pasang widget rekomendasi seperti di blog ini kok yang keluar hanya muncul widgetnya saja sedangakn artikelnya gak muncul :) mohon pencerahanya :)
  19. manawi aku teh itu teh Bool ayam kang ..! :( *seungit
  20. Parantos jadi Follower di blog Kang Ismet (563).
    Ngiringan nyimak wae kang. Sacan nyampai abdi. Salah satu Attribute dari Boolean yaitu SCOPE, itu sbagai Boundary dari code nya, siga pejabat wae kang, pakai batas-batas.
    Checked (telah dicheck/check-list) itu mungkin seperti MODAL dan UNMODAL dalam G-Function nya NC-block/NC-program pada bahasa Machines. "Sekali ditulis, akan berlaku terus, sebelum fungsi yg berlawanan ditulis. Atau mungkin disebut TOGGLE.
    Hatur nuhun. Sukses selalu kang Ismet.
    1. tah aya pakarna geuning... bu karna kamana? ;)
  21. izin nyimak kang,nambah wawasan, lagian blog ane sepi :D
    - tapi ane udah update -
    - Blogwalking lah kawand - :p
    DAMAI!!!
  22. jd cara kerjanya sama seperti menempatkan gadget di halaman tertentu tapi ini dalam bentuk css ya kang CMIIW
  23. Masih nggak mudeng :D :D
  24. Kalo kode scoped belum berfungsi baik di Google chrome ya kang???
  25. Pelajaran baru nih kang, saya pahami dulu deh^^ btw thank ya..
    1. sama2.. silahkan dipelajari :)
  26. kalo fungsi rel='tag' buat apa gan. .?
    1. biasanya sih masuk ke link, dan menunjukan anchor link, coba cari pengertian yang lebih tepat
  27. Wasoy.. Ceklisna maksa. Kata orang saya ganteng | Kata orang saya tidak jelek. hahaha
    1. bwahahahaha... mau tidak mau harus ceklis :)
  28. Waduh rada lupa saya Kang jadi mampir lagi untuk mempelajari atribut scoped. hatur nuhun Kang Ismet
  29. keren sih kang artikelnya, tapi sayang solusi scopednya gagal terus di blog saya
    ini blog saya
    http://lukiluck11.blogspot.com
  30. kang, saya ada eror yang kayak gini src=''
    tapi waktu dicari gak nemu, ada solusigak kang?
    terima kasih
    ini blog saya tentang cerita
    http://lukiluck11.blogspot.com
    kalau yang ini toko online
    http://malangshopaphoria.blogspot.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.