Per responsive web design (RWD) si descrive la tecnologia di sviluppo web design per la creazione di siti web in grado di auto-adattarsi al client-browser con il quale vengono caricati, scopo finale è quello di avere un unico sito web che si "auto-configura" a seconda del dispositivo dell'utente finale senza dover aver versioni diverse dello stesso codice replicate in più punti. Basta pensare al grande problema dei dispositivo mobili e alle varie tecnologie esistenti: senza responsive bisogna creare 6 versioni dello stesso codice: iPhone, ipad, android, tablet andoid, MsWindows phone e MSWindows tablet, senza ovviamente contare l'applicazione per i browser web e anche in questo caso si possono creare problemi di compatibilità fra i vari browser (specialmente le vecchie versioni dei vecchi browser IE).

Responsive vuole imporre uno standard di sviluppo bastato interamente su HTML5 e CSS3 con l'eventuale aiuto jquery, il problema di questo standard è che non tutti i browser sono compatibili con questi standard e non tutti i programmatori utilizzano al meglio queste tecnologie ma per avere un risultato ottimale bisogna usare tutti gli strumenti a disposizione.

responsiveLa filosofia base di responsive è quella di usare stili diversi a seconda del dispositivo, quindi il browser caricherà CSS diversi a seconda delle caratteristiche che esso ottiene dalla finestra del programma in esecuzione (o dalla app), questa filosofia obbliga il programmatore ad ideare una griglia formata a blocchi che si spostano e si posizionano a seconda dello spazio a disposizione nel monitor (o schermo) dell'utente: ovviamente un pc ha uno schermo più largo dove ci stanno più blocchi rispetto ad un cellulare dove a fatica viene visualizzato un blocco solo, in tutta questo ovviamente testi, immagini e qualsiasi altro componente devono essere necessariamente flessibili e con larghezza fissa. Tipicamente queste strutture sono posizionati a delle determinate grandezze 320 pixel, 600 pixel, 1024 pixel oppure oltre i 1024 pixel per essere associate a rispettivamente cellulari, tablet, schermo piccolo (come i notebook) e  schermo grande.

Attraverso i CSS si possono studiare vari modi per modificare il posizionamento degli elementi e ordinarli a seconda delle proprie esigenze, questo perché i siti Responsive richiedono che gli elementi siano dimensionati nei fogli di stile tramite percentuali (oppure em) e non con unità assolute come pixel o punti. Altro aspetto importante di Responsive è il dover trovare il giusto compromesso tra contenuti e esigenze dei dispositivi mobile, perché con Responsive bisogna sempre fare un compromesso tra le possibili grandi dimensioni di un contenuto (come un testo molto lungo, immagini di grandi dimensioni o video) e i dispositivi mobili dove lo spazio a disposizione è limitato e non sempre è possibile visualizzare tutto una sola schermata.

Per realizzare un sito con Responsive ed avere un buon risultato bisogna prima di tutto aver presente quale risultato si vuole ottenere tenendo presente dei limiti e delle caratteristiche delle tecnologie che andremo ad usare. Chi usa HTML e CSS conosce perfettamente queste limitazioni ma per usare Responsive bisogna sempre tener conto dell’ulteriore “limitazione” dei breackpoint imposti dallo standard e indispensabili per avere un buon risultato. Un breackpoint è un punto della pagina, dalla quale parte una linea ideale, che parte da 0, sulla quale verranno “inseriti” i nostri oggetti che poi andremo a posizionare con i CSS e le queries di responsive. Sembra complicato? Il disegno semplifica la definizione troppo astratta.

responsivedesign

Vediamo subito un esempio che usa questi breackpoint e sfrutta le media queries: una pagina con un blocco DIV che cambia colore di sfondo a seconda del dispositivo cioè a seconda della larghezza dello schermo: smartphone: verde, tablet: giallo, piccoli monitor: rosso e grandi monitor: blu. Per realizzarlo bisogna prima di tutto creare una pagina HTML con un div, per esempio la semplice:

<!DOCTYPE html><html>
<head>
<title>AlNaoCSS3eResponsiveHandBook www.alnao.it</title>
<style type="text/css"></style>
</head>
<body>
<div class="respo">AlNaoCSS3eResponsiveHandBook - 002 I breakpoint con le media queries - www.alnao.it</div>
</body>
</html>

Dove il nostro brackpoint molto semplice è il tag DIV al quale abbiamo associato la classe “respo” che andremo a definire nel tag STYLE:

.respo { background: blue;}
@media screen and (min-width: 480px) {
 .respo { background: green; }
 }
@media screen and (min-width: 768px) {
 .respo { background: yellow; }
 }
@media screen and (min-width: 1024px) {
 .respo { background: red; }
 }

In questo stile abbiamo definito una classe di default (quella blu) e poi abbiamo usato la media queries ridefinendo lo stile “respo” a seconda della larghezza della finestra. Se provate a visualizzare la pagina con dispositivi diversi potete notare la differenza di colore ma la stessa differenza si può vedere aprendo un browser di un pc e modificandone la dimensione, in particolare vedrete che il blocco cambia colore senza dover aggiornare la pagina. Il tipo di media queries screen è stato inserito con CSS3 quindi bisogna tenere conto che siti sviluppati con questa tecnologia sono compatibili con quasi tutti i browser di ultima generazione ma non con le versioni più vecchie (per maggiori dettagli sulle media queries vi rimando ai futuri articoli).

Come già detto nei precedenti articoli, una delle basi di CSS3 e dei siti responsive è la possibilità di sfruttare le Media queries per cambiare gli stili CSS senza dover impazzire con jquery o ancora peggio con codice javascript puro che allungava molto la fase di sviluppo, i costi e ovviamente il rischio di problemi con i browser visto che ad oggi non esiste uno standard fisso per questo (maledetto) linguaggio. Come recita la definizione che appare nella specifica, "una media query consiste nella dichiarazione di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media", per spiegare questa affermazione iniziamo con un esempio classico:

<link rel="stylesheet" media="screen and (color)" href="colore.css" />

Con questo tag stiamo inserendo un foglio di stile nelle nostre pagine ma con l'aggiunta di una proprietà "media" che indica solo alcuni tipi di dispositivi. I possibili media sono:

  • all: il CSS si applica a tutti i dispositivi di visualizzazione
  • screen: schermo di computer
  • print: pagina stampata
  • projection: presentazioni e proiezioni
  • speech: dispositivi con sintesi vocale
  • braille: supporti braille
  • embossed: stampanti braille
  • handheld: dispositivi mobili con schermo piccolo
  • tty: dispositivi a carattere fisso
  • tv: visualizzazione su schermi televisivi

Se in una media query non si dichiara alcun tipo di media specifico, si assume che la regola o il CSS siano rivolti a tutti i tipi di media questo anche per retrocompatibilità con i vecchi browser, in pratica il valore implicito di default è all. Nel nostro esempio abbiamo usato screen quindi verrà caricato solo in caso di computer normali e non negli altri dispoitivi (come i cellulari smartphone o i tablet). In una media query è possibile inserire una espressione logica, infatti si possono usare gli operatori logici base come and, not e only come nel nostro esempio dove abbiamo usato l'operatore and per aggiungere un secondo comando "(color)" che rappresenta una delle tante caratteristiche possibili di uno schermo di computer e nello specifico designa uno schermo a colori, da notare che la seconda parte di una media query (quella con le caratteristiche del tipo di media) va sempre scritta tra parentesi tonde. Per vedere un altro esempio potremmo inserire l'operatore not sulla seconda parte della query:

media="screen and (not color)"

E in questo caso il foglio di stile sarà caricato su schermi di computer che non siano a colori. La parola chiave only ha invece come funzione primaria quella di nascondere il foglio di stile agli user agent più datati, per esempio

media="only screen and (color)"

nascondiamo il CSS ai vecchi browser, che salteranno la dichiarazione. Una volta compreso il meccanismo si possono costruire query molto specifiche e complesse, per esempio concatenando tramite and più espressioni:

media="screen and (color) and (device-aspect-ratio: 16/9)"

La query è vera se la pagina viene visualizzata su uno schermo a colori con caratteristica di 16/9.

Vediamo un elenco di caratteristiche dei browser dei dispositivi che possono essere usati nelle media queries.

Width regola la larghezza dell’area visualizzata del browser, da non confondere con la finestra perché eventuali barre laterali, come i preferiti di IE, non vengono conteggiate, in poche parole è la laghezza del tag BODY o da qualsiasi tag a cui la media queries è associata. I valori possono essere espressi in qualsiasi maniera riconosciuta dal CSS

@media screen and (width: 400px) {/* regole CSS */ }

può essere preceduta dai prefissi min- e max-, ed è proprio grazie a questo che esplica tutta la sua utilità nella realizzazione di siti che modificano il css a seconda della larghezza del dispositivo, per esempio si può applicare un certo stile quando le dimensioni sono comprese tra 400px e 1024px:

@media screen and (min-width: 400px) and (max-width: 1024px) {/* regole CSS */}

Per esempio si può creare un CSS semplice

BODY{ background: yellow;}
@media screen and (min-width: 400px) and (max-width: 1024px) { BODY{ background: red;}}

E vedere che il colore di sfondo della pagina cambia a seconda della larghezza della finestra del vostro browser (si può vedere da un browser anche per pc basta cambiare la larghezza della finestra). Stesso discorso si può fare per la caratteristica height che regola l’altezza dell’area visualizzata, come per width può essere usata anche con i prefissi min- (min-height) e max- (max-height).

Con device-width e device-height si può usare la larghezza dell’intera area di rendering di un dispositivo. Su un computer o su un dispositivo mobile si intende la larghezza/altezza dell’intero schermo del dispositivo quindi non semplicemente quindi dell’area di visualizzazione del documento, anche questi accettano i prefissi min- (min-device-width) e max- (max-device-width).

orientation indica se il dispositivo di output è in modalità landscape (la larghezza è maggiore dell’altezza) oppure portrait (l’altezza è maggiore della larghezza), i valori che può assumere sono appunto landscape o portrait quindi bisogna usare (orientation:portrait) or (orientation:landscape); aspect-ratio definisce il rapporto tra la larghezza (width) e l’altezza (height) dell’area di visualizzazione di un documento. Può assumere i prefissi min- e max-, i valori si esprimono attraverso due numeri interi separati dal simbolo /: 3/4, 16/9, etc.

Color indica il numero di bit per ciascuna componente colore sul dispositivo di output infatti può assumere come valori dei numeri interi, assumendo che 0 designa un dispositivo che non supporta il colore mentre Color-index descrive il numero di colori presenti nella tavolozza supportata da un certo dispositivo e può assumere i prefissi min- e max-. resolution descrive la risoluzione (ovvero la densità di pixel) del dispositivo di output, i valori della risoluzione possono essere espressi in dpi (punti per pollice) oppure in dpcm (punti per centimetro) e può assumere i prefissi min- e max-. scan è una caratteristica valida per gli schermi televisivi, quindi per il tipo di media tv e indica il tipo di scansione, interlacciata o progressiva. I valori possono essere progressive oppure interlace. grid indica se il dispositivo è di tipo bitmap oppure ‘a griglia’, come certi terminali monocromatici e gli schermi per cellulari con un solo font.

