Daripada pengarang: Awalan -webkit- sangat biasa dalam CSS hari ini sehingga sesetengah tapak enggan berfungsi dengan betul tanpanya. Walaupun awalan css vendor telah menjadi tanda jelas sifat kurang sempurna untuk pembangun sejak beberapa tahun kebelakangan ini, ini telah menyebabkan Mozilla mengambil langkah terdesak tetapi perlu. Dalam Firefox 46 atau 47 (dikeluarkan pada April atau Mei 2016), Mozilla merancang untuk memperkenalkan sokongan untuk siri awalan –webkit- bukan standard untuk meningkatkan keserasian penyemak imbas dengan awalan tersebut (walaupun pada peranti mudah alih).

Idea ini bukan baru, Microsoft Edge juga menyokong pelbagai awalan -webkit- untuk keserasian. Opera mula menyokong awalan -webkit- pada 2012, dan kemudian bertukar kepada enjin Webkit Blink. W3C dan pembangun penyemak imbas tidak merancang untuk menggunakan awalan ini dalam pembangunan tapak web:

“Dasar W3C rasmi menyatakan bahawa sifat percubaan tidak boleh digunakan dalam kod tapak. Walau bagaimanapun, orang ramai menggunakannya kerana mereka mahu tapak mereka menggunakan teknologi terkini dan kelihatan hebat."— Halaman W3C tentang mengoptimumkan kandungan untuk pelayar yang berbeza

Walau bagaimanapun, pembangun sentiasa mahu mengakses ciri terkini secepat mungkin. Awalan vendor membalikkan segala-galanya dan memberikan penguasaan Webkit, tetapi saya percaya awalan mempunyai kesan yang besar pada perkembangan pesat Internet.

Kaedah Mozilla dan Microsoft hanya akan membahayakan kebanyakan tapak. Kebanyakan tapak akan mempunyai awalan –moz- didayakan, atau akan mendapati bahawa dengan kemas kini baharu, Mozilla akan menyokong sifat baharu tanpa perlu membuat perubahan. Walau bagaimanapun, sebagai pembangun web profesional, kami perlu meletakkan perkara ini untuk berehat dan memahami bahawa sesetengah reka bentuk mungkin menghasilkan hasil yang bercampur-campur. Anda mungkin sudah mengetahui projek anda yang mana akan dimusnahkan oleh kemas kini ini. Pembangun web, sudah tiba masanya untuk memikirkan semula pendekatan anda terhadap awalan vendor dan mengujinya di tapak.

Awalan baharu

Mozilla akan memasukkan beberapa awalan –webkit-. Daripada apa yang saya kumpulkan, nampaknya Mozilla tidak berniat untuk memadankan senarainya dengan sifat Edge. Tidak semua sifat perlu serasi dengan enjin Mozilla. Antara awalan yang akan ditambahkan oleh Mozilla, berdasarkan halaman wiki Keserasian/Mudah Alih/Tidak Standard, adalah yang berikut:

Webkit - untuk kecerunan

Webkit-transforms

Webkit-peralihan

Webkit-penampilan

Klip-latar belakang webkit

Nisbah-piksel-peranti-webkit

Webkit-animasi

Beberapa sifat lain mungkin dalam @-webkit-keyframes.

Ujian merentas pelayar akan menjadi kritikal

Jika anda, pembangun web, tidak memasukkan awalan -moz- supaya tidak menguji sifat CSS baharu dalam Firefox, dan tarikh akhir semakin hampir, dan pelanggan memaksa anda menambah awalan ini, maka anda perlu menguji semula tapak dalam Firefox 46 atau 47. Versi ini akan dikeluarkan pada bulan April atau Mei, jadi anda masih mempunyai sedikit masa.

