Cara Membuat Blog Valid CSS3

Dalam menyusun CSS yang baik, validasi css3 sangat diperlukan. Tapi perlu diingat, walaupun blog kita sudah valid css3,, tidak menjamin sesuatu hal yang sempurna. Cara membuat blog valid css3 sendiri sudah banyak di bahas oleh blogger lain. Tetapi tidak ada salahnya juga saya bagikan di mestiqui.com dari pada tidak sama sekali.

Alhamdulillah juga blog mestiqui.com sudah valid css3, dan bukan hanya itu, alhamdulillah juga blog mestiqui.com sudah valid HMLT5, dan insyaallah akan saya bahas cara membuat blog valid html5 lain waktu.

Berikut ini saya kasih contoh blog yang sudah valid css3 :

Anda bisa mengeceknya di http://jigsaw.w3.org/css-validator/

Untuk membuat blog valid html5 cukup mudah, Anda hanya disuruh Non Aktifkan CSS Reset Stylesheet Blogger dan menghapus css yang menyebabkan error dan warning.  Mari kita bahas langsung langkah untuk membuat blog valid css3, selengkapnya dibawah ini.

Cara Membuat Blog Valid CSS3

# Non Aktifkan CSS Reset Stylesheet Blogger

Cara menon aktifkan css reset stylesheet blogger, anda lihat susunan kode di template biasanya 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'>

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

</style>

Setelah Anda non aktif css reset ini, biasanya akan terlihat sedikit perubahan tampilan, baik itu di dashboard atau langsung di blog. Untuk ini, Anda tidak usah panik dahulu.

# Hapus Beberapa Kode Ini
Di luar sana banyak yang menyediakan tutorial-tutorial blog dan membagikan css untuk digunakan di berbagai macam browser, tetapi dengan adanya css3 ini, kode tersebut tidak diperlukan lagi. Misalnya seperti ujung membulat (rounded corner) dan kodenya biasanya akan seperti ini :

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

Untuk beberapa browser, hanya bisa diperlukan kode border-radius:5px, maka dari itu, anda hapus semua kode yang berawalan :

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

Hapus juga kode dengan awalan

DXImageTransform 

Dan masih banyak lagi perintah dari validator css3, Anda tinggal menyesuaikan dan mengatasi sendiri perintah yang ada di validator css3, Semoga sukses.

Tweet