Rumah >hujung hadapan web >tutorial css >Ia masa untuk memikirkan semula awalan vendor dalam CSS

Ia masa untuk memikirkan semula awalan vendor dalam CSS

Joseph Gordon-Levitt
Joseph Gordon-Levittasal
2025-02-23 08:58:11116semak imbas

It's Time to Rethink Vendor Prefixes in CSS

mata utama

Penggunaan prefix
    yang meluas dalam
  • dalam CSS menyebabkan sesetengah laman web gagal berfungsi dengan baik tanpa itu, memaksa Mozilla untuk menyokong prefix tidak standard untuk meningkatkan keserasian Firefox dengan halaman web menggunakan -webkit- awalan, Ini konsisten dengan pendekatan Microsoft Edge dan Opera. -webkit -webkit- pemaju dinasihatkan untuk memikirkan semula penggunaan awalan mereka dan menguji keserasian laman web mereka, terutama yang menghilangkan awalan
  • , kerana perubahan baru boleh menjejaskan laman web mereka di Firefox 46 atau 47 prestasi.
  • -moz- Sebagai pasukan Chrome/Blink, Firefox dan Microsoft Edge mencari penyelesaian yang lebih baik, awalan vendor secara beransur -ansur hilang. Memberi awalan vendor bermakna menggunakannya untuk penurunan yang elegan bukan pendekatan yang berdaya maju, dan pemaju harus memastikan penggunaan awalan mereka tidak menghasilkan hasil yang tidak dijangka dalam pelayar bukan webkit.
  • Oleh kerana prefix
menguasai CSS pada rangkaian, sesetengah laman web tidak berfungsi dengan betul tanpa ia. Walaupun ini jelas merupakan tanda bahawa pendekatan pemaju tidak sesuai dalam beberapa tahun yang lalu, ia telah membawa kepada langkah yang agak malang tetapi hampir diperlukan oleh Mozilla. Sehingga Firefox 46 atau 47 (dikeluarkan pada bulan April atau Mei 2016, masing-masing), Mozilla merancang untuk melaksanakan sokongan untuk pelbagai prefix

untuk meningkatkan Firefox dan menggunakan Prefixes (biasanya mudah alih) keserasian laman web. -webkit- -webkit- Ini bukan idea baru, dan Microsoft Edge juga menyokong pelbagai -webkit awalan untuk keserasian. Opera mula melaksanakan awalan

seawal tahun 2012 dan sejak itu telah berpindah ke enjin Blink berasaskan Webkit.

-webkit- w3c dan pengeluar penyemak imbas tidak berhasrat menggunakan awalan pengeluar di laman web pengeluaran: -webkit-

"Kenyataan dasar rasmi W3C, anda tidak boleh menggunakan atribut eksperimen dalam kod pengeluaran, tetapi orang ramai lakukan kerana mereka mahu membuat laman web kelihatan sejuk dan tinggal di barisan hadapan teknologi."

Walau bagaimanapun, pemaju di mana -mana mahu menggunakannya secepat mungkin untuk mengakses ciri -ciri terkini. Walaupun awalan telah menyebabkan kekeliruan kerana dominasi Webkit, saya fikir mereka telah berjaya membantu rangkaian berkembang pesat. Pendekatan Mozilla dan Microsoft mungkin tidak berbahaya kepada kebanyakan laman web. Kebanyakan laman web dalam talian mungkin telah memasukkan awalan
, atau anda akan mendapati bahawa kemas kini Mozilla tidak memerlukan tindakan untuk meningkatkan keserasian laman web mereka. Walau bagaimanapun, sebagai pemaju web profesional, kita perlu teliti dan memahami bahawa beberapa reka bentuk mungkin mempunyai hasil yang tidak normal. Anda mungkin sudah tahu yang mana karya anda mungkin terganggu oleh kemas kini.

pemaju, sudah tiba masanya untuk memikirkan semula bagaimana anda menggunakan awalan dan menguji laman web ini.

-moz- awalan yang terlibat

Mozilla mungkin perlu memasukkan satu siri -webkit- awalan. Setakat yang saya faham, Mozilla tidak akan memadankan senarai awalan -webkit- yang disokong oleh Edge, kerana tidak semua ini mungkin memerlukan memastikan enjin susun atur Gecko Mozilla serasi dengan rangkaian yang lebih luas.

Menurut pernyataan mereka di halaman wiki pada keserasian/keserasian mudah alih/tidak standard, awalan yang boleh diterima oleh Mozilla termasuk:

  • -webkit-flexbox
  • kecerunan awalan -webkit-
  • -webkit-transforms
  • -webkit-transitions
  • -webkit-appearance
  • -webkit-background-clip
  • -webkit-device-pixel-ratio
  • Beberapa ciri lain juga boleh terjejas, seperti
  • . -webkit-animation
  • Ujian silang penyemak imbas adalah penting -webkit-border*
