Apakah mereka dan mengapa anda perlu menggunakannya
Awalan vendor CSS, juga kadang-kadang dikenali sebagai atau awalan pelayar CSS , adalah cara untuk pembuat pelayar untuk menambah sokongan untuk ciri CSS baru sebelum ciri-ciri tersebut disokong sepenuhnya dalam semua pelayar. Ini boleh dilakukan semasa tempoh percubaan dan eksperimen di mana pengilang pelayar menentukan sama ada ciri-ciri CSS baru ini akan dilaksanakan. Awalan ini menjadi sangat popular dengan kebangkitan CSS3 beberapa tahun yang lalu.
Apabila CCS3 mula diperkenalkan, beberapa sifat teruja mula memukul pelayar yang berbeza pada masa yang berlainan. Sebagai contoh, pelayar berkuasa web (Safari dan Chrome) adalah yang pertama yang memperkenalkan beberapa ciri-ciri gaya animasi seperti transformasi dan peralihan. Dengan menggunakan ciri prevalen vendor, pereka web dapat menggunakan ciri-ciri baru dalam kerja mereka dan memaparkannya pada penyemak imbas yang menyokong mereka serta-merta, dan bukannya perlu menunggu setiap pengilang pelayar lain untuk mengejarnya!
Jadi dari perspektif pemaju web front-end, awalan pelayar digunakan untuk menambah ciri CSS baru ke laman web sambil mempunyai keselesaan mengetahui bahawa pelayar akan menyokong gaya tersebut. Ini amat berguna apabila pengeluar pelayar yang berbeza melaksanakan sifat dalam cara yang sedikit berbeza atau dengan sintaks yang berbeza.
Awalan pelayar CSS yang anda boleh gunakan (setiap yang khusus untuk pelayar yang berbeza) adalah:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Dalam kebanyakan kes, untuk menggunakan sifat gaya CSS baru, anda mengambil harta CSS standard dan menambah awalan untuk setiap penyemak imbas. Versi awalan akan selalu menjadi yang pertama (dalam apa-apa urutan yang anda suka) manakala sifat CSS normal akan datang yang terakhir. Sebagai contoh, jika anda mahu menambah peralihan CSS3 ke dokumen anda, anda akan menggunakan harta peralihan seperti yang ditunjukkan di bawah:
-webkit- peralihan: semua mudah 4s;
-moz- peralihan: semua 4s mudah;
-ms- peralihan: semua 4s mudah;
-O transisi: semua 4s mudah;
peralihan: kesemua 4s;
Nota: Ingat, sesetengah penyemak imbas mempunyai sintaks yang berbeza untuk sifat tertentu daripada yang dilakukan oleh orang lain, jadi jangan menganggap bahawa versi prefix milik sebuah perumahan sama persis dengan harta standard. Sebagai contoh, untuk mencipta kecerunan CSS , anda menggunakan sifat lajur linear. Firefox, Opera, dan versi moden Chrome dan Safari menggunakan harta itu dengan awalan yang sesuai ketika versi awal Chrome dan Safari menggunakan prefixed property -webkit-gradient. Juga, Firefox menggunakan nilai yang berbeza daripada yang standard.
Alasan bahawa anda sentiasa menamatkan perisytiharan anda dengan versi normal yang tidak bersifat prefix dari sifat CSS supaya apabila penyemak imbas menyokong peraturan, ia akan menggunakannya. Ingat bagaimana CSS dibaca. Kaedah-kaedah yang lebih lama diutamakan terlebih dahulu jika kekhususan adalah sama, sehingga penyemak imbas akan membaca versi vendor suatu peraturan dan menggunakannya jika tidak mendukung yang normal, tetapi setelah itu, ia akan menimpa versi vendor dengan peraturan CSS sebenar.
Awalan Vendor Bukan Hack
Apabila awalan vendor pertama kali diperkenalkan, ramai profesional web bertanya-tanya sama ada ia adalah hack atau peralihan kembali ke hari-hari gelap untuk memalsukan kod tapak web untuk menyokong pelayar yang berbeza (ingat mereka " Laman ini paling baik dilihat dalam IE " mesej). Awalan vendor CSS bukanlah hacks, bagaimanapun, dan anda seharusnya tidak mempunyai tempahan tentang menggunakannya dalam kerja anda.
Hack CSS mengeksploitasikan kelemahan dalam pelaksanaan elemen atau harta lain untuk mendapatkan harta lain untuk berfungsi dengan betul. Contohnya, model kotak hack melumpuhkan kelemahan yang dieksploitasi dalam pemilikan harta keluarga suaranya atau bagaimana pelayar menguraikan backslashes (\). Tetapi hacks ini digunakan untuk membetulkan masalah perbezaan antara bagaimana Internet Explorer 5.5 mengendalikan model kotak dan bagaimana Netscape menafsirkannya, dan tiada kena mengena dengan gaya keluarga suara. Syukurlah kedua penyemak imbas yang ketinggalan zaman ini adalah yang kita tidak mempunyai kebimbangan dengan hari ini.
Pra awalan vendor bukanlah suatu hack kerana ia membolehkan spesifikasi untuk menetapkan peraturan untuk bagaimana suatu harta boleh dilaksanakan, sementara pada masa yang sama membolehkan pembuat peramban melaksanakan harta dengan cara yang berbeza tanpa melanggar segala yang lain. Selain itu, awalan ini berfungsi dengan sifat CSS yang akhirnya akan menjadi sebahagian daripada spesifikasi . Kami hanya menambah beberapa kod untuk mendapatkan akses kepada harta itu awal. Inilah sebab lain mengapa anda mengakhiri peraturan CSS dengan harta yang tidak biasa. Dengan cara itu, anda boleh menggugurkan versi awalan sebaik sahaja sokongan pelayar penuh dicapai.
Ingin mengetahui sokongan penyemak imbas untuk ciri tertentu? Laman web CanIUse.com adalah sumber yang menarik untuk mengumpulkan maklumat ini dan membiarkan anda tahu pelayar mana, dan versi mana-mana pelayar, kini menyokong ciri.
Prefix Prefixes adalah Annoying But Temporary
Ya, ia mungkin berasa menyakitkan dan berulang-ulang harus menulis sifat 2-5 kali untuk mendapatkannya berfungsi di semua pelayar, tetapi ia adalah situasi sementara. Contohnya, hanya beberapa tahun yang lalu, untuk menetapkan sudut yang dibulatkan pada kotak yang anda perlu tulis:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
jejari sempadan: 10px 5px;
Tetapi sekarang pelayar telah menyokong sepenuhnya ciri ini, anda hanya perlu versi tersendiri:
jejari sempadan: 10px 5px;
Chrome telah menyokong sifat CSS3 sejak versi 5.0, Firefox menambahnya dalam versi 4.0, Safari menambahnya dalam 5.0, Opera dalam 10.5, iOS dalam 4.0, dan Android dalam 2.1. Malah Internet Explorer 9 menyokongnya tanpa awalan (dan IE 8 dan yang lebih rendah tidak menyokongnya dengan atau tanpa awalan).
Ingat bahawa pelayar sentiasa berubah dan pendekatan kreatif untuk menyokong penyemak imbas yang lebih lama akan diperlukan melainkan jika anda merancang untuk membina laman web yang bertahun-tahun di belakang kaedah yang paling moden. Akhirnya, menulis awalan penyemak imbas adalah lebih mudah daripada mencari dan mengeksploitasi kesilapan yang kemungkinan besar akan ditetapkan dalam versi masa depan, yang memerlukan anda mencari ralat lain untuk mengeksploitasi dan sebagainya.