Apa itu Prefix pada CSS

Pada tutorial kali ini kita akan membahas tentang apa itu prefix pada CSS dan apa fungsinya. Jadi, karena pesatnya perkembangan modul CSS3 memaksa perusahaan pembuat Web Browser seperti Mozilla, Chrome, Opera, IE, dan Safari harus membuat browser mereka dapat menerapkan property CSS yang sepenuhnya belum  menjadi standar W3C. Untuk kasus seperti ini, para vendor web browser memilih menggunakan CSS Vendor Prefix.

Apa sebenarnya CSS vendor Prefix?

Sebenarnya ini adalah cara lain bagi setiap vendor Browser, agar Browser mereka dapat mendukung penggunaan fitur CSS terutama fitur terbaru dari CSS. Yakni dengan penulisan potongan kode unik yang di kenal dengan istilah Prefix. Setiap Browser memiliki Prefiksnya masing – masing :

  • -webkit-(Chrome, Safari, versi terbaru Opera)
  • -moz-(Firefox)
  • -o-(Opera versi lama)
  • -ms-(Internet Explorer dan Microsoft Edge)

Cara penerapannya sangatlah sederhana. Anda tinggal menambahkan prefix setiap browser sebelum kode CSS yang sebenarnya. Contohnya kita akan menggunakan efek transition pada halaman, maka hasilnya adalah seperti ini :

  1. -webkit-transition: all 4s ease;
  2. -moz-transition: all 4s ease;
  3. -ms-transition: all 4s ease;
  4. -o-transition: all 4s ease;
  5. transition: all 4s ease;

Baris 1 – 4 adalah contoh prefix. Sementara baris ke 5 adalah baris sebenarnya dari CSS. Sekarang silahkan perhatikan contoh kode sumber di bawah ini :

Di bawah ini adalah contoh dari kode sumber di atas :

Apa itu Prefix pada CSS

Nah, apabila anda mengarahkan kursor mouse anda pada objek berwarna hijau. Maka objek tersebut akan memanjang.

CSS Prefix


Demikian tutorial dari apa itu prefix pada css dan apa fungsinya. Silahkan kunjungi tutorial CSS lainnya seperti floating pada CSS, cara merubah font pada CSS atau cara mendesain table pada CSS.

× Contact Us