Jika anda adalah pemaju web yang menghilangkan awalan

untuk mengelakkan keperluan untuk menguji ciri CSS yang lebih baru di Firefox -mari anda menganggap anda tergesa -gesa dan pelanggan anda memaksa anda untuk berbuat demikian -anda akan memerlukan retest Tapak di Firefox 46 atau 47. Versi Firefox ini akan dikeluarkan pada bulan April atau Mei, jadi anda mempunyai sedikit masa untuk merancang lebih awal. @-webkit-keyframes

Untuk menguji laman web anda sebelum perubahan ini tiba di Firefox 46/47, anda boleh mengakses status semasa perubahan dalam Firefox setiap malam melalui pilihan

dalam . Jika anda mempunyai versi malam terkini yang dipasang, ia harus ditetapkan ke secara lalai. Tidak semua

perubahan awalan telah muncul di Firefox setiap malam, tetapi ini adalah di mana anda boleh menguji penampilan semasa anda. Saya cadangkan menunggu sehingga sekitar bulan Mac untuk menggunakan Firefox setiap malam untuk ujian yang lebih teliti.

-moz- Lebih segera, Microsoft Edge telah menafsirkan dan mempamerkan awalan

dengan cara ini. Ini bermakna bahawa mana -mana gaya khusus WebKit yang termasuk dalam laman web anda mungkin telah dipaparkan dalam penyemak imbas yang anda tidak jangkakan. Jika anda belum melakukannya, lawati Microsoft Edge di Windows 10 dan uji laman web ini!

about:config layout.css.prefixes.webkit awalan pengeluar hilang true -webkit-

bernasib baik, awalan vendor nampaknya hilang apabila pasukan penyemak imbas mencari penyelesaian yang lebih baik. Pasukan Chrome/Blink tweaked pendekatan mereka:

-webkit-

"Looking forward, kami tidak akan lagi menggunakan awalan vendor untuk membolehkan ciri lalai, tetapi sebaliknya meninggalkan ciri (unprefixed) di belakang membolehkan platform web eksperimen mempunyai bendera dalam

sehingga ciri itu siap untuk lalai sehingga diaktifkan. " - Chrome/Blink Team

Pasukan Firefox bergerak ke arah pendekatan yang sama:

"dengan syaratnya sendiri, trend semasa dalam Mozilla adalah untuk mengelakkan awalan vendor dengan mematikan ciri -ciri sebelum pelepasan atau penerbitan ciri tanpa awalan jika mereka cukup stabil. Sekurang -kurangnya sebagai strategi umum; pengecualian mungkin diperlukan untuk kes -kes tertentu . " - Boris dari Mozilla

Microsoft Edge bertujuan untuk menghapuskan sepenuhnya sokongan untuk awalan:

"Microsoft juga menyingkirkan awalan vendor Edge. Ini bermakna agar para pemaju memanfaatkan ciri -ciri HTML5 atau CSS khas, mereka tidak perlu menggunakan awalan kelebihan tertentu. kepada piawaian web

tidak ada lagi downgrade yang elegan melalui awalan

Pindah dari awalan pengeluar bermaksud satu aspek - penurunan yang elegan melalui awalan pengeluar jelas tidak dapat dilaksanakan.

menggunakan awalan vendor untuk mencari pelayar tertentu (contohnya, kandungan khusus untuk Chrome sahaja) bukanlah niat awalan vendor; Jika anda menggunakan ciri yang bergantung pada atribut prefix, dan anda dengan elegan menurunkan reka bentuk pada pelayar lain menggunakan awalan, ini tidak akan berfungsi lagi.

-webkit- -o- Kesimpulan

masa berubah. Penguasaan WebKit secara tidak sengaja membawa kepada perpecahan rangkaian dan ketidakserasian, dan pelayar lain cuba meningkatkan keserasian mereka untuk mengikuti kadar dengan melaksanakan awalan . Walaupun masalah ini harus hilang kerana awalan vendor dihentikan, pemaju perlu memeriksa bahawa penggunaan awalan mereka tidak menghasilkan hasil yang tidak dijangka dalam pelayar bukan webkit.

-webkit- pautan berguna

dokumentasi niat mozilla mengenai perubahan ini

    penjejakan pepijat Mozilla untuk isu ini di Bugzilla
  • Versi terbaru Microsoft Edge menyokong WebKit API
  • Dokumentasi untuk memperkenalkan awalan
  • ke dalam standard hayat dalam talian
  • Laporan Daftar mengenai Perubahan Keserasian WebKit Firefox -webkit-
  • soalan yang sering ditanya mengenai awalan pengeluar dalam CSS

