Apa kepanjangan dari tag footer ini. Tag baru. dan gunakan sepenuhnya

Jika sepatu adalah komponen terakhir dari pakaian apa pun, maka footer untuk situs e-Commerce adalah elemen terakhir dari desain penjualannya. Dengan berfokus pada elemen footer paling bawah, situs web modern siap memamerkan individualitas mereka dalam segala hal. Dalam lingkungan e-commerce yang kompetitif, ada cukup banyak ide orisinal, kreativitas, dan tren desain. Sebelum mendiversifikasi footer situs E-komersial, ada baiknya mempertimbangkan poin-poin penting. Apa yang harus didahulukan dan bagaimana cara terbaik untuk melakukannya? Lihat ulasan desain footer inspirasional kami untuk opsi menarik.

Baca juga: 13 Tren Pemasaran E-niaga 2019

Statistik penasaran dari perusahaan Chartbeat. Sebuah studi tentang perilaku 25 juta pengguna menunjukkan seberapa dalam mereka menjelajahi halaman. Ternyata perhatian pengguna tertuju pada ruang di bawah garis lipatan. Mendapatkan informasi yang lebih praktis berguna, pengunjung berlama-lama di area 1200px dari atas halaman (dengan rata-rata 700px secara vertikal di layar di browser), atau di belakang layar kedua.

Waktu tampilan (dtk.) / Jarak dari bagian atas halaman (piksel)

Kesenjangan besar dalam durasi melihat layar pertama dan kedua. TOP sendiri adalah 4 detik, durasinya mencapai maksimum (16 detik) pada 1200 piksel dari atas, dan dengan pengguliran lebih lanjut, perlahan-lahan berkurang.

Pangsa pengunjung (%) / Jarak dari bagian atas halaman (piksel)

Sebagian besar pengunjung (lebih dari 25%) bahkan tidak menunggu konten dimuat dan mulai menggulir halaman. Ini berarti hanya 75% yang akan melihat bagian paling atas terlebih dahulu. Area halaman yang paling banyak dilihat adalah 550px (tepat di atas garis lipatan).

Studi ini menghilangkan mitos bahwa pengguna tidak menggulir ke bagian bawah halaman dan menonton semua konten. Footer juga penting untuk situs eCommerce modern, dan bahkan memiliki kelebihannya sendiri.

Ide tentang cara mendesain "basement" (footer), contoh desain penjualan

10 tips ini akan menunjukkan kepada Anda cara mendesain footer untuk situs dengan indah - sesuai dengan aturan komposisi dalam desain web dan dengan resolusi tugas prioritas. Terapkan taktik yang paling tepat untuk meningkatkan kegunaan, UX (pengalaman pengguna) dan bahkan meningkatkan penjualan.

1. Informasi yang diperlukan

Secara tradisional, masalah organisasi dan hukum yang diperlukan tercakup dalam footer situs. Notifikasi ditata dalam teks yang kurang terlihat, yang membebaskan area halaman lain untuk elemen yang lebih bermakna. Berikut adalah contoh daftar untuk dipertimbangkan:

• Catatan hak cipta
• Penafian hukum
• Informasi tagihan
• Pemberitahuan Cookie

Situs web yang menjual barang harus memenuhi persyaratan hukum dan memberikan informasi tentang prosedur, persyaratan pengembalian. Lokasinya di footer nyaman untuk sumber penjualan dan pengunjung.

Contoh footer: Yves Rocher

Toko online Yves Rocher: footer layar penuh dengan desain lapisan bergantian yang bagus. Menginformasikan tentang perusahaan, infrastruktur situs penjualan - mulai dari pelacakan pesanan hingga kebijakan data pribadi. Berikut tips menggunakan produk, bonus, promosi

Contoh footer: Lumity

Pedagang bahan tambahan makanan diberikan peningkatan legal sebuah tanggung jawab. Ada beberapa hal yang harus/tidak boleh mereka katakan di situs penjualan mereka. Tautan ke informasi hukum dicetak tebal untuk visibilitas yang lebih baik.

