Kaedah Fallback yang berguna untuk CSS dan Javascript

Kod kejatuhan adalah penyelesaian yang sempurna untuk menjejaskan pengunjung anda yang unik. Tidak semua orang di web menggunakan sistem operasi yang sama, pelayar web, atau perkakasan fizikal. Semua faktor ini ke dalam bagaimana laman web anda sebenarnya akan dipaparkan pada skrin. Apabila bekerja dengan helah CSS atau JavaScript baru, anda sering akan mengalami pepijat teknikal seperti itu.

Tetapi jangan biarkan perangkap ini menghalang anda! Dalam panduan ini saya telah mengumpulkan sebahagian daripada teknik yang paling biasa untuk pereka web yang memberi tumpuan kepada CSS dan JavaScript / jQuery. Apabila semuanya gagal, anda ingin memberikan pengguna sekurang-kurangnya fungsi halaman dasar. Kesederhanaan memerintah di bidang reka bentuk pengalaman pengguna.

Lihat panduan kami di bawah dan beritahu kami fikiran dan soalan anda di bahagian komen.

1. Sudut bulat dengan Imej

Teknik CSS3 telah melonjak ke dalam reka bentuk web arus perdana. Salah satu sifat yang paling ketara ialah jejari sempadan yang membolehkan sudut-sudut yang bulat di-terbang. Ini kelihatan cantik pada hampir mana-mana butang, div, atau kotak teks. Satu-satunya masalah ialah sokongan terhad antara penyemak imbas web.

Ramai pelayar lama termasuk Internet Explorer 7 tidak menyokong harta ini. Oleh itu untuk memastikan sudut bulat berfungsi untuk semua pelayar biasa anda perlu membina sandaran dengan imej.

Kod standard menggunakan sifat CSS3 tetap pada div utama sambil menampung imej pada setiap sudut. Anda mungkin perlu menyediakan beberapa div tambahan dalam bekas utama yang digunakan untuk memaparkan imej sudut di latar belakang.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Enjin Gecko * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') no-repeat top left;  #mainbox .topc span background: url ('corner-tr.png') no-repeat right top;  #mainbox .btmc background: url ('corner-bl.png') no-repeat bottom left;  #mainbox .btmc span background: url ('corner-br.png') no-repeat right bottom;  

Untuk menyelamatkan diri dari tekanan saya sangat menyarankan menggunakan aplikasi seperti RoundedCornr. Ia adalah aplikasi web dalam pelayar yang menghasilkan sudut bulat CSS menggunakan kedua CSS3 dan imej. Ini amat berguna untuk pereka yang tidak mempunyai akses kepada perisian grafik seperti Photoshop atau GIMP.

2. Sistem Menu Dropdown jQuery

Sistem menu jatuh turun sempurna untuk Web hari ini. Walau bagaimanapun masalah terbesar adalah pelawat yang mengakses laman web anda tanpa JavaScript diaktifkan. Dalam kes ini, tiada menu anda akan berfungsi sama sekali! Penyelesaian terbaik ialah menggunakan CSS untuk memaparkan / menyembunyikan setiap blok div sub-menu dan memaparkannya pada hover.

Satu-satunya masalah dengan penyelesaian ini adalah bahawa Internet Explorer 6 tidak menyokong pemilih hover CSS ini. Bagaimanapun IE7 + berfungsi hebat; dan tentu saja semua pelayar akan berfungsi dengan baik jika JavaScript diaktifkan di tempat pertama. Kod dari tutorial ini mengenai CSS Plus adalah salah satu sumber terbaik yang saya dapati. Ia bukan sahaja menyediakan penyelesaian dengan jQuery tetapi juga CSS yang diperlukan untuk isu IE.

/ * Kelas semasa akan ditambah 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

Satu lagi penyelesaian alternatif yang anda boleh cuba hanya memaparkan secara terbuka setiap menu di IE6. Anda boleh menggunakan komen conditional Internet Explorer untuk menggunakan stylesheets berdasarkan versi penyemak imbas. Sudah tentu, ini tidak akan menjadi penyelesaian tercantik, tetapi ia hanya akan berfungsi.

Sekiranya anda tidak merasakan bahawa Internet Explorer 6 agak khawatir, maka jangan risau dengan penurunan harga alternatif ini. Tutorial dan kod berikutnya di atas sepatutnya cukup untuk mendapatkan memuatkan menu JavaScript anda walaupun dengan CSS yang ketat di semua pelayar utama.

3. Gaya Internet Explorer yang disasarkan