Quando si usano le media queries bisogna tenere conto che non tutti i browser sono compatibili con queste caratteristiche, infatti bisogna precisare che queste sono disponibili solo dalla versione 9 di Ms Internet Explorer, 3.5 di Firefox, 4 di Safari, 2 di Chrome e 10 di Opera; inoltre scan e grid non sono supportati da tutti i browser nella stessa maniera quindi sono sconsigliati.

Prima di iniziare bisogna aver ben chiaro quello che dovrà essere il risultato finale e ancora prima di analizzare la disposizione grafica dei componenti delle pagine bisogna ben conoscere le limitazioni e le potenzialità della tecnologia CSS3 e delle direttive per la realizzazione di un sito ReSchemaResponsiveTetrissponsive. Prima di tutto bisogna considerare la struttura a blocchi dei siti responsive, cioè non è sarà possibile incastrare le componenti senza allineamenti cioè bisogna evitare di creare una struttura a tetris come in immagine che potrebbero anche essere possibili con alcune tecnologie HTML tabellari ma di certo non possono essere adattate ai dispositivi mobili e non sono assolutamente standard CSS3, per esempio su un foglio di carta bisogna sempre disegnare gli elementi senza creare L e facendo solo blocchi “piccoli”, cosa che è possibile fare anche su un foglio excel per essere ancora più precisi con le disposizioni degli oggetti. Durante lo studio e la progettazione di un sito responsive bisogna ovviamente tenere conto che gli oggetti dovranno essere visualizzati anche sui dispositivi mobili come gli smartphone e monitor molto grandi come le moderne tv quindi nel disegno di un sito non si può pensare di inserire un oggetto senza pensare alla sua rappresentazione grafica sui dispositivi diversi dal browser di un pc, allo stesso tempo bisogna cercare di non limitare troppo in “canale” internet per incastrare il tutto dentro in una schermata di uno smartphone, per questo si può pensare di inserire nella versione pc elementi che non verranno visualizzati sui display piccoli e studiare la disposizione di link o menù per la navigazione. Un punto di attenzione è l’assenza di menù laterali a favore dei menù nella testata in cima alla pagina e in coda per evitare di perdere spazio orizzontale dedicato ai box e ai contenuti e per evitare che si creino le famose disposizione a tetris vietate con responsive.

Secondo le mode di questo ultimo periodo, gli oggetti dei siti vengono studiati come box o “rettangoloni” e disposti in pagina a seconda dello spazio disponibile, per esempio molti siti notiziari dispongono le notizie come box/rettangoli, alcuni siti hanno due colonne dove i rettangoli non hanno la stessa altezza a sono sempre definiti all'interno delle due colonne (quindi nessun L), altri dispongono i box della stessa dimensione per creare ordine e un senso di ordine visivo dei contenuti

SchemaResponsiveNews altri hanno trovato ancora altri schemi ma tutti sempre senza creare strutture strane alla tetris. Porto ora l’esempio del'idea che sto costruendo per questo sito:

SchemaResponsive

lo schema è disegnato con excel ed è presente anche il layout nei tablet e negli smartphone, noterete subito che ho deciso la disposizione con i box di dimensioni uguali posti su righe. In cima il logo con a sinistra i link dei social network (come va di moda ora) e sotto i link ma sempre a sinistra del logo il menù disposto orizzontalmente, nei prossimi post vedremo le varie scelte possibili per la creazione di un menù responsive, i link dei social network non sono presenti nella versione smartphone e possono essere tolte anche nella versione tablet. L’elemento di presentazione è una porzione di pagina che ho deciso di inserire dove permetto all'utente di scaricare il AlNao Debian Handbook, porzione di pagina abbastanza non standard che poi ho deciso di inserire in tutte le pagine e non solo nella home, ovviamente tale parte non è presente in smatphone mentre nei tablet verrà visualizzato un semplice link sul menù. La disposizione dei box (che corrispondono alle categorie di questo sito) sono disposti in maniera ordinata e tutti della stessa dimensione, considerando che sui tablet sono di dimensioni leggermente diversa e che nello smartphone questi sono disposti in verticale in modo da visualizzare un box solo alla volta. Nella home, sotto i box, ho deciso di mettere gli ultimi 3 (oppure 5) post con al fianco la barra di twitter per mia scelta personale, in tale spazio spesso viene messa la barra delle pubblicità oppure una barra informativa con altri box più piccoli, notate che nella versione tablet e smartphone scompare la barra di twitter. A termine della pagina il footer che sarà diverso tra i vari dispositivi: la versione desktop avrà un footer con link a tutte le pagine mentre nello smartphone ci sarà un footer minimale per evitare di perdere spazio.

Nel precedente articola abbiamo scelto di procedere con lo schema a box, proviamo allora a fare una semplice pagina con sette box, nella versione internet saranno tre righe, il primo box largo tutta la pagina, i successivi due box saranno affiancati occupando metà spazio ciascuno, gli altri quattro saranno affiancati avendo un quarto di spazio, conviene sempre evitare di lasciare troppo spazio ai box quindi, di solito, si imposta una larghezza massima alla pagina di 1024 pixel, il risultato grafico sarà:

Versione web per internet

css3grilia1_int

Versione per tablet

Mobile

In questo primo esempio useremo solamente i tag <DIV> con la proprietà fluttuante, il codice di questo semplice HTML con CSS è:

<!DOCTYPE html>
<html>
    <head>
        <style>
            DIV {    box-sizing: border-box;}
            body{    margin:0;    padding:0; background-color:lightgreen; }
            .gliglia{margin: 0px auto; background-color:lightblue; padding: 25px;}
            .grid{float: left; padding-left: 25px;position: relative;width: 100%;width: 100%;}
            .elemento{height:100px; background-color:gold;}
            .riga{margin-left: -25px;}
            @media only screen and (min-width: 480px) and (max-width: 599px) {
                .elem1{width: 100%;}
                .elem2{width: 100%;}
                .elem4{width: 100%;}
            }
            @media only screen and (min-width: 600px) and (max-width: 1024px) {
                .elem1{width: 100%;}
                .elem2{width: 100%;}
                .elem4{width: 50%;}
            }
            @media only screen and (min-width: 1025px) {
                .gliglia{width: 1040px;}
                .elem1{width: 100%;}
                .elem2{width: 50%;}
                .elem4{width: 25%;}
            }
            .riga:before, .riga:after{content: " "; display: table;}
            .riga:after, .gliglia:after{ clear: both;}
        </style>
    </head>
    <body>
        <div class="gliglia">
            <div class="riga">
                <div class="grid elem1">
                     <p class="elemento">1 int, 1 tablet, 1 mobile</p>
                </div>
            </div>
            <div class="riga">
                <div class="grid elem2">
                     <p class="elemento">1/2 int, 1 tablet, 1 mobile</p>
                </div>
                <div class="grid elem2">
                     <p class="elemento">1/2 int, 1 tablet, 1 mobile</p>
                </div>
            </div>
            <div class="riga">
                <div class="grid elem4">
                    <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
                </div>
                <div class="grid elem4">
                    <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
                </div>
                <div class="grid elem4">
                    <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
                </div>
                <div class="grid elem4">
                    <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
                </div>
            </div>
        </div>
        footer
    </body>
</html>

come già detto nei precedenti articoli è vietato l'uso dei tag <TABLE> e sono stati usati solamente dei <DIV> che sono agganciati a delle classi, abbiamo usato dei tag <P> per inserire del testo ma può essere usato qualsiasi tipo di tag come contenuto dei box. Nella definizione degli stili abbiamo usato le media queries per definire le varie larghezze in forma percentuale e abbiamo aggiunti stili per evitare che gli elementi fluttuanti si posizionino in posti non voluti, nel prossimo articolo vedremo più nel dettaglio i vari stili definiti in questo primo esempio.

Nell'esempio precedente sono stati usati alcuni stili che ora andremo ad analizzare nel dettaglio:

A tutti gli elementi di tag <DIV> è stata impostata una caratteristiche molto importante per poi poter usare le percentuali sulle larghezze: storicamente un elemento HTML (non solo i tag DIV) hanno una larghezza ma di default la larghezza non comprende i margini che vengono calcolati a parte, in poche parole se si definisce un elemento largo metà (50%) a questo valore bisogna aggiungere i vari margini, quindi se si definiscono due elementi larghi 50% questi non potranno stare nella stessa riga se c'è del margine che aumenta il valore che comunque non può superare il 100%, con anche un pixel di margine il secondo elemento andrà a capo perdendo l'allineamento voluto, per evitare questo problema si aggiunge la proprietà box-sizing che impone al browser di calcolare le larghezze contango anche margini, padding e spacing, in particolare viene usato il valore border-box che aggiunge alla larghezza il valore della proprietà padding e dei bordi ma non quella della proprietà margin, per maggiori dettagli vi rimando alla pagina W3C:

DIV {    box-sizing: border-box;}

Al tag body abbiamo azzerato margini e padding per centrarne i contenuti nel caso di browser internet e poi abbiamo impostato il colore verdino come sfondo:

BODY{    margin:0;    padding:0; background-color:lightgreen; }

La classe griglia vuole essere solo un contenitore di righe, in poche parole sarebbe il <table> della nostra struttura, non sarebbe necessario ma è sempre mettere un div contenitore per poter aggiungere delle impostazioni che, altrimenti, sarebbero complicate da mettere nei vari elementi della struttura, in questo esempio abbiamo definito un colore e un padding, la larghezza non serve perchè se non specificata il tag DIV si "prende" tutto lo spazio che trova:

.gliglia{margin: 0px auto; background-color:lightblue; padding: 25px;}

La classe riga è la definizione delle caratteristiche "orrizontali" del gruppo di elementi, si può pensare come un <TR> ma con una caratteristica diversa: questo non contiene un numero fisso di elementi, nel nostro esempio abbiamo ridotto il margine per evitare che il padding della griglia si sommi con i successivi padding e il primo elemento di ogni riga avrebbe un margine doppio:

.riga{margin-left: -25px;}

La classe grid è la più interessante dell'esempio perchè si tradda degli elementi della griglia, infatti definisce che ogni elemento della griglia è fluttuante e indica che la posizione deve essere relativa (di solito è il default ma meglio ridefinirlo per evitare brutte sorprese):

.grid{float: left; padding-left: 25px;position: relative;}

L'elemento è semplicemente il contenuto di ogni elemento della griglia e in questo esempio abbiamo definito un aspetto grafico: altezza e colore per poter identificare ogni box, da non confondere il contenuto con l'elemento fluttuante: sempre meglio fare due tag per evitare conflitti tra le proprietà e i tag

.elemento{height:100px; background-color:gold;}