Footer dengan gambar latar belakang yang indah sangat cocok dengan desain situs secara keseluruhan. Tidak ada batas yang jelas, melainkan konten itu sendiri berfungsi sebagai pemisah

Contoh footer: Saddleback Leather Co

Situs jual dengan desain header dan footer retro yang cantik. Garansi 100 tahun terhadap cacat material dan finishing. Kondisi pengembalian disertai dengan cerita menarik ... tidak semuanya begitu sedih dengan informasi e-Commerce yang diperlukan, ternyata

2. Ruang negatif - jarak visual yang cukup

Saat membatasi jumlah tautan footer, jangan pelit dengan ruang negatif - ini akan memiliki efek luar biasa pada persepsi visual dan meningkatkan keterbacaan. Sebagai aturan umum, saat mempertahankan hierarki visual, elemen pusat diperhatikan lebih cepat (dapat digunakan untuk keuntungan!).

Contoh footer: QUAY AUSTRALIA

Dengan gaya minimalis dan menu dropdown tetap, toko online dapat membeli footer yang luas.

contoh footer: Memetikan

Sejumlah besar ruang mikro-negatif (antara elemen kecil) dapat dikatakan seperti ini: selama semua informasi yang diperlukan ada, itu dapat dibaca dan dirasakan dengan cepat - semuanya baik-baik saja

Contoh footer: Stumptown Coffee Roasters

Footer yang luas dari situs kopi adalah penyelesaian yang bagus dari komposisi desain yang bersih, yang memiliki banyak ruang makro-negatif ("udara" di antara bagian/bagian)

3. Panggilan terakhir untuk bertindak

Baca juga: 30+ Contoh dan Ide Desain untuk Tombol Tindakan Target

Desain footer yang bergaya berbicara dengan fasih tentang sumber daya itu sendiri. Penting untuk dicatat bahwa pembeli tinggal di sini sedikit lebih lama daripada di halaman lainnya. Peluang bagus untuk ajakan bertindak terakhir lainnya. Seringkali ini adalah langganan / milis, tetapi Anda juga dapat mengaitkan panggilan CTA dengan pendaftaran akun.

contoh footer: Salam

Greetabl memiliki bagian bawah halaman yang dirancang sederhana, termasuk panggilan untuk berlangganan. Dengan elemen minimal, panggilan menjadi terlihat, dan selaras dengan latar belakang pirus, itu berubah menjadi dekorasi situs

Contoh footer: Ecwid

Desain bagus dengan ajakan bertindak di bagian bawah halaman. Struktur pembuat situs web penjualan bersifat universal. Ini telah diterjemahkan ke dalam 35 bahasa untuk jutaan pelanggannya.

4. Kereta apung - meningkatkan ketersediaan fungsi penjualan

Mengakses keranjang belanja dari bagian bawah situs adalah cara yang bagus untuk meningkatkan kegunaan dan kualitas penjualan situs.

Contoh footer: Lemonadela

Situs web penjualan perusahaan katering itu menyenangkan dalam penampilan dan nyaman bagi pembeli

5. Navigasi Footer

Bagian bawah situs ideal untuk informasi yang jarang dilihat: tentang perusahaan, persyaratan layanan, dan kebijakan privasi. Dalam hal ini, fungsi footer adalah untuk menyelamatkan semua orang. Merasa tersesat di lingkungan eCommerce, seseorang menjadi tertarik pada infrastruktur eCommerce, secara naluriah menggulir…

