Progettazione di siti web
a.a. 2021/22
Una doverosa premessa sulla compatibilità
La bellezza dei CSS3
Maria Simi
Aprile, 2022
[W3Schools, CSS3 files]
Dal vecchio HTML agli standard
- Obiettivo: compatibilità all'indietro
- Problema per i browser:
- Come passare dal vecchio HTML (con tag proprietari e difetti di implementazione) agli standard XHTML e CSS?
- se le nuove versioni supportano solo XHTML che ne è dei vecchi siti?
- Soluzione: introduciamo un interruttore nei browser
- Se attivo il documento viene interpretato in base ai nuovi standard (standards mode).
- Se non attivo si va in una modalità in cui si comporta bene con HTML vecchio stile (quirks mode)
NOTA. Quirk: una caratteristica particolare, una stranezza, una mania.
DOCTYPE switch
- L’interruttore (SWITCH) e attivato dalla presenza del DOCTYPE della pagina
- La logica ...
- senza il DOCTYPE non si passa la validazione e quindi l’utente non è interessato agli standard: trattiamo la sua pagina come le pagine HTML “vecchio-stile”
Quali browser hanno l'interruttore?
Quindi?
- Motivo in più per usare il DOCTYPE esattamente come da ricetta.
- Se non lo fate il browser si comporterà in maniera strana, non standard, per retrocompatibilità
- Questo non evita comportamenti diversi da browser a browser su funzionalità più avanzate di HTML e CSS
Tabelle di compatibilità per i CSS
Reset CSS e normalize CSS
- Ogni browser implementa un suo foglio di stile:
- L’altezza delle linee, la grandezza delle intestazioni, i margini, ecc. possono essere impostati in maniera diversa.
- Come ridurre le differenze tra browser?
- Soluzione: caricare prima un foglio di stile che ha l’unico scopo di annullare per quanto possibile le differenze e riallineare i browser
- Due strategie alternative:
Famiglie di browser
- Microsoft Explorer
- Explorer 6 per Windows (Trident engine)
- Explorer 5.5 per Mac (Tasman engine)
- Explorer 11 e successivi (Edge engine)
- Gecko browsers
- Netscape 6-8, Mozilla-Firefox, Galeon, Camino, K-meleon, SeaMonkey ... usano tutti lo stesso motore open source Gecko
- Webkit browsers
- Safari, Google Chrome (Blink)
- Opera (usava Presto engine, poi Blink)
- Albero genealogico dei browser
Ma come testare la compatibilità?
- Quanti browser mi devo scaricare e quanti sistemi operativi? quanti dispositivi?
- Servizi online di testing per browser, sistema operativo, dispositivo
Lo sviluppo dei CSS3
- Si comincia a lavorare alle specifiche del CSS3 nel 2005. L'implementazione da parte dei browser procede in parallelo con l'evolvere delle specifiche
- I CSS3, sono divisi in moduli: alcuni più stabili, altri ancora in evoluzione, alcuni semplici revisioni dei CSS2, altri introducono funzionalità nuove.
- Il processo di standardizzazione del W3C segue diverse fasi:
CSS chart
Supporto da parte dei browser dei CSS3
- Implementati nel transitorio con modelli diversi
- Alternative per le varie famiglie di browser
- -moz-proprietà: per Mozilla
- -webkit-proprietà: per la famiglia webkit (Safari, Chrome)
- -o-webkit-proprietà: per la famiglia webkit (Opera)
div {
-webkit-border-image:url(../images/border.png) 30 30 round; /* Safari */
-moz-border-image:url(../images/border.png) 30 30 round; /* Mozilla */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
Avvertenza: gli esempi sono stati testati su Chrome e Firefox!
I moduli dei CSS3
- Per comodità di realizzazione e di caricamento, i CSS3 sono stati divisi in "moduli". I più importanti sono:
- I selettori
- Media queries
- Sfondi e bordi (bordi stondati) *
- Effetti sul testo e stili tipografici
- Immagini di sfondo *
- Trasformazioni *
- Animazioni *
- Testo a colonne multiple *
- Flexible box layout *
- Grid layout
Bordi stondati: le dimensioni
Ogni angolo viene trattato come un quarto di una ellissi, le cui dimensioni sono specificate da x e y
Se x=y abbiamo una stondatura regolare (un quarto di cerchio).
Bordi stondati: proprietà border-radius
Un piccolo segreto sui bordi ...
Assi e coordinate cartesiane
Box-shadow
Effetti sul testo
Border-image
W3Schools
Background-size
Sfondi multipli
Gradienti lineari
Gradienti radiali
CSS3 transform: 2D
- 2D transform:
- traslazioni: translate()
- rotazioni: rotate()
- scalature: scale()
- inclinazioni: skew()
- tutto insieme: matrix()
- CSS3 files transform
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
Traslazioni
Rotazioni
Scalature
Inclinazioni (skew)
CSS3 transition
- Sono cambiamenti graduali da uno stile all'altro
- Hanno una durata nel tempo (0 = nessuna transizione)
- Inizia quando dovrebbe cambiare lo stile (es. su hover), ma lo fa in maniera graduale
- Si applica a proprietà css "animabili" (animatable)
- Si può specificare un metodo (timing-function): linear, ease, ease-in, ease-out
- CSS3 files transition
div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
Esempio di transizione CSS3
Animazioni CSS3
- Un'animazione è un processo fatto di keyframe che vengono visualizzati secondo una certa temporizzazione
- Con i CSS3 non è più necessario programmarlo!
- Le animazioni hanno un nome, una durata, una o più proprietà da animare ...
- CSS3 files animation
div {
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s; /* Standard syntax */
}
@-webkit-keyframes myfirst { /* Chrome, Safari, Opera */
from {background: red;} to {background: yellow;}
}
@keyframes myfirst { /* Standard syntax */
from {background: red;} to {background: yellow;}
}
Esempio 1 di animazione CSS3
Esempio 2 di animazione CSS3
Esempio 3 di animazione CSS3
Esempio 4 di animazione CSS3
Importanti novità per il layout
Tra le caratteristiche più avanzate dei CSS ce ne sono alcune che semplificheranno il layout di pagina e lo renderanno molto più semplice.
- Testo su più colonne
- Contenitori flessibili (FLEX)
- Grid layout
Testo su più colonne
Contenitori flex (flexbox)
Da: CSS-tricks
Regole per il contenitore: flex-direction
- .container {
flex-direction: row | row-reverse | column | column-reverse;
}
- row (default): da sinistra a destra
- row-reverse: da destra a sinistra
- column: dall'alto al basso
- column-reverse: dal basso all'alto
Regole per il contenitore: flex-wrap
- .container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap (default): tutti gli elementi sulla stessa riga
- wrap: gli elementi si dispongono su più righe dall'alto al basso
- wrap-reverse: gli elementi si dispongono su più righe dal basso all'alto
Regole per il contenitore: justify-content
- Allineameno lungo l'asse principale (di solito quello orizzontale)
- .container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | ... ;
}
Regole per il contenitore: align-items
- Allineamento lungo l'asse secondario (di solito quello verticale)
- .container {
align-items: stretch | flex-start | flex-end | center | baseline | ... ;
}
display: flex (allineamento orizzontale)
display: flex (allineamento verticale)
Contenitori flex: Esempio 1
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
...
</ul>
Esempio 1
Vediamo il comportamento responsive
|
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
|
Contenitori flex: Esempio 2
<ul class="flex-container">
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
Esempio 2
Vediamo come si può combinare con media-queries
|
.navigation {
list-style: none;
margin: 0;
background: deepskyblue;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
.navigation a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
.navigation a:hover {
background: #1690d6;
}
|
Regole per gli elementi dentro un flex
Le proprietà dei flex
- Proprietà del contenitore
- display: flex | inline-flex
- flex-direction: row | column
- flex-wrap: wrap | nowrap
- justify-content:
flex-start | flex-end | center | space-between | space-around
- align-items:
stretch | flex-start | flex-end | center | baseline
|
- Proprietà degli elementi contenuti
- order: n
- flex-grow: n
- flex-shrink: n
- align-self: auto | flex-start |
flex-end | center | baseline | stretch
|
Conclusione
- Usate gli effetti speciali per cose non essenziali
- Controllate le tabelle di compatibilità
- Usate le alternative per le diverse famiglie di browser
- Per il resto ... il limite è solo la vostra creatività!
- Le animazioni, se usate bene, non sono fastidiose e possono aumentare l'usabilità delle pagine.
- Per quello che non riuscite a fare con quanto avete visto o se avete problemi di compatibilità ... serve Javascript!