Metode Browser dan Penulisan CSS3

Setelah W3C mengeluarkan standar untuk CSS3, banyak pengembang web browser mencoba mengadobsi CSS3 pada browsernya. Masing-masing pengembang web browser mendefinisikan metode sendiri dalam mengembangkan CSS3 pada web browser mereka. Beberapa dari produsen web browser menetapkan aturan untuk menggunakan CSS3, seperti Mozilla yang menggunakan prefix-moz-pada browser-nya untuk menerjemahkan suatu properti CSS3, sama halnya dengan Safari yang menggunakan prefix-webkit-, dan diikuti dan Opera dengan prefix-o-.

1. Mozilla CSS Extension
   Mozilla CSS Extension adalah suatu prefix yang dimengerti browser Mozilla dalam menyajikan CSS3. Penyajian tersebut didukung oleh pengolah penyajian (render-engine) Gecko.
   Aturan Penulisan:
   -moz-<properti CSS3>: <nilai>;
   Contoh:
   //Pembuatan Rounded Corner
   div { border: 2px solid;
           border-radius: 20px;
           -moz-border-radius: 20px;
   }
   
   
2. Webkit CSS Extension
   Webkit CSS Extension adalah suatu prefix yang dimengerti browser seperti Safari dan Google Chrome Browser dalam menyajikan CSS3. Penyajian tersebut didukung oleh pengolah penyajian (render engine) AppleWebkit dan KTML.
   Aturan Penulisan:
   -webkit-<properti CSS3>: <nilai>;
   Contoh:
   // Pembuatan Animasi Kotak
   div { witdh: 50px;
           height: 50px;
           background: blue;
           position: relative;
           animation: animasikotak 10s infinite;
           -webkit-animation; animasikotak 10s infinite;
   }
   @keyframes animasikotak {
   from { left: 0px:}
   to {left: 300px;}
   }
   @-webkit-keyframes animasikotak {
   from { left: 0px;}
   to {left: 300px;}
   
   
3. Opera CSS Extension
   Opera CSS Extension adalah  suatu prefix yang dimengerti browser Opera dalam menyajikan CSS3. Penyajian tersebut didukung oleh pengolah penyajian (render engine) Presto.
   Aturan Penulisan:
   -o-<properti CSS3>: <nilai>;
   Contoh:
   //Pembuatan Transformasi Rotasi Kotak
   div { width: 100px;
   height: 50px;
   border: 1px solid blue;
   background-color: green;
   transform: rotate (30deg) ;
   -o-transform: rotate(30deg) ;
   }
   
   
4. Internet Explore Filter (DHTML)
   Internet Explorer Filter adalah suatu ekstensi yang dikembangkan Microsoft untuk menyajikan efek pada halaman HTML yang dijalankan pada Web Browser Internet Explorer. Filter pada Internet Explorer menggunakan ActiveX. Tidak seperti prefix pada web browser diatas, filter memilki bentuk dan perintah yang berbeda dalam menampilkannya. Informasi lengkap dapat dilihat pada htpp://msdn.microsoft.com/en-us/libraly/aa155073.aspx
   Aturan Penulisan:
   filter:progid.DXImageTransform.Microsoft.<properti>(<atribut>) ;
   Contoh:
   //Pembuatan efek blur pada kotak
   div{ width: 110px;
   height: 50px;
   border: 1px solid blue;
   background-color: green;
   filter:progid:DXImageTransform.Microsoft.Blur (PixelRadius=' 15' ,
   MakeShadow='true' , shadowOpacity=' 0.40') ;
   }
   
   
5. Conditional CSS
   Kondisional CSS adalah suatu teknik pemilihan CSS menyesuaikan kondisi browser yang aktif, pemilihan kondisi CSS ini dikarenakan masing-masing browser memilih keterbatasan dalam penyajian CSS. Umumnya kondisional CSS digunakan untuk web browser yang memiliki karakteristik tesendiri dalam penyajiannya seperti Internet Explorer.
   Aturan Penullisan:Berlaku untuk semua versi browser Internet Explorer
   <!--{ if IE} >
                     <link rel="stylesheet" type="text/css" href='ie_only.css" />
   <![ end if]-->
   Berlaku untuk semua browser selain Interner Explorer
   <!--[if ! IE ]><!-->
                      <link rel="stylesheet" type=text/css href="not_ie.css" />
   <![ end if]-->
   Berlaku untuk browser Internet explorer dengan versi tertentu
   <!--[if ! IE ]><!-->
                      <link rel="stylesheet" type=text/css href="ie_7.css" />
   <![ end if]-->

   Ada 3 cara memasukkan CSS 

   • Inline Style Sheet
   • Internal Style Sheet, dan
   • External Style Sheet

   Inline Style Sheet

   Inline Style Sheet merupakan metode yang paling tidak menguntungkan krn memasukkan CSS dalam attribut elemen HTML secara langsung.
   Kami anjurkan anda jangan terlalu sering menggunakan metode ini!.
   Inline Style Sheet dilakukan dengan memasukkan CSS-nya ke dalam attribut CSS, dengan menambahkan attribut 'style'.
   
   

   Internal Style Sheet

   Internal Style Sheet sebaiknya digunakan apabila anda memiliki satu dokumen yang memiliki style yang unik.
   Internal Style Sheet di deklarasikan pada bagian <head> sebuah dokumen HTML.
   Internal Style Sheet akan mempengaruhi semua elemen dibawahnya sesuai dengan isi dari deklarasi style-nya.
   
   

   External Style Sheet

   External Style Sheet sangat menguntungkan bila digunakan untuk banyak dokumen yang memiliki style yang sama.
   Dengan Sxternal Style Sheet anda bisa merubah seluruh halaman di website anda dengan mudah, hanya mengubah satu buah file CSS.
   Setiap halaman harus memiliki koneksi dengan External Style Sheet dengan cara menambahkan tag <link>.
   Tag <link> diletakkan di dalam bagian <head> pada dokumen HTML.
   
   
    ref:
   

   • • http://shift-7.blogspot.com/2012/04/apa-itu-css3.html
     •  http://www.codingku.com/css/css-cara-menulis.html 
     • http://css-weaver.com/metode-penulisan-kode-css-langsung-dalam-file-html/