Share
In questo tutorial, costruiremo una pagina di blog utilizzando le tecniche di prossima generazione da HTML 5 e CSS 3. Il tutorial mira a dimostrare come costruiremo i siti Web quando le specifiche saranno finalizzate e i produttori di browser li hanno implementati. Se conosci già HTML e CSS, dovrebbe essere facile da seguire.
Prima di iniziare, considera l'utilizzo di uno dei nostri modelli HTML5 o temi CSS per il tuo prossimo progetto, ovvero se hai bisogno di una soluzione rapida e professionale. Oppure puoi provare uno degli sviluppatori esperti su Envato Studio che può aiutarti con una vasta gamma di progetti personalizzati HTML5 e CSS.
Altrimenti, è tempo di approfondire queste tecniche.
HTML 5 è la prossima versione principale di HTML. Introduce una serie di nuovi elementi che renderanno le nostre pagine più semantiche. Ciò renderà molto più semplice per i motori di ricerca e gli screen reader navigare nelle nostre pagine e migliorare l'esperienza web per tutti. Inoltre, HTML 5 includerà anche API fantasiose per disegnare grafici sullo schermo, archiviare dati offline, trascinarli e rilasciarli e molto altro ancora. Iniziamo a contrassegnare la pagina del blog.
Prima di iniziare a segnare la pagina dovremmo ottenere la struttura complessiva direttamente:
In HTML 5 ci sono tag specifici pensati per segnare l'intestazione, la navigazione, la barra laterale e il piè di pagina. Per prima cosa, dai un'occhiata al markup e ti spiegherò in seguito:
Titolo della pagina Titolo della pagina
Sembra ancora HTML markup, ma ci sono alcune cose da notare:
Invece di usare div per contenere diverse sezioni della pagina, ora usiamo tag semantici appropriati. Renderanno molto più facile ai motori di ricerca e agli screen reader capire cosa è cosa in una pagina.
La navigazione è marcata esattamente come faremmo in HTML 4 o XHTML, usando una lista non ordinata. La chiave è che questa lista si trova all'interno dei tag nav.
Abbiamo già definito una nuova sezione nel documento usando il tag di sezione. Ora abbiamo solo bisogno di contenuti.
Ami i fiori tanto quanto noi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Aggiungiamo un id al tag della sezione in modo che possiamo identificarlo in seguito quando lo stile. Usiamo il tag header per avvolgere l'elemento introduttivo h2. Oltre a descrivere un intero documento, il tag dell'intestazione dovrebbe essere utilizzato anche per descrivere singole sezioni.
La nostra area di contenuto principale è composta da tre sezioni: il post del blog, i commenti e il modulo di commento. Usando le nostre conoscenze sui nuovi tag strutturali in HTML 5, dovrebbe essere facile contrassegnarlo.
Passa attraverso il markup e ti spiegherò i nuovi elementi in seguito.
Questo è il titolo di un post sul blog
postato su di Mads Kjaer - 3 commenti
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Metod odio, ultricies eu pharetra dictum, laoreet id odio ...
Iniziamo una nuova sezione e avvolgiamo l'intero post del blog in un tag di articolo. Il tag articolo è usato per indicare una voce indipendente in un blog, discussione, enciclopedia, ecc. Ed è l'ideale da usare qui. Visto che stiamo visualizzando i dettagli di un singolo post, abbiamo solo un articolo, ma nella prima pagina del blog avvolgeremo ogni post in un tag di articolo.
L'elemento di intestazione viene utilizzato per presentare l'intestazione e i metadati relativi al post del blog. Diciamo all'utente quando è stato scritto il post, chi lo ha scritto e quanti commenti ha. Si noti che il timestamp è racchiuso in un -tag. Questo tag è anche nuovo per HTML 5 e viene utilizzato per contrassegnare un luogo specifico nel tempo. Il contenuto dell'attributo datetime dovrebbe essere:
Marcare i commenti è abbastanza semplice. Non vengono utilizzati nuovi tag o attributi.
Commenti
George Washington su Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Benjamin Franklin su Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Numerosi miglioramenti ai moduli sono stati introdotti in HTML 5. È più necessario convalidare sul lato client i campi obbligatori, le e-mail, ecc. Il browser si occupa di questo per te.
Ci sono nuovi due nuovi tipi di input, email e url. Email specifica che l'utente deve inserire una e-mail valida e che l'utente deve inserire un indirizzo Web valido. Se scrivi obbligatorio come attributo, l'utente non può inviare un campo vuoto. "Required" è un attributo booleano, nuovo in HTML 5. Significa semplicemente che l'attributo deve essere dichiarato senza un valore.
Il markup della barra laterale e del piè di pagina è estremamente semplice. Alcune sezioni con alcuni contenuti all'interno dei tag appropriati, a parte e a piè di pagina.
Puoi vedere il markup finale, non stornato qui. Ora per lo styling.
Il CSS 3 si basa sui principi sugli stili, i selettori e la cascata che conosciamo molto bene dalle precedenti versioni di CSS. Aggiunge molte nuove funzionalità, inclusi nuovi selettori, pseudo-classi e proprietà. Usando queste nuove funzionalità diventa molto più semplice configurare il tuo layout. Tuffiamoci dentro.
Per iniziare, definiremo alcune regole di base riguardanti la tipografia, il colore di sfondo della pagina, ecc. Riconoscerai tutto questo dal CSS 2.1
/ * Ripristina CSS resettato * / margine: 0; padding: 0; / * Dire al browser di rendere HTML 5 elementi come blocco * / header, footer, aside, nav, article display: block; body margin: 0 auto; larghezza: 940 px; font: 13px / 22px Helvetica, Arial, sans-serif; sfondo: # f0f0f0; h2 font-size: 28px; altezza della linea: 44px; imbottitura: 22px 0; h3 font-size: 18px; altezza della linea: 22px; imbottitura: 11px 0; p padding-bottom: 22px;
Per prima cosa ripristiniamo gli stili margin e padding con una semplice regola. In un ambiente di produzione userei un reset CSS più completo come quello di Eric Meyer (per CSS 2.1) ma per lo scopo del tutorial questo lo farà.
Diamo quindi al browser il rendering di tutti i nuovi elementi HTML 5 come blocchi. I browser vanno bene con elementi che non riconoscono (questo è il motivo per cui HTML 5 è in qualche modo compatibile con le versioni precedenti), ma non sanno come questi elementi dovrebbero essere renderizzati di default. Dobbiamo dirglielo fino a quando lo standard non sarà implementato su tutta la linea.
Nota anche come ho scelto di ridimensionare i caratteri in pixel invece di em o%. Questo per mantenere la natura progressiva del tutorial. Quando i principali browser un giorno completeranno completamente l'implementazione di HTML 5 e CSS 3 avremo tutti accesso allo zoom delle pagine invece del solo ridimensionamento del testo. Ciò elimina la necessità di definire le dimensioni in unità relative, in quanto il browser ridimensiona comunque la pagina.
Guarda come appare la pagina con lo stile di base applicato. Ora possiamo passare allo styling del resto della pagina. Non sono richiesti stili aggiuntivi per l'intestazione, quindi andremo direttamente alla navigazione.
È importante notare che la larghezza del corpo è stata definita come 940px e che è stata centrata. La nostra barra di navigazione deve coprire l'intera larghezza della finestra, quindi dovremo applicare alcuni stili aggiuntivi:
Accentsconagua
nav position: absolute; a sinistra: 0; larghezza: 100%; background: url ("nav_background"); Posizioniamo l'elemento nav in modo assoluto, lo allineiamo alla sinistra della finestra e lo facciamo estendersi su tutta la larghezza. Centra l'elenco nidificato per visualizzarlo entro i limiti del layout:
nav ul margin: 0 auto; larghezza: 940 px; stile elenco: nessuno;
Ora definiremo alcuni stili aggiuntivi per rendere gli elementi di navigazione più belli e allinearli alla griglia su cui è basato il layout. Ho anche incluso uno stile per evidenziare la pagina in cui si trova l'utente e alcuni stili personalizzati per il collegamento dell'abbonamento.
nav ul li float: sinistra; nav ul li a display: block; margin-right: 20px; larghezza: 140 px; font-size: 14px; altezza della linea: 44px; allineamento del testo: centro; decorazione del testo: nessuna; colore: # 777; nav ul li a: hover color: #fff; nav ul li.selected a color: #fff; nav ul li.subscribe a margin-left: 22px; padding-left: 33px; allineamento del testo: a sinistra; background: url ("rss.png") centro sinistra senza ripetizione; Il markup per l'introduzione è piuttosto semplice: una sezione con un'intestazione e un paragrafo di testo. Tuttavia, utilizzeremo alcuni nuovi trucchi CSS 3 per renderlo più accattivante.
#intro margin-top: 66px; imbottitura: 44px; background: # 467612 url ("intro_background.png") repeat-x; dimensione dello sfondo: 100%; border-radius: 22px; Stiamo usando due nuove proprietà. Il primo è in background, che consente di ridimensionare l'immagine di sfondo. Nel nostro caso, lo ridimensioniamo al 100% su entrambi gli assi. Se la casella si espande man mano che aggiungiamo altro contenuto, lo sfondo del gradiente verrà ridimensionato. Questo è qualcosa che non era possibile in CSS 2.1 senza problemi di markup non-semantici e vari browser.
La seconda nuova proprietà è border-radius, che applica angoli arrotondati all'elemento. Il raggio dei nostri angoli arrotondati è di 22 px in ogni angolo. È possibile specificare valori diversi per ogni angolo o scegliere di arrotondare solo i singoli angoli.
Sfortunatamente, nessuna delle proprietà è completamente implementata nei principali browser. Tuttavia, possiamo ottenere supporto tramite l'uso di attributi specifici del fornitore. Le dimensioni dello sfondo sono supportate dalle versioni più recenti di Safari, Opera e Konqueror. Border-radius è supportato dalle nuove versioni di Safari e Firefox.
#intro ... / * Dimensione dello sfondo non ancora implementata * / -webkit-background-size: 100%; -o-background-size: 100%; -khtml-background-size: 100%; / * Border-radius non ancora implementato * / -moz-border-radius: 22px; -webkit-border-radius: 22px;
Dato che abbiamo definito un colore di sfondo, non ci saranno grossi problemi nei browser che non supportano le dimensioni in background, come Firefox. Ora abbiamo solo bisogno di stile l'intestazione e il testo.
#intro h2, #intro p¬ † larghezza: 336px; #intro h2 padding: 0 0 22px 0; font-weight: normal color: #fff; #intro p padding: 0; colore: # d9f499;
L'immagine del fiore può essere aggiunta facilmente dando a #intro una seconda immagine di sfondo, qualcosa che supporta CSS 3.
#intro ... background: # 467612 url ("intro_background.png") in alto a sinistra (287px 100%) repeat-x, url ("intro_flower.png") in alto a destra (653px 100%) no-repeat; ... Diamo le due dimensioni esplicite delle immagini di sfondo per garantire che non si sovrappongano e che siamo impostati. Notare la notazione abbreviata della dimensione dello sfondo.
Sfortunatamente, nessun browser lo supporta in modo affidabile, quindi dovremo farlo alla vecchia maniera: includendo un'immagine in linea e posizionandola usando i CSS. Guarda l'ultimo esempio per vedere come è stato fatto.
L'area del contenuto e la barra laterale saranno allineate l'una accanto all'altra. Tradizionalmente lo faresti usando i float, ma nel CSS 3 useremo le tabelle!
"Cosa?! Tabelle?" potresti chiedere e sembrare confuso. Probabilmente hai imparato anni fa che usare le tabelle per il layout web è un grande no-no, e lo è ancora. Non si dovrebbe mai usare l'elemento table per marcare un layout. Tuttavia, in CSS 3 possiamo fare in modo che gli elementi si comportino come tabelle senza che vengano mai visualizzati nel markup! Per iniziare, avremo bisogno di alcuni div per raggruppare le sezioni in un modo un po 'più logico.
Tutto ha ancora senso semanticamente, ma ora possiamo modellarlo. Vogliamo che il #content div si comporti come un tavolo, con #mainContent e a parte come celle di tabella. Con CSS 3, questo è molto semplice:
#content display: table; #mainContent display: table-cell; larghezza: 620 px; padding-right: 22px; aside display: table-cell; larghezza: 300 px;
È tutto! Niente più immagini di sfondo floating, faux column, margini di compensazione o di compressione. Abbiamo fatto in modo che gli elementi si comportino come un tavolo, e questo ci rende molto più facile fare il layout.
Lo stile dell'intestazione del post è piuttosto banale, quindi salterò alla parte divertente: il layout a più colonne.
Più colonne di testo erano in precedenza impossibili senza dividere manualmente il testo, ma con CSS 3 è un gioco da ragazzi, anche se dobbiamo aggiungere un div attorno ai paragrafi multipli per farlo funzionare con i browser correnti.
Lorem ipsum dolor sit amet…
Pellentesque ut sapien arcu ...
Vivamus vitae nulla dolor ...
...
Ora possiamo aggiungere due proprietà semplici e chiamarle un giorno.
.blogPost div numero di colonne: 2; column-gap: 22px;
Vogliamo 2 colonne e un intervallo di 22 px tra le colonne. Il div aggiuntivo è necessario perché non esiste attualmente un modo supportato per fare in modo che un elemento si estenda su più di una colonna. In futuro, tuttavia, sarai in grado di specificare la proprietà column-span, e potremmo semplicemente scrivere:
.blogPost column-count: 2; column-gap: 22px; .blogPost header column-span: all;
Naturalmente le proprietà di conteggio delle colonne e colonne sono supportate solo da alcuni browser, Safari e Firefox. Dobbiamo utilizzare le proprietà specifiche del fornitore per ora.
.blogPost div / * Numero colonne non ancora implementato * / -moz-column-count: 2; -webkit-column-count: 2; / * Column-gap non ancora implementato * / -moz-column-gap: 22px; -webkit-column-gap: 22px;
Se guardi da vicino l'immagine nel post del blog vedrai un'ombra. Siamo in grado di generare questo utilizzando CSS 3 e la proprietà box-shadow.
.blogPost img margin: 22px 0; box-shadow: 3px 3px 7px # 777;
Il primo "3px" indica al browser dove vogliamo che l'ombra si fermi orizzontalmente. Il secondo "3px" indica dove vogliamo che l'ombra si fermi verticalmente. L'ultimo "7px" è quanto deve essere sfocato il bordo. Se lo si imposta su 0, sarà completamente solido. Ultimo ma non meno importante, definiamo il colore di base dell'ombra. Questo colore è ovviamente sbiadito, a seconda di quanto offuschi l'ombra.
Probabilmente non sorprende che questa proprietà non sia ancora implementata in tutti i browser. Infatti, funziona solo in Safari e devi usare la proprietà specifica del venditore.
.blogPost img margin: 22px 0; -webkit-box-shadow: 3px 3px 7px # 777;
Zebra-striping, o evidenziare ogni secondo elemento di una serie, ha tradizionalmente richiesto la selezione di tutti gli elementi tramite javascript, quindi il loro looping e l'evidenziazione di tutti gli elementi dispari. CSS 3 introduce la pseudo-classe "nth-child", che rende ridicolmente semplice farlo senza javascript. Lo useremo per zebra-stripe i commenti.
sezione # commenti articolo: nth-child (2n + 1) padding: 21px; background: # E3E3E3; border: 1px solid # d7d7d7; / * Border-radius non ancora implementato * / -moz-border-radius: 11px; -webkit-border-radius: 11px;
Il valore strano "2n + 1" è in realtà piuttosto semplice se capisci cosa significa:
In alternativa, potresti semplicemente scrivere:
sezione # commenti articolo: nth-child (dispari) ...
Poiché lo standard include i due valori più utilizzati come abbreviazione, dispari e pari. Il resto dello stile dei commenti dovrebbe essere semplice da capire con le tue nuove conoscenze.
Un paio di tecniche CSS 3 sono riutilizzate nello stile del modulo di commento, del footer e della barra laterale. Nel modulo di commento e nel piè di pagina ho utilizzato lo stesso tipo di tecnica di layout di tabella utilizzata nel layout principale. Nel bordo-raggio della barra laterale viene utilizzato per aggiungere angoli arrotondati alle diverse sezioni.
Guarda il design finale con tutti gli stili applicati.
La pagina viene visualizzata correttamente in Safari 4 e nei browser Webkit più recenti, poiché è l'unico motore di rendering che supporta tutte le tecniche CSS 3 che abbiamo utilizzato. Firefox 3 ha alcuni problemi nell'applicare gli angoli arrotondati alla nostra immagine fiore e non supporta le dimensioni dello sfondo, ma a parte il fatto che il layout funziona. Ho scelto di ignorare Internet Explorer perché richiede un po 'di hacking per far funzionare l'HTML 5. Potresti anche definire alcune regole aggiuntive e ottenere tutto ciò che funziona sui principali browser, ma tutto questo non rientra nell'ambito del tutorial.
Quando HTML 5 e CSS 3 vengono implementati in un giorno in tutti i browser, sarà molto più semplice creare siti Web. Finalmente potremo smettere di usare i float per il layout (che non sono stati pensati per essere usati), e impiegheremo molto meno tempo a scrivere javascript per ridimensionare le nostre immagini di sfondo o strisce zebra sulle nostre tabelle. Speriamo che useremo tutto questo tempo extra per studiare alcune aree del web design trascurate da tempo, come l'ottimizzazione del front-end e un'adeguata architettura dell'informazione.
Dai un'occhiata ai nostri modelli HTML5 o ai temi CSS, se hai bisogno di una soluzione professionale e pronta per il tuo prossimo progetto web.