Le successive classi sono definite con le media queries e cioè pezzi di css condizionati ad alcune caratteristiche, in questo caso ci sono definiti tre blocchi con dove sono definite le stesse classi ma con valori percentuali diverse, il primo per il mobile (minimo 480 e massimo 599), il secondo per tablet (minimo 600 massimo 1024) e il terzo per i browser internet (con monitor con più di 1024 pixel).

@media only screen and (min-width: 480px) and (max-width: 599px) {
    .elem1{width: 100%;}
    .elem2{width: 100%;}
    .elem4{width: 100%;}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .elem1{width: 100%;}
    .elem2{width: 100%;}
    .elem4{width: 50%;}
}
@media only screen and (min-width: 1025px) {
    .gliglia{width: 1040px;}
    .elem1{width: 100%;}
    .elem2{width: 50%;}
    .elem4{width: 25%;}
}

Le ultime due righe dello stile sono le più complicate da spiegare e un occhio esperto potrebbe distorgere il naso, perchè sono la definizione di due condizioni sulle righe, indispensabili per evitare i problemi con gli elementi fluttuanti, la prima riga aggiunge prima e dopo un elemento di classe riga uno spazio e indica che i figli di elemento devono essere disposti a tabella, per maggiori dettagli vi consiglio di studiare la pagina W3C:

.riga:before, .riga:after{content: " "; display: table;}

La seconda classe invece è fondamentale, perche impone che alla fine di ogni riga (e alla fine della griglia) non ci siano altri elementi fluttuanti, con il valore both si indica al browser che non ci deve essere altro a sinistra e a destra dell'elemento quindi il browser sarà costretto a posiziona gli elementi successivi sotto, questa proprietà è spesso mal vista ma ormai indispensabile per chi vuole sviluppare uno stile responsivo, consiglio comunque la pagina W3C:

.riga:after, .gliglia:after{ clear: both;}

Nel prossimo articolo comunque vedremo una teoria sugli elemento fluttuanti e sulle caratteristiche e limitazioni che impongono questi elementi.

Fin dalla prima versione di CSS, la proprietà float è stata, senza dubbio, una delle più usate per la creazione di layout e parti di pagine, nonostante gli tanti sforzi non esiste un vero standard in quanto con l'uso di questa proprietà (assieme alla position) è possibile posizionare elementi nella pagina non in maniera "sequenziale" come vorrebbe lo standard HTML, d'ora in avanti in questo articolo parlermo di elementi fluttuanti come qualsiasi tag con la proprietà float impostata con qualsiasi valore, per ogni dubbio rimando sempre alla guida W3C.

La prima caratteristica degli elementi fluttuanti è che sono impostati come block-level, in poche parole questo significa che sono elementi blocco indipendete da quello che gli sta attorno e che hanno una propria altezza e una propria altezza che viene calcolata automaticamente dal contenuto, la caratteristica principale è che il contenitore dell'elemento non si adatta a questa altezza automaticamente, infatti si possono creare situazioni del tipo:

CSS_fload

cioè l'elemento verde (che è il contenitore) non si autoadatta alle dimensioni dell'elemento in giallo (che è quello fluttuante contenuto), l'elemento blu (che è il successivo) si posizione dove trova posto infatti si posiziona a sinistra dell'elemento fluttuante, questo perchè (come dice la parola stessa) il fluttuare crea spazi che i browser provano a riempire, per evitare questo si deve usare la proprietà clear che vedremo in seguito.

Uno dei problemi più grandi degli elemento fluttuanti è che si autoadattano in larghezza quindi può capitare di perderne il controllo, conviene sempre impostare la larghezza dell'elemento fluttuante oppure, ancora meglio, impostare la larghezza del contenuto dell'elemento, poi il fluttuante si adatta alla larghezza. Nell'immagine precedente impostando delle diverse larghezze il risultato cambierà:

CSS_fload2

CSS_fload3

Il problema più grave che affligge grafici e programmatori web è che gli elementi fluttuanti, tendono a sbordare fuori dal contenitore e che gli elementi successivi possono posizionarsi in posizioni non volute, per risolvere questo problema negli anni sono state create molti ipotesi e filosofie, la più comune prima dello standard CSS3 era creare dei tag div che fungessero da "interruzione di float", come un HR invisibile che dividesse le pagine (o porzioni di pagine) evitendo che un elemento che doveva stare sotto, andaresse sopra. Per fare questo bastava creare un div
<div style=”clear:right”> </div>

con questo stile si indica che questo div non deve avere elementi fluttanti a destra e a sinistra, quindi qualsiasi elemento successivo viene disegnato come se nulla ci fosse sopra. Questo ha però un grande difetto: inserire nelle pagine HTML un tag vuoto in tutti i punti, quindi il controllo degli elementi fluttuanti non è fatto via CSS ma via HTML, cosa chiaramente non positiva per i grafici. Da notare che questo div (essendo vuoto e fluttuante) non è visibile e non crea danni alla struttura grafica della pagina. Negli anni poi ci sono molti tentativi di sistemare la cosa in maniera più elegante ma con CSS3 il problema è stato risolto definitivamente con una tecnica evoluta: l'uso della proprietà after: in c'è un tag con un figlio fluttuante basta aggiungere la caratteristica

.contenitore:after {clear: both;content: " ";display: table; }

per indicare che qualsiasi tag successivo al contenitore deve ignorare l'elemento fluttuante e si posiziona dopo come se "nulla fosse", da notare che abbiamo dovuto inserire uno spazio dopo per creare un elemento vuoto e mostrare la disposizione tabellare. Il nostro esempio quindi diventa:

CSS_fload4

E il codice è:

<html>
 <head>
  <style >
    DIV{padding:5px;}
    body{Verdana;}
    .contenitore{width:800px;margin:0px;text-align:left;background-color:lightgreen;}
    .contenitore:after {clear: both;content: " ";display: table; }
    .fluttua  {float:right;margin:5px;background-color: yellow;  }
    .contenutoDx{width:200px;}
    .contenutoSx{}
    .contenutoSuccessivo{background-color: lightblue;width:800px;}
  </style>
 </head>
 <body>
    <div class="contenitore">
        <div class="fluttua">
            <div class="contenutoDx">
                questo è un elemento fluttuante a destra con "float:right"
                <br />bisogna sempre stare attenti alle dimensioni
                <br />c'è il rischio che diventi troppo largo o troppo alto
                <br />e gli altri elementi si posizionano dove non dovrebbero
            </div>
        </div>
        <div class="contenutoSx">
            questo è l'elemento non fluttuante che si posiziona a sinistra 
            <br />perchè il fluttante è a destra
        </div>
    </div>
    <div class="contenutoSuccessivo">
        questo è l'elemento successivo, se non si calcolano bene le larghezze e le altezze, 
        potrebbe posizionarsi dove non ci si aspetta: prima o a destra dell'elemento 
        <br /> fluttuante se poi il testo è molto lungo, si possono creare effetti 
        di questo tipo (a volte sono proprio cercati)
    </div>
 </body>
</html>

Una delle proprietà più interessanti fin alla prima versione di CSS è la proprietà inline, questa proprietà è infatti la grande differenza che di default si trova tra i tag DIV e SPAN, SPAN infatti ha come valore "display" mentre per il tag DIV (e per il tag P) il valore di default è "block", questo comporta il diverso comportamento tra DIV e SPAN, infatti usando il tag span il risultato è:

<span style="background-color:red;">primo span</span>
<span style="background-color:blue;color:white;">secondo span</span>
primo spansecondo span

mentre usando il tag DIV (o il tag P) il risultato è:

<div style="background-color:red;">primo div<div>
<div style="background-color:blue;color:white;">secondo div<div>
primo div
secondo div

Il valore "inline" ha un grande difetto: non interpreta le proprietà larghezza (width) e altezza (height) ma le assegna in base al contenuto dell'oggetto: se abbiamo un link il cui contenuto occupa 100px in larghezza, anche impostando una larghezza maggiore, lo spazio occupato dall’elemento con inline sarà sempre di 100 pixel, questo problema può risultare scomodo negli elementi grafici dove le aree visibili o cliccabili sono maggiori di quella effettivamente occupata dal testo ma può invece essere sfruttata per evitare che certi tag aumentino le dimensioni senza controllo. SI può pensare che uno SPAN (o qualsiasi tag con inline:display) prenda meno spazio possibile mentre i DIV (o qualsiasi tag con inline:block) prenda tutto lo spazio disponibile sulla riga oppure si limiti a prendere lo spazio indicato come larghezza (width) e altezza (height).

Gli elementi di tipo blocco hanno la proprietà display con valore block. Sono, ad esempio, i paragrafi e tutti i tag di heading (h1, h2, h3, …), questi elementi assumono le dimensioni impostate nel CSS se specificate e, salvo utilizzo della proprietà float, non accettano altri oggetti sulla stessa riga prendendo tutto lo spazio a disposizione. Proprio per questo motivo il tag SPAN è poco usato e la proprietà inline è usata molto di rado, infatti per affiancare più elementi (come blocchi) vengono usati gli elementi fluttuanti.

Una delle possibilità usate per costruire siti responsive è quello di usare le liste HTML, questo tecnicismo permette di creare una strutta semplice da sviluppare però impone un limite grafico: per ottenere qualcosa di omogeneo e "bello" graficamente, ogni elemento deve essere visibilmente omogeneo, cioè non possiamo creare liste mischiando elementi non simili graficamente (da evitare di mettere patate con automobili). Per creare una lista basta usare le nozioni già viste nei precedenti articoli usando i tag UL e LI:

<html>
<head>
<style>BODY,HTML{margin:0px;padding:0px;}
#list{
 position: relative;
 width: 100%;
 display: block;
}
#list li{border:black 1px solid;
 position: relative;
 width: 30%;
 float: left;
 display: block;
}
</style>
</head>
<body>
 <ul id="list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 <ul>
</body>
</html>

con questo semplice esempio abbiamo creato una lista con la caratteristica che gli elementi non sono uno sotto l'altro come in un semplice elenco puntato ma sono affiancati e la larghezza, essendo espressa in %, si auto-adatta alla larghezza della pagina, ovviamente gli elementi si affiancano finché c'è spazio per poi creare una nuova riga quando non c'è più spazio: questa tecnica permette di gestire con poche righe di codice elementi auto-adattanti e con le media-queries permette di gestire larghezze diverse e disposizioni diverse a seconda della larghezza del client senza tante righe di codice, per esempio basta aggiungere poco per adattare l'elenco ai client meno larghi:

@media only screen and (max-width: 800px) {
   #list li {
        width: 50%;
   }
}

Da notare che è stata usata la proprietà float per creare elementi fluttuanti ma il vantaggio di questa tecnica è la caratteristica del tag UL di gestire le percentuali dei proprio figli in maniera automatica quindi non dovrete preoccuparvi troppo delle larghezze, inoltre i tag UL sono compatibili con tutti i browser e hanno un comportamento standard in tutte le piattaforme.