Untuk menguji tapak web anda tanpa menunggu Firefox 46/47, anda boleh mendayakan perubahan ini dalam Firefox Nightly dengan menetapkan layout.css.prefixes.webkit dalam about:config. Jika anda mempunyai versi terkini Nightly dipasang, lalai harus benar. Tidak semua perubahan awalan -webkit- berfungsi dalam Firefox Nightly lagi, tetapi ia masih merupakan tempat yang baik untuk menguji rupa tapak anda tidak lama lagi. Saya akan menunggu sehingga Mac sebelum menguji tapak secara serius dalam Firefox Nightly.

Lebih penting lagi, Microsoft Edge sudah mentafsir dan memaparkan awalan -webkit- dengan cara yang sama. Ini bermakna mana-mana gaya WebKit di tapak anda sudah dipaparkan dalam penyemak imbas yang benar-benar tidak dijangka. Jika anda belum lagi menggunakan penyemak imbas ini, kemudian pasang Windows 10 dan dapatkan akses kepadanya untuk menguji tapak.

Awalan vendor beransur-ansur hilang

Nasib baik, awalan vendor beransur-ansur hilang apabila pasukan pembangunan mencari penyelesaian baharu. Pasukan Chrome/Blink mengubah pendekatan mereka sedikit:

"Melangkah ke hadapan, daripada mendayakan awalan vendor secara lalai, kami akan mengekalkan sifat biasa di belakang bendera 'dayakan ciri platform web percubaan' dalam about:flags sehingga sifat tersebut didayakan secara lalai."— Pasukan Chrome/Blink

Pasukan Firefox mengikuti jalan yang sama: “Arah utama kerja di Mozilla sekarang adalah beralih daripada awalan vendor, dengan melumpuhkannya atau memindahkannya ke keadaan hartanah biasa jika ia sudah stabil. Ini sekurang-kurangnya dasar am kami; »- Boris dari Mozilla

Microsoft Edge juga menyasarkan penyingkiran sokongan awalan: “Microsoft juga cuba menyingkirkan awalan vendor dalam Edge. Ini bermakna bahawa pembangun tidak perlu menambah awalan khas untuk penyemak imbas Edge apabila menggunakan teg HTML5 khas atau sifat CSS. Sebaliknya, pembangun akan menulis kod standard."- Boleh lenyek

Degradasi anggun menggunakan awalan tidak lagi berfungsi

Beralih daripada awalan vendor bermakna hanya satu perkara - teknik degradasi anggun melalui awalan bukan lagi pilihan. Mengasingkan penyemak imbas tertentu melalui awalan vendor (contohnya, untuk Chrome) bukanlah tujuan awalan ini; Pembangun sentiasa digalakkan untuk menggunakan semua awalan (–webkit- hingga –o-). Jika anda menggunakan sebarang fungsi yang berfungsi pada sifat dengan awalan vendor, dan juga telah menggunakan teknik degradasi yang anggun dalam reka bentuk anda untuk penyemak imbas lain, maka ini tidak lagi berfungsi.

Kesimpulan

Zaman berubah. Penguasaan WebKit adalah tidak disengajakan dan menyebabkan kekecohan dan ketidakserasian di Internet. Pelayar lain sedang mencari untuk melanjutkan keserasian dengan menambahkan awalan –webkit-. Secara beransur-ansur, dengan kehilangan awalan vendor, masalah ini juga akan hilang. Pembangun harus menyemak sama ada penggunaan awalan tidak menyebabkan akibat yang tidak diingini dalam pelayar bukan WebKit.

Isi kandungan:

Awalan -webkit- sangat dominan dalam CSS sehingga sesetengah tapak tidak berfungsi dengan betul tanpanya. Ini menunjukkan bahawa pembangun tidak mengikuti amalan terbaik dalam beberapa tahun kebelakangan ini dan ini membawa kepada keputusan yang malang, tetapi hampir terpaksa di pihak Mozilla. Dalam Firefox versi 46 atau 47 (ini adalah April atau Mei 2016), Mozilla merancang untuk melaksanakan sokongan untuk awalan -webkit- bukan standard untuk meningkatkan keserasian Firefox dengan tapak yang aktif menggunakan -webkit (biasanya tapak diutamakan mudah alih).

