Apakah Penjual CSS atau Awalan Pelayar?

Awalan vendor CSS, kadang kala dikenali sebagai atau awalan pelayar CSS, merupakan cara untuk pembuat pelayar menambah sokongan untuk ciri CSS baru sebelum 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. Contohnya, penyemak imbas berkuasa Webkit (Safari dan Chrome) adalah yang pertama yang memperkenalkan beberapa sifat 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:
-Cik-
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 datang dahulu (dalam apa-apa urutan yang anda suka) sementara sifat CSS normal akan datang yang terakhir. Sebagai contoh, jika anda mahu menambah peralihan CSS3 ke dokumen anda, anda akan menggunakan

peralihan

harta seperti yang ditunjukkan di bawah:

-webkit- peralihan: kesemua 4s; -moz- peralihan: kesemua 4s; -Cik- peralihan: kesemua 4s; -o- peralihan: kesemua 4s;peralihan: kesemua 4s;

Catatan: Ingat, sesetengah penyemak imbas mempunyai sintaks yang berbeza untuk sifat-sifat tertentu daripada yang dilakukan oleh orang lain, jadi jangan menganggap bahawa versi prefix penyemak imbas sesuatu harta adalah sama dengan harta standard. Sebagai contoh, untuk mencipta kecerunan CSS, anda menggunakan

gradien linear
harta. Firefox, Opera, dan versi moden Chrome dan Safari menggunakan harta itu dengan awalan yang sesuai manakala versi awal Chrome dan Safari menggunakan harta awalan

-webkit-kecerunan
. 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 mula diperkenalkan, ramai profesional web bertanya-tanya sama ada ia adalah peretasan atau peralihan kembali ke hari-hari gelap untuk mengelakkan kod laman web untuk menyokong pelayar yang berbeza (ingat mereka " Laman ini adalah yang terbaik dilihat dalam IE "mesej). Awalan vendor CSS bukanlah hacks, bagaimanapun, dan anda seharusnya tidak mempunyai sebarang tempahan tentang penggunaannya dalam kerja anda.

Hack CSS mengeksploitasikan kelemahan dalam pelaksanaan elemen atau harta lain untuk mendapatkan harta lain untuk berfungsi dengan betul. Sebagai contoh, model kotak kerangka yang dieksploitasi dalam penguraian

keluarga suaranya
atau bagaimana penyemak imbas menghuraikan 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. Tambahan pula, awalan ini berfungsi dengan sifat CSS yang pada 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.