Peningkatan langkah demi langkah dengan CSS3: Dukungan untuk browser modern. Saatnya memikirkan kembali prefiks vendor CSS Teknik degradasi css bertahap

Saya bingung apa bedanya Peningkatan Bertahap dan Degradasi Anggun... Menurut saya mereka adalah satu dan sama.

bisakah Anda menjelaskan kepada saya perbedaan antara keduanya dan dalam situasi apa saya akan menggunakan salah satu dari yang lain?

8 jawaban

Mereka hampir sama, tetapi berbeda dalam konteksnya.

ada kelas browser yang disebut "browser kelas A". Ini adalah anggota khalayak biasa yang (mungkin) merupakan mayoritas pengunjung Anda. Anda akan mulai dari tingkat dasar pengguna ini. Sebut saja praktik modern terbaik.

Jika Anda menghendaki untuk memperbesar pengalaman bagi siapa saja yang secara tidak sengaja menggunakan FF3.6 atau Safari 4 atau pengembang webkit malam jagoan lain yang membuat Anda ingin melakukan hal-hal menakjubkan seperti

  • sudut membulat melalui css
  • teks berbayang (tapi tolong jangan terlalu banyak)
  • drop shadow (lihat di atas dalam tanda kurung)

Ini membuat situs Anda terlihat keren, tetapi tidak akan merusaknya. Itu peningkatan bertahap... Merangkul masa depan dalam hal praktik terbaik.

di sisi lain, situs Nintendo Anda menarik cukup banyak pengguna IE5. Kasihan Anda, tetapi Anda juga ingin memastikan mereka terus kembali. Anda dapat memberikan alternatif untuk perilaku ajax Anda dengan memasukkan skrip ajax dalam file eksternal dan jika JS mereka tidak disertakan maka tautan Anda mungkin menyegarkan seluruh halaman. Dll Dari sudut pandang praktik modern terbaik, Anda akan memastikan bahwa beberapa pasar bersejarah dilayani beberapa kemiripan dari situs fungsional... Itu degradasi anggun.

Mereka sebagian besar identik, tetapi berbeda dalam hal prioritas untuk banyak tim pengembangan: PE cukup bagus jika Anda punya waktu, tetapi GD sering perlu

Jika situs Anda terlihat sama bagusnya di semua browser, tetapi beberapa browser mendapatkan, katakanlah, kuda poni menari karena mendukung kuda poni menari, maka ini adalah peningkatan yang progresif. Ini berfungsi di semua browser, tetapi beberapa browser mendapatkan sesuatu yang ekstra. Biasanya istilah ini diterapkan ke fungsi Javascript tertentu yang dapat meningkatkan kegunaan di luar "HTML mentah".

Jika situs Anda hanya terlihat seperti yang Anda inginkan pada browser yang mendukung penuh, katakanlah, CSS3 dan IE8 - akan merender halaman yang sama tanpa, katakanlah, sudut membulat, maka itu adalah degradasi yang anggun. Situs ini memang dimaksudkan untuk peramban modern, tetapi masih digunakan di peramban lama, hanya saja tidak semewah itu.

bagaimanapun juga, mereka adalah hal yang sama, dilihat dari dua sudut pandang yang berbeda.

arah dari yang dipilih mendasarkan untuk setiap konsep berbeda.

degradasi halus dimulai pada tingkat pengalaman pengguna yang ideal dan menurun seminimal mungkin bergantung pada kemampuan agen pengguna, yang melayani agen yang tidak mendukung fitur tertentu yang digunakan oleh baseline.

peningkatan progresif dimulai dari pengalaman minimal yang luas dari konsumen dan meningkat, tergantung pada kemampuan agen konsumen, ke tingkat yang lebih mampu, memasok makanan untuk agen yang mendukung fungsi yang lebih maju daripada fungsi dasar.

Saya pikir orang dapat menggunakan kedua konsep tersebut jika waktu / anggaran memungkinkan. Jika tidak, degradasi yang anggun lebih disukai.

