Penjelasan mendetail tentang peningkatan progresif CSS (Cascading Style Sheets).

Ada banyak cara untuk memasukkan peningkatan progresif ke dalam pekerjaan Anda dengan Cascading Style Sheets (CSS). Artikel ini akan membahas beberapa cara yang lebih berhasil dan mempertimbangkan cara lain untuk menyempurnakan situs Anda secara bertahap.

Organisasi lembar gaya

Banyak desainer dan pengembang web tidak terlalu memikirkan cara memperkenalkan style sheet ke dalam dokumen, namun sebenarnya ini adalah sebuah seni. Dengan pendekatan yang tepat, Anda dapat langsung memperoleh banyak manfaat dari peningkatan progresif.

Gunakan beberapa style sheet

Memisahkan sedikit gaya Anda dapat membawa banyak manfaat. Tentu saja, stylesheet dengan lebih dari 1500 baris agak sulit untuk dipelihara, dan membaginya menjadi beberapa stylesheet dapat meningkatkan alur kerja (dan menghemat tenaga Anda). Ada manfaat lain yang jarang disebutkan: membantu memperoleh efek presentasi yang lebih konsisten pada jenis media sasaran (Terjemahan: mengacu pada berbagai jenis media seperti komputer, printer, televisi, telepon seluler, dll.).

File main.css berisi semua aturan gaya situs. Pertimbangkan untuk membaginya menjadi lembar gaya independen yang berisi tipografi, tata letak, dan warna, diberi nama sesuai: type.css, layout.css, color.css.


(Ilustrasi: Cara membagi satu style sheet menjadi beberapa style sheet terkait)

Setelah pemisahan di atas selesai, Anda dapat menggunakan beberapa trik ajaib untuk secara otomatis memberikan pengalaman "fidelitas rendah" untuk browser lama (seperti IE5/Mac) dan banyak browser yang tidak memiliki dukungan kuat untuk tata letak CSS. Bagaimana cara melakukannya? Itu semua tergantung pada bagaimana Anda mengimpor file. Asumsikan main.css diperkenalkan melalui elemen link:


Pertama, bagi baris referensi di atas menjadi tiga stylesheet terkait:


Di masa lalu, banyak pengembang menetapkan nilai media ke "layar" atau "proyeksi", sehingga gaya tata letak sepenuhnya tidak valid di Netscape 4.x (Anotasi: Netscape 4.x tidak mendukung tata letak yang rumit seperti mengambang dan pemosisian). Namun, ada solusi yang lebih baik. Sebelum menjelaskan metode ini secara detail, mari kita lihat Jenis Media Alternatif.

Jenis media opsional

Peningkatan progresif terutama berfokus pada konten, dan kami ingin menghadirkan pengalaman yang "ditingkatkan" ke semua perangkat yang mendukung tampilan konten. Jadi, penting untuk mempertimbangkan perangkat di luar browser, seperti perangkat cetak dan seluler.

Sayangnya, pasar perangkat seluler masih terfragmentasi dan belum matang (jangan naif jika berpikir bahwa semua browser perangkat genggam akan menampilkan gaya tipe media yang menargetkan "layar"). Akibatnya, pembahasan rinci tentang peningkatan progresif di semua media akan memakan banyak halaman, jika bukan sebuah buku. Namun jangan putus asa: di dunia seluler, perbedaan-perbedaan mulai menyatu, dan beberapa orang yang sangat pintar mulai mengerahkan sumber daya untuk membantu kita berkembang. Namun untuk menghemat waktu dan tenaga, kami akan fokus pada perangkat pencetakan.

Biasanya, kita perlu menggunakan elemen tautan lain untuk menambahkan gaya pencetakan:


Berdasarkan konvensi, style sheet di atas berisi semua aturan terkait pencetakan, termasuk aturan tata letak dan warna. Khusus untuk layout, sebagian besar aturan di style sheet kemungkinan besar disalin dari main.css. Dengan kata lain, ini menghasilkan banyak kode duplikat.

Anda dapat melihat manfaat dari memisahkan gaya publikasi dan warna dari gaya tata letak: kita tidak lagi memerlukan aturan berulang tersebut dalam lembar gaya cetak. Selain itu, tip organisasi lainnya dapat digunakan untuk meningkatkan kegunaan situs, serta menyembunyikan gaya tata letak tertentu dari browser yang bermasalah.

Melihat kembali stylesheet kami, pertimbangkan kode berikut:


Kami tidak mendeklarasikan tipe media, jadi Netscape 4.x akan membaca semua style dalam ketiga file ini. Namun, browser Netscape memahami CSS dasar, dan kita dapat memanfaatkannya. Kita dapat mengatur gaya kita lebih lanjut dengan memindahkan semua gaya yang ada di layout.css ke lembar gaya baru - yang diberi nama screen.css. Terakhir, perbarui konten di layout.css untuk mengimpor screen.css, sehingga NS4.x dan browser saudaranya tidak lagi pintar (karena tidak memahami arahan @import). (Catatan terjemahan: Yang penulis bicarakan di sini adalah memindahkan semua konten di layout.css ke screen.css, lalu memperkenalkan screen.css melalui @import di layout.css. Menurut saya cara terbaik adalah menambahkannya ke layout.css Pertahankan gaya tata letak paling dasar yang juga dapat dipahami oleh NS4.x, dan pindahkan gaya tata letak lanjutan lainnya ke screen.css).


Ada beberapa ruang untuk perbaikan - media yang harus dideklarasikan oleh target stylesheet, yang kita lakukan dengan menambahkan jenis media ke deklarasi @import:


