Cara Melakukan Validasi CSS3

Cara Melakukan Validasi CSS3

Bola Hero Gawai

Cara Melakukan Validasi CSS3

Validasi CSS3
Seperti halnya validasi HTML5, untuk urusan kode CSS juga perlu dilakukan validasi untuk CSS3 agar nantinya tampilan blog ramah terhadap berbagai browser yang digunakan untuk mengakses blog. 

Selain itu, setelah saya berhasil melakukan validasi CSS3 untuk Kompi Ajaib, efek yang pertama saya rasakan adalah loading blog menjadi lebih ringan. Karena ternyata dengan mem-valid-kan kode CSS dengan CSS3, size blog menjadi lebih ciut hehhehe...

Seperti halnya juga validasi HTML5, ternyata ada satu hal yang saya anggap cukup penting yaitu menyembunyikan CSS Reset Stylesheet Blogger yang disebut sebagai "Kode Siluman" oleh Maskolis. Karena ternyata cukup banyak error yang disebabkan oleh CSS Reset Stylesheet Blogger ini. Berbeda dengan validasi HTML5 yang hanya menyebabkan 2 buah error saja, pada validasi CSS3 ini CSS Reset Stylesheet Blogger menyebabkan puluhan error. Setelah saya cek pada beberapa blog saya yang belum valid HTML5 100% karena CSS Reset Stylesheet Blogger ini belum saya sembunyikan, terdapat sekitar 50 buah error yang disebabkan oleh CSS Reset Stylesheet Blogger.

Untuk itu bagi yang ingin mencoba validasi CSS3 untuk blognya, Anda harus menyembunyikan CSS Reset Stylesheet Blogger ini. Bisa Anda baca postingan saya yang lain untuk cara menyembunyikan CSS Reset Stylesheet Blogger ini DI SINI. Karena dengan begitu Anda telah menyingkirkan puluhan error yang disebabkan oleh CSS Reset Stylesheet Blogger.

Setelah itu silahkan coba lagi cek validasi CSS3 di http://jigsaw.w3.org/css-validator/. Jika Anda menyembunyikan CSS Reset Stylesheet Blogger dengan benar, ketika Anda validasi CSS3 maka yang akan tampilan adalah error dan warning yang benar-benar disebabkan oleh kesalahan penulisan kode CSS yang telah kita lakukan. 

Untuk melakukan validasi CSS3 ini harus lebih hati-hati dan lebih teliti karena ini menyangkut penyusunan tampilan blog, sehingga jika tidak teliti dan hati-hati bisa jadi tampilan blognya malah ancur. Cara mengatasinya sebenarnya cukup mudah karena kita diberi panduan kode CSS mana saja yang bermasalah dan disebutkan pula kesalahan apa saja yang menyebabkan error.

Pada validasi CSS3 akan tampak 3 kolom yang berisi kode CSS yang error. Anda tinggal mencari kode CSS yang ada errornya pada kolom kedua dan cari pada edit HTML blog Anda, lalu perbaiki elemen kode CSS yang error tersebut yang disebutkan pada validasi CSS3.

Karena kode CSS penyusun tiap-tiap blog berbeda-beda, maka di sini saya tidak bisa menyebutkan kode apa saja yang menyebabkab error. Namun biasanya kebanyakan yang menyebabkan error yang telah saya alami adalah diantaranya seperti:
  1. Kode pembentuk sudut tumpul. Sebagai contoh biasanya kode seperti ini -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px maka Anda hanya perlu menuliskan border-radius:3px saja.
  2. Hindari penggunaan kode padding:none, cukup tulis saja padding:0
  3. Kode background transparant, biasanya seperti ini opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7, maka kita hanya perlu menuliskan
    opacity:.7 saja.
  4. Kode efek transisi, misalnya seperti ini transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out, maka kita hanya perlu menulis
    transition:all 400ms ease-in-out saja.
  5. Hindari penulisan atau pembuatan kotak dengan warna background dan border yang sama.
  6. Dan masih banyak lagi error lainnya tergantung dari kode CSS pembentuk template masing-masing blog.
Demikian saja postingan cara melakukan validasi CSS3 ini semoga dapat dimengerti dan berguna bagi Anda.

