14 Jan 2014

Tips Membuat Blog Valid CSS3

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 :
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

8 komentar:

  1. Valid CSS3 ini masih ada kendala di cross browser, karena harus menghilangkan embel2 -moz-
    -khtml-
    -o-
    -webkit-
    Seandainya bisa valid mantap deh pokonya

    BalasHapus
    Balasan
    1. Oke deh kang, mungkin nanti saya update lagi untuk masalah validasi di cross browser.. Mkasih buat kunjungannya kang.. ^_^

      Hapus
  2. saya pernah coba sob tapi gagal :D

    BalasHapus
  3. punya saya belomm valid nih tapi nanti saja lah pusing masih mikirin kuliahh ditambah koding-koding keep smile aja nih gan ..nice artikel nya

    BalasHapus
    Balasan
    1. hehehe iya memang betul, kuliah harus diprioritaskan.. :-d

      Hapus

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).