Walau bagaimanapun, pembangun menggunakan awalan untuk menggunakan ciri penyemak imbas terkini secepat mungkin. Awalan menyebabkan kekeliruan dengan penguasaan WebKit, tetapi ia juga memaksa web untuk bergerak ke hadapan pada kadar yang dipercepatkan.

Pendekatan Mozilla dan Microsoft adalah selamat untuk kebanyakan tapak. Banyak tapak akan menggunakan awalan -moz- atau tidak memerlukan tindakan untuk serasi dengan kemas kini Firefox masa hadapan. Tetapi sebagai pembangun web profesional, kita mesti berhati-hati mempertimbangkan dan memahami akibat yang akan timbul. Anda mungkin tahu tapak anda yang mana mungkin dipengaruhi oleh kemas kini ini.

Jadi, sudah tiba masanya untuk memikirkan semula pendekatan awalan dan tapak ujian dengan mereka.

Awalan yang Disokong

Terdapat beberapa awalan -webkit- yang Mozilla boleh laksanakan. Daripada apa yang saya kumpulkan, Mozilla tidak cenderung untuk memadankan senarai sifat awalan yang disokong dengan Edge, kerana tidak semuanya diperlukan untuk keserasian enjin susun atur.

Pembangun Firefox juga hampir dengan pendekatan yang sama:

Aliran semasa dalam Mozilla adalah untuk mengelakkan awalan vendor dengan melumpuhkan sifat bukan awalan dan menggunakan versi bukan awalan dengan kestabilan yang mencukupi. Ini adalah dasar umum: pengecualian mungkin dikenakan dalam beberapa kes - Boris dari Mozilla

Microsoft Edge juga akan meninggalkan awalan vendor:

"Microsoft juga akan menghapuskan awalan vendor dalam Edge. Ini bermakna pembangun yang ingin menggunakan ciri HTML dan CSS tertentu tidak akan menggunakan awalan khusus Edge. Sebaliknya, mereka hanya akan menulis kod mengikut piawaian” - Mashable

Tidak akan ada lagi degradasi beransur-ansur berdasarkan awalan

Peralihan daripada awalan vendor ini bermakna satu perkara - degradasi beransur-ansur menggunakan awalan vendor tidak mempunyai prospek.

Menggunakan awalan vendor untuk menggunakan gaya untuk penyemak imbas tertentu (contohnya, Chrome sahaja) bukanlah tujuan memperkenalkannya; Pengesyoran untuk pembangun sentiasa menggunakan semua awalan (dari -webkit- hingga -o-). Jika anda menggunakan ciri yang bergantung pada sifat awalan dan menggunakan awalan untuk merendahkan reka bentuk anda secara beransur-ansur dalam penyemak imbas lain, maka ini tidak lagi berfungsi.

Kesimpulan

Zaman berubah. Penguasaan WebKit tanpa disedari telah membawa kepada masalah ketidakserasian, memaksa vendor penyemak imbas lain untuk melaksanakan awalan -webkit-. Isu ini akan berakhir apabila vendor penyemak imbas memadamkan awalan vendor, tetapi sementara itu pembangun harus memastikan bahawa awalan tidak menyebabkan hasil yang tidak dijangka dalam penyemak imbas bukan WebKit.

Industri reka bentuk web sentiasa berubah, sebahagiannya kerana pelayar web dan peranti sentiasa berubah. Memandangkan kerja yang kami lakukan sebagai pereka bentuk dan pembangun web dilihat melalui penyemak imbas web, kerja kami akan sentiasa mempunyai hubungan simbiotik dengan perisian tersebut.

Perubahan dalam pelayar web