Apakah awalan vendor dalam CSS dan mengapa anda menggunakannya?

awalan vendor adalah cara untuk pengeluar pelayar menambah ciri CSS baru sebelum mereka menjadi sebahagian daripada spesifikasi CSS rasmi. Mereka digunakan untuk memastikan bahawa ciri -ciri baru ini tidak mengganggu ciri -ciri sedia ada dalam pelayar lain. Ini membolehkan pemaju untuk bereksperimen dengan ciri -ciri baru dan memberi maklum balas kepada proses spesifikasi CSS.

Adakah awalan vendor masih diperlukan dalam pembangunan web moden?

Keperluan awalan vendor selalu menjadi topik perdebatan di kalangan pemaju web. Walaupun mereka pernah menjadi penting untuk memastikan keserasian penyemak imbas, Web moden telah menyaksikan penyeragaman yang signifikan keupayaan CSS di kalangan pelayar yang berbeza. Oleh itu, permintaan untuk awalan vendor dikurangkan, tetapi dalam beberapa kes ia masih digunakan untuk fungsi eksperimen.

Apakah beberapa awalan vendor biasa?

Beberapa awalan vendor biasa termasuk -webkit- (Chrome, safari, versi opera yang lebih baru), -moz- (Firefox), -o- (lama, versi opera pra-webkit), dan -ms- (Internet Explorer dan Microsoft Tepi).

Bagaimana menggunakan awalan vendor dalam kod CSS saya?

Untuk menggunakan awalan vendor, tambahkannya sebelum harta CSS dalam lembaran styleshe. Sebagai contoh, untuk menggunakan atribut border-radius dengan awalan vendor Firefox, anda boleh menulis -moz-border-radius: 10px;.

Apakah kelemahan menggunakan awalan pengeluar?

Kelemahan utama menggunakan awalan vendor ialah mereka membuat kod CSS anda lebih kompleks dan lebih sukar untuk dikekalkan. Setiap penyemak imbas mempunyai awalan vendor sendiri, jadi anda mungkin perlu menulis beberapa baris kod untuk harta CSS tunggal. Di samping itu, awalan vendor boleh menyebabkan isu pengesahan kod kerana mereka bukan sebahagian daripada spesifikasi CSS rasmi.

Bagaimana untuk mengelakkan masalah awalan pengeluar?

Satu cara untuk mengelakkan isu awalan vendor adalah menggunakan preprocessor CSS seperti SASS atau kurang, yang secara automatik menambah awalan vendor ke kod anda. Pilihan lain ialah menggunakan postprocessor seperti AutoPrefixer, yang boleh menambah awalan vendor berdasarkan penyemak imbas yang ingin anda sokong.

Adakah terdapat alternatif untuk menggunakan awalan pengeluar?

Ya, ada alternatif untuk menggunakan awalan vendor. Alternatifnya ialah menggunakan perpustakaan pengesanan ciri seperti ModernIZR, yang membolehkan anda menguji ciri CSS tertentu dan menyediakan penyelesaian sandaran untuk penyemak imbas yang tidak menyokongnya. Alternatif lain ialah menggunakan grid CSS atau Flexbox, yang kini disokong secara meluas dan tidak memerlukan awalan vendor.

Apakah masa depan awalan pengeluar di CSS?

Masa depan awalan pengeluar di CSS tidak pasti. Walaupun mereka masih digunakan dalam beberapa kes, trend ini adalah untuk bergerak ke arah penyeragaman dan penggunaan pengesanan fungsi dan bukannya awalan vendor. Walau bagaimanapun, mereka mungkin kekal sebagai sebahagian daripada persekitaran CSS untuk masa depan yang boleh dijangka.

Bagaimanakah awalan vendor mempengaruhi prestasi laman web?

awalan vendor boleh menjejaskan prestasi laman web kerana mereka meningkatkan saiz kod CSS. Walau bagaimanapun, kesannya biasanya kecil, terutamanya jika anda menggunakan pemampat CSS untuk memampatkan kod anda.

Bagaimana untuk bersaing dengan perkembangan terkini dalam awalan pengeluar?

kerana sifat pembangunan web yang pesat berubah, menjaga perkembangan terkini dalam awalan vendor boleh mencabar. Walau bagaimanapun, ia boleh membantu mengikuti blog, forum, dan akaun media sosial yang berkaitan dengan CSS. Di samping itu, laman web Kumpulan Kerja CSS dan Rangkaian Pemaju Mozilla adalah sumber yang sangat baik untuk mengikuti maklumat terkini.

Atas ialah kandungan terperinci Ia masa untuk memikirkan semula awalan vendor dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:CSS di dunia modenArtikel seterusnya:CSS di dunia moden