Ditulis oleh: Ditulis pada: 5/20/2013
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:
- 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.
- Hindari penggunaan kode padding:none, cukup tulis saja padding:0
- 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. - 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. - Hindari penulisan atau pembuatan kotak dengan warna background dan border yang sama.
- 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.
Bagi Anda yang ingin berkomentar di luar topik pembahasan mohon berkomentar di halaman Out Of Topic yang telah saya sediakan.