Maaf untuk menghidupkan kembali sesuatu yang sudah berusia lebih dari setahun, tetapi saya merasa saya dapat berkontribusi, dengan cara tertentu, pendapat saya sendiri tentang masalah ini.

sementara saya setuju dengan Alex Mcp dan menipu dalam beberapa hal, istilah degradasi anggun dan peningkatan progresif memiliki arti yang sedikit berbeda dari yang saya yakini.

degradasi anggun, banyak waktu (menurut pendapat saya), tampaknya lebih sulit untuk mengalahkan aplikasi dalam tampilan setelah itu dibangun dengan buruk di tempat pertama menurut pengalaman saya. Bagaimana seseorang membangun semacam objek javascript besar yang menyediakan pengguna dengan sesuatu yang sangat keren untuk dimainkan sampai manajer datang, memeriksa benda itu dan semua orang berlari berteriak, melempar tangan mereka ketika mereka menyadari bahwa aplikasinya adalah tidak berfungsi di 35% browser. "Seseorang lebih baik memberikan bantuan untuk ini."

Peningkatan Bertahap meskipun (dan ini istilah yang bagus untuk dikatakan juga) tampaknya lebih banyak tentang membuat sesuatu yang berfungsi, pada tingkat awal, di mana saja, menggunakan metode paling dasar yang tersedia, untuk menyediakan semua fungsionalitas yang diinginkan pengguna. Ini kemudian dapat ditambahkan dengan bantuan kecil yang rapi dan tidak mengganggu, gaya, dll. Ini benar-benar meningkatkan pengalaman pengguna aplikasi yang dimaksud, bukan hanya membuatnya hampir tidak dapat digunakan. "yang terlihat keren. Apakah berfungsi di IE6. Oh ya. Benar"

Saya pikir mungkin dengan memberikan gaya sebagai contoh dari kedua istilah di dua jawaban teratas di sini agak merindukan masalah kegunaan inti sebenarnya yang peningkatan bertahap sering memutuskan oleh alam di mana degradasi anggun mengabaikan sampai terjadi kesalahan.

Omelan sudah berakhir ...

degradasi anggun adalah praktik membuat fungsionalitas web untuk memberikan tingkat pengalaman pengguna tertentu di peramban yang lebih modern, tetapi juga akan turun dengan baik ke tingkat pengguna yang lebih rendah di peramban lama. Lapisan bawah ini tidak menyenangkan bagi pengunjung situs Anda, tetapi masih menyediakan fungsionalitas inti yang mereka gunakan untuk datang ke situs Anda; hal-hal tidak merusak mereka.

kenaikan progresif serupa, tetapi yang benar adalah sebaliknya. Anda mulai dengan membuat pengalaman pengguna dasar yang dapat diberikan oleh semua browser saat merender situs web Anda, tetapi Anda juga membuat fungsionalitas yang lebih canggih yang secara otomatis akan tersedia untuk browser yang dapat menggunakannya.

dengan kata lain, degradasi anggun dimulai dengan status quo kompleksitas dan mencoba memperbaiki pengalaman yang lebih sedikit, sedangkan peningkatan progresif dimulai dengan contoh kerja yang sangat mendasar dan memungkinkan perluasan berkelanjutan untuk lingkungan masa depan. Untuk mempermalukan dengan anggun berarti melihat ke belakang sedangkan untuk meningkat secara progresif berarti melihat ke depan sambil menjaga kaki Anda tetap kokoh.

Degradasi Anggun

degradasi anggun kemampuan komputer, mesin, sistem elektronik, atau jaringan untuk mempertahankan fungsionalitas terbatas bahkan ketika sebagian besar fungsi tersebut dimusnahkan atau dinonaktifkan. Tujuan degradasi yang anggun adalah untuk mencegah kegagalan bencana.

degradasi anggun adalah salah satu solusi. Ini adalah praktik membangun situs web atau aplikasi, sehingga memberikan tingkat pengalaman pengguna yang baik di peramban modern. Namun, hal ini menurun dengan baik di browser lama. Sistemnya mungkin tidak sebagus atau secantik itu, tetapi fungsionalitas dasarnya akan berfungsi pada sistem yang lebih lama.

