Mengenal Vendor Prefix pada CSS3

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

22 Juni 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat