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
- Standard mode se esiste un DOCTYPE con un indirizzo Web completo che porta alla dtd (XHTML) o semplicemente il DOCTYPE per HTML5.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//IT"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>
```
- Quirks mode altrimenti
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?

Praticamente tutti

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

Il problema della compatibilità è così sentito che ci sono in rete varie tabelle di compatibilità disponibili …

Quirksmode
Can I use ...?
W3 schools browser support

… e comunità a cui rivolgersi per risolvere i problemi
Per i produttori di browser, test di conformità per i browser, molto difficili, che mettono in evidenza situazioni critiche

Acid test 2
Acid test 3
Support SVG

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:
- reset.css: la strategia è di azzerare quasi tutto
  Meyer reset.css
- normalize.css: si tenta di normalizzare le differenze tra browser
  Gallagher normalize.css Google normalize.css

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
- Cross browser testing
- Browser shots
- Per la compatibilità all'indietro EVOLT mantiene un archivio di vecchi browser http://browsers.evolt.org

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 ...

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)

Con la regola display:flex il box diventa flessibile
L'idea è che gli elementi all'interno di un contenitore flex hanno la capacità di modificare le loro dimensioni per riempire al meglio il contenitore
Due tipi di regole:
Per il contenitore:

Per gli elementi contenuti:

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

Per saperne di più W3Schools

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!

Progettazione di siti web a.a. 2021/22