contoh sederhananya adalah menggunakan PNG transparan Alpha 24-bit. Gambar-gambar ini dapat ditampilkan di browser modern tanpa masalah. IE5.5 dan IE6 akan menampilkan gambar, tetapi efek Transparansi tidak akan berfungsi (dapat dibuat berfungsi jika diperlukan). Browser lama yang tidak mendukung PNG akan menampilkan teks alt atau spasi.

pengembang yang menerima penurunan kualitas sering kali menunjukkan tingkat dukungan browser mereka, seperti browser tingkat 1 (pengalaman terbaik) dan browser tingkat 2 (pengalaman terdegradasi).

Peningkatan Bertahap

peningkatan bertahap adalah strategi desain web yang menekankan aksesibilitas, markup HTML semantik, dan stylesheet eksternal serta teknologi skrip. Peningkatan Progresif menggunakan teknologi web dalam mode berlapis yang memungkinkan semua orang mengakses konten dasar dan fungsionalitas halaman web menggunakan browser atau koneksi internet apa pun, dan memberikan versi halaman yang disempurnakan kepada mereka yang memiliki perangkat lunak browser yang lebih canggih atau bandwidth yang lebih tinggi.

peningkatan progresif mirip dengan konsep kemunduran anggun tetapi sebaliknya. Situs web atau aplikasi akan membuat pengalaman pengguna dasar untuk sebagian besar browser. Fungsionalitas yang lebih canggih akan ditambahkan jika browser mendukungnya.

peningkatan progresif tidak mengharuskan kami untuk memilih browser yang didukung atau kembali ke tata letak berbasis tabel. Kami memilih tingkat teknologi, yaitu browser harus mendukung HTML 4.01 dan permintaan / tanggapan halaman standar.

kembali ke contoh gambar kita, kita dapat memutuskan bahwa aplikasi kita harus bekerja di semua browser grafis. Kami dapat menggunakan gambar GIF berkualitas lebih rendah secara default, tetapi menggantinya dengan png 24-bit jika browser mendukungnya.

tautan

Wikipedia: Peningkatan Bertahap dan

Daftar Isi:

Awalan -webkit- sangat dominan di CSS sehingga beberapa situs tidak berfungsi dengan baik tanpanya. Hal ini menunjukkan bahwa pengembang tidak mengikuti praktik terbaik dalam beberapa tahun terakhir, dan ini telah menyebabkan keputusan yang tidak menguntungkan tetapi hampir dipaksakan di pihak Mozilla. Di Firefox versi 46 atau 47 (ini April atau Mei 2016), Mozilla berencana untuk menerapkan dukungan untuk awalan -webkit- non-standar untuk meningkatkan kompatibilitas Firefox dengan situs yang banyak menggunakan -webkit (biasanya situs seluler).

Namun, pengembang menggunakan awalan untuk memanfaatkan kemampuan browser terbaru secepat mungkin. Awalan menyebabkan kebingungan dengan dominasi WebKit, namun juga mendorong web ke depan dengan kecepatan yang dipercepat.

Pendekatan Mozilla dan Microsoft aman untuk sebagian besar situs. Banyak situs akan menggunakan awalan -moz- atau tidak perlu melakukan apa pun agar kompatibel dengan pembaruan Firefox di masa mendatang. Tetapi sebagai pengembang web profesional, kita harus mempertimbangkan dan memahami dengan cermat implikasi dari hal ini. Anda tahu pasti situs mana yang mungkin terpengaruh oleh pembaruan ini.

Jadi, inilah waktunya untuk memikirkan kembali pendekatan awalan dan menguji situs dengannya.

Awalan yang didukung

Ada sejumlah awalan -webkit- yang dapat diimplementasikan Mozilla. Berdasarkan data yang saya kumpulkan, Mozilla tidak berusaha mencocokkan daftar properti prefiks yang didukung dengan daftar properti Edge, karena tidak semuanya diperlukan untuk kompatibilitas mesin tata letak.

Pengembang Firefox juga dekat dengan pendekatan serupa:

Tren saat ini di Mozilla adalah menghindari prefiks vendor dengan menonaktifkan properti off-the-shelf dan menggunakan versi non-prefiks jika cukup stabil. Ini adalah kebijakan umum: pengecualian dimungkinkan dalam beberapa kasus - Boris dari Mozilla

Microsoft Edge juga akan menghapus prefiks vendor:

“Microsoft juga ingin melepaskan prefiks vendor di Edge. Ini berarti bahwa pengembang yang ingin menggunakan fitur khusus HTML dan CSS tidak akan menggunakan awalan khusus untuk Edge. Sebaliknya, mereka hanya akan menulis kode sesuai dengan standar. ”- Mashable

Tidak akan ada lagi degradasi bertahap berdasarkan prefiks

Perpindahan dari awalan vendor ini berarti satu hal - degradasi bertahap dengan awalan vendor tidak memiliki prospek.

Penggunaan prefiks vendor untuk menerapkan gaya pada browser tertentu (misalnya, hanya untuk Chrome) bukanlah tujuan pengenalannya; rekomendasi untuk pengembang selalu menggunakan semua prefiks (-webkit- to -o-). Jika Anda menggunakan fitur yang bergantung pada properti awalan dan menggunakan awalan untuk menurunkan desain Anda secara bertahap di browser lain, ini tidak lagi berfungsi.

Kesimpulan

Waktu berubah. Dominasi WebKit tanpa disadari telah menyebabkan masalah ketidakcocokan, yang memaksa vendor browser lain untuk mengimplementasikan awalan -webkit-. Masalah ini akan berakhir saat vendor browser menjauh dari prefiks vendor, tetapi untuk saat ini, pengembang harus memastikan bahwa prefiks tidak menyebabkan hasil yang tidak diharapkan di browser non-WebKit.

Industri desain web terus berubah, sebagian karena browser web dan perangkat terus berubah. Karena pekerjaan yang kami lakukan sebagai desainer web dan pengembang dilihat melalui browser web, pekerjaan kami akan selalu memiliki hubungan simbiosis dengan perangkat lunak ini.

Perubahan pada browser web

Salah satu tantangan yang selalu dihadapi perancang dan pengembang situs web tidak hanya perubahan di browser web, tetapi berbagai browser web berbeda yang akan digunakan untuk mengakses situs web mereka. Akan sangat bagus jika semua pengunjung situs menggunakan perangkat lunak terbaru dan terhebat, tetapi ini tidak pernah terjadi (dan mungkin tidak akan pernah).

Beberapa pengunjung situs Anda akan menjelajahi web dengan browser yang sangat usang dan fitur yang hilang dari browser yang lebih modern. Misalnya, versi lama browser Microsoft Internet Explorer telah lama menjadi masalah bagi banyak profesional web. Meskipun perusahaan telah menghentikan dukungan untuk beberapa browser tertuanya, masih ada orang yang akan menggunakannya - orang yang mungkin ingin Anda ajak berurusan dan berkomunikasi.

Definisi "degradasi anggun"

Kenyataannya adalah bahwa orang-orang yang menggunakan peramban web usang ini seringkali bahkan tidak tahu bahwa mereka memiliki perangkat lunak yang usang atau bahwa pengalaman internet mereka dapat disusupi karena pilihan perangkat lunak mereka. Bagi mereka, peramban usang ini adalah apa yang telah mereka gunakan untuk mengakses situs web sejak lama. Dari perspektif pengembang web, kami ingin memastikan bahwa kami dapat memberikan pengalaman yang bermanfaat kepada pelanggan ini, serta membuat situs web yang berfungsi dengan baik di peramban dan perangkat yang lebih modern dan kaya fitur yang tersedia saat ini.

"Degradasi anggun" adalah strategi untuk menangani desain halaman web untuk browser yang berbeda, baik lama maupun baru.

Dimulai dengan browser modern