Nelle pagine HTML, la posizione e dimensioni di ogni elemento TAG può essere espressa in distanza dall'angolo in alto a sinistra dell'elemento genitore, dando per scontato che l'elemento padre di tutto è il tag BODY che rappresenta la finestra del browser il cui punto in alto a sinistra è il punto con coordinate (0,0), per rappresentare e impostare la distanza dal punto in alto a sinistra si usano le proprietà "left" e "top" che ovviamente corrispondo alla distanza dal punto in larghezza e in altezza, bisogna ricordare inoltre che non esistono le proprietà "right" e "bottom", per le larghezze degli elementi si usano width e height.  Le specifiche CSS 2D, incluse quelle nella specifica CSS3, mettono a disposizione dei semplici metodi per manipolare ulteriormente gli elementi con effetti 2D semplici, il modello descrive il solito sistema di coordinate, fissando però un punto al centro dell'elemento che farà da punto fisso per le nostre trasformazioni: traslare, ruotare, inclinare e scalare gli elementi; bisogna ricordarsi che si possono anche combinare gli effetti come ruotare e scalare contemporaneamente un’immagine oppure inclinare e capovolgere un oggetto, ma bisogna evitare di abusarne per evitare di eccedere inutilmente con gli effetti.

In tutte le trasformazioni vengono messe a disposizione due proprietà:

  • transform: con cui si specificano le trasformazioni da effettuare, di default vale none.
  • transform-origin: con cui si specifica il punto di origine da cui avviene la trasformazione.

Un semplice esempio del suo utilizzo, che comprende anche le implementazioni proprietarie dei vari browser, è il seguente:

#object {
  transform: rotate(30deg); /* Standard */
  -ms-transform: rotate(30deg); /* Internet Explorer */
  -moz-transform: rotate(30deg); /* Firefox */
  -webkit-transform: rotate(30deg); /* Safari e Chrome */
  -o-transform: rotate(30deg); /* Opera */
}

con questo elemento si ruota di 30 gradi un elemento rispetto al suo punto fermo, con transform-origin si può stabilire il punto di origine della trasformazione: sono richiesti due valori due valori, il primo riferito all'asse X e il secondo riferito all'asse Y che di default hanno valore 50%, quindi si riferiscono al centro dell’oggetto. I valori possono essere espressi in percentuale, in una delle unità di misura dei CSS (px, em, etc.) oppure attraverso le keyword left, center, right per l’asse X e top, center, bottom per l’asse Y, nel caso in cui si scelga l’ultima modalità e venga omesso uno dei due valori, esso di default corrisponderà a center. Un esempio sull'utilizzo della proprietà:

#object {
 transform: rotate(30deg); /* Standard */
 transform-origin: left bottom;
 -ms-transform: rotate(30deg); /* Internet Explorer */
 -ms-transform-origin: left bottom;
 -moz-transform: rotate(30deg); /* Firefox */
 -moz-transform-origin: left bottom;
 -webkit-transform: rotate(30deg); /* Safari e Chrome*/
 -webkit-transform-origin: left bottom;
 -o-transform: rotate(30deg); /* Opera */
 -o-transform-origin: left bottom;
}

La più semplice delle trasformazioni è la transazione: semplice "movimento" di un elemento e si devono indicare solamente i due valori di movimento sull'asse orizzontale e sull'asse verticale oppure si può usare la trasformazione matrix che prevede sei valori come parametri, i parametri sono i quattro valori di una matrice e gli ultimi due indicano il valore di traslazione come da specifiche SVG. La trasformazione scale permette di scalare un elemento rispetto alla sua dimensione "naturale", questo prevede un solo parametro che se è maggiore di 1 la dimensione dell'oggetto verrà ingrandita mentre, se il valore è compreso tra 0 e 1 la dimensione verrà ridotta (da ricordarsi di usare il punto e non la virgola come separatore per i decimali). Per ruotare un elemento si usare il rotate come visto nell'esempio dove si ha a disposizione un parametro che deve essere espresso in gradi (deg) mentre la trasformazione skew permette di modificare un elemento con due rotazioni, infatti prevede due parametri per i due assi di rotazione. Un esempio di trasformazioni combinate è:

#object {
  width: 120px;
  border: 1px solid; 
  background: lightgreen;
  transform: rotate(60deg) skew(10deg, 20deg) scale(1.2);
 -ms-transform: rotate(60deg) skew(10deg, 20deg) scale(1.2);
 -moz-transform: rotate(60deg) skew(10deg, 20deg) scale(1.2);
 -webkit-transform: rotate(60deg) skew(10deg, 20deg) scale(1.2);
 -o-transform: rotate(60deg) skew(10deg, 20deg) scale(1.2);
 transform-origin: top right;
 -ms-transform-origin: top right;
 -moz-transform-origin: top right;
 -webkit-transform-origin: top right;
 -o-transform-origin: top right;
}
 <div id="object"> 
   Questo è l'oggetto di esempio
 </div>
Questo è l'oggetto di esempio

Da ormai molti anni si vedono in moltissimi siti oggetti che cambiano forma e/o colore al passaggio del muose o effetti simili, per esempio di default in molti siti ogni link è blu ma al passaggio del mouse il colore diventa più chiaro o più scuro, altri effetti sono realizzati con funzioni javascript vista la complessità della transizione da uno stato ad un altro. Lo standard CSS3 Transitions definisce e rendere definitive alcune tecniche che permettono nuovi effetti grafici, infatti è possibile non solo modificare i valori delle proprietà di un elemento ma è possibile anche definirne la durata della transazione per creare un effetto graficamente piacevole.

Normalmente il cambiamento di un elemento è istantaneo e un esempio può essere

div {width: 200px; height: 200px;background-color: red;}
div:hover { background-color: blue;}

Per aggiungere un effetto di transazione dallo stato rosso allo stato blu basta aggiungere alla classe DIV (non quella con DIV:hover)

 transition-property: background-color;
 transition-duration: 2s;

dove abbiamo definito che la transizione del colore di sfondo deve essere di due secondi, purtroppo però bisogna aggiungere anche le righe con i suffissi per essere compatibili con tutte le versioni di tutti i browser:

 -webkit-transition-property: background-color; /*Safari e Chrome */
 -webkit-transition-duration: 2s;
 -o-transition-property: background-color; /*Opera*/
 -o-transition-duration: 2s;
 -moz-transition-property: background-color; /*Firefox*/
 -moz-transition-duration: 2s;

Le proprietà della specifica CSS3 include quattro proprietà:

  • transition-property: definisce la proprietà sulla quale il browser dovrà applicare la transazione, l'elenco delle proprietà a cui è possibile applicare una transazione è disponibile sul sito ufficiale W3C
  • properties-transition-duration: definisce la durata della transazione in secondi, di default è 0 quindi se non specificata la transazione sarà immediata senza nessun effetto di "sfumatura".
  • transition-delay: definisce il ritardo, infatti premette di ritardare l'inizio della transizione, di default vale 0
  • transition-timing-function: descrive l'algoritmo di transazione, cioè come vengono calcolati i punti intermedi della transazione, l'elenco degli algoritmi è disponibile sul sito ufficiale W3C

E' possible associare transazioni diverse con tempistiche diverse, per esempio

div {
 transition-property: background-color, width, height; 
 transition-duration: 5s, 3s, 2s;
 transition-delay: 0s, 0s, 2s;
}

L'introduzione nello standard CSS3 delle animazioni è stato un tentativo di sostituire e (quasi) eliminare i tanti javascript o flash nelle pagine per creare effetti animati e in particolare l'esigenza è nata con il diffondersi dei dispositivi mobile economici con processori con bassa possibilità di calcolo, da qui il team WebKit che sviluppa il rendering del browser Safari e Chrome ha creato questo standard. Le animazioni CSS3 definite nel sito ufficiale W3C sono più complesse rispetto alle transizioni perchè è possibile creare dei veri a propri frameset, cioè sequenze temporali con stati grafici diversi, purtroppo però quando si usano le animazioni CSS bisogna tenere conto che non tutti i browser sono compatibili. L'esempio che andremo a costruire (preso da HTML.it) è questo:

Elemento animato

Dove è definito un oggetto HTML che poi andremo ad animare e le sue proprietà CSS

<div class="pulsedAlNao"><p>Elemento animato</p></div>
background-color: red;
width: 40%;
padding: 0.2em 1em;
margin: 6em;
color:white;

Per poi attivare le animazioni, bisogna prima definire il keyframes cioè la sequenza dei frame, dandole un nome:

@-webkit-keyframes 'pulse' {
 0% {
  background-color: red;
  opacity: 1.0;
  -webkit-transform: scale(1.0) rotate(0deg);
 }
  
 33% {
  background-color: blue;
  opacity: 0.75;
  -webkit-transform: scale(1.1) rotate(-5deg);
 }
  
 67% {
  background-color: green;
  opacity: 0.5;
  -webkit-transform: scale(1.1) rotate(5deg);
 }
  
 100% {
  background-color: red;
  opacity: 1.0;
  -webkit-transform: scale(1.0) rotate(0deg);
 }
}

Rispetto alle transazioni dove si definiscono solo lo stato iniziale e finale, nella dichiarazione dei keyframes si definiscono più stati dove è possibile definire proprietà diverse a seconda dele proprie esigenze, la percentuale indicata corrisponde alla porzione di tempo che deve intercorrere tra gli stati, stato iniziale va dichiarato con il valore 0% oppure con la parola chiave from mentre lo stato finale con il valore 100% oppure con la parola chiave to. Dopo aver dichiarato il keyframes bisogna dichiarare la classe stile

.pulsedAlNao {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
}

Le proprietà possibili per l'animazione sono:

  • animation-name: è il nome dell'animazione e deve corrispondere al nome del keyframes definiti in precedenza
  • animation-duration: la durata in secondi dell'animazione da primo all'ultimo frame
  • animation-iteration-count: il numero di ripetizioni dell'animazione, il valore deve essere numerico maggiore o uguale a 1 oppure la parole infinite
  • animation-timing-function: l'algoritmo da usare per passare da uno stato al successivo, come visto per le transazioni l’elenco degli algoritmi è disponibile sul sito ufficiale W3C
  • animation-play-state: è possibile fermare l'animazione valorizzando questo valore con paused (per esempio con un javascript), per far ripartire l'animazione bisogna impostare il valore running
  • animation-delay: il tempo di attesa prima di far partire l'animazione dopo il caricamento della pagina
  • animation-direction: è possibile invertire l'animazione con il valore reverse

La programmazione web a volte non tiene conto delle dimensione dei componenti client che un utente è costretto a scaricare per visualizzare una pagina, in particolare con responsive è possibile evitare di caricare immagini che non vengono visualizzate, per esempio, se in una pagina c'è una testata, ma questa non viene visualizzata nei dispositivi piccoli come gli smartphone, è possibile evitare di far scaricare all'utente l'immagine nello smartphone.

La tecnica errata è quella di usare la proprietà "display:none", per esempio questo pezzo di stile

#testata{
 background: url(head.png);
}
@media only screen and (max-width: 600px){
 #testata {
  display: none;
 }
}