Bagi Anda yang ingin berkomentar di luar topik pembahasan mohon berkomentar di halaman Out Of Topic yang telah saya sediakan.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

58 Comments Add Comment

Pertamax..
Makin sip aja nih Kompi Ajaib heheh

Balas

Hehehe masih belajar mas ... hanya berbagi pengalaman .. :D

Balas

Hehehe , Sudah saya terapkan tapi masih belum suksesk :( ,
akan saya cobat terus dan semoga sukses..

Balas

nice info..

salam kenal om blognya bagus...

http://informasibloger.blogspot.com

Balas

Beda jam saja...he he he he isi postingan nya hampir sama masih tentang kode Siluman...oh ya sekedar info (ngarep.com)tinggal 1 warningnya di tunggu petunjuknya karena untuk chatt di google + masih belum tahu caranya dengan tampilan nya yang sekarang

Balas

Satu lagi di kode .post blockquote{font:14px/1em times new roman; mas, coba ganti fontnya dengan yang satu kata saja misalnya Georgia. Karena yang menyebabkab errornya itu spasi di antara nama font itu.

Balas

mas cara mengatasi errornya gmana...fbnya mas apa nama idnya ??

http://validator.w3.org/check?uri=http%3A%2F%2Fzakkysoft18.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Balas

tankyu...........sudah jos gandos kotos kotos

Balas

Coba satu-satu aja ya mas...

untuk kode css .emoWrap coba simpan di edit html di atas skin itu untuk kode error baris 1069

Balas

wah bingung saya mas....bikin kepala puyeng :P padahal tinggal 10 Errors, 3 warning..fbnya mas apa ? kita chat aja melalui fb bisa mas ??
oya cara bikin title dibreadcumb gimana mas..saya udah mencoba dan bisa berhasil namun terjadi warna merah atau error dibagian kode paling bawah seperti kemarin.mohon pencerahannya ya mas..terima kasih..:)

Balas

Kang kok template planetajaib.blogspot.com sama kaya template Kompi Ajaib yang dipakai akang ini, dapat dari mana dia kang? cloning template kayanya ya?

Balas

Iya mas Farhan saya udah lihat juga... :( mungkin dia baru belajar dan saking senengnya dengan blog ini mas. Mudah2an dia segera ngerti bahwa hal tsb (kloning blog) tidak baik dilakukan.

Balas

Itu dia mas, untuk validasi jangan dilakukan tergesa-gesa, satu-satu aja, jika hari ini sudah mentok biarkan untuk esok...tar kelamaan bisa bikin rontok rambut mas heheheh becanda.
Pakai Google+ aja atau Google Mail untuk chatnya mas... nanti saya bantuin satu-satu (kalo bisa).

Balas

Dapet Les Singkat nie dari Kompi Ajaib !! :)

Terima kasih, Come Back

Balas

Bukan les sih mas, hanya berbagi pengalaman aja hehehe....

Balas

ngga ganti template mas?... kalo ada yang Nyamain ngga seru....

Balas

Mas mau tanya lagi nih, memang validasi css3 atau error blog berdampak pada hasil pencarian di google (SEO)? sepertinya tidak kang, saya liat blog-blog besar seperti detik.com, bahkan memiliki error dan warning css3 sampai ratusan?

Balas

Secara langsung sepertinya memang tidak, tapi dengan valid HTML5 dan CSS3, blog akan semakin ramah dengan browser (lebih mudah dibaca peramban) yang notabene sebagai media pencarian. Dan coba perhatikan pada setiap web yang menyediakan tool untuk mengukur nilai seo blog, validasi HTML5 ikut menentukan nilai seo sebuah blog yang tentunya akan lebih menguatkan posisi di hasil pencarian.

Kalo melihat ke situ, Google juga sebagai web no 1 di dunia masih error validasi html5 atau css3. Namun tidak ada salahnya jika kita sebagai blog kecil belajar untuk lebih ramah kepada tamunya (peramban) sehingga mereka akan lebih betah mengunjungi blog kecil kita hehehe...begitu kira2... namun tentunya tetap pada akhirnya "content is the king". Percuma saja blog kita sudah valid html dan css3 tapi tidak ada isinya hehehehe...

Balas

betul kang, terimakasih masukanya:)