Desain situs web yang dibuat untuk degradasi bertahap dikembangkan terutama dengan mempertimbangkan browser modern. Situs ini dirancang untuk memanfaatkan kemampuan peramban web modern ini, yang banyak di antaranya "diperbarui secara otomatis" sehingga orang selalu menggunakan versi terbaru. Namun, situs web yang menurunkan derajat dengan baik juga bekerja secara efisien untuk peramban lama. Saat browser yang lebih lama dan kurang berfungsi ini melihat situs, situs tersebut akan menurun saat masih berfungsi, tetapi mungkin dengan fitur yang lebih sedikit atau elemen tampilan visual lainnya. Meskipun konsep menyediakan situs yang kurang berfungsi atau tidak terlalu menarik ini mungkin tampak aneh bagi Anda, kenyataannya orang tidak akan tahu bahwa mereka hilang. Mereka tidak akan membandingkan situs yang mereka lihat dengan "versi terbaik", sehingga selama situs tersebut berfungsi sesuai keinginan mereka dan tidak tampak rusak secara fungsional atau visual, Anda akan berada dalam kondisi yang baik.

Perbaikan progresif

Konsep degradasi bertahap sangat mirip dengan konsep desain web lain yang mungkin pernah Anda dengar - peningkatan progresif. Perbedaan utama antara strategi degradasi dan strategi peningkatan progresif adalah tempat Anda memulai desain. Jika Anda memulai dengan penyebut umum terendah dan kemudian menambahkan fungsionalitas browser yang lebih modern ke halaman web Anda, Anda menggunakan peningkatan progresif. Jika Anda memulai dengan fitur paling mutakhir dan mutakhir, lalu memperkecil, Anda akan menggunakan degradasi bertahap. Pada akhirnya, situs web yang dihasilkan cenderung memberikan pengalaman yang sama, apakah Anda menggunakan peningkatan progresif atau degradasi bertahap. Sungguh, inti dari kedua pendekatan ini adalah membuat situs yang berfungsi baik untuk peramban modern sambil tetap memberikan pengalaman yang ramah pengguna untuk peramban web lama dan klien yang terus menggunakannya.

Penurunan kualitas tidak berarti Anda memberi tahu pembaca Anda, "Unduh peramban terbaru."

Salah satu alasan mengapa banyak perancang modern tidak menyukai pendekatan degradasi yang anggun adalah karena pendekatan ini sering kali mengharuskan pembaca untuk memuat browser paling modern agar laman berfungsi. Ini bukanlah degradasi yang anggun. Jika Anda ingin menulis "muat browser X agar fitur ini berfungsi", Anda meninggalkan area degradasi secara bertahap dan beralih ke desain yang berpusat pada browser. Ya, tidak diragukan lagi membantu pengunjung situs web beralih ke browser yang lebih baik, tetapi ini sering ditanyakan (ingat, banyak orang tidak mengerti cara mengunduh browser baru, dan permintaan Anda untuk melakukannya bisa menakutkan). mereka pergi). Jika Anda benar-benar ingin bisnis mereka memberi tahu mereka bahwa mereka meninggalkan situs Anda untuk mengunduh perangkat lunak yang lebih baik, hal ini tidak mungkin dilakukan. Jika situs Anda tidak memiliki fungsi inti yang membutuhkan versi browser tertentu atau lebih tinggi, download paksa sering kali melanggar pengalaman pengguna dan harus dihindari.

Aturan praktis yang baik adalah mengikuti aturan yang sama untuk kerusakan bertahap seperti untuk perbaikan progresif:

  • Menulis sesuai standar HTML yang valid
  • Gunakan lembar gaya eksternal untuk desain dan tata letak Anda
  • Gunakan skrip yang ditautkan secara eksternal untuk interaktivitas
  • Pastikan konten dapat diakses bahkan oleh browser tingkat rendah tanpa CSS atau JavaScript

Dengan mengingat proses ini, Anda dapat keluar dan membuat desain paling modern yang Anda bisa! Pastikan saja ini berfungsi di browser yang kurang berfungsi saat masih berfungsi.

Seberapa jauh Anda harus pergi?