Masalahnya adalah browser IE7 dan di bawahnya tidak memahami sintaks ini dan oleh karena itu mengabaikan style sheet di atas. Jika Anda ingin memberikan style sheet di atas ke browser ini (yang sering diinginkan), Anda dapat dengan mudah melakukannya menggunakan komentar bersyarat, yang mana akan Diuraikan di bawah ini. Jika Anda memiliki mata yang setajam elang, Anda mungkin telah memperhatikan bahwa tanda kutip tunggal (') digunakan sebagai pengganti tanda kutip ganda (") di kedua sisi nama style sheet. Trik kecil ini memungkinkan IE5/Mac mengabaikan gaya tersebut sheet.IE5/Mac Kemampuan tata letak CSS sangat lemah (terutama dukungan untuk mengambang dan pemosisian), dan menyembunyikan aturan tata letak darinya dapat diterima. Lagi pula, mereka masih dapat memperoleh informasi warna dan tata letak, yang dalam beberapa kasus sudah cukup .

Dengan menggunakan teknik yang sama, Anda dapat mengimpor file print.css (yang, seperti yang Anda duga, berisi aturan khusus untuk tata letak pencetakan).


Kini kami tidak hanya memiliki style sheet yang ditata dengan indah, kami juga memiliki metode efektif untuk menyempurnakan desain situs Anda secara bertahap.


(Ilustrasi tentang bagaimana beberapa style sheet berhubungan satu sama lain dan bagaimana menerapkannya pada dokumen)

Bagaimana cara menangani IE6?

Bagi banyak orang, Internet Explorer 6 adalah Netscape 4 yang baru—dan semua orang ingin agar Internet Explorer 6 tidak lagi digunakan.

Mari kita lewati pembicaraan tentang masalah IE6. Masalah dengan IE6 didokumentasikan dengan baik dan sejujurnya, tidak terlalu sulit untuk diperbaiki. Terlebih lagi, adopsi IE7 cukup pesat (terutama di pasar konsumen), dan IE8 sudah dalam versi beta publik. Ini berarti suatu hari nanti, kita bisa mengucapkan selamat tinggal pada IE6 yang menua.

Baik disengaja atau tidak, ketika Microsoft meluncurkan IE5, ia menyediakan alat yang baik untuk peningkatan progresif: komentar bersyarat. Logika cerdas ini (diturunkan ke komentar HTML di semua browser lain) tidak hanya mengizinkan cuplikan kode markup tertentu hanya berfungsi untuk IE, tetapi juga memungkinkan cuplikan kode ini hanya berfungsi pada versi IE tertentu.

Sebagai pengembang Web yang sadar standar, pertama-tama kami harus selalu menguji desain kami pada sebagian besar browser yang memenuhi standar yang ada, dan kemudian memberikan patch untuk browser tersebut agar dapat kembali ke jalurnya dengan sedikit perubahan. Alur kerja setiap orang berbeda, tetapi menurut saya yang terbaik adalah memulai setiap proyek dengan kumpulan dokumen standar. Suite dasar saya mencakup file-file berikut:


Kemudian, bergantung pada kebutuhan proyek, tambahkan file CSS khusus browser untuk menyertakan "modifikasi kecil" tersebut. Di sebagian besar proyek sekarang, file-file ini adalah ie7.css dan ie6.css. Jika proyek memerlukan dukungan untuk versi sebelum IE6, saya juga akan membuat file yang sesuai untuknya (seperti ie5.5.css, dll.). Dengan adanya file-file ini, saya mulai menambahkan aturan gaya ke lembar gaya yang sesuai.

Saya memulai pengujian CSS saya di Mozilla Firefox karena sebagian besar CSS saya ditulis menggunakan sidebar editor CSS Firefox. Setelah saya selesai mendesain halaman di Firefox, saya segera membuka browser lain untuk menguji dan melihatnya. Sebagian besar berkinerja sempurna karena mematuhi standar web. Kemudian buka IE7 untuk menguji. Dalam kebanyakan kasus, tidak banyak masalah. Kadang-kadang, hasLayout perlu dipicu atau kesalahan tata letak kecil lainnya perlu diperbaiki. Alih-alih menulis perbaikan ini ke dalam file stylesheet suite dasar, saya menambahkannya ke ie7.css dan memperkenalkannya melalui komentar kondisional di HEAD dokumen:


Komentar kondisional di atas memungkinkan IE7 dan di bawahnya (Catatan Terjemahan: lte adalah singkatan dari kurang dari atau sama dengan) untuk mengenali gaya yang diperkenalkan. Oleh karena itu, saat menelusuri halaman dengan IE7, patch ini akan diperoleh. Namun jika Anda menggunakan IE versi baru - yang mungkin telah memperbaiki masalah ini, misalnya IE8 meninggalkan hasLayout dan tidak lagi mengalami masalah ini - gaya ini akan diabaikan. Di sisi lain, gaya ini dapat diperoleh dengan menggunakan IE6. Ini bagus karena bug rendering di IE7 cenderung ada di IE6 juga. Seperti disebutkan di atas, IE7 dan versi di bawahnya tidak dapat memahami @import dengan tipe media. Memperkenalkan screen.css dengan cara ini tidak valid untuk versi IE7 dan di bawahnya. Oleh karena itu, Anda juga perlu menambahkan pernyataan @import tanpa tipe media di bagian atas file ie7.css untuk memperkenalkan screen.css.

Setelah saya menambal IE7, saya akan membuka IE6 dan melihat apakah saya perlu menambal sesuatu. Jika perlu, saya akan menambahkan komentar bersyarat lain ke dokumen, mengimpornya ke ie6.css:


Kemudian, cukup tambahkan patch yang diperlukan oleh IE6 ke style sheet yang sesuai. Style sheet ini akan diabaikan oleh IE7, namun masih akan mempengaruhi versi seperti IE5.5.

Dengan menggunakan komentar bersyarat dengan cara ini, Anda dapat dengan mudah mengelola browser target di proyek Anda dan menjaga file patch CSS tetap independen dan gratis.

Pertimbangan lainnya

Peningkatan progresif CSS tidak terbatas pada cara mengaitkan style sheet dengan dokumen, tetapi juga dapat diterapkan pada cara menulis CSS.

Misalnya, pertimbangkan konten yang dihasilkan. Tidak didukung oleh semua browser, namun ini adalah cara terbaik untuk menambahkan beberapa desain atau teks tambahan. Ini tidak diperlukan untuk kegunaan halaman, namun dapat memberikan beberapa penyempurnaan visual atau lainnya.

Ambil formulir kontak sederhana sebagai contoh:


(Ilustrasi: Formulir HTML yang digunakan dalam contoh ini (kode akan diberikan di bawah))

Saat menulis kode HTML di atas, kemungkinan besar tanda titik dua (:) akan tertulis secara alami pada elemen label. Mengapa melakukan ini? Apakah konten benar-benar ditambahkan ke elemen label? Tidak terlalu. Tujuannya adalah untuk memberikan petunjuk visual tambahan kepada pengguna. Untuk elemen label, elemen ini mubazir dan harus dihapus:


Cara yang lebih tepat adalah menambahkan titik dua kembali ke dokumen dengan membuat konten:


Menulis formulir dengan cara ini memberi kita fleksibilitas: ketika kita perlu menghapus karakter dekoratif dari seluruh situs, kita cukup mengedit file CSS tanpa harus menemukan setiap formulir (walaupun kita pernah tahu di mana). Trik ini juga terdegradasi dengan baik, karena tanpa titik dua, formulir tidak akan dapat digunakan - sebuah contoh bagus dari peningkatan progresif.

Mungkin Anda telah menemukan bahwa dengan menggunakan penyeleksi CSS tingkat lanjut (terjemahan: pemilih, juga diterjemahkan sebagai pemilih, tetapi menurut saya penyeleksi dapat lebih mencerminkan arti aslinya, seperti operator diterjemahkan sebagai operator daripada operator), Anda dapat mengubah gaya tertentu Terlampir pada browser yang lebih canggih, ini membantu menyempurnakan situs seiring waktu. Contoh yang baik adalah pemilih atribut, yang tidak dipahami (dan karena itu diabaikan) di IE6, browser sezamannya, dan browser sebelumnya. Egor Kloos menggunakan konsep ini dengan indah dengan kirimannya yang berjudul “Gemination” di CSS Zen Garden:


(Ilustrasi: Perbandingan rendering karya CSS Zen Garden karya Egor Kloos ("Double Double") di browser standar dan IE6)

Bagaimana dia melakukannya? Berikut adalah contoh kode yang sedikit dimodifikasi:


Perbedaannya jelas dan merupakan ilustrasi indah tentang bagaimana peningkatan progresif dapat digunakan dalam CSS.

Demikian pula, situs Andy Clarke memiliki beberapa informasi menarik tentang IE6. Dengan menggunakan filter IE dan menambahkan beberapa anotasi bersyarat, Andy berhasil menghapus semua warna dari situs dan memberikan beberapa gambar yang dapat diganti sehingga memberikan pengalaman yang benar-benar "lo-fi".


(Ilustrasi: Perbandingan situs Andy Clark di browser standar dan IE6)

Teknik abu-abu pada gambar di atas adalah ini: Pada stylesheet untuk IE6 (dan di bawahnya) yang ditambahkan oleh komentar kondisional, tambahkan pernyataan berikut:


Meskipun dua contoh di atas mungkin berisi terlalu banyak teknik yang tidak digunakan dalam pekerjaan sehari-hari, keduanya berhasil mengilustrasikan konsep tentang bagaimana menerapkan peningkatan progresif CSS dalam praktiknya.

Meringkaskan

Seperti yang telah kita bahas, ada beberapa cara untuk menerapkan peningkatan progresif CSS ke situs Anda. Cara paling sederhana, dan mungkin yang terbaik, adalah mengatur style sheet Anda dan memikirkan dengan cermat bagaimana Anda akan menghubungkannya ke dalam dokumen Anda. Setelah Anda memahami komentar bersyarat, menangani masalah khusus IE akan menjadi hal yang mudah. Jika Anda memiliki pemahaman yang jelas tentang cara menggunakan penyeleksi dan skenario penggunaannya, Anda dapat membuat penyesuaian lebih mendalam pada CSS.

Berbekal pengetahuan ini, Anda akan siap menjadi ahli peningkatan progresif.