Balas
This comment has been removed by the author.

Waduhh postingannya bagus-bagus terus, semakin jatuh cinta aja sama kompi ajaib... :D

Balas

Alhamdulillah , sudah saya terapkan mas , walaupun pertamanya masih bingung

Balas

Makasih atas apresiasinya hehehe :D

Balas

Sama saya juga mas seperti itu pertamanya, tapi kalau kita mau belajar dan pantang menyerah pasti bisa.

Balas

wah malah saya ga ke pikir kesitu om... mau ilangin error html5 aja malas apa lg ccs3 iah..hahahah
nunggu ada yng mau bantu ah..

Balas

Iya saya juga tahunya dulu dari Maskolis masalah html5 dan css3 hehehee...

Balas

Wani piro...ha ha ha ha (kabuur)

Balas

Korban tangan tangan kreatif..he he he saya yakin kurang dari 1 minggu thema kompi ajaib pasti berubah ..

Balas

Seeppp gannn :) visit back ..

http://bloggerjava.net

http://anymous.net :D

Balas

wah, bagus sekali kang. tapi kalo saya lihat di blog saya itu semua gada kang. tapi kog masih banyak yang error kang termasuk valid dan warning. ada solusi gak kang? tolong donk bantuannya kang.
di blog MILANISTI | Expression Blog ya kang coba dilihat. terima kasih

Balas

wah makin gaptek nih saya....berarti blog yang sudah kita edit templatenya sedemikian rupa seperti yang terlihat sekarang di blog saya http://portaldinamis.blogspot.com itu harus divalidasi lagi ya CSS nya ? blog saya masih CSS 3 sih....gimana mau edit yang CSS 5 ya kalo yang CSS 3 belum lulus, hadeeeeehhh...hehehe...

Balas

mas andy supaya blog ane valid css3 dimulai dari mana ya? mohon pencerahan dan petunjuknya..trims

Balas

Syarat pertama agar dapat valid CSS3 yaitu tentunya harus valid HTML5 dulu, baru setelah itu mengoreksi seperti yang saya sebutkan di atas...

Balas

alhamdulillah sudah ane praktekkan mas, untuk navi bar punya blog ane supaya valid css3 gimana mas? kode yang ini #nav li {list-style:none;display:-moz-inline-stack;display:inline-block; zoom:1;*display:inline;margin:0;padding:0;}
mohon bantuannya, karena ane dah utak-atik tapi masih eror juga. thanks sebelum dan sesudahnya.

Balas

alhamdulillah sudah ane praktekkan mas, untuk navi bar punya blog ane supaya valid css3 gimana mas? kode yang ini #nav li {list-style:none;display:-moz-inline-stack;display:inline-block; zoom:1;*display:inline;margin:0;padding:0;}
mohon bantuannya, karena ane dah utak-atik tapi masih eror juga. thanks sebelum dan sesudahnya.

Balas

sudah saya coba mas kompi, namun sayang sekali, baru bisa diperbaiki 12 error saja, mata terasa berkunang2, karena mengunakan laptop 12 inci, hehehe biasa kan mengunakan pc, dan lcd dengan 32 inci, maklumi deh, dah tua sih...

Balas

Mas kalo ini seharusnya apa ya..
#outer-wrapper{background-color:#fff;width:970px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0px auto;padding:0px;padding-top:none;-moz-box-shadow: 0px 0px 5px #3b362c;-webkit-box-shadow: 0px 0px 5px #3b362c;box-shadow: 0px 0px 5px #3b362c;}

Balas

Yang bikin error kode ini mas display:-moz-inline-stack

Balas

Pelan-pelan aja mas...hehehe

Balas

Coba hapus kode ini -moz-box-shadow: 0px 0px 5px #3b362c;-webkit-box-shadow: 0px 0px 5px #3b362c

Tambahan, jika sudah padding:0px (atas, bawah, kiri, kanan = 0px) berarti tidak perlu padding-top:none, none=0

Balas

makasih mas saya coba..

Balas

