10 Metode Fallback Berguna Untuk CSS dan Javascript
Kode fallback adalah solusi sempurna untuk berkompromi dengan banyak pengunjung unik Anda. Tidak semua orang di web menggunakan sistem operasi yang sama, browser web, atau bahkan perangkat keras fisik. Semua faktor ini menjadi cara laman web Anda akan ditampilkan di layar. Saat bekerja dengan trik CSS atau JavaScript baru Anda akan sering mengalami bug teknis seperti itu.
Tapi jangan biarkan perangkap ini membuat Anda putus asa! Dalam panduan ini saya telah mengumpulkan beberapa teknik fallback paling umum untuk desainer web yang berfokus pada CSS dan JavaScript / jQuery. Ketika semuanya gagal, Anda ingin memberikan pengguna setidaknya fungsionalitas halaman dasar. Kesederhanaan berkuasa di bidang desain pengalaman pengguna.
Lihatlah panduan kami di bawah ini dan beri tahu kami pemikiran dan pertanyaan Anda di bagian komentar.
1. Sudut Bulat dengan Gambar
Teknik CSS3 telah meroket ke desain web utama. Salah satu properti yang paling terkenal adalah batas-jari-jari yang memungkinkan untuk sudut bulat on-the-fly. Ini terlihat cantik di hampir semua tombol, div, atau kotak teks. Satu-satunya masalah adalah dukungan terbatas antara browser web.
Banyak browser lama termasuk Internet Explorer 7 tidak mendukung properti ini. Jadi, agar sudut yang dibulatkan bekerja untuk semua browser standar, Anda harus membuat fallback dengan gambar.
Kode standar menggunakan properti CSS3 biasa pada div utama sambil mengakomodasi gambar di setiap sudut. Anda mungkin perlu mengatur beberapa div tambahan di dalam wadah utama yang digunakan untuk menampilkan gambar sudut di latar belakang.
#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / radius batas: 5px; #mainbox .topc background: url ('corner-tl.png') no-repeat atas kiri; #mainbox .topc span background: url ('corner-tr.png') tanpa-pengulangan kanan atas; #mainbox .btmc background: url ('corner-bl.png') no-repeat kiri bawah; #mainbox .btmc span background: url ('corner-br.png') tanpa-ulangi kanan bawah; Untuk menyelamatkan diri dari stres, saya sangat menyarankan menggunakan aplikasi seperti RoundedCornr. Ini adalah aplikasi web dalam browser yang menghasilkan CSS sudut bulat menggunakan CSS3 dan gambar. Ini akan sangat berguna bagi perancang yang tidak memiliki akses ke perangkat lunak grafik seperti Photoshop atau GIMP.
2. Sistem Menu Dropdown jQuery
Sistem menu dropdown sangat cocok untuk Web saat ini. Namun masalah terbesar adalah pengunjung mengakses situs web Anda tanpa mengaktifkan JavaScript. Dalam hal ini tidak ada menu Anda yang berfungsi sama sekali! Solusi terbaik adalah menggunakan CSS untuk menampilkan / menyembunyikan setiap blok div sub-menu dan menampilkannya di hover.
Satu-satunya masalah dengan solusi ini adalah bahwa Internet Explorer 6 tidak mendukung penyeleksi hover CSS ini. Namun IE7 + berfungsi dengan baik; dan tentu saja semua browser akan berfungsi dengan baik jika JavaScript diaktifkan sejak awal. Kode dari tutorial tentang CSS Plus ini adalah salah satu sumber terbaik yang saya temukan. Ini tidak hanya memberikan solusi dengan jQuery tetapi juga CSS yang diperlukan untuk masalah IE.
/ * Kelas saat ini akan ditambahkan melalui jQuery * / #nav li.current> a background: # f7f7f7; / * CSS fallback * / #nav li: hover> ul.child display: block; #nav li: hover> ul.grandchild display: block;
Sumber
Solusi alternatif lain yang dapat Anda coba adalah hanya menampilkan secara terbuka setiap menu di IE6. Anda dapat menggunakan komentar bersyarat Internet Explorer untuk menerapkan stylesheet berdasarkan versi browser. Tentu saja, ini tidak akan menjadi solusi tercantik, tetapi itu hanya akan berhasil.
Jika Anda tidak merasa bahwa Internet Explorer 6 sangat mengkhawatirkan maka jangan repot-repot dengan alternatif pengganti ini. Tutorial dan kode selanjutnya di atas harus cukup untuk membuat menu JavaScript Anda dimuat bahkan dengan CSS yang ketat di semua browser utama.
3. Gaya Internet Explorer yang Ditargetkan
Saya yakin kita semua tahu tentang masalah rendering yang keluar dari Microsoft Internet Explorer. Saya dapat memberikan sedikit kredit untuk IE8 terbaru dan prospek masa depan dengan IE9. Namun masih ada sedikit audiens yang menjalankan IE6 / IE7 dan Anda benar-benar tidak bisa mengabaikannya dulu.
(Sumber gambar: github)
Komentar bersyarat seperti yang disebutkan di bagian terakhir dapat berguna untuk memformat ulang area halaman. Misalnya, jika Anda memiliki menu dropdown dengan sub-navigasi di IE6 yang hanya akan ditampilkan menggunakan JavaScript, Anda tidak akan beruntung mencoba CSS sebagai metode mundur. Alih-alih solusi terbaik adalah dengan menampilkan setiap sub-daftar sebagai blok navigasi.
Menambahkan kode di atas ke header dokumen Anda, Anda kemudian dapat menentukan jenis tampilan untuk setiap sub-navigasi. Bagian terbaik tentang fallback ini adalah Anda dapat menimpa CSS dan masih menampilkan / menyembunyikan menu secara dinamis ketika JavaScript diaktifkan. Kalau tidak, Anda hanya akan menampilkan daftar tautan terbuka. Anda dapat menggunakan kode serupa seperti yang saya tambahkan di bawah.
#nav li position: relative; lebar: 150px; / * harus menetapkan lebar hingga untuk IE * / #nav li ul / * kode sub-nav * / display: block; posisi: absolut; lebar: otomatis; / * tentukan lebar Anda sendiri atau setel pada elemen li * / #nav li ul li width: 100%;
4. Warisan IE Opacity / Transparansi
Salah satu dari banyak bug menjengkelkan dengan Internet Explorer adalah menangani opacity. Pengaturan alpha-transparansi dalam CSS3 dapat diubah melalui properti opacity. Namun di jalan Microsoft hanya Internet Explorer 9 saat ini mendukung fitur ini.
Solusi terbaik untuk menargetkan IE6 + adalah melalui filter, pengaturan eksklusif hanya dikenali oleh IE. Lihat contoh kode singkat di bawah ini:
.mydiv opacity: 0,55; / * CSS3 * / filter: alpha (opacity = 55); / * IE6 + * /
Yang perlu Anda lakukan adalah memasukkan baris di atas dalam elemen yang membutuhkan transparansi. Perhatikan bahwa mirip dengan properti CSS3, semua elemen anak juga akan mewarisi perubahan opacity ini. Jika Anda mencari metode yang lebih baru yang menargetkan IE8 secara khusus, lihat kode di bawah ini. Berperilaku dengan cara yang sama seperti properti filter kami hanya dikenali oleh parser Microsoft IE8.
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * /
5. Membuat Tombol CSS3 dengan Gambar Balik
Tombol adalah elemen web yang fantastis untuk semua jenis antarmuka. Mereka dapat berperilaku sebagai input formulir, item navigasi, atau bahkan tautan halaman langsung. Dengan CSS3 sekarang memungkinkan untuk memformat tombol dengan banyak gaya unik seperti gradien latar belakang, bayangan kotak, sudut bulat, dll..
Namun Anda tidak dapat mempercayai bahwa semua pengunjung Anda dapat membuat properti yang lebih baru ini. Saat membuat desain fallback untuk tombol (atau bahkan elemen UI serupa) ada dua opsi berbeda. Yang pertama adalah memasukkan gambar latar yang dirancang persis seperti tampilan CSS. Ini dapat dengan mudah dilakukan di Photoshop. Namun jika Anda bukan ahli dalam perangkat lunak maka ini mungkin merepotkan.
Alternatifnya adalah mundur ke warna latar belakang polos dan gaya CSS yang lebih sederhana. Saya menggunakan beberapa contoh kode dari CSS-Trik posting bagus tentang gradien CSS3. Semua browser utama termasuk Safari, Firefox, Chrome, dan bahkan Opera mendukung properti ini. Area di mana Anda akan mengalami masalah adalah dalam mendukung browser lawas: mesin Mozilla lama, IE6 / 7, bahkan mungkin Mobile Safari.
.gradient-bg background-color: # 1a82f7; / * menggunakan warna solid paling buruk * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (linear, 0% 0%, 0% 100%, dari (# 2F2727), hingga (# 1a82f7)); background-image: -webkit-linear-gradient (atas, # 2F2727, # 1a82f7); background-image: -moz-linear-gradient (atas, # 2F2727, # 1a82f7); background-image: -ms-linear-gradient (atas, # 2F2727, # 1a82f7); background-image: -o-linear-gradient (atas, # 2F2727, # 1a82f7); Sumber
Satu-satunya masalah kecil dengan hanya menggunakan gambar sebagai metode mundur adalah bahwa Anda tidak akan memiliki perubahan status aktif ketika pengguna mengklik tombol. Anda dapat membuat dua gambar berbeda untuk kondisi reguler vs aktif ini, meskipun akan membutuhkan beberapa pekerjaan ekstra. Alasan ini saja mungkin mendorong Anda untuk menggunakan warna latar belakang yang solid alih-alih gambar mundur. Cobalah beberapa solusi berbeda untuk melihat mana yang paling cocok dengan tata letak Anda.
6. Memeriksa Konten Seluler
Tren besar lainnya di tahun 2012 adalah popularitas penelusuran internet seluler. Smartphone ada di mana-mana dan data melalui 3G / Wi-Fi menjadi semakin mudah diakses. Dengan demikian banyak desainer akan mencari untuk menyediakan tata letak mundur untuk pengguna ponsel.
Beberapa browser web seluler populer akan membuat halaman yang mirip dengan lingkungan desktop. Mobile Safari dan Opera terkenal karena hal ini, bahkan mendukung banyak skrip jQuery umum. Tetapi halaman ini tidak selalu ramah-seluler dan ada ruang untuk berkembang di UX.
Ada dua cara Anda dapat mendeteksi browser seluler dan menampilkan tata letak atau lembar gaya alternatif. Yang pertama adalah melalui JavaScript yang berfungsi baik sebagai alat frontend. Skrip yang saya tambahkan di bawah ini sangat sederhana dan hanya memeriksa untuk pengguna iPhone / iPod Touch. Deteksi Peramban Seluler adalah situs web fantastis yang menawarkan skrip yang lebih rinci yang bisa Anda jalankan.
// Redirect fungsi iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1)); if (isiPhone ()) window.location = "m.yourdomain.com"; Sekarang alternatif lain adalah memeriksa melalui bahasa backend seperti PHP. Anda dapat memeriksa variabel yang dikenal sebagai HTTP_USER_AGENT. Lusinan situs web akan muncul jika Anda menggunakan istilah ini di Google. Namun saya tetap merekomendasikan tautan Deteksi Mobile Browser yang saya tambahkan pada paragraf sebelumnya.
Situs ini memiliki skrip yang dapat diunduh gratis untuk penguraian tidak hanya dalam PHP, tetapi juga banyak bahasa backend populer lainnya. Ini termasuk ASP.NET, ColdFusion, Rails, Perl, Python, dan bahkan kode berbasis server seperti IIS dan Apache.
7. Slider Slicebox dengan Graceful Fallback
Freebie CSS3 favorit saya dari 2011 mungkin harus berupa Slider Gambar Slicebox 3D yang dirilis oleh Codrops. Ini menggunakan transisi animasi CSS yang indah di browser yang mendukungnya, saat ini di Google Chrome dan yang terbaru di Safari. Sungguh aneh bahwa bahkan rilis Firefox atau IE9 terbaru masih tidak dapat menggunakan transisi ini.
Bagian terbaik tentang kode ini adalah masih akan mundur untuk memberikan efek transisi dasar antara gambar. Memang banyak animasi dilakukan melalui jQuery, tetapi opsi standar CSS fallback masih sangat dapat diandalkan mengingat berapa banyak browser tidak dapat mendukung animasi CSS3 mencolok.
Sebagai alternatif, Codrops juga baru saja merilis panel geser gambar lain yang menggunakan teknik CSS3 yang lebih kreatif. Slider gambar ini dibuat menggunakan gambar latar belakang dalam CSS, sehingga meskipun tanpa efek transisi, ia berperilaku sangat lancar.
8. jQuery Script CDN Failsafe Method
Pustaka jQuery telah menjadi hampir esensial untuk mengembangkan JavaScript di web. Banyak pemasok CDN alternatif telah membuat URL statis tempat mereka meng-host semua versi rilis jQuery. Google, Microsoft, dan bahkan jQuery sendiri telah membuat portal CDN untuk pengembang, di antara beberapa situs web lain yang kurang dikenal.
Mungkin ada ratusan ribu pengembang yang bergantung pada penyedia ini. Apa yang akan terjadi jika ada tautan yang rusak karena alasan apa pun atau server offline? Sebaiknya Anda menyimpan salinan lokal dan mengimplementasikannya hanya jika Anda membutuhkannya. Cuplikan kode fallback yang hebat dari CSS-Trik ini memungkinkan Anda melakukan hal itu!
Sumber
9. Kotak centang HTML5 unik
HTML5 telah membuka pintu bagi beberapa gaya keren baru untuk membangun situs web. Bagian dari pengalaman web yang ditingkatkan ini adalah melalui formulir dan elemen input. Kotak centang hanyalah salah satu contoh yang dapat sangat disesuaikan dengan kebutuhan Anda.
Saya mengalami tutorial CSS / jQuery yang luar biasa ini diposting kembali pada awal musim semi 2011. Ia menawarkan metode sederhana untuk membuat sakelar gaya Apple untuk kotak centang Anda yang terdegradasi dengan anggun di peramban lama. Kode ini menggunakan gambar latar belakang untuk menggantikan gaya on / off antara interaksi pengguna.
Elemen kotak centang input asli disembunyikan secara default dan nilainya ditentukan melalui panggilan JavaScript. Ini berarti Anda dapat menarik nilai secara dinamis di titik mana pun melalui jQuery, tetapi juga akan diteruskan ke formulir setelah menekan “menyerahkan” tombol.
Dengan asumsi bahwa JavaScript dimatikan atau tidak didukung di browser lama, skrip akan default ke input HTML biasa. Ini juga akan menonaktifkan CSS untuk gaya kotak centang yang lebih baru sehingga akan muncul seolah-olah tidak ada yang berubah. Script ini berperilaku lebih seperti front-runner estetika dengan fallback bersih daripada yang lain. Tetapi bilah geser ini terlihat fantastis, dan teknik yang sama dapat diterapkan ke bidang masukan formulir lainnya seperti menu pilihan dan tombol radio.
10. HTML5 Didukung Video
Spesifikasi HTML5 baru sangat progresif di banyak bidang. Baik elemen video dan audio telah meningkatkan dukungan asli untuk sejumlah besar file media. Namun ternyata antara browser yang didukung HTML5 mereka tidak semua setuju pada jenis file.
Mozilla Firefox umumnya mendukung video .OGG yang dapat Anda gunakan VLC sebagai konverter. Google Chrome & Safari mencari file .MOV yang disandikan .MP4 atau H.264. Karena perbedaan ini, Anda biasanya harus memasukkan tiga format video yang berbeda - keduanya tercantum di atas bersama dengan fall .FLV.
Syukurlah beberapa orang yang sangat pintar mengumpulkan perpustakaan yang disebut VideoJS. Ini adalah build JavaScript yang sangat kecil yang memungkinkan implementasi tunggal video Flash dan HTML5 dalam satu tag. Ini gratis untuk mengunduh dan sumber terbuka, jadi pengembang dipersilakan untuk berkontribusi juga. Baik pemutar video Flash dan HTML5 dikustomisasi agar identik sehingga semua pengguna akan memiliki pengalaman yang sama. Lihat contoh kode embed video HTML5 mereka:
Sumber
Mengikuti rute yang serupa, proyek html5media menawarkan metode untuk mengkonsolidasikan semua media streaming ke dalam satu jenis file. Sayangnya, VideoJS tidak sempurna untuk setiap browser. Apa yang coba dilakukan proyek html5media adalah mengatasi ketidakcocokan browser untuk mendukung semua jenis file video di antara semua platform. Dan itu benar-benar berfungsi dengan baik!
Kesimpulan
Saya harap panduan metode fallback yang berguna ini akan berguna bagi pengembang web di seluruh dunia. Mungkin sulit membangun situs web untuk beradaptasi dengan berbagai spesifikasi perangkat lunak. Ini terutama benar ketika Anda bekerja dengan banyak bahasa berbeda seperti CSS dan JavaScript.
Tetapi tren menunjukkan bahwa kita sedang mendekati era yang lebih mendukung dalam desain web. Belum pernah ada lebih banyak browser dan standar web yang disepakati, terutama dalam CSS3 & HTML5. Teknik-teknik ini hanya beberapa dari banyak yang perlu dipertimbangkan ketika membangun halaman web yang memenuhi standar. Sebagai pengembang web, Anda selalu ingin mengikuti tren desain terbaru dan beradaptasi agar sesuai dengan audiens Anda.