Salah satu cabaran yang selalu dihadapi oleh pereka laman web dan pembangun bukan sahaja perubahan dalam penyemak imbas web, tetapi juga rangkaian pelayar web yang berbeza yang akan digunakan untuk mengakses laman web mereka. Alangkah baiknya jika semua pelawat tapak web menggunakan perisian terkini dan terbaik, tetapi itu tidak pernah berlaku (dan mungkin tidak akan pernah berlaku).

Sesetengah pelawat ke tapak anda akan melihat halaman web dengan penyemak imbas yang sangat lapuk dan tiada ciri daripada penyemak imbas yang lebih moden. Sebagai contoh, versi lama pelayar Internet Explorer Microsoft telah lama menjadi masalah bagi kebanyakan profesional web. Walaupun syarikat itu telah menggugurkan sokongan untuk beberapa penyemak imbasnya yang tertua, masih ada orang yang akan menggunakannya - orang yang anda mungkin mahu berurus niaga dan berkomunikasi dengannya.

Definisi "degradasi anggun"

Realitinya ialah orang yang menggunakan penyemak imbas web yang lapuk ini selalunya tidak tahu bahawa mereka mempunyai perisian lapuk atau pengalaman dalam talian mereka mungkin terjejas disebabkan pilihan perisian mereka. Bagi mereka, penyemak imbas yang ketinggalan zaman ini hanyalah apa yang mereka gunakan sejak sekian lama untuk mengakses laman web. Dari perspektif pembangun web, kami ingin memastikan kami dapat memberikan pelanggan ini pengalaman yang bermanfaat sambil membina tapak web yang berfungsi dengan baik dalam penyemak imbas dan peranti yang lebih moden dan kaya dengan ciri yang tersedia hari ini.

Degradasi anggun ialah strategi untuk mengendalikan reka bentuk halaman web untuk pelbagai penyemak imbas, sama ada lama dan baharu.

Bermula dengan pelayar moden

Direka bentuk untuk merendahkan dari semasa ke semasa, tapak web ini direka dengan mengambil kira penyemak imbas moden terlebih dahulu. Tapak ini direka bentuk untuk memanfaatkan keupayaan pelayar web moden ini, kebanyakannya "kemas kini automatik" untuk memastikan orang ramai sentiasa menggunakan versi terkini. Walau bagaimanapun, tapak web yang merosot dengan anggun juga berfungsi dengan berkesan pada pelayar lama. Apabila penyemak imbas yang lebih lama dan kurang berfungsi ini melihat tapak tersebut, ia sepatutnya merosot semasa ia masih berfungsi, tetapi mungkin dengan ciri yang lebih sedikit atau elemen paparan visual yang lain. Walaupun konsep menyediakan tapak web yang kurang berfungsi atau tidak begitu menarik ini mungkin kelihatan pelik kepada anda, hakikatnya orang ramai tidak akan tahu bahawa mereka tiada. Mereka tidak akan membandingkan tapak yang mereka lihat dengan "versi yang lebih baik", jadi selagi tapak itu melakukan perkara yang mereka perlukan dan tidak kelihatan rosak sama ada dari segi fungsi atau visual, anda akan berada dalam keadaan yang baik.

Penambahbaikan Progresif

Konsep degradasi beransur-ansur adalah serupa dalam banyak cara dengan konsep reka bentuk web lain yang mungkin anda pernah dengar - peningkatan progresif. Perbezaan utama antara strategi kemerosotan progresif dan strategi peningkatan progresif ialah tempat anda memulakan reka bentuk anda. Jika anda bermula dengan penyebut biasa terendah dan kemudian menambah ciri untuk penyemak imbas yang lebih moden pada halaman web anda, anda menggunakan peningkatan progresif. Jika anda bermula dengan ciri yang paling moden, canggih dan kemudian mengecilkan, anda akan mengeksploitasi kemerosotan secara beransur-ansur. Pada akhirnya, tapak web yang terhasil berkemungkinan akan memberikan pengalaman yang sama sama ada anda menggunakan peningkatan progresif atau degradasi beransur-ansur. Secara realistik, tujuan kedua-dua pendekatan adalah untuk mencipta tapak yang berfungsi hebat untuk penyemak imbas moden, sambil tetap memberikan pengalaman yang lancar untuk pelayar web lama dan pelanggan yang terus menggunakannya.