Ruang negatif diperlukan untuk keterbacaan konten. Secara umum, "footer" bukan untuk tujuan navigasi, tidak seperti menu atau peta situs. Hanya dalam kasus yang jarang terjadi, situs e-niaga menempatkan kategori produk tertentu di footer (

Saya ingat bahwa pada saat saya mulai beralih dari tabel ke tata letak oleh div, salah satu kesulitan yang saya temui adalah sebagai berikut - cara mendorong footer situs (footer) ke bagian paling bawah jendela browser sehingga halaman terlihat terbentang setinggi mungkin, berapa pun jumlah teksnya, dan jika tinggi halaman lebih besar dari tinggi jendela browser (saat gulir muncul), footer akan tetap berada di tempatnya yang semestinya.

Sementara tabel memecahkan masalah ini hanya dengan menentukan tinggi tabel dan/atau sel yang bersarang di dalamnya, kemudian saat menggunakan CSS dalam tata letak blok, pendekatan yang sama sekali berbeda digunakan.

Dalam proses latihan, saya telah mengidentifikasi diri saya sendiri 5 Cara untuk Mendorong Footer ke Bawah Jendela Browser dengan CSS.

Kode HTML dari semua metode yang disajikan memiliki struktur berikut (satu-satunya perbedaan adalah pada kode CSS):

Kode CSS di bawah ini hanya menyertakan properti yang minimal diperlukan untuk mengimplementasikan metode yang sesuai. Untuk masing-masing dari mereka, Anda dapat melihat contoh langsung.

Cara pertama

Footer didorong ke bawah dengan memposisikannya secara absolut dan menarik ketinggian blok induk (html , body dan .wrapper) sebesar 100%. Dalam hal ini, blok konten. konten perlu menentukan indentasi bawah, yang sama dengan atau lebih besar dari tinggi footer, jika tidak, yang terakhir akan menutup sebagian konten.

* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( position: relative; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( position : mutlak; kiri: 0; bawah: 0; lebar: 100%; tinggi: 80px; )

Cara kedua

Footer ditekan ke bawah dengan merentangkan blok konten dan "induknya" ke ketinggian penuh jendela browser dan menaikkan footer ke atas melalui margin negatif (margin-top) untuk menghilangkan scroll vertikal yang muncul. Dalam hal ini, perlu untuk menentukan ketinggian ruang bawah tanah, dan itu harus sama dengan nilai indentasi.

* ( margin: 0; padding: 0; ) html, body, .wrapper ( height: 100%; ) .content ( box-sizing: border-box; min-height: 100%; padding-bottom: 90px; ) . footer ( tinggi: 80px; margin-top: -80px; )

Berkat properti box-sizing: border-box, kami tidak membiarkan kotak .content melebihi tinggi 100%. Jadi dalam hal ini, min-height: 100% + padding-bottom: 90px sama dengan 100% dari tinggi jendela browser.

Cara ketiga

Itu bagus karena, tidak seperti metode lain (kecuali yang ke-5), ketinggian footer tidak masalah.

* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: table; height: 100%; ) .content ( display: table-row; height: 100%; )

Di sini kita meniru perilaku tabel dengan mengubah blok .wrapper menjadi tabel dan blok .content menjadi baris tabel (masing-masing tampilan: tabel dan tampilan: properti baris tabel). Karena ini, serta fakta bahwa blok .content dan semua wadah induknya disetel ke ketinggian 100%, konten diregangkan ke ketinggian penuh, tetapi dikurangi ketinggian footer, yang ditentukan secara otomatis - emulasi tabel tidak memungkinkan footer merangkak keluar dari ketinggian jendela browser.

Akibatnya, footer ditekan ke bawah.

Cara keempat

Metode ini tidak seperti metode sebelumnya, dan keunikannya adalah penggunaan fungsi CSS calc() dan satuan ukuran vh, yang hanya didukung oleh browser modern. Di sini Anda perlu mengetahui ketinggian ruang bawah tanah yang tepat.

* ( margin: 0; padding: 0; ) .content ( tinggi minimum: calc(100vh - 80px); )

100vh adalah tinggi jendela browser, dan 80px adalah tinggi footer. Dan dengan bantuan fungsi calc() , kami mengurangi nilai kedua dari yang pertama, sehingga menekan footer ke bawah.

Anda dapat mengetahui browser mana yang mendukung calc() dan vh di caniuse.com menggunakan tautan berikut: dukungan fungsi calc(), dukungan unit vh.

Metode kelima (paling relevan)

Ini adalah metode terbaik dari semua yang disajikan, tetapi hanya berfungsi di browser modern. Seperti pada metode ketiga, ketinggian footer tidak menjadi masalah.

* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: flex; flex-direction: column; min-height: 100%; ) .content ( flex: 1 0 auto ; ) .footer ( flex: 0 0 otomatis; )