è "sbagliato" perché l'immagine viene comunque scaricata dal browser del dispositivo anche se questa non viene visualizzata. Per evitare questo basta modificare il foglio di stile e per essere il più performanti:

@media only screen and (max-width: 599px){
 #testata {
  background: none;
 }
} 
@media only screen and (min-width: 600px){
 #testata {
  background: url(head.png);
 }
}

in questo caso, la proprietà "background: none;" eviterà proprio di scaricare qualsiasi immagine e questa tecnica permette anche di caricare su dispositivi diversi immagini diverse con dimensioni diverse. Sempre con questa tecnica è possibile caricare immagini come sfondi a seconda della risoluzione del dispositivo sempre con la media-queries "resolution"

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi){
 #testata{
  background-image: url(headAlta.png);
 }
}

Il concetto di box-modeling è uno dei punti più importanti dei fogli di stile CSS e ogni designer deve conoscere molto bene questi concetti: fin dalla prima versione dell'HTML e dei CSS ogni programmatore è sempre afflitto da dove e come posizionare gli oggetti HTML rispetto agli altri, infatti per box-modeling si intende definire le posizioni e le distanze tra i vari oggetti usando le varie proprietà di altezza, laghezza, margine, bordi e padding. Fin dalla versione 2.1 di CSS si è definito uno standard sui box e non è variata molto nella versione 3: ogni elemento ha un margine, un bordo, un padding, larghezza e altezza che vengono definite come in figura:

boxmodeling

dove le proprietà di larghezza e altezza (width e height) imposta le dimensioni di elementi esclusi padding, margini e bordi che vengono sommati a posteriori. In pratica impostando un DIV con lo stile:

#divProva{
  width:100px; 
  padding:2px; 
  border: 1px solid black;
}

avrà larghezza 104 px, perchè ai 100 si sommano i due pixel di padding e i due pixel di bordo (due perché c'è un pixel a destra e uno a sinistra). Per rendere CSS più flessibile possibile è possibile modificare l'impostazione della somma delle larghezze usando la proprietà box-sizing che può assumere due valori

  • content-box: il valore di larghezza fa riferimento all'area del contenuto (valore di default)
  • border-box: il valore di larghezza fa riferimento al box nella sua interezza, comprendendo anche il padding e il bordo.

Quindi nell'esempio precedente, usando

#divProva{
  width:100px; 
  padding:2px; 
  border: 1px solid black; 
  box-sizing:border-box;
}

il div avrà effetticamente larghezza 100 pixel visto che saranno compresi i bordi e il padding.

Quando si definisce uno stile è possibile filtrare gli elementi grazie ad un attributo particolare cioè assegnare una classe agli elementi di un certo TAG con un determinato attributo, è quindi possibile identificare gli elementi di una pagina senza essere costretti ad assegnare loro una classe o un id:

E[attribute]
E[attribute=value]
E[attribute~=value]
E[attribute|=value]
E[attribute^=value]
E[attribute$=value]
E[attribute*=value]

I selettori hanno una sintassi semplice (fin dalla versione 2.1 di CSS), la base è:

TAG[attribute]

che individua tutti gli elementi TAG che possiedono l'attributo attribute, indipendentemente dal contenuto dell'attributo, per esempio

a[title] {color: blue; text-decoration: underline}

assegna la classe a tutti gli elementi A con valorizzata la proprietà title, per esempio tutti questi elementi vengono filtrati correttamente anche se sono vuoti o scritti in maniuscolo:

<a title="alnao" href="http:\\www.alnao.it\">alnao.it</a>
<a title="" href="#">alnao.it</a>
<a title href="#">alnao.it</a>
<a TITLE="Lorem Ipsum" href="#">Lorem Ipsum</a>

mentre non vengno compresi questi elementi:

<a titles href="#">Lorem Ipsum</a>
<a titles="Lorem Ipsum" href="#">Lorem Ipsum</a>

Per filtrare non solo la presenza di una proprietà ma anche il suo valore, la sintassi è:

TAG[attribute=valore]

Per esempio

a[title="alnao"]

E vengono presi entrambe queste casistiche visto che non è case-sensetive:

<a title="alnao" href="#">alnao.it</a>
<a TITLE="AlNao" href="#">AlNao.it</a>

mentre non viene preso in considerazione con spazi, per esempio:

<a title="AlNao " href="#">AlNao.it</a>

Per quanto riguarda gli altri casi ci sono varie sintassi, per esempio:

TAG[attribute~=value]

individua tutti gli elementi TAG il cui l'attributo attribute contiene una lista di parole separate da spazi, una delle quali è esattamente value, per esempio

a[title~="Alberto"] {color: blue; text-decoration: underline}
<a title="AlNao.it sito di Alberto Nao" href="#">alnao.it</a>

Altro esempio:

E[attribute|=value]

selettore del tutto simile al precedente, con una semplice differenza nella definizione del valore, in questo caso in questo selettore il valore deve essere separato da trattini (-).

a[title|="Alberto"] {color: blue; text-decoration: underline}
<a title="AlNao.it-sito-di-Alberto-Nao" href="#">alnao.it</a>

Altro esempio:

E[attribute^=value]

Questo selettore, introdotto con Css3 richiama le espressioni regolari, infatti ^ identifica l'operatore per "inizio", quindi

a[title^="Alberto"] {color: blue; text-decoration: underline}
<a title="Alberto Nao" href="#">alnao.it</a>
<a title="AlbertoNao" href="#">alnao.it</a>

Ma non funziona con

<a title="Nao Alberto" href="#">alnao.it</a>
<a title="alnao.it Sito di Alberto Nao" href="#">alnao.it</a>

Altro esempio:

E[attribute$=value]

Il valore value deve trovarsi al termine dell'attributo attribute.

a[title$="Alberto"] {color: blue; text-decoration: underline}
<a title="alnao.it Sito di Nao Alberto" href="#">alnao.it</a>

Altro esempio:

E[attribute*=value]

L'ultimo selettore di questo articolo è sicuramente il più semplice e, probabilmente, il più interessante: è del tutto identico ai due precedenti con la sola differenza che il valore value deve trovarsi all'iterno dell'attributo attribute, indipendentemente dalla posizione che occupa.

a[title*="Alberto"] {color: blue; text-decoration: underline}
<a title="alnao.it Sito di Alberto Nao" href="#">alnao.it</a>

Già dalla versione 2 di CSS sono state introdotte la definizione delle pseudo-classi, concetto completato e ampliato con CSS3, per comodità in questo articolo vedremo le maggior parte di pseudo classi comprese le versioni più vecchie. Pseudo-classe è un sistema per assegnare una classe ad un sottogruppo degli elementi con una determinata caratteristica, per esempio se noi definiamo la pseudo-classe nel nostro foglio di stile:

A{color:blue;}
A:hover{color:green;}

tutti gli elementi A (quindi i link) rimarranno del colore blu ma quando l'utente passa sopra un link con il mouse, la scritta del link diventa di colore verde, infatti per pseudo-classe si intende tutti gli elementi che hanno una classe più una caratteristica particolare. Le principali pseudo-classi sono quelle introdotte con CSS2 per gestire il tag A (quindi i link) e i bottoni:

:link
:visited
:hover
:active

Mentre molto caratteristica (e poco conosciuta) è la pseudo-classe

:focus

utile per modificare lo stile di un campo di input nel momento in cui riceve il focus, questa breve lista di pseudo-classi base si chiude con :first-child, attraverso la quale è possibile filtrare solo il primo elemento figlio di un determinato elemento.

La versione 3 poi ha introdotto il concetto di pseudo-classe strutturale che consentono di selezionare gli elementi all'interno della pagina in base a delle informazioni sull'oggetto che non possono essere raggiunte da selettori semplici o altri combinatori, dal punto di vista sintattico non è cambiato nulla e si definiscono allo stesso modo classe:pseudo. Una prima caratteristica delle pseudo-classi è che si conta da 1 e non da 0 (zero), quindi il primo figlio avrà indice 1, questo non è assolutamente scontato in ambiente informatico. Certe pseudo-classi come :valid, :invalid, :required, :optional, :in-range, :out-of-range, :read-only, :read-write non sono supportati da tutti i browser quindi è sconsigliato l'uso.

Le pseudo-classi aggiunte da CSS3 sono:

:root

dato un elemento si indentifica il padre della pagina, di solito per le pagine web corrisponde al tag HTML, da notare che in questo modo è possibile aggiungere caratteristiche alla pagina senza toccare il tag HTML

:nth-child()

Questa è sicuramente la regola più interessante e più usata perchè permette di selezionare un figlio filtrando per la posizione (come un indice in un ciclo), cioè permette di selezionare un figlio da un elenco, per esempio

tr:nth-child(4) td {background-color: red}

permette di colorare tutte le celle della quarta riga di una tabella oppure ancora più potente è l'applicazione

tr td {background-color: red}
tr:nth-child(odd) td {background-color: orange}

che permette con due righe di codice di colorare tutte le righe di un colore (rosso) e poi di definire che invece tutte le righe dispari di colore arancione. E' possibile anche definire formule all'interno del child, per esempio:

tr:nth-child(3n+2) td {background-color: gree}

filtra le righe ogni tre righe partendo dalla seconda, le formule possono essere del tipo: an + b, dove a e b sono due interi e filtra solo gli elementi distanti an+b-1 dal b-esimo elemento figlio questo significa che le coppie di comandi qui elencate sono equivalenti:

tr:nth-child(2n)             tr:nth-child(even)
tr:nth-child(2n+1)           tr:nth-child(odd)

per selezionare determinati elementi, per esempio 9, 19, 29, ecc, si possono usare i  due comandi equivalenti

tr:nth-child(10n-1)          tr:nth-child(10n+9)
E:nth-last-child()

E' il funzionamento identico alla pseudo-classe precedente, E:nth-last-child(n), infatti identifica l'elemento E che è l'n-esimo figlio del suo elemento padre partendo dall'ultimo fratello di E, per esempio

tr:nth-last-child(2) td { background-color: yellow}

evidenzierà la seconda riga a partire dall'ultimo elemento fratello, cioè il penultimo fratello.

E:last-child

Questa pseudo-classe seleziona l'elemento E che è l'ultimo figlio del suo elemento genitore, cioè l'ultimo fratello.

tr:last-child td {background-color: yellow}

evidenzierà l'ultima riga della tabella.

E:only-child

Questa pseudo-classe permette di aggiungere una classe ad un elemento solamente se è figlio unico, cioè se il padre non ha altri figli, questa risulta comoda in una tabella, per aggiungere una classe se c'è solo una riga.

E:nth-of-type()

La pseudo-classe identifica ogni elemento che è l'n-esimo fratello del suo stesso tipo all'interno del DOM, in altre parole filtra solo gli elementi dello stesso tag, supponendo che un elemento possa avere elementi "fratelli" di tipi diversi. Come nth-child(), anche questa pseudo-classe può contenere all'interno delle formule quindi il funzionamento è del tutto simile.

E:nth-last-of-type()

Stesso comportamento del precedente tag solo che inizia a contare dall'ultimo elemento.

