Prima di HTML5 infatti, per gestire un campo di testo generico bastava specificare l’attributo type=”text”: la semantica era legata alla classe che si attribuiva all’elemento indipendentemente dal tipo di dato inserito.
Nei casi più comuni si doveva ricorrere a javascript per effettuare banali operazioni di riconoscimento data o indirizzo e-mail, necessari per poter collegare determinati tipi di eventi ad ogni campo.

Finalmente HTML5 pone rimedio a tali lacune introducendo nuove tipologie di input che strizzano un occhio alla semantica della pagina e nuovi attributi che permettono maggior controllo al web designer e migliorano la user experience.

Cerca

Uguale ad un normale campo di testo, l’attributo search definisce un campo di ricerca.

<label for="searchui">Cerca nel sito:</label>
<input id="searchui" name="searchui" type="search" />

L’unica cosa che cambia è la visualizzazione: il campo viene visualizzato in maniera un pochino differente dai browser che lo supportano in quanto eredita la grafica dei controlli standard.

Compatibilità: solo Safari 4+ al momento.

Contatti

In HTML5 vengono aggiunti dei campi dedicati ai moduli per i contatti: email, url e tel.

<label for="mail">Indirizzo e-mail:</label>
<input id="mail" name="mail" type="email" />

<label for="website">Sito internet:</label>
<input id="website" name="website" type="url" />

<label for="phone">Telefono:</label>
<input id="phone" name="phone" type="tel" />

Visivamente sono uguali a un campo di testo normale, ma sono più corretti semanticamente. Inoltre su alcuni dispositivi portatili (es. Iphone) il campo tel, mostra il tastierino numerico piuttosto che la tastiera normale.

Quantità

Per definire le quantità uno slider è l’elemento che fa al caso nostro:

Per creare un elemento di questo tipo, attualmente, abbiamo bisogno di javascript, ma con HTML5 viene implementato nativamente impostando l’attributo range.

<label for="vote">Che voto dai al sito?</label>
<input id="vote" name="vote" type="range" />

Di default il campo accetta un valore minimo di 1 e massimo 100, ma è possibile impostare questi margini a nostro piacimento grazie agli attributi min e max:

<label for="vote">Che voto dai al sito?</label>
<input id="vote" name="vote" type="range" />

Compatibilità: il campo range funziona già con Safari 5 e Opera 9.27+: gli altri browser lo intepretano come un normale campo di testo.

Numeri

Il campo number aggiunge dei controlli utente a incremento, arrivando laddove il campo range non arriva.

Questo tipo di input è un misto fra un campo di testo ed uno slider: l’utente può incrementare e decrementare il valore al suo interno grazie ai controlli, ma può anche immettere manualmente al suo interno il valore che desidera.

<label for="sons">Quanti figli hai?</label>
<input id="sons" name="sons" type="number" />

Come nel campo range è possibile specificare un attributo min e un max validi per il controllo al click ma non per quello in immissione libera del valore.

<label for="sons">Quanti figli hai?</label>
<input id="sons" name="sons" type="number" min="0" max="100" />

Compatibilità: al momento è supportato solo da Opera 9.27+ e Safari 5, mentre tutti gli altri browser lo interpretano come un normale campo di testo.

Data e ora

Probabilmente vi sarà già capitato di vedere dei siti nei quali una volta posizionati su un campo relativo a una data compare un piccolo calendario dal quale è possibile scegliere il giorno: ecco, quello è javascript. HTML5 ha pensato anche a questo:

Saranno disponibili vari attributi type adatti a questa funzione:

• date: anno, mese e giorno (2010-08-03)
• datetime: anno, mese, giorno, ore, minuti, secondi e zona (2010-08-03T12:24:00+1)
• datetime-local: anno, mese, giorno, ore, minuti, secondi (2010-08-03T12:24:00)
• time: ore, minuti e secondi (12:24:00)
• month: anno e mese (2010-08)
• week: solo il numero della settimana in combinazione con l’anno (numero da 1 a 53)

Come è possibile vedere dagli esempi, ciò che accomuna tutti quanti è il formato della data che viene proposta sempre nella forma YYYY-MM-DDThh:mm:ss.Z.

<label for="from">Da che data vuoi prenotare?</label>
<input id="from" name="from” type="date" />

