Che cosa significa questo tag del piè di pagina. Nuovi tag. e sfruttalo al meglio
Se le scarpe sono la componente finale di qualsiasi outfit, il footer di un sito di e-commerce è l'elemento finale del suo design di vendita. Concentrandosi sull'elemento più in basso del footer, i siti Web moderni sono pronti a mostrare la propria individualità in ogni modo. In un ambiente di e-commerce competitivo, ci sono abbastanza idee originali, creatività e tendenze di design. Prima di diversificare il footer di un sito E-commercial, vale la pena considerare punti importanti. Cosa posizionare per primo e come farlo al meglio? Dai un'occhiata alla nostra recensione ispiratrice dei design dei piè di pagina per opzioni interessanti.
Leggi anche: 13 tendenze di marketing e-commerce del 2019
Statistiche curiose dall'azienda Chartbeat. Uno studio sul comportamento di 25 milioni di utenti ha mostrato quanto profondamente navigano le pagine. Si scopre che l'attenzione dell'utente è attirata dallo spazio sotto la linea di piegatura. Per ottenere informazioni più pratiche, i visitatori si soffermano più a lungo nell'area di 1200 px dalla parte superiore della pagina (con una media di 700 px in verticale sullo schermo nel browser) o dietro il secondo schermo.
Tempo di visualizzazione (sec.) / Distanza dalla parte superiore della pagina (pixel)
Un grande divario nella durata della visualizzazione del primo e del secondo schermo. Il TOP stesso è di 4 secondi, la durata raggiunge un massimo (16 secondi) a 1200 pixel dall'alto, e con un ulteriore scorrimento diminuisce lentamente.
Quota di visitatori (%) / Distanza dalla parte superiore della pagina (pixel)
Una parte significativa dei visitatori (oltre il 25%) non attende nemmeno il caricamento del contenuto e inizia a scorrere la pagina. Ciò significa che solo il 75% vedrà per primo il massimo. L'area più vista della pagina è 550px (appena sopra la linea di piega).
Lo studio sfata il mito secondo cui gli utenti non scorrono fino in fondo alla pagina e guardano tutto il contenuto. Il footer è importante anche per un moderno sito di eCommerce e ha anche i suoi vantaggi.
Idee su come progettare un "seminterrato" (piè di pagina), esempi di vendita di design
Questi 10 suggerimenti ti mostreranno come progettare magnificamente il piè di pagina per il sito, secondo le regole di composizione nel web design e con la risoluzione delle attività prioritarie. Applica le tattiche più appropriate per migliorare usabilità, UX (esperienza utente) e persino aumentare le vendite.
1. Informazioni richieste
Tradizionalmente, le questioni organizzative e legali richieste sono trattate nel footer del sito. Le notifiche hanno uno stile di testo meno visibile, che libera altre aree della pagina per elementi più significativi. Ecco un elenco di esempio da considerare:
- Note sul copyright
- Disclaimer legali
- Informazioni di fatturazione
- Avviso sui cookie
Il sito web che vende la merce deve soddisfare i requisiti di legge e fornire informazioni sulla procedura, sui termini di restituzione. La sua posizione nel footer è comoda sia per la risorsa di vendita che per i visitatori.
Esempio di piè di pagina: Yves Rocher
Negozio online Yves Rocher: footer a schermo intero con un bel design a strati alternati. Informa sull'azienda, sull'infrastruttura del sito di vendita - dal tracciamento degli ordini alla politica sui dati personali. Ecco suggerimenti sull'utilizzo del prodotto, bonus, promozioni
Esempio di piè di pagina: Luminosità
Ai commercianti di additivi alimentari viene assegnata una maggiore legalità una responsabilità. Ci sono alcune cose che dovrebbero/non dovrebbero dire sul loro sito di vendita. I collegamenti alle informazioni legali sono in grassetto per una migliore visibilità.
Un piè di pagina con una bella immagine di sfondo si adatta molto organicamente al design generale del sito. Non esiste un confine chiaro, piuttosto il contenuto stesso funge da separatore
Esempio di piè di pagina: Saddleback Leather Co
Sito di vendita con un bellissimo design di intestazione e piè di pagina retrò. 100 anni di garanzia contro difetti di materiale e finitura. Le condizioni di reso sono accompagnate da storie interessanti... non tutto è così triste con le necessarie informazioni sull'e-commerce, a quanto pare
2. Spazio negativo: distanza visiva sufficiente
Quando limiti il numero di collegamenti a piè di pagina, non essere avaro con lo spazio negativo: questo avrà un effetto sorprendente sulla percezione visiva e migliorerà la leggibilità. Come regola generale, quando si mantiene una gerarchia visiva, gli elementi centrali si notano più velocemente (possono essere usati a vantaggio!).
Esempio a piè di pagina: QUAY AUSTRALIA
Con uno stile minimalista e un menu a tendina fisso, un negozio online può permettersi un ampio piè di pagina.
esempio a piè di pagina: Incase
Una grande quantità di spazio micronegativo (tra piccoli elementi) si può dire così: finché sono presenti tutte le informazioni necessarie, è leggibile e percepibile rapidamente - va tutto bene
Esempio a piè di pagina: Stumptown Coffee Roasters
L'ampio footer del sito del caffè è un ottimo completamento della composizione di design pulita, che ha molto spazio macro-negativo ("aria" tra sezioni/sezioni)
3. Invito all'azione finale
Leggi anche: Oltre 30 esempi e idee di design per pulsanti di azione target
Il design elegante del piè di pagina parla in modo eloquente della risorsa stessa. È importante notare che l'acquirente rimane qui un po' più a lungo che nel resto della pagina. Una buona occasione per un'altra call to action finale. Spesso si tratta di un abbonamento/mailing list, ma puoi anche associare una chiamata CTA alla registrazione dell'account.
esempio a piè di pagina: Greetabl
Greetabl ha una parte inferiore delle pagine progettata in modo modesto, inclusa una chiamata per iscriversi. Con un minimo di elementi, la chiamata diventa evidente e, in armonia con lo sfondo turchese, si trasforma in una decorazione del sito
Esempio di piè di pagina: Ecwid
Bel design con inviti all'azione in fondo alle pagine. La struttura del costruttore di siti Web di vendita è universale. È stato tradotto in 35 lingue per i suoi milioni di clienti.
4. Carrello mobile: aumenta la disponibilità della funzionalità di vendita
Accedere al carrello dalla parte inferiore del sito è un ottimo modo per migliorare l'usabilità e le qualità di vendita del sito.
Esempio di piè di pagina: Lemonadela
Il sito web di vendita della società di catering è gradevole nell'aspetto e conveniente per l'acquirente
5. Navigazione nel piè di pagina
La parte inferiore del sito è l'ideale per le informazioni visualizzate di rado: sull'azienda, i termini del servizio e l'informativa sulla privacy. In questo caso, la funzione del footer è quella di salvare tutti. Sentendosi perso nell'ambiente dell'eCommerce, ci si interessa all'infrastruttura dell'eCommerce, scorrendo istintivamente...
Lo spazio negativo è necessario per la leggibilità del contenuto. In generale, un "piè di pagina" non è per scopi di navigazione, a differenza di un menu o di una mappa del sito. Solo in rari casi i siti di e-commerce inseriscono determinate categorie di prodotti nel footer (
Ricordo che nel momento in cui ho iniziato a passare dalle tabelle al layout per div, una delle difficoltà che ho incontrato è stata la seguente: come spingere il piè di pagina del sito (piè di pagina) nella parte inferiore della finestra del browser in modo che la pagina appaia allungata per tutta la sua altezza, indipendentemente dalla quantità di testo, e se l'altezza della pagina è maggiore dell'altezza della finestra del browser (quando viene visualizzata una pergamena), il piè di pagina rimarrebbe nella posizione corretta.
Mentre le tabelle risolvono questo problema solo specificando l'altezza per la tabella e/o la cella nidificata in essa, quando si utilizza CSS nel layout a blocchi, viene utilizzato un approccio completamente diverso.
Nel processo di pratica, mi sono identificato 5 modi per spingere il piè di pagina in fondo alla finestra del browser con CSS.
Il codice HTML di tutti i metodi presentati ha la seguente struttura (l'unica differenza è nel codice CSS):
Il codice CSS seguente include solo quelle proprietà che sono minimamente necessarie per implementare il metodo corrispondente. Per ognuno di essi puoi vedere un esempio dal vivo.
Primo modo
Il piè di pagina viene spinto verso il basso posizionandolo in modo assoluto e tirando l'altezza dei blocchi principali (html , body e .wrapper) del 100%. In questo caso, il content block.content deve specificare un rientro inferiore, che sia uguale o maggiore dell'altezza del piè di pagina, altrimenti quest'ultimo chiuderà parte del contenuto.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( position: relative; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( posizione : assoluto; a sinistra: 0; in basso: 0; larghezza: 100%; altezza: 80px; )
Secondo modo
Il piè di pagina viene premuto allungando il blocco di contenuto e i suoi "genitori" per l'intera altezza della finestra del browser e sollevando il piè di pagina verso l'alto attraverso il margine negativo (margin-top) per eliminare lo scorrimento verticale che appare. In questo caso, è necessario specificare l'altezza del seminterrato e deve essere uguale al valore del rientro.
* ( margin: 0; padding: 0; ) html, body, .wrapper ( height: 100%; ) .content ( box-sizing: border-box; min-height: 100%; padding-bottom: 90px; ) . footer ( altezza: 80px; margine superiore: -80px; )
Grazie alla proprietà box-sizing: border-box, non lasciamo che la casella .content superi il 100% di altezza. Quindi, in questo caso, min-height: 100% + padding-bottom: 90px equivale al 100% dell'altezza della finestra del browser.
Terza via
Va bene perché, a differenza di altri metodi (tranne il 5°), l'altezza del piè di pagina non ha importanza.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: table; height: 100%; ) .content ( display: table-row; height: 100%; )
Qui emuliamo il comportamento di una tabella trasformando il blocco .wrapper in una tabella e il blocco .content in una riga di tabella (rispettivamente display: table e display: table-row properties). A causa di ciò, oltre al fatto che il blocco .content e tutti i suoi contenitori principali sono impostati su un'altezza del 100%, il contenuto viene esteso all'intera altezza, ma meno l'altezza del piè di pagina, che viene determinata automaticamente - l'emulazione di tabella non consente al piè di pagina di uscire dall'altezza della finestra del browser.
Di conseguenza, il piè di pagina viene premuto fino in fondo.
Quarto modo
Questo metodo è diverso da tutti i precedenti, e la sua particolarità è l'uso della funzione CSS calc() e dell'unità vh, che sono supportate solo dai browser moderni. Qui è necessario conoscere l'altezza esatta del seminterrato.
* ( margin: 0; padding: 0; ) .content ( min-height: calc(100vh - 80px); )
100vh è l'altezza della finestra del browser e 80px è l'altezza del piè di pagina. E con l'aiuto della funzione calc(), sottraiamo il secondo valore dal primo, premendo così il piè di pagina verso il basso.
Puoi scoprire quali browser supportano calc() e vh su caniuse.com utilizzando i seguenti link: supporto per la funzione calc(), supporto per unità vh.
Quinto metodo (il più rilevante)
Questo è il metodo migliore tra tutti quelli presentati, ma funziona solo nei browser moderni. Come nel terzo metodo, l'altezza del piè di pagina non ha importanza.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: flex; flex-direction: column; min-height: 100%; ) .content ( flex: 1 0 auto ; ) .piè di pagina ( flex: 0 0 automatico; )
È possibile ottenere informazioni sul supporto del browser per la proprietà flex.
Tutti coloro che sono abituati a pagine di siti Web a tutti gli effetti preferiscono l'aspetto di un "inchiodato" (appiccicoso, appiccicoso) nella parte inferiore del piè di pagina della pagina. Ma ci sono due problemi su Internet: i campi di input che non crescono verso il basso e i piè di pagina che non sono inchiodati (nella parte inferiore della finestra). Ad esempio, quando apriamo pagine brevi come habrahabr.ru/settings/social, salta subito all'occhio il fatto che le informazioni destinate a essere nella parte inferiore del viewport si attaccano al contenuto e si trovano da qualche parte nel mezzo, o addirittura in alto della finestra quando il fondo è vuoto.
Quindi, invece di .
Questo manuale per principianti mostrerà come creare un piè di pagina "inchiodato" in 45 minuti, correggendo i difetti anche di una pubblicazione così rispettata come Habr e competere con essa come esecuzione del tuo progetto promettente.
Diamo un'occhiata all'implementazione di un tipo di footer inchiodato, prelevato dalla rete, e cerchiamo di capire cosa sta succedendo. 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; ) /* deve avere la stessa altezza del piè di pagina */ #footer ( position: relativo; margin-top: -150px; /* valore negativo dell'altezza del footer */ height: 150px; clear:both;) /* CLEAR FIX*/ .clearfix:after (contenuto: "."; display: blocco; altezza: 0; clear: entrambi; visibilità: nascosto;) .clearfix (display: inline-block;) /* Nasconde da IE-mac \*/ * html .clearfix( height: 1%;) .clearfix(display: block;) /* Termina nascondi da IE-mac */
HTML:
Cominciamo con la teoria
La normale implementazione di un footer inchiodato si basa sulla proprietà CSS2-unique che gli elementi sono figli immediati. CORPO- altezza percentuale supporto ( altezza: 100% o altro) rispetto alla finestra, se tutti i genitori hanno la stessa altezza percentuale, a partire dal tag HTML. In precedenza, senza doctype, ma ora in modalità Quirks, le altezze percentuali degli elementi sono supportate a qualsiasi livello e nei doctype moderni, solo all'interno di elementi con set di percentuali. Quindi, se creiamo un blocco di contenuto (chiamiamolo #disposizione) avendo un'altezza del 100%, scorrerà come se fosse una finestra. Tutto il contenuto (streaming) viene inserito al suo interno, ad eccezione del piè di pagina e forse dell'intestazione.Il piè di pagina viene posizionato dopo questo blocco e gli viene assegnata un'altezza di 0px. In generale, puoi seguire #disposizione inserisci tutti i blocchi che vuoi, ma devono essere tutti alti 0 pixel o al di fuori del flusso del documento (non posizione: statica). E c'è un altro trucco importante che viene solitamente utilizzato. Non è necessario rendere l'altezza uguale a 0. È possibile fissare l'altezza, ma sottrarla dal blocco principale per la proprietà margine inferiore: -(altezza);.
In termini umani, gli stili creano una "tasca" vuota nella parte inferiore, in cui è incorporato il piè di pagina, e risulta sempre essere bloccato sul bordo inferiore della finestra o sul bordo inferiore del documento se il documento è più alto dell'altezza della finestra. Su Internet e su Habré, ci sono molte implementazioni del footer, con successo variabile in tutti i browser. Continuiamo a costruirlo da soli, utilizzando il layout di Habr come "cavallo di lavoro".
Dal fondo del blocco #disposizione- questa è una tasca, deve essere vuota per il piè di pagina, non visualizzare gli oggetti della pagina. E qui incontriamo un'altra limitazione: non possiamo fare una tasca vuota a spese di imbottitura in #disposizione, perché allora diventerà più del 100%. non salverà margine- il vuoto deve essere eseguito a causa delle proprietà degli elementi nidificati. Inoltre, è necessario assicurarsi che gli elementi mobili non striscino fuori dal bordo del blocco, il che viene fatto, ad esempio, dal blocco
Diamo un'occhiata alla struttura delle pagine del nostro sperimentale. Il modo più semplice per farlo è aprire la finestra di Firebug o una finestra simile ("Strumenti per sviluppatori" (Ctrl-F12)) in Chrome.
Passiamo a un esempio funzionante
Quello che vediamo difetti di layout in termini di implementazione dell'effetto footer inchiodato? Lo vediamo1) Il footer del sito è all'interno di un blocco con id=layout che non ha un'altezza percentuale. In teoria, esso, i genitori e il blocco di contenuto .content-left dovrebbero essere impostati al 100% di altezza. I problemi sorgono con quest'ultimo: non è adatto a questo. Pertanto, manca un blocco interstrato o il piè di pagina è al livello sbagliato. Oltretutto,
2) l'altezza del piè di pagina è variabile (dipende dal numero di elementi nella lista e dalla dimensione del carattere, questo è visibile non da HTML, ma da CSS). E
3) sopra #disposizione c'è un ad block con un'altezza fissa di 90px;
4) non ci sono blocchi di allineamento né nel piè di pagina né (in generale) nel blocco #disposizione(Sì, ma sopra il blocco .post_ruotati; tuttavia, forse è da attribuire al piè di pagina).
Punto 4: devi disegnare con uno script.
Sembrerebbe facile capire il terzo punto aggiungendo #layout(margin-top:-90px;) Ma ricorda che questo blocco potrebbe non esistere - viene soppresso dal banner cutter o gli inserzionisti improvvisamente decidono di non farlo mostralo. Ci sono un certo numero di pagine del sito in cui non lo è. Quindi dipendenza margine superiore da un blocco di annunci è una cattiva idea. Molto meglio: mettilo dentro #disposizione Allora non si metterà in mezzo.
Il primo punto è che affinché il piè di pagina inchiodato funzioni, è necessario posizionare il blocco del piè di pagina sotto #disposizione. Tuttavia, con l'aiuto di javascript, puoi implementare altri schemi di piè di pagina inchiodati, ma in ogni caso hai bisogno di JS o del layout inizialmente corretto per farne a meno.
Dal momento che non possiamo essere più forti dell'ultimo designer di layout del sito Web che ha "schiaffeggiato" il footer nel contenuto, rimandiamo l'idea di posizionare correttamente il footer sul nostro futuro sito (che, quindi, sarà più "cool" di Habr!), e analizzeremo Habr con javascript (userscript) negli stati corretti. (Diciamo subito che non è colpa del progettista del layout, non del commutatore, ma il tipo di sito, ovviamente, determina la decisione strategica della direzione del progetto.) In questo modo non raggiungeremo l'ideale, perché nei primi secondi o due durante il processo di caricamento la pagina sarà con il layout sbagliato. Ma il concetto e la capacità di superare il sito più popolare nel mondo del personale IT sono importanti per noi.
Pertanto, nel posto giusto nello script (in precedenza, alla fine del caricamento della pagina), scriveremo i trasferimenti dei blocchi pubblicitari DOM e il piè di pagina nei posti giusti. (Prepariamoci al fatto che, a causa degli userscript, la soluzione sarà più complicata di una pulita.)
var dQ = function(q)(return document.querySelector(q);) //per abbreviare var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - all'interno del blocco di contenuti lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //sposta il footer lay.parentNode.insertBefore(footer, lay.nextSibling);
Mettiamo i blocchi al loro posto - ora resta da assegnare le proprietà necessarie agli elementi. L'altezza del piè di pagina dovrà essere impostata esattamente, semplicemente perché la conosciamo già nel momento in cui lo script utente avrà effetto (fine del caricamento della pagina). A causa del punto di attivazione dello script utente, come discusso in precedenza, il salto di visualizzazione del piè di pagina sulla pagina è inevitabile. Puoi provare a fare una “buona faccia”, ma con un “pessimo gioco”? Per che cosa? Il "pessimo gioco" del sito ti permette di realizzare un concept senza super sforzi, che basterà a valutare la qualità e non servirà se "giocherai correttamente" sul tuo progetto.
if(foot)( // block-aligner
Qui ci siamo permessi di applicare una funzione auto-scritta h.apnd_el, che fa più o meno lo stesso di jQuery -
$("".css((altezza: footH ||0)).appendTo($(footer))
E poi - un'altra tipica funzione di iniezione di regole CSS - h.addRules. Qui non puoi farne a meno, perché devi dichiarare una regola con " !importante" - proprio per le peculiarità delle priorità di stile dello script utente.
Con questi pezzi di codice, possiamo vedere il piè di pagina inchiodato nello script utente (dopo averlo saltato giù) e capire appieno come costruire il layout della pagina. È fastidioso utilizzare un design da salto ogni giorno, quindi si consiglia di farlo esclusivamente a scopo dimostrativo e di test. Nello script utente di HabrAjax ho installato uno script simile, chiudendolo con l'impostazione “underFooter” (impostare un “tick” nell'elenco delle impostazioni davanti a “footer inchiodato in fondo”), a partire dalla versione 0.883_2012-09- 12.
Il piè di pagina inchiodato influisce sulla necessità di aggiornare gli stili ZenComment, se sono impostati? Sì, lo fa. A causa della complessa catena di precedenza degli stili, in cui gli stili inseriti da userscript hanno la priorità più bassa, abbiamo dovuto regolare leggermente gli stili utente per capacità lavorare con il piè di pagina inchiodato. Se non aggiorni gli stili utente (a 2.66_2012-09-12+), il piè di pagina funzionerà in modo impreciso.
Bloccare post_ruotato (tre post popolari del passato) sembra più logico con il piè di pagina, quindi nel vero script viene spostato anche nel piè di pagina.
Il secondo elemento (dall'elenco dei difetti di layout) è il ragionamento puramente per Habr (non si applicano allo script dell'utente e ripetono parzialmente i precedenti).
Le pagine hanno un problema che impedisce loro di creare un piè di pagina inchiodato in puro CSS: un'altezza del piè di pagina non definita a seconda delle dimensioni dei caratteri predefinite nel browser. Per implementare un footer in CSS, è necessario scegliere le altezze relative dei caratteri, ma potrebbero non funzionare se il computer dell'utente non dispone dei caratteri forniti. Pertanto, la soluzione deve includere un javascript in grado di regolare la posizione approssimativa del piè di pagina nella posizione esatta con le transizioni. Oppure, dopo aver esaminato l'accettabilità della soluzione realizzata con lo script utente su piattaforme diverse, eseguire un'installazione calcolata di un piè di pagina inchiodato: le prime osservazioni mostrano che la soluzione è pratica.
Conclusione: puoi disporre completamente il layout su Habré, ma per questo è necessario un designer di layout che comprenda chiaramente il comportamento del layout, disponendo i blocchi nell'ordine corretto. (Ora il piè di pagina e il banner in alto "non ci sono" e non in modo tale da poter semplicemente ottenere un piè di pagina inchiodato con gli stili.) Puoi fare a meno di JS se imposti l'altezza del piè di pagina in unità relative, prendendone un po' margine di spazio per l'indefinitezza del carattere.
Implementazione
Se abiliti HabrAjax 0.883+, vedremo il "piè di pagina inchiodato" funzionare. Si adatta in altezza con l'aiuto di script. Ti permette di valutare quanto siano migliori le pagine con un piè di pagina inchiodato rispetto a quelle normali. Gli stili utente di ZenComment sono compatibili con gli script, ma affinché il piè di pagina inchiodato funzioni correttamente con essi, è necessario installare ZenComment versione 2.66_2012-09-12 +.Fatti sul comportamento di implementazione
Lo sciamanesimo con piè di pagina, stili e copioni è sciamanesimo (supportato solo dalla teoria). In diversi browser, comportamento leggermente diverso, ma in alcuni punti - inaspettato. Senza script utente e blocchi di riorganizzazione, i risultati saranno diversi. Questo è ciò che hanno fornito gli esperimenti con l'implementazione sullo script utente.1) Firefox: mancanza inaspettata di salti a piè di pagina. È strano che non ci siano: il rendering avviene dopo aver posizionato il piè di pagina in basso.
2) Chrome - sorprende con una "pergamena errante" - alla pagina vengono aggiunti spazi vuoti con in basso un punto di una volta al secondo - succede qualcosa di sbagliato nel calcolo delle altezze. Viene trattato aggiungendo html,body(height:100%) allo stile dell'utente, ma senza garanzie che funzionerà sempre. È più affidabile verificare se il documento non supera l'altezza della finestra e, in caso contrario, spostare il piè di pagina, altrimenti nulla. Con il salto - tutto è in ordine, lo è.
3) Opera - nessun salto (v. 12.02) al caricamento della prima pagina, ma una ricarica frettolosa potrebbe mostrare un salto nel piè di pagina. Altrimenti, conduce non meno correttamente di Fx.
Bene, dovrai insegnare in modo specifico a Chrome a comportarsi correttamente (con uno script) e distribuire la versione per la revisione in questo modulo. Pertanto, la sezione nello userscript è un po' più complicata di quella fornita nell'articolo.
Va ricordato che questa non è un'implementazione completa: non tiene conto, ad esempio, dei casi di ridimensionamento della finestra da parte dell'utente. Puoi anche trovare rare (in pratica) combinazioni di cambiare l'altezza del piè di pagina prima e dopo lo spostamento, in cui la logica inizierà a fallire senza causare inconvenienti. Le carenze vengono lasciate deliberatamente, perché viene mantenuto l'equilibrio tra la complessità della revisione e la soluzione temporanea.
Di conseguenza, si è rivelato uno schema di lavoro completamente praticabile, almeno per i computer desktop veloci. Se viene rilevato un comportamento errato del piè di pagina, l'impostazione "sotto il piè di pagina" dovrebbe essere disabilitata.
Per quali pagine è utile?
In un sito standard, senza stili utente, anche le brevi pagine di domande e risposte sono più lunghe di 1500px, che nella maggior parte dei casi è impercettibile su monitor orizzontali. Ma anche con i normali monitor, spesso si incontrano pagine personali di utenti con un'altezza di circa 1300 pixel, dove il piè di pagina non inchiodato appare in tutto il suo splendore. Non molto lungo e un numero di pagine nelle impostazioni dell'utente.Se vengono applicati stili utente ZenComment, riducono notevolmente l'altezza della pagina richiesta e lo script utente HabrAjax potrebbe non mostrare alcune o tutte le barre laterali nella barra laterale. Pertanto, con script e stili, si osserva molto più spesso l'effetto di un piè di pagina non inchiodato. Pertanto, è logico che la correzione del footer sia apparsa per la prima volta in HabrAjax. Ma anche un sito normale ha un numero di pagine in cui sarebbe utile un piè di pagina inchiodato.
Ci sarà supporto?
Il comportamento del sito nell'ultimo anno mostra che gli sviluppatori (e quindi il management) hanno iniziato a implementare funzionalità che in precedenza esistevano solo negli script utente e negli stili utente. Ad esempio, all'inizio dell'anno ho scritto, dove ho raccolto tanti piccoli auguri. Sei mesi dopo, sono tornato e ho notato con soddisfazione (proprio nel testo; puoi leggere "UPD" e date) che alcune funzionalità descritte come desideri sono già state implementate nel sito.
Successivamente, diamo un'occhiata alle "frecce" anziché ai quadrati per valutare i commenti. Sono apparsi nelle userforce di almalexa ("Prettifier") circa 3 anni fa e sono stati adottati in ZenComment circa 2 anni fa. Circa 2-3 mesi fa sono apparsi sul sito. Comincia a credere che dopo un po' le frecce si allargheranno di una certa distanza, come si fa in ZenComment (una freccia a sinistra del numero, la seconda a destra), per sbagliare di meno.
Pertanto, forse, il "piè di pagina inchiodato" su Habré non è una fantasia come poteva sembrare 3 anni fa.
Altre caratteristiche nello script HabrAjax che è apparso negli ultimi 3 mesi (disabilitato nelle impostazioni):
* autocrescita dei campi di input (in Opera può rallentare su testi di grandi dimensioni);
* giorni della settimana per date diverse da "oggi" e "ieri";
* eventi nel Feed, ridotti a 1 riga e 2 caratteri;
* abbreviazione delle parole "habr*" in "χ·" e "χα";
* cenni di date per numero di articolo - viene riportato il mese e l'anno in cui si trovava l'articolo prima del caricamento, tramite il numero nell'URL;
* "Post correlati" ridotto a 2 parole. Screenshot del popup "post correlati" (mostra 12 collegamenti, non 4).
Questo tag può essere utilizzato, come i tag precedenti, più volte su una pagina. Probabilmente hai già intuito dal nome che è il piè di pagina della pagina. Puoi inserire contatori, testo del copyright sul sito, informazioni di contatto, ecc. È anche possibile inserire una barra di navigazione () nel piè di pagina di una pagina. Nessuno vieta di inserire elementi così nuovi come a parte e sezione, ma se fossi in te non lo farei.
e
Intestazione del sito
Posta n. 1
Qui scriveremo il testo del primo post.
Posta #2
Qui scriveremo il testo del secondo post.
Il risultato dovrebbe essere il seguente:
Da questo esempio ne consegue che ogni singolo articolo o post può avere i propri elementi
Bene, ora hai familiarizzato con gli elementi strutturali di base di HTML5 e nelle prossime lezioni esamineremo ancora più nuovi elementi, varie forme che non erano in altre specifiche HTML!