E:first-of-type

Questa pseudo-classe seleziona il primo elemento E che è il primo figlio del suo tipo, concettualmente essa coincide all’uso di :nth-of-type(1).

E:last-of-type

Questa pseudo-classe seleziona il primo elemento E che è l'ultimo figlio del suo tipo, concettualmente essa coincide all’uso di :nth-last-of-type(1).

E:only-of-type

Il funzionamento è del tutto simile a E:only-child con la sola differenza che l'oggetto padre può contenere altri figli, purché di diverso tipo.

E:empty

Questa pseudo-classe identifica tutti gli elementi che non contengono figli ed include anche i nodi di testo, quindi un semplice paragrafo che contiene del testo al suo interno non corrisponderà.

Esiste un altro gruppo di pseudo-classi definite nel modulo sui selettori dei CSS3:

E:target

La pseudo-classe consente di selezionare un elemento della pagina che corrisponde ad un indirizzo: data una pagina con delle àncore al proprio interno, la pseudo-classe E:target ci consente di assegnare uno stile all'elemento di destinazione nel momento in cui è selezionato. Vediamo un esempio per comprenderne il funzionamento partendo dal codice HTML:

<style>
 div:target {color:Red;}
</style>
<ul>
  <li><a href="#div1">Div1</a></li>
  <li><a href="#div2">Div2</a></li>
  <li><a href="#div3">Div3</a></li>
  <li><a href="#div4">Div4</a></li>
</ul>
<div id="div1"><p>Testo1 ....</p></div>
<div id="div2"><p>Testo2 ...</p></div>
<div id="div3"><p>Testo3...</p></div>
<div id="div4"><p>Testo4 .... </p></div>

In questo modo, possiamo mettere in evidenza il div selezionato, senza aver bisogno di utilizzare Javascript o altre tecnologie, abbiamo infatti espresso con i CSS questa regola: su tutti i div che sono anche target di un ancora, quando sono attivati, impostiamo una classe specifica.

E:not

Tale pseudo-classe identifica tutti gli elementi di un tipo che non coincidono con il selettore contenuto all'interno del :not, per esempio:

<div class="white">BIANCO</div>
<div class="nero">NERO</div>
<style>
  div{color:white;}
  div:not(.white) {color: black}
</style>

assegna tutti i div un colore bianco di sfondo, tranne quelli che non hanno la classe bianco, a cui impostano la classe nera. Altra possibilità quella di usare il not in combinazione con altri pseudo-classi, per esempio:

input:not(:disabled){color: black;}

imposta il colore nero a tutti gli input NON disabilitati.

Esisto anche pseudo-classi che consentono di lavorare sugli stati degli elementi dell'interfaccia, nonostante la traduzione non sia delle migliori, l'elenco di questo tipo di pseudo-classi è:

E:enabled
E:disabled
E:checked

queste classi permettono di modificare lo stile di un elemento a seconda del proprio stato senza bisogno dell'uso di javascript.

La versione 2 di CSS prevede quattro pseudo-elementi:

:first-letter  filtra la prima lettera del testo contenuto in un elemento :first-line filtra la prima riga del testo contenuto in un elemento :before  inserisce del contenuto prima di un dato elemento :after  inserisce del contenuto dopo un dato elemento

La specifica CSS3 non ha introdotto novità rispetto al numero di pseudo-elementi, salvo che per uno pseudo-elemento :selection però non è supportato da tutti i browser quindi non viene mai usato, la novità dalla versione 3 di CSS3 è la sintassi, infatti da CSS3 gli pseudo-elemento si differenziano dalle pseudo-classi perché si usano due caratteri di due punti (::) invece che uno solo, per mantenere la retro-compatibilità con il codice esistente, i browser sono tenuti a supportare entrambe le sintassi, quindi secondo le specifiche la sintassi corretta è:

::first-letter
::first-line
::before
::after

Gli pseudo-elementi sono supportati, salvo qualche dettaglio di ::before e ::after, da tutti i principali browser. Per quanto riguarda before e after sono quelli più usati e permettono di creare elementi (semplici) prima o dopo un elemento, per esempio:

#element:before {
 content: "";
 display: block;
 width: 100px;
 height: 100px;
}
...
<div id="element">ciao</div>

aggiunge, prima del div, un tag vuoto ma di larghezza e altezza 100px, bisogna però sempre ricordarsi di mettere la proprietà content anche se vuota in quanto omettendola alcuni browser non creano nessun elemento. Bisogna ricordarsi che l'elemento inserito è un elemento in line (on-line) per dare automaticamente all'elemento inserito un altezza, spaziatura, margini e bordi ma solitamente è necessario definirlo esplicitamente come un elemento a livello di blocco (con display:block). L'uso di before e after è anche condizionato dal fatto che, il contenuto che viene inserito attraverso i CSS, sarà un contenuto figlio in relazione all'elemento e ma verrà posizionato prima oppure dopo di qualsiasi altro contenuto in quell'elemento e mentre si sviluppa con questi pseudo-elementi bisogna considerare che non sono "reali" perchè non fanno parte del documento DOM, quindi non bisogna mai utilizzare gli pseudo-elementi per generare contenuti fondamentali per l’usabilità o l’accessibilità delle pagine perché rischiano di sparire.

Lo standard di CSS3 prevede una evoluta gestione del testo all'interno delle pagine web, standard chiamato CSS3-text la cui documentazione è disponibile nel sito ufficiale della w3c (https://www.w3.org/TR/2011/WD-css3-text-20110215/ ), purtroppo però molti browser non supportano praticamente nessuno di queste nuove proprietà, la proprietà più utile che si può usare senza problemi perchè supportata da tutti i browser è la "word-wrap" che è stata introdotta da Microsoft sin dalla versione 5.5 di Internet Explorer e poi adottata come standard W3C. Secondo il comportamento standard di quasi tutti i browser, quando abbiamo un testo con parle molto lunghe e meddiamo una larghezza fissa possono succedere due cose: la larghezza impostata non viene rispettata perchè la parola allarga il blocco oppure il testo esce dal blocco, per esempio

#box {
  width: 200px;
  padding: 10px;
  border: 1px solid black;
  background: #AA0000;
}
<div>testo normale dentro ad una classe ma con unaParolaMoltoLungaSenzaSpazi</div>

l'aggiunta della classe word-wrap: break-word; obblica il browser a rispettare le lunghezze, se la parola è troppo lunga per la larghezza fissata, dividerà le parole andando a capo, purtroppo però non c'è una regola fissa per l'andata a capo secondo le regole della grammatica della lingua, cioè il browser va a capo a seconda dello spazio disponibile e le proprietà per impostare le regole per l'andata a capo non funzionano su nessun browser, un esempio di questa proprietà è:

Altra proprietà utile per la gestione dei testi nelle pagine è la famosa gestione degli spazi, perché fin dalla prima versione di HTML, i browser gestiscono in maniera libertina gli spazi, la proprietà white-space cerca di imporre ai browser il comportamento con gli spazi tra le parole e tra i vari tag, i possibili della proprietà sono:

  • normal: è il valore di default, una sequenza di spazi viene interpretata come uno spazio solo, il testo va a capo se necessario
  • nowrap: una sequenza di spazi viene interpretata come uno spazio solo, il testo non va mai a capo se non indicato con qualche tag come il <br />
  • pre: gli spazi non vengono acoorpati cioè più spazi vengono interpretati come multipli, il testo non va a capo se non indicato, è il comportamento di default del tag <pre>
  • pre-line: come il normal
  • pre-wrap: come il pre ma con la differenza che a capo quando necessario

Per la gestione dei testi, c'è una proprietà che permette le varie trasformazioni del testo compatibile anche con i browser più vecchi, text-transform i cui possibili valori sono:

  • none : è il valore di default, non esegue nessuna trasformazione
  • capitalize: in le parole separate da spazi imposta la prima lettera maiuscola e tutte le altre minuscole
  • uppercase: trasforma tutti i caratteri in maiuscolo
  • lowercase: trasforma tutti i caratteri in minuscolo

Ad integrazione di questo argomento consiglio la lettura della documentazione ufficiale dell W3C a questa pagina, dove è possibile trovare tutte le proprietà presente in CSS per la gestione dei testi e delle spaziature. Per esempio:

.break-word {
  word-wrap: break-word;
}

Questo è una traduzione dell'articolo "How to Make Div Element 100% Height of Browser Window Using CSS Only" del blog di Stanislav Kostadinov.

In CSS e HTML ci sono varie tecniche per gestire le altezze delle pagina, lo scopo tipicamente è quello di avere un blocco DIV alto come l'intera pagina indipendentemente dalla grandezza del browser e del tipo di dispositivo ma quasi tutte usano i javascript oppure la libreria jquery per determinare l'altezza della finestra, se volete evitare di usare script potete usare una tecnica con i CSS 3: immaginando di avere due blocchi DIV affiancati e usando l'unita di misura "vh" che rappresenta la "viewport" riconosciuta dal browser:

<style>
div#welcome {
 height: 100vh;
 background: black;
} 
div#projects {
 height: 100vh;
 background: yellow;
}
</style>
...
<div id="welcome">
  Benvenuto
</div>
<div id="projects">
  Progetto
</div>

Forturnatamente quasi tutti i browser supportano la proprietà vh, purtroppo però le versioni di IE precedenti alla 11 non supportano le lunghezze-viewport quindi l'unità vh, risulta pertanto inutilizzabile questa tecnica se si vuole creare un sito cross-browser.

Con HTML5 è stato introdotto il meta-tag viewport che permette di impostare al browser dei dispositivi mobili (o di monitor molto piccoli) il comportamento da assume quando il testo e le immagini sono dimensionate per altri, per esempio notare la differenza del comportamento del browser:

     

L'immagine di sinitra non usa alcuna indicazione mentre quella di sinistra utilizza il meta-tag viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

questa tecnica permette anche di evitare gli scroll orizzontali nei dispositivi mobili, cosa che può risultare molto fastidiosa a volte, tuttavia con questo tag bisogna rispettare alcune semplice regole non scritte: non si devono mai utilizzare elementi a larghezza fissa, quando si studia un layout non bisogna mai studiarlo per un solo dispositivo con una certa larghezza ma bisogna studiare i layout per varie altezze/larghezze e utilizzare sempre le media-query per i piccoli schermi soprattutto quando si deve impostare larghezze al 100%.

Con le varie proprietà di CSS2 e CSS3 è possibile gestire le larghezze con poche righe di codice e con il minimo sforzo, queste tecniche tuttavia risultano spesso complicate in fase di impaginazione di una pagina se deve essere adattiva e responsiva. La proprietà "max-width" consente di impostare la larghezza massima di un qualsiasi elemento, infatti lo scopo di max-width è di impedire che un elemento si estenda oltre il bordo del contenitore, è possibile specificare che il contenitore può misurare 800px se possibile, ma non deve superare il 90% della larghezza del contenitore

.container {
  width: 800px;
  max-width: 90%;
}

