validasi css3
How to validate CSS3 - Setelah berkutat beberapa lama dengan Validasi HTML5, kini saya coba untuk berbagi Validasi CSS3. Terlambat kayaknya saya berbagi tutorial ini, tapi sebuah pepatah mengatakan better late than never, lebih baik terlambat daripada tidak sama sekali.

Diantara yang menyebabkan terlambatnya saya berbagi tentang validasi ini, saya tidak pernah memposting sesuatu yang belum pernah saya coba. Ironis kan? sebuah blog membahas validasi tapi blognya sendiri belum valid.

Perlu dicatat, bahwa validasi baik HTML5 maupun CSS3 bukan sesuatu yang sempurna. Artinya, ketika sebuah blog valid HTML5 atau CSS3 tidak berarti sempurna dalam CSS dan HTML. Validasi hanya merupakan panduan dalam menyusun HTML dan CSS yang baik.

Bagi sobat yang ingin mencoba validasi CSS3, baik menghilangkan error atau warning, silahkan dicoba trik yang saya gunakan :

Non Aktifkan CSS Reset Stylesheet Blogger


Menonaktifkan CSS Reset ini, saya temukan di Blog Damar Zaky dan aplikasinya dipermudah oleh Kompi Ajaib. Sebelum menonaktifkan CSS Reset Stylesheet Blogger, silahkan lihat kode dibawah, biasanya susunan template akan seperti ini :

<b:skin><![CDATA[*
......
KODE CSS DI SINI
...... 
]]></b:skin>

ganti <b:skin><![CDATA[* dengan

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>

ganti kode ]]></b:skin> dengan kode :

</style>

Setelah menonaktifkan CSS Reset ini, biasanya akan ada sedikit perobahan tampilan, baik di dashboard atau di blog. Saran saya tidak usah panik, edit saja satu persatu.

Hapus Beberapa Kode


Banyak tutorial yang memberikan kode CSS untuk diterpakan pada berbagai browser. Dengan hadirnya CSS3 ini, kode-kode tersebut sudah tidak diperlukan lagi. Seperti contoh kode rounded corner (ujung membulat) biasanya kodenya akan seperti ini :

-moz-border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

dengan hadirnya CSS3, untuk beberapa browser hanya diperlukan kode border-radius:5px, oleh karena itu, hapus semua kode yang berawalan:

-moz-
-khtml-
-o-
-webkit-

Hapus juga kode dengan awalan

DXImageTransform

Perhatikan Beberapa Perintah Validator


Masih banyak perintah-perintah perbaikan dari CSS Validator tahap demi tahap. Sebagai contoh perintah seperti ini :

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

Itu artinya, apabila ada hurup yang mempunyai spasi, tambahkan tanda petik ("). Misalkan sobat menggunakan huruf Open Sans, Segoe UI, Arial (sebagai backup apabila huruf pertama tidak bisa diload) maka penulisannya

font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif

Sebetulnya masih banyak perintah yang lain, silahkan lakukan secara santai. Sobat juga bisa berdiskusi di kolom komentar apabila ada permasalahan dalam validasi ini.

94 komentar

Pertamax..
ini yang saya tunggu2 kang :)
makasih ya kang..
mungkin di tunggu lagi yang lebih bnyak nya ^_^

Balas

dicoba aja satu per satu, nanti juga ketemu masalahnya :)

Balas

Wah ada PR lg nih.. Nyimak dl, msh blm faham :)

Balas

kang di tunggu ya lanjutan post tentang membuat postingan blog valid HTML5,saya udah coba pake <style type="text/css" scoped> tapi hasilnya kok masih belum valid ya kang?? ada solusi lain??

Balas

Element style not allowed as child of element div in this context. itu bukan masalah 'scoped' tapi 'CSS' tidak boleh ada didalam tag div. Pindah saja CSS ke atas ]]></b:skin>

Balas

Secara umum memang untuk validasi CSS3 demikian yang jelas untuk validasi baik html5 atau css3 perlu ketelitian dan kesabaran ya kang...kalau enggak bisa-bisa mbledug ndase hehehee...
Ada tambahan dikit, saya menemukan pada beberapa pembuat template untuk penulisan padding:0 auto, cukup tulis padding:0 saja (tanpa saja hehehe...)

Balas

palid deui!
kangge adminna weh ah nu palidna ayeuna mah...wekekekkk

Balas

Satu lagi yang sering saya lakukan sebelum tahu validasi css3 yaitu hindari membuat kotak dengan background dan border dengan warna yang sama. Betul tidak kang? ....

Balas

valid html 5 aja blm kang saya,,,,udah ada valid css3..
hufffftt :(

Balas

kang mau tanya....

kan saya pakai BLOGGER THREADED COMMENTS HACK V.3 punyaan akang...

gimana ya menulis paragraf commet form nya di blogspot...

Balas

Memang saya lebih memperhatikan validasi css3 sebelum ke html5 kang ...
dan untuk kali ini saya bingung berkomentar yeuhh hehe

Balas

terima kasih banyak validitasnya kang ismet saya akan mencoba untuk menerapkannya kang :)

