Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Tip Cepat: Jangan Pernah Mengetikkan Awalan Vendor Lagi

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Anda tahu masalahnya dengan cukup baik. Ingin memberikan beberapa bagian dari situs Anda sudut membulat situs dengan CSS3? Kemudian Anda memerlukan tiga awalan vendor: webkit, moz, dan formulir rekomendasi W3C. Bukankah itu membuang-buang waktu -- belum lagi ruang layar? Bagaimana jika, sebaliknya, kita bisa menggunakan file kelas? Yah, kita bisa! Akan saya tunjukkan caranya hari ini.


Kuncinya

Jika kita menggunakan alat seperti LESS atau SASS, kita bisa membuat file kelas kita sendiri dengan mudah. Tidak tahu apa yang saya bicarakan? Nah, pertama, tinjau tip cepat ini. Ini akan mengajarkan Anda bagaimana cara bersiap dan berlari dengan Less.


File Kelas

Selanjutnya, kita perlu membuat file kelas inti yang akan digunakan di setiap proyek. Jangan ragu untuk menyimpan file ini di manapun yang Anda inginkan, meskipun, di video di atas, saya menggunakan aplikasi Structurer populer (dan eksklusif) kami.

Kita akan melakukan yang pertama bersama, tapi pastikan untuk meninjau screencast untuk lebih jelasnya.

Dalam hal konvensi penamaan, saya telah menemukan bahwa paling pintar menggunakan nama yang direkomendasikan secara resmi untuk nama kelas Anda -- dalam hal ini, "border-radius". Untuk mendeklarasikan variabel dengan Less, kami mengatasinya dengan simbol @. Dalam kasus ini, kita menetapkan nilai default 3px, meskipun, jika kita perlu mengganti nilai itu dalam proyek kita, itu pasti mudah!


Beberapa Contoh

Pada titik ini, cukup bilas dan ulangi untuk setiap properti yang membutuhkan banyak awalan vendor. Berikut beberapa hal untuk Anda memulai:

Box Shadow

Transition

Box

Flex


Kesimpulan

Saya ingin mendengar pemikiran Anda tentang ini. Jika Anda menyukai idenya, mari kita meningkatkan lembar gaya ini.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.