Anda dapat mempelajari tentang dukungan browser untuk properti flex.

Setiap orang yang terbiasa dengan halaman situs web yang lengkap lebih menyukai tampilan "paku" (lengket, lengket) ke bagian bawah footer halaman. Tetapi ada dua masalah di Internet: bidang input yang tidak tumbuh ke bawah dan footer yang tidak dipaku (ke bagian bawah jendela). Misalnya, ketika kita membuka halaman pendek seperti habrahabr.ru/settings/social, itu segera menarik perhatian bahwa informasi yang dimaksudkan untuk berada di bagian bawah viewport menempel pada konten dan berada di suatu tempat di tengah, atau bahkan di atas. jendela ketika bagian bawah kosong.

Jadi, alih-alih .
Manual untuk pemula ini akan menunjukkan cara membuat footer "dipaku" dalam 45 menit, memperbaiki kekurangan bahkan publikasi yang disegani seperti Habr, dan bersaing dengannya sebagai pelaksanaan proyek Anda yang menjanjikan.

Mari kita lihat implementasi satu jenis footer yang dipaku, diambil dari jaringan, dan coba pahami apa yang terjadi. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap ( height: 100%; ) body > #wrap (height: auto; min-height: 100%;) #main ( padding-bottom: 150px; ) /* harus sama tinggi dengan footer */ #footer ( position: relative; margin-top: -150px; /* nilai negatif dari footer height */ height: 150px; clear:both;) /* CLEAR FIX*/ .clearfix:after (konten: "."; display: block; height: 0; clear: both; visibility: hidden;) .clearfix (tampilan: inline-block;) /* Menyembunyikan dari IE-mac \*/ * html .clearfix( tinggi: 1%;) .clearfix(tampilan: blok;) /* Akhir sembunyikan dari IE-mac */
HTML:

Mari kita mulai dengan teori

Footer ditempatkan setelah blok ini dan diberi ketinggian 0px. Secara umum, Anda dapat mengikuti #tata letak letakkan blok sebanyak yang Anda suka, tetapi semuanya harus setinggi 0 piksel atau di luar aliran dokumen (bukan posisi: statis). Dan ada trik penting lainnya yang biasa digunakan. Tidak perlu membuat tinggi sama dengan 0. Anda dapat membuat tinggi tetap, tetapi kurangi dari blok utama karena properti margin-bawah: -(tinggi);.

Dalam istilah manusia, gaya membuat "saku" kosong di bagian bawah, di mana footer disematkan, dan selalu ternyata menempel di batas bawah jendela, atau ke batas bawah dokumen jika dokumen lebih tinggi dari tinggi jendela. Di Internet dan di Habré, ada banyak implementasi footer, dengan berbagai keberhasilan di semua browser. Mari kita lanjutkan membangunnya sendiri, menggunakan layout Habr sebagai "pekerja keras".

Sejak bagian bawah blok #tata letak- ini adalah saku, harus kosong untuk footer, tidak menampilkan objek halaman. Dan di sini kita bertemu dengan batasan lain - kita tidak dapat membuat kantong kosong dengan mengorbankan lapisan di #tata letak, karena dengan begitu akan menjadi lebih dari 100%. tidak akan menyelamatkan batas- kekosongan harus dilakukan karena sifat-sifat elemen bersarang. Plus, perlu untuk memastikan bahwa elemen mengambang tidak merangkak keluar di bawah batas blok, yang dilakukan, misalnya, oleh blok