Balas

waah punya saya belum valid, seperti masih banyak yg eror . tapi itu bukan masalah ya :) .

Balas

kalau mau memperbaiki cssnya bisa memakai css prefix ,
untuk meengkapi ekstensi disetiap masing" browser.

Klik prefixmycss.com

Semoga Membantu.

Balas

betul sekali kang... saya sempet stress kemaren, ada kode yang ga ketemu.. makasih tambahannya kang

Balas

naon deui atuh kang, pan aya bagean masing2.. kang beben bagean efek2 plus editor2an.. sayah bagean sare.. :)

Balas

ga valid juga ga apa2 ko.. kan udah dijelasin diatas :)

Balas

yang mana? catatan maksudnya? pake <br/> aja

Balas

ngiay we kang bingung valid mah :)

Balas

ga masalah miz.. santai aja :)

Balas

makasih masukannya sob.. tapi kalau buat validasi, ga valid kayaknya.. banyak warning

Balas

ini juga perlu buat blog saya, makasih yah Kang :)

Balas

wih akhirnya keluar juga nih tutorial CSS3, semoga ada tutorial selanjutnya :)

Balas

soalnya saya juga baru valid, jadi baru keluar deh tutorialnya :)

Balas

lumayan puyeng nih kang hehe...coba tak intip template dulu kang

Balas

ya kang catata diatas komentar ....
kode nya di mananya ya??

Balas

oo ya kang pas saya pake css 3 ini tampilannya pada brubah smua jadi ngatur lagi deh....

trus ada div yang bocor juga....
pas saya balikan ketemplate awal ehh malah masih bocor juga itu disebabkan apa ya kang....

groplus.blogspot.com

Balas

wow tuts khusus master ni mah.... nubie lieur liat css :D
tp tr ane cb deh, sdikit demi sdikit :)

Balas

Tapi biasanya setelah melakukan validasi ini, tampilan edit widgetnya jadi error :(

Balas

heheh.. silahkan kang mur...

Balas

hehehe ga juga.. tapi emang harus extra hati2 apalagi reset css itu

Balas

betul sob.. khususnya bagian dashboard.. nanti sya share cara memperbaikinya

Balas

yang ini .comment-form p {

Balas

karena CSS yang digunakan diblog didukung oleh CSS blogger, otomatis ketika dinonaktifkan ada yang acak2an

Balas

baru sadar ada form komentar baru,gan coba lihat blog saya?kok form komentar blog saya kebesaran kesamping ???

Balas

Iya comment editor blogger jadi seperti comment editor G+

Balas

iya memang blogger ganti comment editornya,solusinya atur .comment-editor{...}

Balas

Asik banyak temen main palid palitan sekarang he he ee jadi bisa konsultasi kalau ada problem

Balas

tombol "Publikasikan" paddingnya ga presisi, harus pake english.. ga enak lagi disamping form ada border lagi :P

Balas

Permisi Kulo nuwun mas ismet saya mau tanya, maaf kalau OOT sebelumnya. :)

Kebetulan saya lagi otak atik bikin blog baru, saya ambil template bikinan maskolis. Gini mas kalau saya ingin menampilkan seperti "pembuat artikel, tanggal posting dan jumlah komentar" di dalam artikel home / beranda caranya gimana ya mas? Kebetulan saya muter2 google kok ga nemu2 caranya, barangkali mas ismet bisa membantu.

Untuk lebih jelasnya : http://4.bp.blogspot.com/-XyAr9RH0nlc/UkAe0L-SnyI/AAAAAAAABeI/T3Hc2OyxbiA/s1600/home.jpg
Blog saya : adityaprojek.blogspot.com.

Balas

Pasti semua pada geser ke kanan editornya heuheueheu.... Betul kata mas Ben, harus atur di comment editornya.

Balas

tambahkan lagi kode, gunakan tag kondisional untuk selain halaman 'item' http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html

Balas

itu kan code css nya kang ya......
kalo code body nya apa ya kang ....
kan kalo menulis paragrap di body nya kang ya.....

Balas

Validasi CSS3 euy. :D
Simple ya kang, cuman ribet ngoprek CSS na. :D

Balas

hehehe iya nih bener, ane juga kayak gitu :(

Balas

betul sob.. kalau yang versi HTML5

Balas

Button Publish na mentok, sareng form komentarnya kurang pas masih ada yang kosong dibawahnya..

Balas

sungguh bermanfaat.. makasih kang :)

Balas

Kang apa validitas CSS dan HTML berpengaruh terhadap SEO suatu blog/website?

Balas

ijin nyimak kang,,,, biar rada paham tentang blogger,,, trim infonya ya kang,,,
sukses selalu.... kunjungi balik ya kang,,,

Balas

lumayan juga menurut saya mas.. soalnya penulisan yang valid HTML ternyata bagus untuk seo, diantaranya penulisan tag alt untuk image

Balas

ane tambahin sedikit kang.. bagi yang mw ngasih info template seperti ini misalnya..

/*---------------------------------------------
Blogger Template Style
Template name: MDF-Clean Ver.3 Grey
Designed by: Abdul Rohman
Created date: 29 Mei 2013
URL: http://mdf-blog.blogspot.com
----------------------------------------------*/

letakkan saja tulisan/infonya dibawah kode <style>

Balas

makasih tambahannya.. btw.. kapan update nih, kayaknya udah lama blom update :)