Compatibilità: attualmente è supportato solo da Opera: tutti gli altri browser lo interpretano come fosse un campo di testo.

Colore

Anche questo vi sarà capitato di vederlo e se così non fosse pensate alla pipetta di colore di Photoshop: sarebbe utile ogni tanto averne una da implementare nei nostri progetti senza utilizzare javascript, no?

HTML5 ci fornirà anche questa funzione: accetterà valori da #000000 a #FFFFFF e sarà possibile prelevare un campione di colore da un elemento della pagina.

Compatibilità: purtroppo ancora nessun browser supporta questa proprietà.

Quando si potranno usare i nuovi input di HTML5?

Probabilmente allo stato attuale delle cose, è troppo presto per utilizzare i nuovi input HTML5, ma non lo è certo per sperimentare.

Potrebbe essere interessante implementare queste nuove funzionalità supportandole momentaneamente da javascript, facendo in modo di garantire il corretto funzionamento ai browser che non supportano HTML5 e favorire così i browser più all’avanguardia: un progressive enhancement molto spinto, insomma.

Un effetto particolarmente complicato da riprodurre era l’ombra esterna ad un box di testo: era necessaria una discreta conoscenza dell’uso del box model ed a volte anche del markup aggiuntivo per poter inserire e posizionare le immagini dell’ombra. Se poi il box aveva la necessità di ridimensionarsi in base al contenuto allora i problemi triplicavano.

Meno male che CSS3 ci vuole bene e per questo è stata implementata la proprietà box-shadow che ci consente di applicare dei bellissimi effetti all’elemento senza markup aggiuntivo e senza immagini.
Ecco come funziona il box-shadow:

.box {
	box-shadow: 5px 5px 5px #333;
}

Funzionamento e parametri

La sintassi è molto semplice:

Il primo valore è l’ombra orizzontale: un valore positivo significa che l’ombra verrà posizionata a destra dell’elemento, un valore negativo significa che l’ombra verrà posizionata a sinistra dell’elemento.

Il secondo valore è l’ombra verticale: un valore negativo significa che l’ombra verrà posizionata sopra all’elemento, un valore negativo significa che l’ombra verrà posizionata sotto all’elemento.

Il terzo valore è la sfocatura dell’ombra: se impostata a 0 l’ombra sarà netta e precisa, aumentando il valore l’ombra sarà più sfocata.

L’ultimo valore si siferisce al colore dell’ombra: considerando che la proprietà box shadow è attualmente supportata solo da Firefox 3.5 +, Safari 3.0 +, Chrome 1.0 + e Opera 10.5 +, conviene impostare il colore in RGBA in modo da poter gestire anche l’opacità del colore per un migliore risultato.

Già che ci siamo aggiungiamo anche i prefissi browser per rendere più compatibile il tutto e quindi la nostra dichiarazione diventerà così:

.box {
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

Allo stesso modo è possibile riprodurre un’ombra all’interno dell’elemento grazie all’attributo inset, per creare un effetto “incassato”:

.box {
	box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
}

Interfacce stile Apple con il box-shadow

Un esempio pratico del box-shadow è perfettamente applicabile nelle schermate di Mac OSX:

Riprodurre questo effetto è semplicissimo oltre ad essere molto bello esteticamente:

#apple-ui {
	background: #ededed;
	height: 100px;
	margin: 0 auto;
	padding: 20px;
	width: 400px;
	box-shadow: inset 0px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3);
	-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	}

Con l’utilizzo della proprietà box-shadow e del border-radius possiamo riprodurre perfettamente le interfacce di sistema di Apple.

Compatibilità

Il box-shadow è un ottimo esempio di progressive enhancement.

La compatibilità è assicurata da Firefox 3.5 +, Safari 3.0 +, Chrome 1.0 + e Opera 10.5 +.
Chiaramente non è supportato da Internet Explorer 7 e 8 ma questo non compromette la navigazione del sito: coloro che utilizzano un browser Microsoft oppure un browser datato non godranno pienamente di questi effetti grafici.

Parlare di SEO arrivando fino alle teorie sulla tipografia non è cosa da poco, per questo fra le centinaia di libri di web design ce ne sono 10 che meritano davvero di essere acquistati e che andrò ad illustrare con questo articolo.

