Tips Membuat Blog Valid CSS3

Unknown

CSS

14 Jan 2014

8 Komentar

Tips on Creating a Blog Valid CSS3 - Setelah sempat kemarin membahas semua validasi tentang HTML5, nah sekarang kita bahas dan membuka episode baru sesuai yang telah saya bilang sebelumnya, yaitu CSS3.

Sengaja saya buatkan langsung ke materi penerapannya dan tidak membahas terlebih dahulu definisi dan pengertian dari CSS3 ini, karena konsepnya sama dengan HTML5 bisa didefinisikan sendiri :

• Mengenal Seputar HTML5

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.

MENON-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.

Sumber bacaan : http://blog.kangismet.net/2013/09/cara-membuat-blog-valid-css3.html