Browser web telah ada selama situs web ada. Faktanya, browser adalah unsur penting dalam pengalaman atau orang yang melihat situs Anda - tetapi tidak semua browser dibuat sama. Sangat mungkin (dan sebenarnya cukup mungkin) untuk memiliki pelanggan yang melihat halaman web Anda di browser yang sangat tua dan hilang fitur yang ditemukan di browser yang lebih modern. Ini dapat menimbulkan masalah yang signifikan saat Anda berusaha mengembangkan situs web yang memanfaatkan kemajuan terbaru dalam desain dan pengembangan situs web . Jika seseorang datang ke situs Anda menggunakan salah satu dari peramban-peramban kuno itu, dan teknik canggih terbaru Anda tidak berfungsi untuk mereka, Anda dapat memberikan pengalaman yang buruk secara keseluruhan. Peningkatan progresif adalah strategi penanganan desain halaman web untuk berbagai browser, yaitu browser lama yang kurang dalam dukungan modern.
Peningkatan progresif adalah cara mendesain laman web sehingga semakin banyak fitur yang didukung oleh agen pengguna, semakin banyak fitur yang akan dimiliki laman web. Ini adalah kebalikan dari strategi desain yang dikenal sebagai degradasi yang anggun . Strategi itu membangun halaman untuk browser paling modern terlebih dahulu dan kemudian memastikan bahwa mereka juga berfungsi dengan baik dengan browser yang kurang fungsional - bahwa pengalaman "menurun dengan anggun." Peningkatan progresif dimulai dengan browser yang kurang mampu terlebih dahulu dan membangun pengalaman dari sana.
Cara Menggunakan Peningkatan Progresif
Ketika Anda membuat desain web menggunakan peningkatan progresif, hal pertama yang akan Anda lakukan adalah membuat desain yang berfungsi untuk denominator umum terendah dari browser web. Pada intinya, peningkatan progresif mengatakan bahwa konten Anda harus tersedia untuk semua browser web, bukan hanya sub-set. Inilah sebabnya mengapa Anda mulai dengan mendukung browser yang lama, kedaluwarsa, dan kurang mampu ini. Jika Anda membuat situs yang berfungsi dengan baik bagi mereka, Anda tahu Anda telah membuat baseline yang harus memberikan setidaknya pengalaman yang dapat digunakan untuk semua pengunjung.
Ketika memulai dengan browser yang paling tidak mampu terlebih dahulu, Anda akan ingin memastikan bahwa semua HTML Anda harus valid dan semantik benar. Ini akan membantu memastikan bahwa berbagai agen pengguna terluas dapat melihat halaman dan menampilkannya secara akurat.
Ingat bahwa gaya desain visual dan tata letak halaman secara keseluruhan ditambahkan dengan menggunakan style sheet eksternal . Ini benar-benar di mana peningkatan progresif terjadi. Anda menggunakan style sheet untuk membuat desain situs yang berfungsi untuk semua pengunjung. Anda kemudian dapat menambahkan gaya tambahan untuk meningkatkan halaman sebagai agen pengguna mendapatkan fungsionalitas. Setiap orang mendapatkan gaya dasar, tetapi untuk setiap browser berita yang dapat mendukung gaya yang lebih canggih dan lebih modern, mereka mendapatkan beberapa tambahan. Anda "meningkatkan progresif" halaman untuk browser yang dapat mendukung gaya tersebut.
Ada beberapa cara yang dapat Anda gunakan untuk peningkatan progresif. Pertama, Anda harus mempertimbangkan apa yang dilakukan browser jika tidak memahami baris CSS - mengabaikannya! Ini benar-benar menguntungkan Anda. Jika Anda membuat kumpulan gaya dasar yang dipahami semua peramban, Anda kemudian dapat menambahkan gaya tambahan untuk peramban baru. Jika mereka mendukung gaya, mereka akan menerapkannya. Jika tidak, mereka akan mengabaikannya dan hanya menggunakan gaya dasar tersebut. Contoh sederhana peningkatan progresif dapat dilihat di CSS ini:
.isi utama {
latar belakang: # 999;
latar belakang: rgba (153,153,153, .75);
}
Gaya ini pertama-tama mengatur latar belakang ke warna abu-abu. Aturan kedua menggunakan nilai warna RGBA untuk mengatur tingkat transparansi. Jika browser mendukung RGBA, browser akan mengesampingkan gaya pertama dengan yang kedua. Jika tidak, hanya yang pertama yang akan diterapkan. Anda telah menetapkan warna garis dasar dan kemudian menambahkan gaya ekstra untuk browser yang lebih modern.
Menggunakan Pertanyaan Fitur
Cara lain Anda dapat menerapkan peningkatan progresif adalah dengan menggunakan apa yang dikenal sebagai "kueri fitur". Ini mirip dengan kueri media , yang merupakan bagian penting dari desain situs web yang responsif . Sementara teks permintaan media untuk ukuran layar tertentu, fitur queri akan memeriksa untuk melihat apakah fitur tertentu didukung atau tidak. Sintaks yang akan Anda gunakan adalah:
@supports (display: flex) {}Gaya apa pun yang Anda tambahkan di dalam aturan ini hanya akan berfungsi jika browser itu didukung "flex", yang merupakan gaya untuk Flexbox. Anda dapat menetapkan satu set aturan untuk semua orang dan kemudian menggunakan kueri fitur untuk menambahkan tambahan hanya untuk browser tertentu.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 12/13/16.