Un qualsiasi libro di web design, tuttavia, preso singolarmente non fornisce un quadro generale sull’argomento: sarà compito del designer integrare le letture con approfondimenti sui blog e con il continuo esercizio.

1. Oltre i CSS: la sottile arte del web design

Libro sul web design che vale ogni centesimo del suo prezzo. Scritto da uno dei guru di livello mondiale, questo testo è un concentrato di nuove tecniche e spunti davvero interessanti.

Per i principianti sarà una lettura che cambierà il modo di approcciarsi al web design.

2. Webdesign Bulletproof

Questo libro di web design spiega come perfezionare la propria tecnica, dando elasticità e dinamicità alle proprie creazioni: sviluppare insomma applicazioni “anti-proiettile” come dice il titolo stesso del libro. Consigliato a chi già possiede buone conoscenze di HTML e CSS.

3. Handcrafted CSS

Al momento disponibile solo in lingua inglese, è una delle letture più interessanti che ho avuto modo di fare nell’ultimo periodo: tutto il libro è focalizzato nella creazione di un layout per un sito web che viene analizzato dall’inizio alla fine, adottando tecniche innovative e illustrandole dettagliatamente.

4. Smashing Book

Più che un libro da leggere tutto d’un fiato, si tratta fondamentalmente di un manualetto da portarsi sempre dietro nei casi di necessità: tratta quasi tutte le tematiche del web design, partendo dall’analisi della struttura, passando per la scelta della gamma cromatica fino alla scelta della tipografia e al SEO.

5. Lo Zen e il design CSS

Le vere potenzialità dei CSS sono state dimostrate per la prima volta dalla comunità di CSS Zen Garden: gli utenti potevano inviare i propri design CSS utilizzando tutti la stessa struttura HTML. Il risultato fu un successo tale che i creatori decisero di scrivere questo libro che seppur vecchiotto ha ancora molto da insegnare.

Nel libro vengono anche analizzati alcuni design realizzati dagli utenti spiegando le tecniche utilizzate.

6. CSS Guida Completa

Va bene, questo non è proprio un libro di web design ma è un manuale con la M maiuscola. Non si legge pagina dopo pagina ma è comodo da tenere vicino alla tastiera e in caso di dubbio torna comodissimo: un manuale tecnico è sempre necessario!

7. Web usability 2.0: l’usabilità che conta

Il libro per eccellenza sull’usabilità e l’accessibilità. C’è tutto quello da sapere per poter ottimizzare il sito web in modo da renderlo usabile e confortevole per l’utente. Ottimi i capitoli sui motori di ricerca, e-commerce e test di usabilità.

8. Don’t make me think

Ottimo libro che dimostra come sia semplice creare siti internet usabili e accessibili con pochi piccoli accorgimenti.

9. SEO: Ottimizzazione web per motori di ricerca

Il SEO è forse la parte più lunga e delicata di un sito web: ottimizzare i contenuti per i motori di ricerca non è semplicissimo, ma l’autore in questo libro ci riesce alla grande svelando anche qualche trucco del mestiere.

10. Mobile Web Design

Disponibile anche in formato PDF, questo libro di mobile web design è un ottimo punto di partenza per sviluppare siti web compatibili con cellulari e palmari.

Il libro analizza accuratamente i limiti e le capacità dei dispositivi portatili, consigliando metodi di lavoro e tecniche per poter gestire differenti casistiche su molte periferiche portatili.

Quale sarà il prossimo libro di web design?

Il panorama del web design è in continuo aggiornamento e ogni settimana escono libri, PDF e articoli colmi di nozioni sulle nuove tendenze. Con HTML5 alle porte e CSS3 sempre più protagonista, c’è da scommetterci che nei prossimi 6 mesi usciranno parecchi libri interessanti che non mancherò sicuramente di leggere e recensire.

Provate a immaginare il sito di un concessionario di automobili che vi consenta di creare un preventivo secondo le vostre preferenze e al momento di stamparlo su carta per portarlo al venditore, scoprite vostro malgrado che la stampa non è per nulla leggibile e chiara. Delusione? Anche, ma una cosa è certa: ne viene meno l’utilità di fare un preventivo online.

Per evitare queste spiacevoli sorprese è bene definire un foglio di stile dedicato alla stampa della pagina web che tenga in considerazione diversi fattori che renderanno il vostro preventivo chiaro, leggibile e pronto per essere firmato. Prima di iniziare, però, ricordo come si fa a definire un foglio di stile per la stampa:

<link href="print.css" media="print" rel="stylesheet" type="text/css" />

L’attributo media=”print” fa in modo che l’utente non si accorga di nulla, ma al momento della stampa venga letto il CSS che andiamo a specificare. Attenzione però a specificare l’attributo media anche per il foglio di stile principale del sito: basterà aggiungere, se mancante, la proprietà media=”screen”.

Nascondere la navigazione

La navigazione è fondamentale per un sito web tanto quando inutile per la carta stampata. L’interattività non è certo il punto di forza della stampa, per questo tutte le aree di navigazione diventano inutili ed è meglio nasconderle semplicemente con un display: none.

#nav { display: none; }

Allargare l’area dei contenuti

Con tutte le aree di navigazione nascoste, il nostro contenuto può ora occupare il 100% dello spazio disponibile e rendere migliore la lettura della pagina. Basta semplicemente azzerare margin e padding, ripristinare eventuali float ed impostare width a 100%:

#content {
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
	}

Ripristinare i colori di sfondo

Alcuni browser ignorano totalmente il colore dello sfondo della pagina al momento della stampa al fine di risparmiare la cartuccia della stampante. Ad ogni modo è bene impostare il colore di sfondo del body e dell’area del contenuto sul bianco.

body {
	background-color: #fff;
	}

#content {
	background-color: #fff;
}

Ripristinare il colore del testo

Ripristinando il colore di sfondo del body o di qualsiasi altro elemento della pagina, si rischia che il colore del testo sia troppo chiaro o addirittura illeggibile, per questo è consigliabile impostare il colore del testo sul nero.

body {
	color: #000;
	}

Rendere evidenti i link

Il lettore deve poter distinguere i link dal testo normale, per questo dare uno stile ai link aiuta molto: le regole di usabilità vogliono che i link siano blu e sottolineati, ma siccome la stampa sarà quasi certamente in bianco e nero, è preferibile applicare anche un grassetto.

a {
	color: #297ce3;
	font-weight: bold;
	text-decoration: underline;
	}

Da notare che il colore applicato ai link è blu chiaro in modo tale che in scala di grigio risulti più chiaro rispetto al nero del testo.

Visualizzare la destinazione dei link

Sulla carta stampata ogni link diventa inutile per ovvi motivi, per questo è una buona abitudine mettere in chiaro il link.


Provate a pensare a un link di approfondimento che riporta la scritta “Clicca qui per maggiori informazioni”: non è utile e oltretutto diventa irritante non poter risalire al link. Questo problema si può risolvere facilmente grazie allo pseudo-elemento :after (disponibile solo per i browser che supportano completamente CSS2) con il quale andremo ad aggiungere il percorso del link subito dopo la parola collegata.

a:after {
	content: " (" attr (href) ") ";
	}

Impostare la grandezza del font

Le scuole di pensiero sono molte ma utilizzare una grandezza del carattere a 12 punti per la stampa è uno standard, per questo il consiglio è di impostare tale misura su tutti i paragrafi.

p {
	font-size: 12pt;
	}

Impostare il tipo di font

Solitamente i font aggraziati (serif) sono più facili da leggere e affaticano meno la vista, tuttavia l’utilizzo di font aggraziati per la stampa di un sito che utilizza solo font senza grazie (sans-serif) potrebbe sembrare un controsenso. L’importante è essere a conoscenza che in caso di scelta di un font non aggraziato per la stampa allora occorre aumentare la grandezza del carattere a 14pt.
Ecco qui di seguito due set di caratteri per la stampa:

/* Serif Font Stack */
body {
	font-family: Georgia, ‘Times New Roman’, serif;
	}

/* Sans-Serif Font Stack */
body {
	font-family: Arial, Helvetica, sans-serif;
	}

Per chi utilizza la proprietà @font-face di CSS3 ci sono buone notizie: è compatibile con la stampa e quindi non ci sono problemi.

Stampare i commenti

La stampa dei commenti di un articolo è una scelta. Se ritenete che i commenti agli articoli sono un valore aggiunto allora potrebbe essere utile includerli nella stampa altrimenti basta aggiungere un display: none sull’elemento che li contiene.
Nell’eventualità si decidesse di stamparli, bisogna fare in modo che i commenti inizino da una pagina nuova: per questo arriva in soccorso CSS con la proprietà page-break-before.