Kemerosotan anggun tidak bermakna anda memberitahu pembaca anda, "Muat turun penyemak imbas terkini"

Salah satu sebab ramai pereka moden tidak menyukai pendekatan kemerosotan yang anggun ialah ia sering berubah menjadi memerlukan pembaca memuat turun penyemak imbas yang paling terkini untuk halaman itu berfungsi. Ini bukan kemerosotan yang anggun. Jika anda ingin menulis "muat turun penyemak imbas X untuk ciri ini berfungsi", anda akan meninggalkan alam kemerosotan tambahan dan beralih ke reka bentuk tertumpu pelayar. Ya, sememangnya berguna untuk membantu pelawat tapak web menaik taraf kepada penyemak imbas yang lebih baik, tetapi selalunya soalan itu perlu ditanya (ingat, ramai orang tidak faham cara memuat turun penyemak imbas baharu dan meminta mereka berbuat demikian boleh menjadi betul-betul menakutkan). mereka pergi). Jika anda benar-benar mahu perniagaan mereka memberitahu mereka bahawa mereka akan meninggalkan tapak anda untuk memuat turun perisian yang lebih baik, ia mungkin tidak akan dapat dilakukan. Melainkan tapak anda mempunyai kefungsian utama yang memerlukan versi penyemak imbas tertentu atau lebih tinggi, memaksa muat turun selalunya memecahkan pengalaman pengguna dan harus dielakkan.

Peraturan praktikal yang baik adalah mengikut peraturan yang sama untuk kemerosotan beransur-ansur seperti untuk penambahbaikan progresif:

• Tulis HTML yang sah dan mematuhi piawaian
• Gunakan helaian gaya luaran untuk reka bentuk dan susun atur anda
• Gunakan skrip terpaut luaran untuk interaktiviti
• Pastikan kandungan boleh diakses walaupun kepada penyemak imbas rendah tanpa CSS atau JavaScript

Dengan mengambil kira proses ini, anda boleh keluar dan mencipta reka bentuk paling moden yang anda boleh! Cuma pastikan ia berfungsi dalam penyemak imbas yang kurang kaya dengan ciri semasa masih berfungsi.

Sejauh manakah anda perlu pergi?

Satu soalan yang ditanya oleh ramai pembangun web ialah sejauh mana anda harus menyokong versi penyemak imbas. Tiada jawapan yang tepat dan kering untuk soalan ini. Ia bergantung kepada tapak itu sendiri. Jika anda melihat analisis trafik tapak, anda akan melihat pelayar yang digunakan untuk melawat tapak tersebut. Jika anda melihat peratusan besar orang yang menggunakan penyemak imbas lama tertentu, maka anda mungkin mahu menyokong penyemak imbas itu atau berisiko kehilangan perniagaan itu. Jika anda melihat analitis anda dan mendapati tiada sesiapa yang menggunakan versi penyemak imbas yang lebih lama, anda mungkin boleh memutuskan untuk tidak bersusah payah menyokong dan menguji penyemak imbas warisan itu sepenuhnya. Jadi jawapan sebenar kepada persoalan sejauh mana tapak anda memerlukan sokongan ialah "tidak kira sejauh mana penganalisis anda memberitahu anda perkara yang pelanggan anda gunakan."

Disunting oleh Jeremy Girard.

