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 pelayar lain menyertakan lebih banyak sifat CSS3 dan menyokong pelbagai teknologi bermodel baharu, IE sedang menandakan masa. Pengeluaran 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 ditambah 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-bayang

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

Hasil daripada 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.

Dalam artikel ini, kami akan cuba memahami perbezaan antara dua prinsip mencipta halaman berdasarkan reka bentuk web responsif: Peningkatan Progresif dan Degradasi Anggun.

Kemerosotan anggun

Degradasi anggun, atau "toleransi kegagalan," ialah konsep yang lebih luas yang digunakan bukan sahaja pada reka bentuk web. Dalam pengertian umum, ia membayangkan keupayaan sistem untuk beroperasi walaupun beberapa komponennya gagal. Dan kegagalan yang lebih serius, semakin rendah kualiti sistem atau berfungsi dengan sistem, tetapi pada masa yang sama fungsi utama sistem tetap beroperasi.

Kemerosotan anggun boleh dinyatakan dalam keupayaan untuk bekerja dengan JavaScript yang dilumpuhkan, dalam paparan tapak yang tepat dalam penyemak imbas tanpa sokongan untuk spesifikasi CSS3, dalam paparan tapak yang mencukupi dengan imej yang dilumpuhkan. Semua kegagalan ini seharusnya tidak menjejaskan pengendalian aplikasi web. Walau bagaimanapun, jika semuanya berfungsi, maka lebih mudah bagi pengguna untuk menggunakan laman web ini.

Jika kita mempertimbangkan contoh khusus, contohnya dalam bidang reka bentuk antara muka web, prinsip ini boleh dirumuskan sebagai "sistem boleh berfungsi dengan JavaScript dilumpuhkan sepenuhnya, tetapi dengan JavaScript didayakan ia akan menjadi lebih mudah untuk digunakan." Persoalannya bukan sama ada mungkin terdapat situasi di mana JS dilumpuhkan atau tidak berfungsi sepenuhnya, atau mengapa ini berlaku. Keadaan ini diambil sebagai sesuatu yang diberikan. Pereka bentuk mesti membangunkan antara muka yang akan terus berfungsi, walaupun dengan JS dilumpuhkan.

Selalunya, untuk mengikuti prinsip ini, anda perlu membuat semula logik pemprosesan borang sebelah pelayan. Walau bagaimanapun, pendekatan ini akan membuahkan hasil jika anda memikirkan tentang toleransi kesalahan pada peringkat perancangan borang.

Pematuhan dengan prinsip kemerosotan anggun membolehkan pengguna (dan setiap pengguna ialah pelanggan berpotensi) dapat bekerja dengan tapak dalam apa jua keadaan.

Peningkatan Progresif

Peningkatan progresif ialah prinsip yang, bersama-sama dengan mudah alih didahulukan, mewujudkan asas teori untuk reka bentuk web responsif. Namanya sudah mengatakan bahawa ia meletakkan penciptaan halaman web secara berperingkat, secara kitaran, mengikut prinsip "dari mudah kepada kompleks." Pada setiap peringkat yang telah dirancang, penampilan halaman harus menjadi lebih cantik, lebih baik dan lebih mudah, tetapi semua fungsi harus tersedia pada mulanya.

Merupakan kes kemerosotan yang lebih istimewa , kerana semua halaman web yang dibina di atasnya akan mematuhi sepenuhnya prinsip kemerosotan anggun.

Biasanya, mencipta halaman menggunakan prinsip peningkatan progresif terdiri daripada langkah berikut:

• Mencipta halaman atas dasar "bersih".HTML
  Pada peringkat ini, halaman berfungsi sepenuhnya dicipta, yang hanya terdiri daripada kod HTML, yang betul secara semantik dan logik, dan oleh itu boleh ditafsirkan oleh mana-mana pelayar, walaupun yang paling mudah. Pada peringkat ini, tiada pemformatan dilakukan dan penyemak imbas sendiri memformat halaman mengikut piawaian yang disertakan di dalamnya. Penambahbaikan progresif menegaskan bahawa peringkat pertama adalah yang paling penting, kerana tidak ada yang lebih berharga di web selain kandungan.
  Pendek: mewujudkan struktur dokumen semantik dan logik