#comments {
	page-break-before: always;
	}

Partiamo col dire che alcuni selettori avranno maggiore importanza rispetto ad altri all’interno della cascata: già ma come? L’ultimo selettore che verrà scritto, infatti, non sempre sovrascriverà il selettore precedente per lo stesso elemento.
Qui entra in gioco la specificità dei selettori che viene indicata con 4 numeri.

Come si calcola la specificità

Si prenda in esame il seguente esempio:

#nav ul li:first-child

Nell’esempio esempio la specificità è 0, 1, 0, 3.

Il primo numero è relativo all’attributo style applicato all’elemento nel markup. Solitamente è 0 (perchè non si dovrebbero inserire style all’interno del markup) ma se vi fosse uno stile presente allora è 1.

Il secondo numero è relativo alla somma del numero degli ID nel selettore.

Il terzo numero è relativo alla somma del numero di altri attributi (classi) o pseudo-classi nel selettore ( li [id=red] ).

Il quarto numero è relativo alla somma di nomi di elementi o pseudo-elementi nel selettore ( :first-child, :first-line ).

Regole sulla specificità

• A parità di dichiarazione e specificità, l’ultima regola sovrascrive una qualsiasi regola precedente, creando conflitto di regole:

  a { color: red }
  a { colore: green }

• Regole con selettori più specifici hanno una maggiore specificità;
• I selettori di ID hanno maggiore specificità rispetto ai selettori di attributo. Ad esempio:

  /* Selettore ID */
  h1#header { background: red }
  
  /* Selettore di attributo */
  h1[id="header"] { background: yellow }

• Il CSS nel markup è più potente del file CSS esterno.
• Un selettore di classe batte un qualsiasi numero di elementi.
• Il selettore universale * ha specificità 0

L’importanza delle dichiarazioni

E’ possibile dare precedenza a una dichiarazione piuttosto che ad un’altra grazie al comando !important. In presenza di questo comando, la dichiarazione vince su qualsiasi altra dichiarazione (se ovviamente non viene sovrascritta da un’altra dichiarazione !important più in basso).
Ecco un esempio:

div { width: 100px!important; }

IE 6 e precedenti applicano il comando !important in modo scorretto: lo stile all’elemento verrà ignorato se un’altra dichiarazione della stessa proprietà compare successivamente nello stesso blocco di dichiarazione.
Ad esempio:

div { width: 100px!important; width: 120px; }

Questo bug è spesso usato come hack per sopperire alle gravi mancanze di Internet Explorer 6: con la seconda dichiarazione si applicano 120px che verranno interpretati solo da Internet Explorer 6 e precedenti perché posizionati in fondo alla dichiarazione, mentre tutti gli altri browser daranno sempre e comunque precedenza al comando !important.

Cose medievali…

Nata da un designer tedesco di nome Axel Weinbrecht, questa penna prende spunto da un’idea di epoca medievale, periodo in cui si utilizzavano punte d’argento per tracciare linee sottili: la Beta Pen, infatti, è una penna che non utilizza inchiostro nè mine per scrivere, semplicemente una punta di metallo.
Il tratto che si ottiene è circa quello di una matita (tra l’altro è ottima per le sfumature) solo che ha il vantaggio di essere indelebile e di essere infinita: in realtà si consuma, ma in MOLTO, MOLTO tempo. E’ possibile “temperare” (anche se forse dovrei dire affilare) la punta con una foglietto di carta vetrata a grana finissima, ma posso assicurare che prima di temperarla passerà parecchio tempo.

La Beta Pen oltre ad essere decisamente utile e funzionale è anche bella: il design è semplice e rifinito, al tatto la penna è liscia e comoda da impugnare.
E’ disponibile in 3 versioni:

• metallo satinato
• metallo nero
• legno di ciliegio

Il conto, prego!