Sudah tentu, Internet Explorer mengandungi sejumlah besar ralat dalam versi yang berbeza, tetapi dengan bantuan komen bersyarat anda boleh memeranginya dan mencapai penghapusan mereka. Tetapi apa yang tidak boleh diperbaiki ialah IE sudah ketinggalan zaman. Walaupun penyemak imbas lain menyertakan lebih banyak sifat CSS3 dan menyokong pelbagai teknologi bermodel baharu, IE sedang menandakan masa. Keluaran IE9 tidak akan menyelesaikan masalah versi sebelumnya tidak akan hilang dalam sekelip mata. Dalam keadaan sedemikian, penyelesaian terbaik ialah kemerosotan yang anggun - prinsip mengekalkan prestasi sambil kehilangan beberapa fungsi.

Mari kita lihat teknik ini dengan contoh kecil, di mana teks dipaparkan dalam blok dan butang. Blok dan butang mempunyai bucu bulat, dan bayang-bayang kecil juga ditambahkan pada blok. Setakat ini, penyemak imbas untuk CSS3 terutamanya menggunakan sifat khusus dengan awalan mereka sendiri:

• Firefox - sifat bermula dengan -moz-;
• Safari dan Chrome - sifat bermula dengan -webkit-;
• Opera - sifat bermula dengan -o-.

Versi berbeza penyemak imbas ini boleh memahami beberapa sifat dengan dan tanpa awalan, jadi untuk kesejagatan ia menambah beberapa sifat sekaligus. Jadi, untuk membuat sudut bulat kita memerlukan gaya berikut.

Jejari-sempadan Moz: 10px; /* Untuk Firefox */ -webkit-border-radius: 10px; /* Untuk Safari dan Chrome */ jejari sempadan: 10px; /* Untuk Opera dan IE9 */

Walaupun menggunakan sifat ini akan menyebabkan kod CSS tidak sah, dalam hal ini adalah lebih penting untuk berfungsi dalam pelayar Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, serta versi lamanya. Contoh 1 menunjukkan cara menggunakan sifat CSS3 untuk mencipta bayang-bayang dan sudut bulat.

Contoh 1. Sekat dengan bayang

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Keputusan contoh ditunjukkan dalam Rajah. 1.

nasi. 1. Sekat paparan dalam Safari

Contoh yang sama dalam pelayar IE8 dan di bawah ditunjukkan dalam Rajah. 2.

nasi. 2. Sekat paparan dalam IE8

Walaupun penampilan elemen berbeza secara terperinci, kefungsian halaman secara keseluruhan tetap sama. Butang boleh diklik, teks tetap sama, termasuk warna dan latar belakangnya, dan tiada ralat paparan. Sebenarnya, perbezaannya hanya pada perkara kecil yang melakukan fungsi hiasan dan bukannya praktikal. Semua prinsip kemerosotan anggun dipenuhi.

Apakah yang diberikan oleh pendekatan ini dalam amalan?

• Membolehkan anda menggunakan sifat hiasan CSS3 secara aktif tanpa mengambil kira pelayar.
• Memotivasikan untuk menggunakan pelbagai kesan CSS3.
• Ia menjadikan kehidupan pembangun lebih mudah, kerana dia tidak perlu lagi mencari penyelesaian untuk penyemak imbas yang sudah lapuk.
• Mempercepatkan produktiviti kerja.

Sudah tentu, kemerosotan anggun tidak selalu terpakai. Jika keperluan susun atur menunjukkan sokongan untuk versi lama, maka anda perlu mencari penyelesaian alternatif, contohnya, menggunakan imej untuk sudut bulat. Tetapi untuk sebahagian besar, keperluan untuk susun atur ditetapkan tanpa mengambil kira keadaan umum. Dan jika kita membandingkan semua kelebihan kemerosotan anggun dengan keburukan, yang menunjukkan dirinya hanya dalam fakta bahawa penyemak imbas yang sudah lapuk, khususnya IE8, tidak memaparkan halaman "dengan cantik", maka simpati akan berada di sisi kemajuan.