Mari kita lihat struktur halaman percobaan kita. Cara termudah untuk melakukannya adalah dengan membuka jendela Firebug atau jendela serupa ("Alat Pengembang" (Ctrl-F12)) di Chrome.

...====Konten halaman===...

...Bilah sisi kanan...

...Memblokir

..

...

...

...

...

...

Mari kita beralih ke contoh kerja

Apa yang kita lihat cacat tata letak dalam hal menerapkan efek footer yang dipaku? Kami melihat itu
1) Footer di situs berada di dalam blok dengan id=layout yang tidak memiliki tinggi persentase. Secara teori, itu, orang tua, dan blok konten .content-left harus disetel ke ketinggian 100%. Masalah muncul dengan yang terakhir - tidak disesuaikan untuk ini. Oleh karena itu, satu blok interlayer hilang atau footer berada pada level yang salah. Di samping itu,
2) tinggi footer bervariasi (tergantung pada jumlah elemen dalam daftar dan ukuran font, ini tidak terlihat dari HTML, tetapi dari CSS). Dan
3) di atas #tata letak ada blok iklan dengan tinggi tetap 90px;
4) tidak ada blok penyelarasan baik di footer atau (secara umum) di blok #tata letak(Ya, tapi di atas blok .rotated_posts; namun, mungkin itu harus dikaitkan dengan footer).

Poin 4 - Anda harus menggambar dengan skrip.
Tampaknya mudah untuk memahami poin ketiga dengan menambahkan #layout(margin-top:-90px;) Tapi ingat bahwa blok ini mungkin tidak ada - itu ditekan oleh pemotong spanduk, atau pengiklan tiba-tiba memutuskan untuk tidak menampilkannya . Ada sejumlah halaman di situs yang tidak. Oleh karena itu, ketergantungan margin-atas dari blok iklan adalah ide yang buruk. Jauh lebih baik - letakkan di dalam #tata letak Maka dia tidak akan menghalangi.

Poin pertama adalah agar footer yang dipaku berfungsi sama sekali, Anda harus menempatkan blok footer di bawah #tata letak. Namun, dengan bantuan javascript, Anda dapat menerapkan skema footer lain yang dipaku, tetapi bagaimanapun juga, Anda memerlukan JS atau tata letak yang awalnya benar untuk melakukannya tanpa itu.

Karena kami tidak dapat lebih kuat dari perancang tata letak situs terbaru yang "menampar" footer di dalam konten, kami akan menunda gagasan untuk menempatkan footer dengan benar di situs masa depan kami (yang, oleh karena itu, akan "lebih keren" daripada Habr!), dan kami akan membedah Habr dengan javascript (userscript) ke status yang benar. (Katakanlah segera, bukan perancang tata letak, bukan pengalih yang harus disalahkan, tetapi jenis situs, tentu saja, menentukan keputusan strategis manajemen proyek.) Dengan cara ini kita tidak akan mencapai yang ideal, karena dalam satu atau dua detik pertama selama proses pemuatan halaman akan berada dengan tata letak yang salah. Tetapi konsep dan kemampuan untuk mengungguli situs paling populer di dunia orang-orang IT adalah penting bagi kami.

