Pelayar web telah ada selagi laman web ada. Malah, penyemak imbas adalah ramuan penting dalam pengalaman atau orang yang melihat tapak anda - tetapi tidak semua penyemak imbas dicipta sama. Ia sememangnya mungkin (dan sebenarnya agak mungkin) untuk mempunyai pelanggan melihat halaman web anda dalam pelayar yang sangat tua dan kehilangan ciri-ciri yang terdapat dalam pelayar yang lebih moden. Ini boleh menimbulkan masalah penting ketika anda berusaha mengembangkan laman web yang memanfaatkan kemajuan terkini dalam perancangan dan pembangunan laman web . Jika seseorang datang ke laman web anda menggunakan salah satu pelayar yang anti-pelik, dan teknik canggih terkini anda tidak berfungsi untuk mereka, anda boleh menyampaikan pengalaman yang kurang baik secara keseluruhan. Peningkatan progresif adalah strategi mengendalikan reka bentuk laman web untuk pelayar yang berbeza, iaitu pelayar lama yang tidak mempunyai sokongan moden.
Peningkatan progresif adalah satu cara untuk mereka bentuk laman web supaya lebih banyak ciri yang disokong oleh ejen pengguna, semakin banyak ciri laman web yang ada. Ia adalah bertentangan dengan strategi reka bentuk yang dikenali sebagai degradasi yang anggun . Strategi itu membina halaman untuk pelayar paling moden dahulu dan kemudian memastikan bahawa ia juga berfungsi dengan baik dengan pelayar yang kurang berfungsi - pengalaman itu "merosot dengan anggun." Peningkatan progresif bermula dengan penyemak imbas kurang berkeupayaan terlebih dahulu dan membina pengalaman dari sana.
Bagaimana Menggunakan Peningkatan Progresif
Apabila anda membuat reka bentuk web menggunakan peningkatan progresif, perkara pertama yang akan anda lakukan ialah membuat reka bentuk yang berfungsi untuk penyebut web biasa yang paling rendah. Pada terasnya, peningkatan progresif mengatakan bahawa kandungan anda harus tersedia untuk semua pelayar web, bukan hanya sub-set.Ini adalah mengapa anda bermula dengan menyokong penyemak imbas lama, ketinggalan zaman, dan kurang mampu.Jika anda membuat laman web yang berfungsi dengan baik bagi mereka, anda tahu anda telah mencipta garis dasar yang sepatutnya menyampaikan sekurang-kurangnya pengalaman yang boleh digunakan untuk semua pelawat.
Apabila bermula dengan penyemak imbas yang paling rendah terlebih dahulu, anda perlu memastikan bahawa semua HTML anda sah dan semantiknya betul. Ini akan membantu memastikan bahawa pelbagai agen pengguna terluas dapat melihat halaman dan memaparkannya dengan tepat.
Ingatlah bahawa gaya reka bentuk visual dan susun atur halaman keseluruhan ditambah dengan menggunakan helaian gaya luaran . Ini benar-benar di mana peningkatan progresif berlaku. Anda menggunakan helaian gaya untuk membuat reka bentuk tapak yang berfungsi untuk semua pelawat. Anda kemudian boleh menambah gaya tambahan untuk meningkatkan halaman sebagai agen pengguna mendapat fungsi. Semua orang mendapat gaya asas, tetapi untuk mana-mana pelayar berita yang boleh menyokong gaya yang lebih maju dan lebih moden, mereka mendapat sedikit tambahan. Anda "meningkatkan progresif" halaman untuk penyemak imbas yang boleh menyokong gaya tersebut.
Terdapat beberapa cara yang anda boleh memohon peningkatan progresif. Mula-mula, anda harus mempertimbangkan apa yang pelayar lakukan jika ia tidak memahami garis CSS - ia mengabaikannya! Ini sebenarnya berfungsi dengan baik. Sekiranya anda membuat set dasar gaya yang difahami oleh semua penyemak imbas, anda boleh menambah gaya tambahan untuk penyemak imbas baharu. Jika mereka menyokong gaya, mereka akan menggunakannya. Jika tidak, mereka akan mengabaikannya dan hanya menggunakan gaya asas tersebut. Contoh ringkas peningkatan progresif dapat dilihat dalam CSS ini:
.kandungan utama {
latar belakang: # 999;
latar belakang: rgba (153,153,153, .75);
}
Gaya ini pertama menetapkan latar belakang warna yang berwarna. Peraturan kedua menggunakan nilai warna RGBA untuk menetapkan tahap ketelusan. Jika pelayar menyokong RGBA, ia akan menimpa gaya pertama dengan yang kedua. Jika tidak, hanya yang pertama akan digunakan. Anda telah menetapkan warna asas dan kemudian menambah gaya tambahan untuk penyemak imbas lebih moden.
Menggunakan Ciri Ciri
Cara lain yang boleh anda gunakan untuk peningkatan progresif ialah dengan menggunakan apa yang dikenali sebagai "pertanyaan ciri". Ini adalah sama dengan pertanyaan media , yang merupakan bahagian penting dalam reka bentuk laman web responsif . Semasa pertanyaan media teks untuk saiz skrin tertentu, pertanyaan ciri akan menyemak untuk melihat apakah ciri tertentu disokong atau tidak. Sintaks yang anda gunakan ialah:
@supports (display: flex) {}Mana-mana gaya yang anda tambah di dalam peraturan ini hanya akan berfungsi jika penyemak imbas itu menyokong "flex", yang merupakan gaya untuk Flexbox. Anda boleh menetapkan satu set peraturan untuk semua orang dan kemudian gunakan pertanyaan ciri untuk menambah tambahan untuk penyemak imbas pilih sahaja.
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 12/13/16.