mas -moz-box-shadow: 0px 0px 5px #3b362c;-webkit-box-shadow: 0px 0px 5px #3b362c
kalo itu di hapus shadows nya hilang ....

Balas

Oh pakai Chrome ya...memang kalau pakai Chrome jadi ga kelihatan...kalau memang ingin nampak di Chrome, kode itu jangan dihapus, namun berarti tidak bisa valid CSS3. Tapi kalau di Firefox itu bisa...

Balas

Maaf mas tadi ngapus nya kelebihan.. bisa kok mas.. hehehe

Balas

tapi kenapa angkanya tetep -_" http://validator.w3.org/check?uri=http%3A%2F%2Fcenter60.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Balas

sudah diperbaiki mas, tapi masih ada 2 error mohon pencerahannya!
Parse Error px

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fnazcules.blogspot.com&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Balas

Sepertinya pada kode ini mas

body {
background : rgb(236, 236, 236);
color : #333;
margin : 0 auto;
font-family : 'lucida grande', tahoma, verdana, arial, sans-serif;
color : rgb(51, 51, 51);
font-size : 13px;
line-height : 1.38;
overflow-wrap : break-word;
}


perhatikan pada kode line-height : 1.38; itukan seharusnya 1.38em tapi itu tidak ada satuannya (em)

Nah yang satu lagi coba cari di template yang lupa dikasih satuannya

Balas

sudah saya ganti mas tapi tidak ada perubahan, masih tetap 2 error

Balas

mas kompi, kalo peringatan seperti ini gimana benerinnya?
"Property _height is an unknown vendor extension"
dan
"Same color for background-color and border-left-color" untuk error yang ke 2 ini sangat bnyak mas

Balas

Untuk yang pertama biasanya kesalahan penulisan height, coba periksa pasti ada yang salah dalam penulisannya seperti heighr atau heighe (seharusnya height)

Yang kedua: itulah saya sebutkan di atas, hindari penulisan kode background dan border yang sama, itu harus dibetulkan satu persatu, bedakan kode warna border yang sama dengan kode warna background.

Balas

untuk yang pertama saya cari nggak ada yang salah,,entar deh saya cari lagi,,, nah ada lagi yang saya tidak mengerti:
ada 1 error seperti ini "Parse Error }" itu gimana ya mas?

dan ada pada warning 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."

mohon bantuannya,,he

Balas

mas adhy, menghilangkan eror seperti di bawah caranya bagaimana??
Parse Error Lexical error at line 2, column 128. Encountered: ">" (62), after : "<link type=\'text/css\' rel=\'stylesheet\' href=\'https://www.blogger.com/static/v1/widgets/3189209027-widget_css_bundle.css\' /"

Satu lagi warning 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."

Balas

untuk yang pertama itu epertinya dari kode untuk menyembunyikan CSS reset blogger,sepertinya ada kesalahan penulisannya. harus dilihat errornya, coba simpan url blognya di sini.

Untuk error yang kedua itu biasanya dari jenis font dengan 2 kata. Jika ada font dengan dua kata, tambahkan tanda kutif misalnya seperti ini Trebuchet MS tambah tanda kutif jadi 'Trebuchet MS'

Balas

Sukses mas Adhy... tapi masih ada lagi satu warningnya dan saya tidak ngerti.
Property -ms-hyphens is an unknown vendor extension

Balas

sebelumnya ijin bertanya mas adhy,saya mengalami Errors found while checking this document as HTML5!
mohon petunjukny mas
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.asfa-blog.com&charset=%28detect+automatically%29&doctype=Inline&group=0
terima kasih

Balas

Untuk memberikan link label pada menu, jika label tersebut memiliki lebih dari satu kata (mengandung spasi) maka silahkan ganti spasi tersebut dengan kode %20 seperti berikut:

link awal: http://www.namablogANDA.com/search/label/tips google adsense dan tidak valid html5.

link yang valid html5: http://www.namablogANDA.com/search/label/tips%20google%20adsense

Balas

terima kasih mas adhy,tambah ilmu lagi,selesai dan sukses validasinya,sekali lagi terima kasih semoga tambah sukses buat mas adhy

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×