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

85 komentar

ane mau dapat ke-3 gan ^_^
:p mumpung masih dikit orang.. :)
- salam damai kang ismet! -

Balas

keempat, hiji deui jd boyband cb :D

untuk artikel diatas saya krg faham, betul2 blm konek... PR dl kang.

Balas
Komentar ini telah dihapus oleh pengarang.

Terimah Kasih atas Artikelnya sangat membantu dan semoga blognya tetap maju dan sukses sobat Salam
Kumpulan Software Gratis

Balas

Mantap kang, pertanyaan saya langsung di bahas tuntas. :-d. Oh ya kang penyimpanan tag CSS tidak boleh berada di bawah tag </div> ya ??

Balas

Komplit...plit..plit...heheheehe...maknyus penjelasannya kang...langsung nyerep hehehehe....
Asa emut jaman sakola kapungkur... :D

Balas

kalo gitu ke enam aja deh |o|

Balas

Untung baca neh,,kalo nggak jadi dosa he.....
Di chrome ko ga bs coment kang.....

Balas

Ini saya balas dengan chrome kang...

Balas

dan saya mengunakan chrome juga kang kompi

Balas

Skrang dah bisa he....
td di refresh beberapakali gak bs scoll ke bawah...

Balas

naon eta contohna warnana abu2 kabeh ningan!
makek class ateuh, jigana bentrok jeung kode bawaan template didinya...xixixi

Balas

Belajar lagi dan mengenal atribut scoped di sini

Balas

bener sob.. kadang saya ga kontrol juga

Balas

wkwkkwwk.. pan abdi teh pa guru :)

Balas

bingung jawabna kang... baca heula nembe komplen.. :P

Balas

iya sob.. semoga bermanfaat... :)

Balas

I like this <3 .. :D
selalu jelas dan bermanfaat kang :-d

Balas

wah males, kudu ngoprek boolean...nu babari weh ateuh ngepost teh :D

Balas

Ijin nambah ilmu kang ...

Balas

males maca mah potongan artikel diluhur we lah :P

Atribut scoped ini hanya support di FireFox.

Balas

wih keren kang, makasih infonya :D

Balas

Jangan fikir saya selewat lalu kang pada postingan ini .. sebenarnya saya ngunek-ngunek alias ngintip bari ngadepong hahaha

Balas

dengan kata lain tag scoped mempermudah kita melakukan Demo langsung pada postingan

Balas

iya kang d clear cache nya baru oke..

Balas

dibaca baik2 pasti ngerti :)

Balas

bukan gitu juga sih.. scoped itu menyatakan bahwa CSS berlaku untuk daerah tertentu :)

Balas

Pak guru not ini apa namanya ?? hehe

Balas

sol do do mi do do sol.. bujalna do sol

Balas

urang mah mozilla sejati ateuh bos...kkKKkkk

Balas

kang penjelasan na mantaf lgsung kasedot kang


pertanyaan abi pami ditambih atribut -op atanapi -webkit ngefek teu nyak ngarah teu firefox ungkul

Balas

Kang, salah tidak jika saya menggunakan domain gratis [dot]tk, apakah akan mengurangi kualitas blog saya atau bagaimana ?

Balas

duka pami kitu mah.. soalna pami scoped mah memang supportna di FF, pami hoyong sami mah nganggo class nu beda we :)

Balas

ga salah sih.. cuman kalau ga salah, dor tk ga bagus di Google

Balas

menurut kang ismet domain yang gratis dan bagus untuk google apa ?
Maaf saya bertanya seperti ini, saya hanya seorang pemula jadi untuk saat ini saya memilih untuk menggunakan domain gratisan heheh :D

Balas

Wkwkwkw bujal kang Ruly do sol :D

Balas

kalau boleh saya sarankan, mending pake blogspot aja, kalau mau pake domain sendiri mending coba .web.id cuma 55rbu perbulan

Balas

cik ateuh urang utak atik heula nuhun kang elmuna :d

Balas

betul kang dot tk sekarang g bersahabat di google klo 2010 kebawah lumayan bagus saya ampe pagerank 2

Balas

Andaikan saya punya sodara yang sering berurusan dengan blog/web, pasti saya pinjam dulu tuh kartu atmnya untuk beli domain, sayangnya gk ada T_T

Balas

tanpa atm juga bisa ko.. setor aja ke teller

Balas

maksudnya daerah tertentu itu gimana ya kang ..?..kan dengan kita meletakkan atribut scoped pada style pada area postingan atau sidebar kan membuat postingan kita menjadi valid pada Html 5 lain halnya jika kita meletak kan tag

<style type='text/css'>
---kode css disini---
</style>


secara langsung pasti akan menyumbang 1 error saat kita melakukan validator ke W3C

Balas

coba lihat demo yang paling atas, tag h4 template saya berwarna #4a4a4a, dengan code seperti dibawah maka h4 akan berbeda pada browser FireFox
<h4>
Ini seharusnya berwarna abu-abu tua</h4>

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

Balas

Thanks kang saya sudah lihat di chrome maaf ngerepotin soalnya saya biasa pake firefox...

Balas

wew mantab kang, infox bermanfaat bener nih ^_^
salam damai kang ismet! <-- blog baru lagi!

Balas

beuuuuh... lanjutkan sob

Balas

belajar bahasa jawa dikit :D hatur nuhun kang ismet :)
semoga sehat selalu
- damai -

Balas

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

Balas

Kang, bagaimana yah cara membuat comment blog kita menjadi comment Google+ ?

Balas

itu namanya lightbox evolution.. nanti sya share :)

Balas

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]

Balas

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

Balas

baaaaaahhhhhhhhhhhhhhhhhhhhhh

Balas

duhduhduh .. mentok mau komentar! ..

yang pertamax udah keberatan tuh .. -_-

"MANGSTAB" kang ismet :D

Balas

manawi aku teh itu teh Bool ayam kang ..! :( *seungit

Balas

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.

Balas

tah aya pakarna geuning... bu karna kamana? ;)

Balas

izin nyimak kang,nambah wawasan, lagian blog ane sepi :D
- tapi ane udah update -
- Blogwalking lah kawand - :p
DAMAI!!!

Balas

maaf lagi lewat. mau lihat tutornnya, ngak ke liat lu minggir dulu ^_^
[ enak mampir ke kang ismet ] adminnya ramah! :p

Balas

kalau beres acara.. ramah tamah itu makan ya ;)

Balas

jd cara kerjanya sama seperti menempatkan gadget di halaman tertentu tapi ini dalam bentuk css ya kang CMIIW

Balas

Kalo kode scoped belum berfungsi baik di Google chrome ya kang???

Balas

Waduh, ane urutan berapa ye?

Balas

Pelajaran baru nih kang, saya pahami dulu deh^^ btw thank ya..

Balas

sama2.. silahkan dipelajari :)

Balas

kalo fungsi rel='tag' buat apa gan. .?

Balas

biasanya sih masuk ke link, dan menunjukan anchor link, coba cari pengertian yang lebih tepat

Balas

Wasoy.. Ceklisna maksa. Kata orang saya ganteng | Kata orang saya tidak jelek. hahaha

Balas

bwahahahaha... mau tidak mau harus ceklis :)

Balas

Saya naun wae nu penting asal ulah lelet weh. nice artikelna Kang sae, saya sangat memahaminya setelah baca semua.

Balas

Waduh rada lupa saya Kang jadi mampir lagi untuk mempelajari atribut scoped. hatur nuhun Kang Ismet

Balas

keren sih kang artikelnya, tapi sayang solusi scopednya gagal terus di blog saya
ini blog saya
http://lukiluck11.blogspot.com

Balas

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

Balas

Poskan Komentar


×
Chat