Purtroppo però alcune versioni più vecchie di Internet Explorer non supportano questa proprietà, per risolvere questo problema basta aggiungere un piccolo trucco, cioè la larghezza automatica:

@media screen {
  img {
    width: auto; /* for ie 8 */
  }
}

Ovviamente la proprietà min-width è analoga al max ma riguarda la larghezza minima, stesso discorso vale per min-height e max-height.

Con le varie versioni di CSS si sono aggiunti molte nuove possibilità di utilizzo dei tag input e alcuni nuovi attributi sono stati inseriti con la versione tre di CSS. Fin dalle prime versioni di HTML e di CSS sono disponibili:

  • type il tipo di input, per esempio "text" o "checkbox"
  • name il nome dell'elemento all'interno del form e l'eventuale nome del parametro inviato via GET o POST dal form stesso
  • value il valore iniziale del campo
  • readonly il campo è di sola lettura
  • disabled il campo è disabilitato
  • size la grandezza dell'input in caratteri
  • maxlength la lunghezza massima in caratteri

Mentre dalla versione 5 di HTML e dalla versione 3 di CSS sono disponibili nuove proprietà:

  • autocomplete indica al browser di visualizzare o meno all'utente la finestrella per l'autocomplete, se non specificato vale di default "on" quindi viene mostrato, valore alternativo autocomplete="off"
  • autofocus indica al browser di attivare l'input al caricamento della pagina tramite il focus
  • form è possibile posizionare l'input fuori dal tag form e indicare tramite questa proprietà a quale/quali form questo tag appartiene
  • formaction nei tag input di tipo submit indica una action alternativa a quella definita nel tag form
  • formenctype nei tag input di tipo submit indica una ctype alternativa a quella definita nel tag form, per es.
  • formenctype="multipart/form-data"
  • formmethod nei tag input di tipo submit indica una method alternativa a quella definita nel tag form, per es. formmethod="post"
  • formnovalidate nei tag input di tupo submit indica se non eseguire le validazioni "client" al submit
  • formtarget nei tag input di tipo submit indica un target alternativo a quella definita nel tag form, per es. formtarget="_blank"
  • height and width definisce le dimensioni di un input di tipo image
  • list se si definisce un dominio di valori tramite il tag datalist è possibile agganciare la lista ad un input di tipo text
  • min and max nei tag input di tipo number e date è possibile definire un massimo ed un minimo valore
  • multiple nei tag input di tipo file è possibile indicare se si possono selezionare più file
  • pattern (regexp) nei tag input di tipo text indica una regola di inserimento espressa in regexp, per es. pattern="[A-Za-z]{3}"
  • placeholder indica un test da visualizzare di "sfondo" quando il campo è vuoto, non fa parte del valore dell'input
  • required indica se, in fase di validazione, l'input deve essere valorizzato
  • step nei tag input di tipo number, indica il modulo di valorizzazione, per esempio se step="3" i valori possibili sono: -3, 0, 3, 6, ...

mentre sono anche disponibili per il tag form queste nuove proprietà:

  • autocomplete incica se tutti i tag all'interno del form ereditano la proprietà autocomplete, di default vale "on" quindi gli autocomplete sono attivati
  • novalidate indica al browser di non eseguire la validazione "client" del form al momento del submit

Un esempio di validazione e gestione degli errori di un tag input è:

<input type="text" id="username" name="username"
  placeholder="Inserire l'username" 
  oninvalid="this.setCustomValidity('Username non valido')"
  oninput="setCustomValidity('')"
  autocomplete="off" 
  autofocus
  required
/>

dove è stato definito anche la proprietà oninvalid per visualizzare un messaggio di errore personalizzato quando la validazione va in errore.

Nella versione 3 di css è stato inserito un tag speciale chiamato datalist che ha come scopo quello di creare una alternativa al tag select e permettere ad un utente di selezionare un valore all'interno di un elenco predefinito di valori, per definire questo tag, un esempio:

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

dove è importante che l'id del tag corrisponda alla proprietà list dell'input text, in questo modo l'input text permetterà l'inserimento solo dei valori elencati nel datalist e viene mostrato un auto-completamento che può facilitare l'utente nell'inserimento, questo è molto simile al comportamento del tag select che però spesso risulta non facile da usare.

Da notare che i tag datalist sono nascosti da quasi tutti i browser, altri invece di default li mostrano quindi bisogna anche definire lo stile:

datalist { 
  display: none;
}

Purtroppo però questo tag non è supportato dalle versioni di IE 9 e precedenti e da quasi tutte le versioni di Safari, quindi non è una tecnica molto usata.

Esistono moltissimi esempi di tooltip creati con CSS senza l'uso di Javascript, usando solo le proprietà base degli elementi HTML, la base di questo esempio parte dal tooltip proposto da W3C a questa pagina che consiglio di vedere.

Bisogna si definisce il codice HTML con 3 elementi un DIV e due span, all'interno del DIV il testo da visualizzare e i due SPAN con classi specifiche

<div class="tooltip">
  TESTO FISSO anche molto molto molto molto molto lungo
  <span class="tooltiptext" style="">
    Testo del tooltip
  </span>
  <span class="tooltiptextTriangolo"></span>
</div>

e poi si definisce il codice CSS delle classi:

La classe del DIV contenitore definita come inline-block:

.tooltip {
  display: inline-block;
}