Oleh karena itu, di tempat yang tepat di skrip (sebelumnya, di akhir pemuatan halaman), kami akan menulis transfer blok iklan DOM dan footer ke tempat yang tepat. (Mari bersiap-siap untuk fakta bahwa karena skrip pengguna, solusinya akan lebih rumit daripada yang bersih.)
var dQ = function(q)(return document.querySelector(q);) //untuk memperpendek var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - di dalam blok konten lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //memindahkan footer lay.parentNode.insertBefore(footer, lay.nextSibling);
Kami menempatkan blok di tempatnya - sekarang tinggal menetapkan properti yang diperlukan untuk elemen. Ketinggian footer harus diatur dengan tepat, hanya karena kita sudah mengetahuinya pada saat skrip pengguna mulai berlaku (akhir pemuatan halaman). Karena titik pemicu skrip pengguna, seperti yang dibahas di atas, tampilan footer melompat pada halaman tidak dapat dihindari. Bisakah Anda mencoba membuat "wajah yang baik", tetapi dengan "permainan yang buruk"? Untuk apa? "Permainan buruk" dari situs memungkinkan Anda membuat konsep tanpa upaya super, yang akan cukup untuk menilai kualitas dan tidak akan diperlukan jika Anda "bermain dengan benar" pada proyek Anda.
if(kaki)( // blok-aligner

di footer h.apnd_el((clss:"clear", appendTo: footer)); var footH = foot.offsetHeight; //...dan ukur tinggi footer ) if(topL && lay && footer && lay.nextSibling)( //sejajarkan blok dengan ketinggian yang diinginkan di konten ("layout") h.apnd_el((clss:" clear", css:( height: (footH ||0) +"px"), appendTo: lay)); lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:- "+ footH +"px !important)html, body (height:100%)"); )
Di sini kami mengizinkan diri kami untuk menerapkan fungsi yang ditulis sendiri h.apnd_el, yang kira-kira sama seperti di jQuery -
$("

").css((tinggi: footH ||0)).appendTo($(footer))
Dan kemudian - fungsi injeksi aturan CSS tipikal lainnya - h.addRules. Di sini Anda tidak dapat melakukannya tanpanya, karena Anda perlu mendeklarasikan aturan dengan " !penting" - hanya karena kekhasan prioritas gaya dari skrip pengguna.

Dengan potongan kode ini, kita dapat melihat footer yang dipaku di skrip pengguna (setelah melompat ke bawah) dan sepenuhnya memahami bagaimana membangun tata letak halaman. Sangat menjengkelkan untuk menggunakan desain melompat setiap hari, jadi disarankan untuk melakukannya murni untuk tujuan demonstrasi dan pengujian. Di skrip pengguna HabrAjax, saya memasang skrip serupa, menutupnya dengan pengaturan "underFooter" (beri tanda "centang" di daftar pengaturan di depan "footer dipaku ke bawah"), mulai dari versi 0.883_2012-09- 12.

Apakah footer yang dipaku memengaruhi kebutuhan untuk memperbarui gaya ZenComment, jika sudah diatur? Ya, memang. Karena rantai prioritas gaya yang kompleks, di mana gaya yang disisipkan oleh skrip pengguna memiliki prioritas terendah, kami harus sedikit menyesuaikan gaya pengguna untuk kemampuan bekerja dengan footer yang dipaku. Jika Anda tidak memperbarui gaya pengguna (ke 2.66_2012-09-12+) - footer akan bekerja tidak akurat.

Memblokir Rotated_post (tiga posting populer dari masa lalu) terlihat lebih logis dengan footer, jadi dalam skrip sebenarnya juga dipindahkan ke footer.

Item kedua (dari daftar cacat tata letak) adalah alasan murni untuk Habr (mereka tidak berlaku untuk skrip pengguna dan sebagian mengulangi yang sebelumnya).

Halaman memiliki masalah yang mencegah mereka membuat footer yang dipaku dalam CSS murni - tinggi footer yang tidak ditentukan tergantung pada ukuran font default di browser. Untuk menerapkan footer di CSS, Anda harus memilih tinggi relatif font, tetapi mungkin tidak berfungsi jika komputer pengguna tidak memiliki font yang disediakan. Oleh karena itu, solusinya harus menyertakan javascript yang dapat menyesuaikan perkiraan posisi footer ke posisi yang tepat dengan transisi. Atau, setelah melihat keberterimaan solusi yang dibuat pada skrip pengguna pada platform yang berbeda, lakukan instalasi terhitung dari footer yang dipaku - pengamatan pertama menunjukkan bahwa solusi tersebut praktis.

Kesimpulan: Anda dapat mengatur tata letak sepenuhnya di Habré, tetapi untuk ini Anda memerlukan perancang tata letak yang memahami dengan jelas perilaku tata letak, mengatur blok dalam urutan yang benar. (Sekarang footer dan spanduk atas "tidak ada" dan tidak sedemikian rupa sehingga mereka dapat dengan mudah mendapatkan footer yang dipaku dengan gaya.) Anda dapat melakukannya tanpa JS jika Anda mengatur ketinggian footer dalam unit relatif, mengambil beberapa margin ruang untuk ketidakterbatasan font.

Penerapan

Jika Anda mengaktifkan HabrAjax 0.883+, kita akan melihat "footer yang dipaku" berfungsi. Ini menyesuaikan ketinggian dengan bantuan skrip. Ini memungkinkan Anda untuk mengevaluasi seberapa jauh halaman yang lebih baik dengan tampilan footer yang dipaku dibandingkan dengan yang biasa. Gaya pengguna ZenComment kompatibel dengan skrip, tetapi agar footer yang dipaku dapat berfungsi dengan baik dengan skrip tersebut, Anda perlu menginstal ZenComment versi 2.66_2012-09-12 +.

Fakta Perilaku Implementasi

Shamanisme dengan footer, gaya dan skrip adalah perdukunan (hanya didukung oleh teori). Di browser yang berbeda, perilaku yang sedikit berbeda, tetapi di beberapa tempat - tidak terduga. Tanpa skrip pengguna dan penataan ulang blok, hasilnya akan berbeda. Itulah yang diberikan oleh eksperimen dengan implementasi pada skrip pengguna.

1) Firefox - kurangnya lompatan footer yang tidak terduga. Aneh bahwa mereka tidak ada - rendering terjadi setelah menempatkan footer di bagian bawah.

2) Chrome - terkejut dengan "gulir berkeliaran" - ruang kosong ditambahkan ke halaman dengan periode satu kali per detik di bagian bawah - sesuatu yang salah terjadi dengan perhitungan ketinggian. Itu diperlakukan dengan menambahkan html,body(height:100%) ke gaya pengguna, tetapi tanpa jaminan bahwa itu akan selalu berfungsi. Lebih dapat diandalkan untuk memeriksa apakah dokumen tidak melebihi tinggi jendela, dan jika tidak, maka pindahkan footer, jika tidak - tidak ada. Dengan melompat - semuanya beres.