Satu pertanyaan yang dimiliki banyak pengembang web adalah seberapa jauh Anda harus mendukung versi browser. Tidak ada jawaban yang tepat dan kering untuk pertanyaan ini. Itu tergantung pada situs itu sendiri. Jika Anda melihat analisis lalu lintas di situs, Anda dapat melihat browser mana yang digunakan untuk mengunjungi situs itu. Jika Anda melihat persentase orang yang signifikan menggunakan browser lama tertentu, Anda mungkin ingin mendukung browser tersebut atau berisiko kehilangan bisnis ini. Jika Anda melihat analitik Anda dan melihat bahwa tidak ada orang yang menggunakan versi lama browser, Anda mungkin dapat memutuskan untuk tidak khawatir tentang sepenuhnya mendukung browser lama ini dan mengujinya. Jadi, jawaban sebenarnya untuk pertanyaan seberapa jauh situs Anda membutuhkan dukungan adalah "tidak peduli seberapa jauh analis Anda memberi tahu Anda apa yang digunakan pelanggan Anda."

Diedit oleh Jeremy Girard.

Tentu saja, Internet Explorer mengandung sejumlah besar bug dalam versi yang berbeda, tetapi dengan bantuan komentar bersyarat Anda dapat melawannya, mencapai penghapusannya. Tapi yang tidak bisa diperbaiki adalah bahwa IE sudah sangat ketinggalan zaman. Sementara browser lain menyertakan lebih banyak properti CSS3, mendukung berbagai teknologi bermodel baru, IE menandai waktu. Rilis IE9 tidak akan menyelesaikan masalah, versi sebelumnya tidak akan menguap dalam semalam. Dalam situasi seperti itu, solusi terbaik adalah degradasi yang anggun - prinsip mempertahankan pengoperasian saat sebagian fungsionalitas hilang.

Mari kita lihat trik ini dengan contoh kecil yang menampilkan teks dalam blok dan tombol. Blok dan tombol memiliki sudut membulat, bayangan kecil juga ditambahkan ke blok. Sejauh ini, browser untuk CSS3 terutama menggunakan properti tertentu dengan awalannya sendiri:

  • Firefox - properti yang dimulai dengan -moz-;
  • Safari dan Chrome - properti yang dimulai dengan -webkit-;
  • Opera - properti yang dimulai dengan -o-.

Versi berbeda dari browser ini dapat memahami beberapa properti dengan atau tanpa prefiks, oleh karena itu, untuk universalitas, mereka menambahkan beberapa properti sekaligus. Jadi, untuk membuat sudut membulat kita membutuhkan gaya berikut.

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

Meskipun penggunaan properti ini akan menyebabkan CSS tidak valid, dalam hal ini lebih penting untuk bekerja di browser Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, serta di versi yang lebih lama. Contoh 1 menunjukkan bagaimana menggunakan properti CSS3 untuk membuat bayangan jatuh dan sudut membulat.

Contoh 1. Blok dengan bayangan

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

Blok

Anda harus melalui 20 pertanyaan, yang dipilih secara acak dari database. Untuk lulus tes, cukup menjawab dengan benar setidaknya 75% dari pertanyaan yang diajukan (15 pertanyaan atau lebih).



Hasil contoh ditunjukkan pada Gambar. 1.

Angka: 1. Blokir tampilan di Safari

Contoh yang sama di IE8 dan di bawahnya ditunjukkan pada Gambar. 2.

Angka: 2. Tampilan blok di IE8

Meskipun tampilan elemen bervariasi secara mendetail, fungsionalitas halaman secara keseluruhan tetap ada. Tombolnya bisa ditekan, teksnya tetap sama termasuk warna dan background nya, tidak ada kesalahan tampilan. Faktanya, satu-satunya perbedaan adalah pada hal-hal kecil yang berfungsi dekoratif, bukan fungsi terapan. Semua prinsip degradasi yang anggun terpenuhi.

Apa yang diberikan pendekatan ini dalam praktiknya?

  • Memungkinkan Anda untuk secara aktif menggunakan properti dekoratif CSS3 tanpa melihat ke browser.
  • Memotivasi untuk menerapkan berbagai efek CSS3.
  • Itu membuat hidup seorang pengembang jauh lebih mudah, karena dia tidak lagi harus mencari solusi untuk browser yang sudah ketinggalan zaman.
  • Mempercepat produktivitas kerja.