Saya pasti kita semua tahu tentang isu-isu yang dikeluarkan daripada Internet Explorer Microsoft. Saya boleh memberi sedikit kredit untuk IE8 terkini dan prospek masa depan dengan IE9. Walau bagaimanapun masih terdapat penonton kecil yang menjalankan IE6 / IE7 dan anda tidak boleh mengabaikannya lagi.

(Sumber imej: github)

Komen bersyarat seperti yang disebutkan dalam bahagian terakhir boleh berguna untuk memformat semula bahagian halaman. Sebagai contoh jika anda mempunyai menu lungsur turun dengan sub-navigasi di IE6 yang hanya akan dipaparkan menggunakan JavaScript, anda akan keluar daripada nasib yang cuba CSS sebagai kaedah penundaan. Sebaliknya penyelesaian terbaik adalah untuk memaparkan setiap sub-senarai sebagai blok navigasi.

Menambah kod di atas pada header dokumen anda kemudian anda boleh menentukan jenis paparan untuk setiap navigasi sub. Bahagian terbaik mengenai sandaran ini adalah bahawa anda boleh menimpa CSS dan masih secara dinamik menunjukkan / menyembunyikan menu apabila JavaScript diaktifkan. Jika tidak, anda hanya akan memaparkan senarai pautan terbuka. Anda boleh menggunakan kod serupa seperti yang saya tambahkan di bawah.

#nav li kedudukan: relatif; lebar: 150px; / * mesti menetapkan lebar yang terbatas untuk IE * / #nav li ul / * sub-nav codes * / display: block; kedudukan: mutlak; lebar: auto; / * tentukan lebar anda sendiri atau tetapkan dalam elemen li * / #nav li ul li width: 100%;  

4. Warisan IE Kesempurnaan / Ketelusan

Salah satu daripada banyak bug yang mengganggu dengan Internet Explorer adalah berurusan dengan kelegapan. Tetapan alpha-transparency dalam CSS3 dapat diubah melalui sifat opacity. Namun dalam cara Microsoft sahaja Internet Explorer 9 kini menyokong ciri ini.

Penyelesaian terbaik untuk mensasarkan IE6 + adalah melalui penapis, tetapan proprietari hanya diiktiraf oleh IE. Lihat contoh kod ringkas di bawah:

.mydiv opacity: 0.55; / * CSS3 * / penapis: alpha (opacity = 55); / * IE6 + * / 

Apa yang perlu anda lakukan ialah memasukkan garis di atas dalam mana-mana unsur yang memerlukan ketelusan. Perhatikan bahawa sama dengan sifat CSS3, semua elemen kanak-kanak juga akan mewarisi perubahan kelegapan ini. Jika anda mencari kaedah yang lebih baru yang mensasarkan IE8 secara khusus, lihat kod di bawah. Ia berfungsi dengan cara yang sama kerana sifat penapis kami hanya diiktiraf oleh parser Microsoft IE8.

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * / 

5. Mencipta Butang CSS3 dengan Imej-imej Fallback

Butang adalah elemen web yang hebat untuk semua jenis antara muka. Mereka boleh berkelakuan sebagai input borang, item navigasi, atau pautan laman langsung. Dengan CSS3 kini dimungkinkan untuk memformatkan butang dengan banyak gaya unik seperti kecerunan latar belakang, bayang-bayang kotak, sudut bulat, dan sebagainya.

Bagaimanapun, anda tidak boleh mempercayai bahawa semua pelawat anda akan dapat memberikan ciri-ciri baru ini. Apabila membina reka bentuk sandaran untuk butang (atau elemen UI yang serupa) terdapat dua pilihan yang berbeza. Yang pertama ialah menyertakan imej latar belakang yang direka tepat seperti CSS akan kelihatan. Ini boleh dicapai dengan mudah di Photoshop. Walau bagaimanapun, jika anda bukan pakar dalam perisian maka ini mungkin menyusahkan.

Alternatifnya adalah untuk merosot ke warna latar belakang biasa dan gaya CSS yang lebih mudah. Saya menggunakan beberapa contoh kod dari jawatan CSS-Trick yang hebat pada kecerunan CSS3. Semua pelayar utama termasuk Safari, Firefox, Chrome, dan Opera juga menyokong sifat-sifat ini. Kawasan di mana anda akan menghadapi masalah adalah dengan sokongan pelayar warisan: enjin Mozilla yang lebih tua, IE6 / 7, mungkin juga Safari Mudah Alih.