3) Opera - tidak ada lompatan (v. 12.02) pada pemuatan halaman pertama, tetapi pemuatan ulang yang tergesa-gesa mungkin menunjukkan lompatan footer. Jika tidak, itu mengarah tidak kurang benar dari Fx.

Nah, Anda harus secara khusus mengajarkan Chrome untuk berperilaku benar (dengan skrip) dan meluncurkan versi untuk ditinjau dalam formulir ini. Oleh karena itu, bagian dalam skrip pengguna sedikit lebih rumit daripada yang diberikan dalam artikel.

Harus diingat bahwa ini bukan implementasi yang lengkap - ini tidak memperhitungkan, misalnya, kasus pengubahan ukuran jendela oleh pengguna. Anda juga dapat menemukan kombinasi yang jarang (dalam praktiknya) dari perubahan ketinggian footer sebelum dan sesudah gerakan, di mana logika akan mulai gagal tanpa menyebabkan ketidaknyamanan. Kekurangan sengaja dibiarkan, karena keseimbangan kerumitan revisi dan solusi sementara tetap terjaga.

Akibatnya, ini menjadi skema kerja yang sepenuhnya bisa diterapkan, setidaknya untuk komputer desktop yang cepat. Jika perilaku footer yang salah terdeteksi, pengaturan "underFooter" harus dinonaktifkan.

Untuk halaman apa itu berguna?

Di situs standar, tanpa gaya pengguna, bahkan halaman Tanya Jawab pendek lebih panjang dari 1500 piksel, yang dalam banyak kasus tidak terlihat pada monitor horizontal. Tetapi bahkan dengan monitor biasa, halaman pribadi pengguna dengan ketinggian sekitar 1300 piksel sering ditemukan, di mana footer tanpa paku muncul dengan segala kemegahannya. Tidak terlalu panjang dan sejumlah halaman dalam pengaturan pengguna.

Ketika gaya pengguna ZenComment diterapkan, mereka sangat mengurangi tinggi halaman yang diperlukan, dan skrip pengguna HabrAjax mungkin tidak menampilkan beberapa atau semua bilah sisi di bilah sisi. Oleh karena itu, dengan skrip dan gaya, efek footer tanpa paku jauh lebih sering diamati. Oleh karena itu, masuk akal bahwa perbaikan footer muncul di HabrAjax untuk pertama kalinya. Tetapi bahkan situs biasa memiliki sejumlah halaman di mana footer yang dipaku akan berguna.

Apakah akan ada dukungan?

Perilaku situs selama setahun terakhir menunjukkan bahwa pengembang (dan karena itu manajemen) telah mulai menerapkan fitur yang sebelumnya hanya ada di skrip pengguna dan gaya pengguna. Misalnya, di awal tahun saya menulis, di mana saya mengumpulkan banyak keinginan kecil. Enam bulan kemudian, saya kembali ke sana dan mencatat dengan kepuasan (tepat di teks; Anda dapat membaca "UPD" dan tanggal) bahwa sejumlah fitur yang dijelaskan sebagai keinginan telah diterapkan di situs.

Selanjutnya, mari kita lihat "panah" alih-alih kotak untuk mengevaluasi komentar. Mereka muncul di kekuatan pengguna almalexa ("Prettifier") sekitar 3 tahun yang lalu dan diadopsi ke ZenComment sekitar 2 tahun yang lalu. Sekitar 2-3 bulan yang lalu mereka muncul di situs. Mulai percaya bahwa setelah beberapa saat panah akan menyebar jarak tertentu, seperti yang dilakukan di ZenComment (satu panah ke kiri nomor, yang kedua ke kanan), agar ketinggalan lebih sedikit.

Oleh karena itu, mungkin, "footer yang dipaku" di Habré bukanlah fantasi seperti yang terlihat 3 tahun yang lalu.

Fitur lain dalam skrip HabrAjax yang muncul selama 3 bulan terakhir (dinonaktifkan di pengaturan):
* pertumbuhan otomatis bidang input (di Opera dapat memperlambat teks besar);
* hari dalam seminggu untuk tanggal selain "hari ini" dan "kemarin";
* acara di Umpan, diciutkan menjadi 1 baris dan 2 karakter;
* singkatan dari kata "habr*" menjadi "χ·" dan "χα";
* petunjuk tanggal dengan nomor artikel - dilaporkan bulan dan tahun berapa artikel itu sebelum dimuat, dengan nomor di URL;
* "Postingan Terkait" diciutkan menjadi 2 kata. Tangkapan layar popup "postingan terkait" (menunjukkan 12 tautan, bukan 4).

Tag ini dapat digunakan, seperti tag sebelumnya, beberapa kali di halaman. Anda mungkin sudah menebak dari namanya bahwa itu adalah footer halaman. Anda dapat menempatkan penghitung, teks hak cipta di situs, informasi kontak, dll. di dalamnya. Dimungkinkan juga untuk menyisipkan bilah navigasi () di footer halaman. Tidak ada yang melarang memasukkan elemen baru seperti samping dan bagian, tetapi saya tidak akan melakukan ini jika saya jadi Anda.

dan

Judul situs

Posting #1

Di sini kita akan menulis teks posting pertama.

Posting #2

Di sini kita akan menulis teks dari posting kedua.

Rekomendasikan artikel lain

• Android

Cara mendorong footer mengambang dengan benar ke bagian bawah halaman Masukkan spacer dan lawan Internet Explorer

• jendela

Apa kepanjangan dari tag footer ini?