Lo span che contiene il testo deve avere sfondo, margini, posizione e bordi definiti, inoltre è possibile definire una larghezza di default (commentata nell'esempio):

.tooltip .tooltiptext {
  visibility: hidden;
  /* width: 120px; da mettere se serve*/
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 3px 8px 3px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  margin-bottom:-3px; /*ex 10*/
  opacity: 0;
  transition: opacity 0.3s;
}

Lo span del "triangolo" viene disegnato come uno span posizionato al centro del div padre (left 50%) con i margini calcolati per fare l'effetto triangolo e z-index -1 per obbligare l'elemento HTML di posizionarsi sotto di tutto:

.tooltip > .tooltiptextTriangolo {
  visibility: hidden; 
  opacity: 1; 
  display:inline;
  z-index: -1;
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -22px;
  margin-left: -7px;
  border-width: 7px;
  margin-bottom: 10px;
  border-style: solid;
  border-color: #555555 transparent transparent transparent;
}

quando si passa sopra con il mouse al div padre, il triangolo e il testo del tooltip vengono visualizzati

.tooltip:hover > .tooltiptextTriangolo {
  visibility: visible;
}
.tooltip:hover > .tooltiptext {
  visibility: visible;
  opacity: 1;
}

quando si passa propra con il mouse al div padre, questo viene ri-posizionato (certi browser si rincoglioniscono e potrebbero sbagliare la posizione degli elementi), inoltre viene impostato un z-index = 1 per posizionare il DIV sopra il triangolo per evitare che eventuali link non siano cliccabili con la comparsa del triangolo che si posizionerebbe sopra

.tooltip:hover{
  position: relative;
  display: inline-block;
  z-index: 1;
}

da notare che è possibile modificare queste classi a piacimento, in questo esempio il tooltip è posizionato centrato rispetto al div padre, ma se ci si trova vicino ai bordi della pagina il toopltip potrebbe sparire oltre il bordo, per esempio un elemento posizionato nei primi pixel della pagina, per evitare questo basta modificare il margine sinistro del tooltop con valore fisso, per esempio

<div class="tooltip" >
  TEXT
  <span class="tooltiptext" style="width:100px;margin-left:-12px;">
    Testo del tooltip
  </span>
  <span class="tooltiptextTriangolo"></span>
</div>

altra particolarità di questo secondo esempio è la larghezza fissa del testo del tooltip, perché il testo del tooltip eredita la larghezza del DIV padre, se questo è molto piccolo bisogna aumentarla con una definizione del witdh fisso oppure usare la white-space: nowrap; per evitare righe multiple indesiderate (la mia prima preferita)  anche se testi troppo lunghi non sono indicati per il nowrap perché rischia di diventare troppo largo.

Con le proprietà flaxbox sono state introdotte alcune nuove caratteristiche per creare strutture di layout non lineari come previsto normalmente da CSS, senza i quali al programmatore rimane solo l'uso della proprietà float. Questa è stata pensata per rendere semplice la gestione di elementi interni ad un elemento contenitore e per risolvere le varie problematiche legate alla centratura degli elementi rispetto agli assi verticali e orizzontali. 

Per usare queste proprietà bisogna tenere conto di due aspetti costruttivi:

  • un elemento contenitore che contiene gli elementi flessibili indicato con la proprietà display:flex
  • gli elementi flessibili dove non bisogna dedicare nessuna proprietà specifica.

All'elemento padre si deve poi aggiungere la proprietà addizionale per indicare l'allineamento verticale con la proprietà align-items: center;

Agli elementi figli è possibile poi aggiungere delle caratteristiche ulteriore:

  • modificare l'allineamento dello specifico elemento con la proprietà align-self 
  • modificare l'ordine di visualizzazione con la proprietà order

Un esempio pratico è:

<div style="display:flex;align-items: center;">
<div style="background-color:red;">rosso</div>
<div style="background-color:yellow;">giallo<br /> a capo</div>
<div style="background-color:green;text-align:center;">verde</div>
<div style="background-color:gold;order:-2;">oro con ordine</div>
<div style="background-color:lightblue;align-self:flex-start;">azzurro</div>
<div>

E il risultato dell'esempio è: 

rosso
giallo
a capo
verde
oro con ordine
azzurro

 

Con lo standard CSS3 sono stati introdotti alcuni effetti che pochi conoscono e che, purtroppo, non sono molto usate. Uno degli effetti più incredibili è la possibilità di inserire delle maschere alle immagini.

Questo effetto permette di introdurre una immagine di scondo e e una maschera per filtrare la immagine con una maschera. Rispetto a tante altre tecniche per ottenere lo stesso risultato, questo effetto viene eseguito lato browser in fase di rendering quindi con un netto risparmio di sviluppo lato server. Molti sviluppatori tuttavia snobbano questa proprietà visto che l'applicazione di una maschera può essere eseguito con qualunque programma di grafica o qualunque altro plugin javascript.

La sintassi è

.mask1 {
mask-image: url(img_maschera.png);
mask-size: 70%;
mask-repeat: no-repeat;
}
<div class="mask1">
<img src="img.jpg" />
</div>

Un esempio pratico può essere provato sul sito ufficiale w3c.

Con il valore sticky della proprietà position è possibile posizione un elemento in una posizione e poi riuscire a gestire la posizione rispetto allo scorrimento della pagina. La definizione è molto simile al fixed ma impostando un valore top permette di impostare non solo la posizione iniziale ma soprattutto la posizione rispetto all'inizio della porzione visibile della pagina in caso quando viene effettuato uno scroll e l'elemento scomparirebbe.

C'è da dire che non tutti i browser gestiscono questa proprietà al meglio e alla stessa maniera quindi bisogna sempre prestare attenzione ad usare questa proprietà. Un altro errore comunque è pensare che, in assenza di elementi all'interno di un sticky, il testo possa scrollare: è possibile usare lo sticky e assegnare al padre la proprietà di scrolling.

Quando si usa questa proprietà bisogna ricordare che solo un elemento più essere fisso con la proprietà sticky, in caso di più elemento l'ultimo elemento va a nascondere i precedenti, in questo modo è possibile realizzare il classico esempio di elenco alfabetico con la lettera principale evidenziata che nascondere le precedenti.

Fin dalla sua nascita, lo standard CSS ha un enorme difetto di compatibilità con i browser: i programmatori devono aspettare anni prima che tutti i browser si adattino allo standard W3C e, in molti casi, alcune aziende decidono di non rispettare lo standard limitando l'uso di alcune proprietà, per questo motivo i browser si possono comportare in maniera differente dagli altri. Nel corso degli anni è stato tentato di costruire una versione "minima" di CSS compatibile con tutti i browser ma l'idea poi si è evoluta nello sviluppo di alcuni tool per la definizioni di metalinguaggi che vanno a generare codice CSS standard e compatibile con la maggior parte dei browser.

L'idea dei pre-processori CSS è nata dal 2007 ed è stata portata avanti da divese scuole di pensieri tanto che oggi abbiamo diversi tool disponibili e usabili, alcuni molto validi altri meno quindi bisogna scegliere con cura quale tool usare nei progetti. Il più famoso, il Sass, è diventato uno standard sopratutto nei progetti Angular e React che già usano un compilatore TS, l'alternativa Less può essere usata anche se ormai viene considerata di nicchia.

Sass come standard ha il vantaggio di essere basato su Ruby quindi un linguaggio di programmazione scripting con "import" e "nesing dei selettori CSS" con il grande difetto di avere delle prestazioni lente e a volte macchinose. In questa serie di articoli vedremo tutti i preprocessori standard e alcuni altri metodi di scripting per la definizione di CSS standard e compatibili con tutti i browser.

Mentre si lavora con queste tools bisogna sempre avere a disposizione l'elenco completo delle proprietà CSS e la loro compabilità con i vari browser, la lista completa e aggiornata è disponibile nel sito ufficiale della w3Schools.

E' possibile introdurre classi css attraverso libreria javascript in modo semplice e funzionale usando le tecniche che comunemente vengono chiamate "CSS in JS". Una delle librerire più usate è lo styled-components, seguendo la guida ufficiale disponibile nel sito ufficiale,  si può installare la libreria in un progetto react con il comando

npm install --save styled-components

e poi si può aggiungere le classi definendo una costante con la caratteristica css ed eventualmente sottoclassi:

import styled, { css } from 'styled-components'
const Button = styled.button`
background: red;
border-radius: 3px;
${props => props.primary && css` background: palevioletred; color: white;`};
`
render(
<Container>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</Container>
);

Una tecnica molto usata è la definizione di tag specifici:

const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;
`;
render(
<div>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>
);

oppure è possibile sviluppare costanti con parametri in modo da usare tali valori nelle classi CSS:

const Input = styled.input`
padding: 0.5em;
margin: 0.5em;
color: ${props => props.inputColor || "palevioletred"};
background: papayawhip;
border: none;
border-radius: 3px;
`;
render(
<div>
<Input defaultValue="@probablyup" type="text" />
<Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
</div>
);

Un esempio della versione più semplice è disponibile in un progetto di esempio:

https://github.com/alnao/ReactCorsoReduxClient

SaaS è il più famoso pre-processore CSS, permette di definire temi e variabili all'interno di un progetto web in modo da rendere il CSS più semplice da sviluppare. Un semplice e esempio è la creazione di un file template.sass:

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}

Il risultato, dopo la compilazione, sarà ovviamente un semplice CSS

body {
background-color: lightblue;
color: darkblue;
font-size: 18px;
}

Che viene usato dalla pagina dove è caricato lo stile. Il vantaggio di questa tecnica è la possibilità di scaricare temi che definiscono un tema ed evitare di dover modificare tutti i file CSS del tema ma tutte le personalizzazioni saranno possibili grazie ad un file dove è possibile definire le variabili. Per esempio usando la libreria Ionic sarà possibile modificare le variabili con un semplice file:

$colors: (
  primary: #488aff,
  secondary: #32db64,
  danger: #f53d3d,
  light: #f4f4f4,
  dark: #222
);

I moduli CSS permettono di dividere i CSS nei siti single page, l'obbiettivo è proprio evitare di aver un unico foglio di stile per un unico progetto single-page compilato ed evitare di avere namespace (o altre tecniche custom) con files divisi in più file ma importati sempre a livello globale. Usando la libreria React, se i componenti sono divisi in file jsx diversi ed se i componente importano un css specifico, questo comunque alla fine risulterà importato a livello globale creando possibili contrasti ed errori se presenti classi con lo stesso nome.

La soluzione al problema è usare i moduli che la libreria e il compilatore mette a disposizione. Il primo passo è creare un file css con il nome xxxx.module.css dove il suffisso "module" nel nome file è obbligatorio.  Per esempio il file sottocomponente.module.css potrebbe essere:

.sfondoRosso { background-color:red}

Nei file che hanno la necessità di usare questa classe devono importare il file module con il tipo:

import css from './xxxx.module.css';

e poi usare la classe con la sintassi

<div className={css.sfondoRosso}> ... </div>

Da questo semplice esempio si capisce subito che il riferimento alla classe non è puro ma la libreria "compila" il file css creandone un nome univoco aggiungendo un hash per ogni classe, in questo modo se in un progetto sono presenti più classi con lo stesso nome ma su file diversi questi vengono "compilati" con nomi diversi grazie ad un hash univoco. La documentazione ufficiale di React mostra un classico esempio simile.

Attvare SASS in un progetto React è molto più semplice di quanto si possa sembrare, è come se avessero pensato tutta la libreia in modo che possa funzionare perfettamente con SASS.
Prima di tutto bisogna installare la libreria nel progetto

npm i sass

Dopo di che basta creare un file con estensione "scss", in questo file si può giocare a piacimento, per esempio definire una variabile base e poi usarla nel file

$primaryColor: white;
...
.sidebar-brand-icon {
color: $primaryColor;
}

A questo punto basta andare nel file index.html ed importare il modulo

import './index.scss';

Ovviamente questo è un esempio che semplifica molto l'uso di SASS nelle librerie javascript, infatti è possibile poi integrarsi con altre librerie installate come Ionic come spiegato in un futuro articolo.

I contenuti di AlNao.it potrebbero avere inesattezze o refusi. Non potrà in alcun caso e per qualsiasi motivo essere ritenuta responsabile di eventuali imprecisioni ed errori né di danni causati. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso. Poiché ogni materiale sarà scaricato o altrimenti ottenuto attraverso l’uso del servizio a scelta e a rischio dell’utente, ogni responsabilità per eventuali danni a sistemi di computer o perdite di dati risultanti dalle operazioni di scarico effettuato dall'utente, ricade sull'utente stesso e non potrà essere imputata ad AlNao.it che declina ogni responsabilità per eventuali danni derivanti dall'inaccessibilità ai servizi presenti sul sito o da eventuali danni causati da virus, file danneggiati, errori, omissioni, interruzioni del servizio, cancellazioni dei contenuti, problemi connessi alla rete, ai provider o a collegamenti telefonici e/o telematici, ad accessi non autorizzati, ad alterazioni di dati, al mancato e/o difettoso funzionamento delle apparecchiature elettroniche dell’utente stesso.

AlNao.it ha adottato ogni possibile accorgimento al fine di evitare che siano pubblicati, nel sito web, contenuti che descrivano o rappresentino scene o situazioni inappropriate o tali che, secondo la sensibilità degli utenti, possano essere ritenuti lesivi delle convinzioni civili, dei diritti umani e della dignità delle persone, in tutte le sue forme ed espressioni. In ogni caso non garantisce che i contenuti del sito web siano appropriati o leciti in altri Paesi, al di fuori dell’Italia. Tuttavia, qualora tali contenuti siano ritenuti non leciti o illegali in alcuni di questi Paesi, ti preghiamo di evitare di accedere al nostro sito e ove scegliessi, in ogni caso, di accedervi, ti informiamo che l’uso che deciderai di fare dei servizi forniti dal sito sarà di tua esclusiva e personale responsabilità. L’utente sarà esclusivo responsabile della valutazione delle informazioni e del contenuto ottenibile mediante il sito web. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso.

Le pagine di questo sito sono protette dal diritto d’autore (copyright). In particolare a norma della legge sul diritto d’autore e il contenuto del sito è protetto contro duplicazioni, traduzioni, inserimento o trasformazione dello stesso in altri media, incluso l’inserimento o la trasformazione con mezzi elettronici. La riproduzione e lo sfruttamento economico di tutto o di parte del contenuto di questo sito sono consentite solo a seguito del consenso scritto dell’avente diritto. Sia il contenuto che la struttura del sito sono protetti dal diritto d’autore. In particolare, la duplicazione di informazioni o dati, l’uso dei testi o di parte di essi o delle immagini contenute nel sito (eccetto per le foto ad uso stampa) è consentita solo previo consenso scritto dell’avente diritto. Anche le illustrazioni, a norma dell’art. 1 della legge 633/1941 – e successive modifiche e integrazioni – sono protette dal diritto d’autore. Il diritto di pubblicazione e riproduzione di questi disegni è di titolarità dell’avente diritto. Il diritto d’autore sui disegni rimane in vigore anche per i disegni automaticamente o manualmente aggiunti a un archivio. Nulla di quanto contenuto in questo sito vale come concessione a terzi dei diritti di proprietà industriale ed intellettuale indicati in questa sezione. Ci riserviamo tutti i diritti di proprietà intellettuale del sito web.

Marchi ed immagini riferibili a soggetti terzi utilizzati in questo sito non appartengono a AlNao.it e sono da ritenersi di proprietà esclusiva dei rispettivi titolari. Le denominazioni dei prodotti pubblicati su questo sito web o delle società menzionate, anche qualora non siano indicate con il simbolo identificativo della registrazione del marchio sono marchi di titolarità di terzi e sono protetti dalla legge sui marchi (D.lgs. 30/2005 e successive modifiche e integrazioni) e dalle norme in tema di concorrenza sleale. Qualsiasi riproduzione degli stessi è da ritenersi vietata ai sensi di legge. In particolare è espressamente vietato qualsiasi uso di questi marchi senza il preventivo consenso scritto del relativo titolare ed, in particolare, è vietato utilizzarli in modo da creare confusione tra i consumatori in merito all'origine dei prodotti o per finalità di sponsorizzazione, nonché in qualsiasi modo tale da svilire e discreditare il titolare del marchio. Tutti i diritti che non sono espressamente concessi sono riservati al titolare del marchio.

In aggiunta a quanto indicato in altre previsioni delle Condizioni Generali d’Uso, AlNao.it non potrà essere ritenuta in alcun caso responsabile di alcun danno derivante dall'utilizzo o dall'impossibilità di utilizzare il sito web, i contenuti, le informazioni o connessi alla qualità degli stessi.