Balas

iyaa nih sob.. sibuk urusan dunia nyata jadi jarang buka kompi apalagi blogwalking keblog sobat sobat...

Balas

Mau nanya ni kang,,
saya mendapatkan pesan error DXImageTransform . setelah saya cari2 gk nemu2.. kira dimana ya letak dari DXImageTransform trsbut?

Balas

adanya di Blogger CSS Bundle.. untuk menghilangkannya harus "Sembunyikan CSS Reset Blogger"

Balas

Kang, klo saya mengaplikasikan tutorial ini kok malah ancur tata letaknya? Mohon bantuannya agar saya bisa ngejalanin trik ini tapi tata letak blog saya gak berantakan.

Balas

rapihkan lagi dengan ini sob http://blog.kangismet.net/2013/09/mengatasi-tata-letak-yang-berjejer-ke-bawah.html

Balas

Ass. Kang Ismet saya ingin sharing sobat. Di blog saya ada tanda seperti ini ---> dipojok kiri atas header. Saya belum dapat solusinya, kalau sempat tolong cek di http://ullynathar.blogspot.com.
Trim.s sebelumnya.
Salam sukses selalu Sobat:)

Balas

saya liat ada kode itu sebelum penutup 'style' seperti ini --></style>

Balas

Artikel yang sangat bermanfaat..
maaf master nambahin dikit, dari pengalaman agar sharingnya mantap, kebetulan 2 master blogspot disini, pengen nambah ilmu juga... saya punya rencana kang kita ngumpul dan buat satu gebrakan untuk blogspot indonesia kang.. berupa suatu komunitas direktori dan forum

Hindari pemakaian float:center sebagai pengganti ( margin:0 auto; )

thx atas artikelnya..

Balas

wow seru nih kalau para mastah ngumpul di suatu komunitas :D
Saya dukung mas :-d

Balas

bagus juga idenya.. silahkan direalisasikan, saya dukung

Balas

hapus semua kode yang berawalan:

-moz-
-khtml-
-o-
-webkit-

Lalu digantinya sama apa kang?

Balas

kalau ingin valid Css3 memang semua syntax di atas harus di hapus semua...

Balas

Terimakasih atas pencerahnnya pak..

Balas

betul kata mas mahfid, untuk border-radius misalkan suka banyak kode, -moz-border-radius:5px, -khtml-border-radius:5px, -webkit-border-radius:5px, -0-border-radius:5px, dan border-radius:5px, hapus semua dan sisakan yang terakhir border-radius:5px

Balas

Di blog saya Untuk Code "DXImageTransform" ada yang error. tapi setelah diseldiki, kode tersebut tidak ada... haru kemana saya mencarinya? :(

Balas

kalo yang https://www.blogger.com/static/v1/widgets/58075626-widgets.js gmana?

Balas

Saya juga punya pertanyaan dan permasalahan yang sama dengan bro @binkbenk
Bagaimana jika W3C CSS gak vailid KARENA pada blog template pakai (www*blogger*com/static/v1/widgets/58075626-widgets.js)

atau peneyederhanaan nya bagaimana cara lain membuat static/v1/widgets/58075626-widgets.js yang vailid CSS3

Makasih sebelumnya Kang...

Balas

Waduh pusing kang , udah 2 kali nyoba gagal -_-

Balas

Work kang, hehehe http://prntscr.com/2ic1iv

Balas

100% sukses, cuma saat ak buka url label, kenapa ada 2 keterangan di atas posting ya gan? makasih atas jawabannya

Balas

tidak scoped ?, oh ya ukuran device ku sekitar 100 widthnya sama 150-200 heightnya

Balas

Saya coba artikel valid css3 nya Kang
Sepertinya blog saya masih ada error css 3

Balas

ijin menyimak saja kang, saya masih baru jadi belum ngerti soal beginian, makasih sharingnya kang :)

Balas

cara validasi css3 font awesome gmna ya kang

Balas

kang kok begini ya The entity name must immediately follow the '&' in the entity reference.

Balas

makasih kang infonya. sangat bermanfaat. page speed score saya dari 86/100 jadi 92/100 untuk Dekstop. :-d

Balas
Komentar ini telah dihapus oleh pengarang.

Kang ismet gimn cara mengatasi masalah Serve scaled images di gtmetrix[dot]com???

Balas

trims...kang. perlu peras otak kayaknya untuk valid..

Balas

Haturnuhun kang... tp abdi teu ngartos

Balas

alhamdulillah tos beres kang ... haturnuhun elmuna

Balas

Poskan Komentar


×
Chat