.gradien-bg background-color: # 1a82f7; / * menggunakan warna pepejal pada terburuk * / 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 imej sebagai kaedah sandaran adalah bahawa anda tidak akan mempunyai perubahan keadaan aktif apabila pengguna mengklik pada butang. Anda boleh membina dua imej yang berbeza untuk negeri-negeri biasa dan aktif ini, walaupun ia memerlukan sedikit kerja tambahan. Alasan ini semata-mata boleh mendorong anda untuk menggunakan warna latar belakang pepejal dan bukan imej jatuh. Cuba beberapa penyelesaian yang berbeza untuk melihat yang paling sesuai dalam susun atur anda.

6. Memeriksa untuk Kandungan Mudah Alih

Satu lagi trend besar pada tahun 2012 ialah populariti pelayaran internet mudah alih. Telefon pintar berada di mana-mana dan data melalui 3G / Wi-Fi menjadi lebih dan lebih mudah diakses. Oleh itu banyak pereka akan mencari untuk menyediakan susun atur sandaran untuk pengguna mudah alih.

Beberapa penyemak imbas web mudah alih yang popular akan menjadikan halaman serupa dengan persekitaran desktop. Mobile Safari dan Opera yang paling terkenal untuk ini, walaupun menyokong banyak skrip jQuery biasa. Tetapi laman-laman ini tidak selalunya mesra mudah alih dan ada ruang untuk berkembang pada UX.

Terdapat dua cara anda boleh mengesan pelayar mudah alih dan memaparkan susun atur alternatif atau helaian gaya. Yang pertama adalah melalui JavaScript yang berfungsi hebat sebagai alat frontend. Skrip yang saya tambah di bawah adalah sangat mudah dan hanya memeriksa pengguna iPhone / iPod Touch. Mengesan Pelayar Mudah Alih adalah laman web yang hebat yang menawarkan skrip yang lebih terperinci yang boleh anda jalankan.

/ / Redirect fungsi iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  jika (isiPhone ()) window.location = "m.yourdomain.com";  

Sekarang alternatif lain ialah memeriksa bahasa backend seperti PHP. Anda boleh menyemak pembolehubah yang dikenali sebagai HTTP_USER_AGENT. Puluhan laman web akan muncul jika anda menggunakan istilah ini. Walau bagaimanapun, saya masih mencadangkan pautan Pengesan Mudah Alih Mengesan yang saya tambahkan dalam perenggan yang terdahulu.

Tapak ini mempunyai skrip yang boleh dimuat turun percuma untuk menguraikan bukan sahaja dalam PHP, tetapi juga banyak bahasa backend popular yang lain. Ini termasuk ASP.NET, ColdFusion, Rails, Perl, Python, dan juga kod berasaskan pelayan seperti IIS dan Apache.

7. Slicebox Slider dengan Fallback Anggun

Freebie CSS3 kegemaran saya dari tahun 2011 mungkin harus menjadi Slider Image 3D Slicebox yang dikeluarkan oleh Codrops. Ia menggunakan peralihan animasi CSS yang indah dalam pelayar yang menyokongnya, kini dalam Google Chrome dan yang terbaru dalam Safari. Adalah pelik walaupun pelepasan Firefox atau IE9 yang paling baru masih tidak dapat menggunakan peralihan ini.

Bahagian terbaik mengenai kod ini adalah bahawa ia akan masih terjatuh untuk memberikan kesan peralihan asas antara imej. Diberikan banyak animasi yang dilakukan melalui jQuery, tetapi pilihan CSS fallback standard masih sangat handal mengingat berapa banyak pelayar tidak dapat menyokong animasi CSS3 yang cerah.

Selain itu, Codrops juga baru-baru ini mengeluarkan panel imej geser lain yang menggunakan teknik CSS3 yang lebih kreatif. Slider imej ini dibuat dengan menggunakan imej latar belakang dalam CSS, jadi walaupun tanpa kesan peralihan ia berjalan lancar.

8. Skrip jQuery CDN Failsafe Method

Perpustakaan jQuery telah menjadi hampir penting untuk membangunkan JavaScript di web. Banyak pembekal CDN alternatif telah membuat URL statik di mana mereka menjadi tuan rumah semua versi keluaran jQuery. Google, Microsoft, dan bahkan jQuery sendiri telah mencipta portal CDN untuk pemaju, di antara beberapa laman web yang kurang dikenali.

Ada kemungkinan beratus ribu pemaju yang bergantung kepada pembekal ini. Apa yang akan berlaku jika mana-mana pautan dipecahkan atas apa jua alasan atau pelayan pergi offline? Adalah satu idea yang baik untuk menjadi tuan rumah salinan tempatan dan melaksanakannya hanya jika anda memerlukannya. Nah coretan kod fallback yang hebat dari CSS-Tricks membolehkan anda melakukan perkara itu!