• Menambah PeraturanCSS
  Pada peringkat ini, jadual CSS format lama digunakan: grid penanda ditambah, elemen diletakkan, imej latar belakang digunakan pada blok, gaya, warna dan gaya teks ditukar. Secara umum, halaman itu mendapat rupa gaya baharu, menjadi lebih cantik dan menyenangkan.
  Pendek: memberikan rupa dokumen
• Menggunakan CSS3
  Kini anda boleh menggunakan semua kesan dan peningkatan yang disediakan oleh spesifikasi CSS3 pada dokumen. Iaitu, tambah lut sinar, bayang-bayang, sudut bulat untuk blok, peralihan animasi lancar untuk kelas pseudo atau elemen bentuk.
  Pendek: memberikan penampilan yang sempurna kepada dokumen
• Mencipta skrip padaJavaScript
  Pada peringkat ini, semua kesan dan prinsip interaksi halaman web dengan pengguna dicipta menggunakan JavaScript. Ini termasuk permintaan AJAX, pemuatan dinamik atau pengesahan data, kesan animasi dan widget (contohnya, Prototaip atau jQuery). Secara umum, kami menjadikan halaman lebih mesra pengguna.
  Pendek: interaksi, interaktiviti, kemudahan

Mari cuba gunakan pendekatan ini dalam amalan. Kami akan membangunkan dan mereka bentuk borang log masuk tapak yang mudah. Pada peringkat pertama, kami akan membuat borang log masuk dalam HTML tulen. Bentuknya tidak begitu cantik, tetapi ia berfungsi sepenuhnya. Di bawah ialah kod halaman dan hasilnya dipaparkan dalam penyemak imbas:

Sekarang dalam langkah kedua, kami akan memberikan bentuk gaya dengan menggunakan helaian gaya yang mengandungi hanya peraturan yang boleh digunakan untuk CSS tanpa sifat khas. Mari tambah warna latar belakang, padding, penjajaran. Sekarang borang kelihatan lebih baik:

Sekarang mari tambah peraturan daripada spesifikasi CSS3. Mari tambahkan sudut pada blok, bayang-bayang untuk medan input teks, gayakan butang dan gunakan pemilih baharu untuk mengalih keluar padding yang tidak perlu di bahagian atas. Kami mendapat borang yang dipertingkatkan:

Pada peringkat terakhir, kita boleh membuat permintaan AJAX supaya pengguna boleh mengakses tapak tanpa perlu memuat semula halaman.

Dalam kes ini, pada setiap peringkat tertentu (jika ia disokong oleh penyemak imbas), halaman berfungsi sepenuhnya akan dipaparkan. Tetapi jika penyemak imbas menyokong teknologi yang lebih maju, maka halaman itu hanya menjadi lebih baik.

Prinsip manakah yang harus anda ikuti?

Jika tapak dibina secekap mungkin mengikut konsep kemerosotan anggun, maka hasilnya akan lebih kurang sama dengan apa yang akan berlaku jika peningkatan progresif digunakan. Jadi apa bezanya?

Hakikatnya ialah membina tapak web berdasarkan prinsip kemerosotan anggun adalah agak sukar, kerana beberapa pembangun dapat melakukannya dengan cekap. Dalam kes kemerosotan anggun yang paling mudah, anda boleh melakukan perkara berikut: buat tapak untuk versi terkini penyemak imbas, dan kemudian tunjukkan kepada pengguna mesej yang memberitahu mereka bahawa mereka perlu memuat turun versi baharu penyemak imbas. Pada masa yang sama, pembangun mungkin tidak peduli dengan penampilan tapak dalam pelayar lama. Satu lagi contoh kemerosotan anggun yang buruk ialah melumpuhkan sepenuhnya fungsi tapak apabila JavaScript dilumpuhkan. Contoh yang menarik ialah menghantar mesej di Facebook.com.

Oleh itu, peningkatan progresif timbul sebagai tindak balas kepada kemerosotan anggun berkualiti rendah. Mereka bentuk antara muka sedemikian telah menjadi lebih mudah dan lebih berkualiti, kerana terdapat peringkat yang jelas untuk mencipta antara muka.