Personalmente ho optato per il metallo satinato, perchè il legno mi sembrava troppo serio e delicato, mentre il nero un pò fragile: con l’utilizzo ho paura che tenda a scolorirsi, ma mi posso anche sbagliare.
Il costo è di 19.50€ , anche se sul sito ufficiale (http://www.axelweinbrecht.de) è disponibile a 15€ nella versione normale oppure a 19.50€ nella versione con due punte per scrivere (una su ogni lato): il prezzo non è indifferete ma contando la durata e il costo si una matita direi che in 6 mesi si ripaga da sola.

E’ quindi il caso di dire che ” è più potente la penna della spada”?

Mantenere il codice XHTML e CSS pulito a volte può essere un’impresa a causa delle continue modifiche, ma con qualche piccolo accorgimento è possibile farlo senza diventare pazzi. Ecco 11 linee guida da seguire per riuscirci al meglio.

Doctype: meglio Strict

Sia che venga usato HTML 4.01 o XHTML 1.0 il consiglio è di abbandonare il doctype “Transitional” e utilizzare sempre lo “Strict”: codice più pulito e standard.

Caratteri speciali e charset

Nell’head della pagina verificare che sia presente il charset. Nel caso vengano usati caratteri speciali del tag head (pratica comunque sconsigliata), convertirli nel relativo codice HTML

Indentare il codice

Sembra noioso ma è la pratica più utile e la meno utilizzata: indentare il codice aiuta nella lettura di quest’ultimo. Non c’è un modo universale per farlo, basta essere coerenti e chiari.

CSS e Javascript esterni

Evitare in ogni modo di “sporcare” l’head della pagina con stili CSS e codice Javascript. Finché possibile mantenere entrambi in file esterni e includerli nella pagina.

Annidare il codice nel modo giusto

Evitare di inserire elementi di blocco all’interno di elementi di linea: un tag H1 può contenere un tag A ma non viceversa.

Eliminare i DIV non necessari

Tanti DIV = codice confusionario e pagina lenta. Il consiglio è di ridurre al minimo il numero di DIV. In fondo un menù in una lista può fare a meno di un DIV che la contiene: anche il tag UL è un elemento di blocco.

Convenzioni sui nomi

I nomi di classi e ID devono descrivere il contenuto e non l’aspetto. Ad esempio <span class=”rosso bold”>Convenzioni</span> è concettualmente errato: non è detto che ciò che è rosso e bold oggi sia blue e italic domani.

Lasciare la tipografia ai CSS

Scrivere maiuscolo nel codice della pagina è controproducente: domani potrebbe non esserlo più e ci si ritrova a doverlo cambiare a mano uno a uno. Il CSS svolge questo compito alla grande, perché non lasciarglielo fare?

Dare una classe/ID al body

Dare una classe o ID al body della pagina è utilissimo: mantenendo la stessa struttura XHTML e diversificando il nome del body a seconda della pagina è possibile definire una struttura diversa per ogni pagina ridefinendo tutti gli elementi al suo interno.

Validazione

Validare il codice è il modo più semplice per verificare se ci sono errori all’interno di esso.

Ordine logico

Mantenere l’ordine logico degli elementi nella pagina: la semantica è fondamentale. Evitare di strutturare la pagina in maniera presentazionale, ad esempio il footer dovrebbe essere l’ultima cosa nel markup.

Per ulteriori informazioni o per leggere l’originale, l’articolo è disponibile su Smashing Magazine.

Leggendo qua e là alcuni articoli ( i più interessanti su Woork) ho trovato dei consigli che effettivamente aiutano molto nell’organizzazione del metodo di lavoro. Tutto ciò non avvantaggia solo chi lo scrive il foglio di stile, ma anche chi ci deve mettere mano in un secondo momento (collaboratori, colleghi ecc…).

Il metodo consiste in alcuni semplici consigli, che chiaramente possono variare in base alle proprie esigenze e abitudini:

• essere semplici e metodici. Il codice deve risultare elegante;
• prima di iniziare chiedersi quale risultato visivo si vuole ottenere;
• azzerare le proprietà predefinite degli elementi principali;
• iniziare a scrivere il CSS definendo le proprietà degli elementi HTML;
• definire le classi per gli elementi del layout che si intende realizzare;
• suddividere il CSS in 3 parti: layout (con tutto ciò che riguarda la posizione degli elementi), colore (tutto ciò che riguarda colori, sfondi ecc..) e tipografia (tutto ciò che riguarda font, interlinee ecc..);
• suddividere i CSS in aree divise da commenti: header, content, menù, ecc..;
• definire le ultime classi, i dettagli alla fine.

Ulteriori approfondimenti

• Scrivere un buon CSS
• Ottimizzare i CSS