Tentu saja, degradasi yang anggun tidak selalu berlaku. Jika persyaratan untuk tata letak menunjukkan dukungan untuk versi yang lebih lama, maka Anda harus mencari solusi alternatif, misalnya, menggunakan gambar untuk sudut membulat. Tetapi untuk sebagian besar, persyaratan untuk tata letak ditetapkan tanpa memperhitungkan situasi umum. Dan jika kita membandingkan semua keuntungan dari degradasi yang anggun dengan kerugian yang hanya terwujud dalam kenyataan bahwa browser yang sudah ketinggalan zaman, khususnya IE8, tidak menampilkan halaman "dengan baik", maka simpati akan berada di sisi kemajuan.

Sudah lama saya tidak menulis, saya harus pindah ke suatu tempat tanpa internet (itu ngeri), akibatnya saya tidak bisa menulis ke blog. Hari ini saya ingin berbicara tentang metode pengembangan (tata letak), yang sebagian digunakan dalam desain blog saya.

Versi terbaru dari browser inovatif (seperti FF 3.5, Opera 10) telah memperkenalkan beberapa efek dekoratif dari spesifikasi CSS 3. Transparansi, bayangan dan efek zebra (striping) sekarang tersedia tanpa JavaScript atau markup tambahan. Tetapi beberapa browser lama yang masih menggunakan properti ini tidak melakukannya, dan akan sangat menyedihkan jika Anda berpikir bahwa Anda tidak akan memiliki kesempatan untuk menggunakan efek yang luar biasa ini selama beberapa tahun lagi.

Pada artikel ini saya akan berbicara tentang cara membuat perbaikan yang bagus (bertahap) di browser yang mendukung fitur CSS3 dan pada saat yang sama menampilkan tata letak yang memuaskan pengguna lain.

Apa itu peningkatan progresif?

Untuk memahami konsep "peningkatan bertahap", seseorang harus memahami prinsip "penurunan yang anggun", yang dijelaskan dengan baik oleh kutipan berikut:

Sedikit degradasi berarti situs Anda terus berfungsi meskipun dilihat di browser yang kurang optimal, di mana efek lanjutan tidak berfungsi.
Fluid Thinking, oleh Peter-Paul Koch

"Perbaikan bertahap" menggunakan metode yang sama hanya dari sisi yang berlawanan, alih-alih menjaga agar situs tidak berantakan di browser lama, Anda harus terlebih dahulu memikirkan konten dan hanya menambahkan fitur program modern ke desain untuk meningkatkan pengalaman pengguna, sementara status dasar tata letak masih berfungsi pada mesin lama. Saat ini cara terbaik untuk menerapkan fitur baru CSS 3.

Contoh

Sebagai contoh, mari kita buat menu navigasi sederhana yang terlihat sedikit lebih cantik bergantung pada dukungan CSS di browser apa pun.

Saya ingin mencatat bahwa dalam contoh ini saya tidak menggunakan grafik, peretasan, atau awalan khusus browser - semua peningkatan disebabkan oleh kemampuan yang dinyatakan. Dengan mengingat hal itu, beberapa hal di bawah ini hanya sebagai contoh, dan mungkin bukan pilihan terbaik untuk membuat situs web yang sebenarnya.

Markup

Mari buat menu sederhana menggunakan unordered list (ul):

Gaya dasar

Sebagai dasar, saya akan menggunakan gaya yang hanya menggunakan pemilih pewarisan sederhana. Ini membuat perbatasan pada setiap elemen dan mengubah latar belakang saat gerakan mouse (onmouseover). Ini dapat bekerja di semua browser yang dibuat dalam 7-8 tahun terakhir (dan mungkin lebih).

CSS sangat sederhana:

Ul (
warna latar belakang: biru;
batas bawah: 1px titik-titik # 999;
list-style: tidak ada;
margin: 15px;
lebar: 150px;
}

li (
background-color: #fff;
perbatasan: 1px titik-titik # 999;
lebar batas bawah: 0;
font: 1.2em / 1.333 Verdana, Arial, sans-serif;
}