Dalam reka bentuk responsif terdapat konsep "mudah alih didahulukan", yang dalam beberapa cara sepadan dengan konsep peningkatan progresif, kerana ia memerlukan tindakan daripada mudah kepada kompleks, daripada skrin mudah alih ke PC desktop. Itulah sebabnya kunci kepada aplikasi reka bentuk web responsif yang betul bergantung pada keupayaan pembangun untuk menggunakan prinsip peningkatan progresif dan mudah alih terlebih dahulu.

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 tahun 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 Webkit dominasi, 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; kes individu berhak mendapat pengecualian. »- Boris dari Mozilla

Microsoft Edge juga menyasarkan penyingkiran sokongan awalan: “Microsoft juga cuba menyingkirkan awalan vendor dalam Edge. Ini bermakna 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.

Saya sudah lama tidak menulis, saya terpaksa berpindah ke tempat tanpa Internet (teruk), akibatnya saya tidak dapat menulis dalam blog. Hari ini saya ingin bercakap tentang kaedah pembangunan (layout), yang sebahagiannya digunakan dalam reka bentuk blog saya.

Versi terkini pelayar inovatif (seperti FF 3.5, Opera 10) telah memperkenalkan beberapa kesan hiasan daripada spesifikasi CSS 3 yang dicadangkan. Ketelusan, bayang-bayang dan kesan zebra (jalur) kini tersedia tanpa menggunakan JavaScript atau penanda tambahan. Tetapi sesetengah penyemak imbas lama yang masih digunakan tidak mempunyai ciri-ciri ini, dan sedih untuk berfikir bahawa anda tidak akan berpeluang menggunakan kesan hebat ini untuk beberapa tahun lagi.

Dalam artikel ini, saya akan bercakap tentang cara membuat penambahbaikan (bertambah) yang bagus dalam penyemak imbas yang menyokong ciri CSS3 dan masih menyediakan reka letak yang memuaskan untuk pengguna lain.

Apakah peningkatan progresif?

Untuk memahami konsep "penambahbaikan beransur-ansur", anda perlu memahami prinsip "degradasi anggun", yang diterangkan dengan baik oleh petikan berikut:

Kemerosotan ringan bermakna tapak anda terus berfungsi walaupun dilihat dalam penyemak imbas yang kurang optimum di mana kesan lanjutan tidak berfungsi.
Fluid Thinking, oleh Peter-Paul Koch

"Penambahbaikan tambahan" menggunakan kaedah yang sama hanya dari sisi yang bertentangan, dan bukannya bimbang tentang tapak tidak runtuh dalam penyemak imbas lama, anda perlu memikirkan kandungan terlebih dahulu dan hanya menambah ciri program moden pada reka bentuk untuk meningkatkan pengguna pengalaman, sementara susun atur keadaan asas masih berfungsi pada mesin lama. Pada masa ini, ini ialah cara terbaik untuk menggunakan ciri baharu CSS 3.

Contoh

Sebagai contoh, mari kita buat menu navigasi ringkas yang akan kelihatan lebih cantik sedikit bergantung pada sokongan CSS dalam penyemak imbas anda.

Saya ingin ambil perhatian bahawa dalam contoh ini saya tidak menggunakan grafik, penggodaman atau awalan khusus pelayar - semua penambahbaikan adalah disebabkan oleh keupayaan yang diisytiharkan. Dengan itu, beberapa perkara di bawah hanyalah untuk tujuan contoh, dan mungkin bukan pilihan terbaik untuk mencipta tapak web sebenar.

Menanda

Mari buat menu ringkas menggunakan senarai tidak tersusun (ul):

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Gaya asas

Sebagai asas, saya akan menggunakan gaya yang hanya menggunakan pemilih lapisan mudah. Ia mencipta sempadan untuk setiap elemen dan menukar latar belakang apabila melayang tetikus (onmouseover). Ini sepatutnya berfungsi dalam mana-mana penyemak imbas yang dibuat dalam 7-8 tahun yang lalu (dan mungkin lebih).

CSS adalah sangat mudah:

Ul (
warna latar belakang: biru;
bahagian bawah sempadan: 1px bertitik #999;
gaya senarai: tiada;
jidar: 15px;
lebar: 150px;
}

li(
warna latar belakang: #fff;
sempadan: 1px bertitik #999;
sempadan-bawah-lebar: 0;
fon: 1.2em/1.333 Verdana, Arial, sans-serif;
}

li a (
warna: hitam;
paparan: blok;
ketinggian: 100%;
pelapik: 0.25em 0;
text-align: tengah;
hiasan teks: tiada;
}

