Mengenal Vendor Prefix pada CSS3

22/06/2017    Maykhel David    857     Website

Pengolahan objek HTML saat ini sudah sangat kompleks, memanipulasi sebuah objek html baik itu berupa bentuk, warna, dan juga tulisan. Semua bisa kita manipulasi dengan menggunakan CSS3, Kelemahan untuk CSS3 disini adalah tidak kompatibel dengan seri browser tertentu, terutama dengan browser versi lama.
 
Penggunaan vendor prefix sudah ada sejak CSS 3 diluncurkan, karena memang sengaja dibuat untuk mengatasi masalah kompatibilitas pada browser lama. Pada contohnya misal disini saya buiat sebuah kotak menggunakan div dengan class box1 seperti berikut

<div class="box1">
   
</div>

Selanjutnya kita coba berikan sebuah style untuk div tersebut

   .box1{
      width: 100px;
      height: 100px;
      padding: 30px;
      background-color: green;
   }

Dengan style diatas, kita sudah bisa melihat tampilan sebuah kotak hijau dengan ukuran yang sudah ditentukan diatas.
 
Penggunaan vendor prefix biasanya diletakkan dibawah property utamanya. Dimana nanti cssnya akan seperti berikut

    .box1{
      width: 100px;
      height: 100px;
      padding: 30px;
      background-color: green;
      box-sizing: border-box;
 
      /* Vendor Prefix */
      -webkit-box-sizing: border-box;    
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      -ms-box-sizing: border-box;    
      }

Vendor prefix adalah property tambahan yang memang digunakan mewakili property tertentu dengan tujuan mengaktifkan property utama nya pada browser versi lama .
 
Terdapat 4 base browser yang bisa kita gunakan.
 
-webkit- property: ditujukan untuk pengguna browser berbasis webkit seperti Google Chrome dan Safari
-moz- property: ditujukan untuk para pengguna browser mozilla firefox yang belum memperbaharui browsernya
-o- property: ditujukan untuk para pengguna browser opera yang belum memperbaharui browsernya ke browser versi terbaru
-ms- property: ditujukan untuk para pengguna browser internet explorer yang memang sangat jarang property yang kompatibel dengannya.
 
Dengan mengetahui apa itu vendor prefix, kita bisa menggunakannya dengan baik dalam pengembangan website agar bisa dirasakan oleh para pengunjung meski belum memperbaharui browsernya.
 
Baiklah teman - teman,  penerapan vendor prefix menjadi sesuatu yang wajib untuk dilakukan para pengembang website agar pengalaman setiap pengunjung dapat disama – ratakan. Demikian pembahasan tentang apa itu vendor prefix dan bagaimana kegunaannya. Semoga bermanfaat

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More