li a (
warna hitam;
tampilan: blok;
tinggi: 100%;
bantalan: 0.25em 0;
text-align: center;
dekorasi-teks: tidak ada;
}

li a: hover (background-color: #efefef;)

Satu-satunya keanehan di sini adalah latar belakang biru

    ; Saya akan menjelaskannya nanti. Dengan gaya ini, kita akan memiliki tampilan dasar berikut, yang akan dirender di IE6 seperti ini:

    Tata letak dasar seperti yang akan terlihat di IE6 dan browser lama lainnya.

    Menerapkan perbaikan

    IE7 adalah yang pertama dalam seri browser IE yang mendukung semua pemilih atribut CSS 2.1, yang umum di hampir semua browser lainnya. Kita dapat menggunakan salah satunya - pemilih anak - untuk mulai meningkatkan. Karena IE6 tidak mendukung pemilih anak, maka IE6 akan mengabaikan aturan berikut:

    Body\u003e ul (lebar batas: 0;)

    ul\u003e li (
    batas: 1px solid #fff;
    lebar batas: 1px 0 0 0;
    }

    li\u003e a (
    warna-latar belakang: # 666;
    warna putih;
    font-weight: bold;
    }

    li: pertama - anak a (warna: kuning;)

    li\u003e a: hover (warna-latar: # 999;)

    Dengan aturan CSS ini, daftarnya terlihat seperti ini:

    Menu sekarang memiliki latar belakang berwarna dan teks tebal, dan tautan pertama disorot dengan warna berbeda.

    Ini akan menampilkan daftar IE7, Firefox, Safari dan Opera.

    Mari kita lebih menekankan

    Langkah selanjutnya adalah meningkatkan penekanan dengan menggunakan properti yang tidak dikenali IE: Opacity. Kami tidak perlu menggunakan penyeleksi khusus untuk ini, karena IE hanya akan melewati properti yang tidak didukung:

    Li (opasitas: 0,9;)

    li: hover (opacity: 1;)

    Gambar berikut menunjukkan bagaimana properti ini bekerja dalam opera, Anda dapat melihat bahwa item daftar memperoleh sedikit warna biru dari latar belakang.

      ... Saat gerakan mouse, setiap elemen menjadi buram sepenuhnya:

      Anda tentu saja dapat menggunakan properti filter IE untuk efek yang sama di IE. Serta awalan khusus browser (-moz-, -webkit-) untuk properti di bawah ini. Tetapi untuk tujuan pendidikan saya akan tetap menggunakan standar CSS karena filter tidak standar. properti, maka itu tidak valid.

      Firefox 2 mendukung transparansi, tetapi di browser terbaru kami dapat melangkah lebih jauh. Di Safari dan Opera, kita dapat menghias teks menggunakan properti text-shadow:

      Li a: hover (teks-bayangan: 2px 2px 4px # 333;)

      Seperti yang ditunjukkan gambar berikut, elemen mendapat sedikit bayangan saat mengarahkan kursor dan tampak sedikit menonjol dari halaman:

      Terakhir, kami dapat menjaga dukungan penuh Opera untuk pemilih CSS 3 baru dan menambahkan lapisan perbaikan lainnya: warna latar belakang variabel menggunakan pemilih anak ke-n:

      Li: n-anak (2n + 1) a (warna latar: # 333;)

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

      li: pertama - anak\u003e a: hover (warna: kuning;)

      Kami akan melihat menu bergaris di Opera:

      Ringkasan dan kesimpulan

      Gambar di bawah ini menunjukkan bagaimana markup awal terlihat di IE6, IE7, Firefox, Safari dan Opera setelah menerapkan aturan CSS yang dijelaskan di artikel ini. Seperti yang Anda lihat, saat dukungan browser untuk CSS menjadi lebih halus, menu menjadi lebih bergaya dan canggih, dan menggunakan teknik peningkatan bertahap, menu tetap berfungsi bahkan di browser yang sangat lama.

      Tentu saja, banyak browser memiliki banyak properti lain yang belum saya bahas di sini yang dapat digunakan, seperti warna RGBA dan SVG sebagai warna latar belakang.