li a:hover (warna latar belakang: #efefef; )

Satu-satunya perkara yang pelik di sini ialah latar belakang biru

; Saya akan menerangkan perkara ini kemudian. Dengan gaya ini, kami akan mempunyai paparan asas berikut, ia akan dipaparkan dalam IE6 seperti ini:

Susun atur asas, inilah rupanya dalam IE6 dan pelayar lama yang lain.

Mengaplikasikan penambahbaikan

IE7 ialah yang pertama dalam siri pelayar IE yang menyokong semua pemilih atribut daripada CSS 2.1, yang juga biasa dalam hampir semua pelayar lain. Kita boleh menggunakan salah satu daripadanya - pemilih kanak-kanak - untuk mula bertambah baik. Memandangkan IE6 tidak menyokong pemilih kanak-kanak, ia akan mengabaikan peraturan berikut:

Badan > ul (lebar sempadan: 0; )

ul > li (
sempadan: 1px pepejal #fff;
lebar sempadan: 1px 0 0 0;
}

li > a (
warna latar belakang: #666;
warna: putih;
font-weight: tebal;
}

li:first--child a (warna: kuning; )

li > a:hover (warna latar belakang: #999; )

Dengan peraturan CSS ini, senarainya kelihatan seperti ini:



Menu kini mempunyai latar belakang berwarna dan teks tebal, dan pautan pertama diserlahkan dalam warna yang berbeza.

Beginilah cara IE7, Firefox, Safari dan Opera akan memaparkan senarai.

Mari kita lebih menekankan

Langkah seterusnya ialah meningkatkan penekanan menggunakan sifat yang tidak dikenali oleh IE: Ketelusan. Kami tidak perlu menggunakan pemilih khas untuk ini, kerana IE hanya akan melangkau harta yang tidak disokongnya:

Li (kelegapan: 0.9; )

li:hover ( kelegapan: 1; )

Gambar berikut menunjukkan cara sifat ini berfungsi dalam Opera, anda boleh melihat bahawa item senarai telah memperoleh sedikit warna biru dari latar belakang

. Pada tetikus, setiap elemen menjadi legap sepenuhnya:



Anda sudah tentu boleh menggunakan sifat penapis IE sendiri untuk kesan yang sama dalam IE. Serta awalan khusus penyemak imbas (-moz-, -webkit-) untuk sifat di bawah. Tetapi untuk tujuan pendidikan saya akan berpegang pada piawaian CSS, kerana penapis bukan harta standard, maka ia tidak sah.

Firefox 2 menyokong ketelusan, tetapi dalam pelayar kemudian kita boleh pergi lebih jauh. Dalam Safari dan Opera, kita boleh menghiasi teks menggunakan sifat bayangan teks:

Li a:hover ( text-shadow: 2px 2px 4px #333; )

Seperti yang ditunjukkan oleh imej berikut, elemen mempunyai sedikit bayang pada tuding dan kelihatan terkeluar sedikit dari halaman:



Akhir sekali, anda boleh memastikan bahawa Opera menyokong sepenuhnya pemilih CSS 3 baharu dan menambah satu lagi lapisan penambahbaikan: pembolehubah warna latar belakang menggunakan pemilih anak ke-n:

Li:nth-child(2n+1) a (warna latar belakang: #333; )

li:anak-ke-nth(n) a:legar (
warna latar belakang: #aaa;
warna: #000;
}

li:first--child > a:hover (warna: kuning; )

Kami akan melihat menu berjalur dalam Opera:



Rumusan dan kesimpulan

Imej di bawah menunjukkan cara penanda awal kelihatan dalam IE6, IE7, Firefox, Safari dan Opera, selepas menggunakan peraturan CSS yang diterangkan dalam artikel ini. Seperti yang anda lihat, apabila sokongan penyemak imbas untuk CSS menjadi lebih canggih, menu menjadi lebih bergaya dan kompleks, dan menggunakan teknik peningkatan tambahan, menu kekal berfungsi walaupun dalam penyemak imbas yang sangat lama.



Sudah tentu, banyak penyemak imbas mempunyai rentetan sifat lain yang belum saya bincangkan di sini tetapi boleh digunakan, seperti warna RGBA dan SVG sebagai warna latar belakang.

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.