Sumber

9. Kotak Centang HTML5 yang unik

HTML5 telah membuka pintu untuk beberapa gaya sejuk segar untuk membina laman web. Sebahagian daripada pengalaman web yang dipertingkat ini adalah melalui bentuk dan unsur input. Kotak centang adalah satu contoh yang boleh diubah suai untuk memenuhi keperluan anda.

Saya berlari ke dalam tutorial CSS / jQuery yang indah ini yang disiarkan semula pada awal musim bunga 2011. Ia menawarkan kaedah mudah untuk mewujudkan suis gaya Apple untuk kotak semak anda yang secara semulajadi menghilangkan pelayar lama. Kod ini menggunakan imej latar belakang untuk menggantikan gaya hidup / mati antara interaksi pengguna.

Elemen kotak tanda input asli tersembunyi secara lalai dan nilai mereka ditentukan melalui panggilan JavaScript. Ini bermakna anda secara dinamik dapat menarik nilai pada sebarang titik melalui jQuery, tetapi ia juga akan diluluskan ke dalam bentuk apabila memukul “mengemukakan” butang.

Dengan mengandaikan bahawa JavaScript dimatikan atau tidak disokong oleh penyemak imbas lama skrip akan menjadi lalai kepada input HTML biasa. Ini juga akan melumpuhkan CSS untuk gaya kotak centang yang lebih baru supaya ia akan muncul seolah-olah tiada apa-apa perubahan. Skrip itu berperanan lebih seperti pelari depan estetik dengan kejatuhan bersih daripada apa-apa lagi. Tetapi slider ini kelihatan hebat, dan teknik yang sama boleh digunakan untuk bidang input bentuk lain seperti menu pilihan dan butang radio.

10. Video yang Disokong HTML5

Spesifikasi HTML5 baru telah sangat progresif dalam banyak bidang. Kedua-dua elemen video dan audio telah meningkatkan sokongan asli untuk sebilangan besar fail media. Walau bagaimanapun, ternyata bahawa antara pelayar yang disokong HTML5 mereka tidak semua bersetuju pada jenis fail.

Mozilla Firefox umumnya menyokong video .OGG yang mana anda boleh menggunakan VLC sebagai penukar. Google Chrome & Safari mencari fail .MP4 atau H.264 yang dikodkan .MOV. Kerana perbezaan ini biasanya anda perlu memasukkannya tiga format video yang berbeza - dua yang disenaraikan di atas bersama dengan .backback FLV.

Syukurlah beberapa orang yang benar-benar pintar meletakkan perpustakaan yang dipanggil VideoJS. Ia merupakan binaan JavaScript yang sangat kecil yang membolehkan pelaksanaan video Flash dan HTML5 tunggal dalam satu tag. Ia adalah percuma untuk memuat turun dan sumber terbuka, jadi pemaju adalah dialu-alukan untuk menyumbang juga. Kedua-dua pemain video Flash dan HTML5 disesuaikan untuk menjadi sama supaya semua pengguna akan mempunyai pengalaman yang sama. Lihat contoh kod embed video HTML5 mereka:

Sumber

Berikutan laluan yang sama projek html5media menawarkan satu kaedah untuk menyatukan semua media penstriman ke dalam satu filetype. Malangnya walaupun VideoJS tidak sempurna dengan setiap pelayar tunggal. Apa projek html5media yang telah cuba lakukan adalah berfungsi di sekitar ketidakserasian penyemak imbas untuk menyokong sebarang jenis fail video di kalangan semua platform. Dan ia sebenarnya berfungsi dengan baik!

Kesimpulannya

Saya harap panduan ini berguna untuk kaedah pemulihan akan berguna untuk pemaju web di seluruh dunia. Ia boleh menjadi laman web bangunan yang sukar untuk menyesuaikan diri dengan pelbagai spesifikasi perisian. Ini benar terutama ketika anda bekerja dengan banyak bahasa yang berbeza seperti CSS dan JavaScript.

Tetapi trend menunjukkan bahawa kita menghampiri era yang lebih menyokong dalam reka bentuk web. Tidak pernah sebelum mempunyai lebih banyak penyemak imbas dan piawaian web dipersetujui, terutama dalam CSS3 & HTML5. Teknik-teknik ini hanya beberapa yang perlu dipertimbangkan ketika membina laman web yang mematuhi piawaian. Sebagai pemaju web, anda akan sentiasa mengikuti tren reka bentuk terkini dan menyesuaikan diri dengan sesuai dengan penonton anda.