Conoscere CSS - Parte Seconda

Progettare un documento

Una delle motivazioni principali che stanno alla base di css è la possibilità di rendere i documenti quanto più possibile indipendenti dalle caratteristiche del media di presentazione.
In realtà scrivere un documento per un libro di carta, per un e-book, per un sito di e-learning, o per una presentazione multimediale non è la stessa cosa. L'autore ha in testa un pubblico di destinazione ed uno o più media di restituzione e il contenuto del documento deve necessariamente tener conto di questi fattori. Qui mi limiterò ad esaminare le funzionalità di css che consentono di organizzare i contenuti su diversi tipi di media o su media dello stesso tipo ma con caratteristiche diverse.

Utilizzerò questo documento come banco di prova. Voglio che sia leggibile sia su un monitor di un PC che su quello di un telefonino e lo voglio fare scrivendo un numero ragionevole di regole css. I documenti di riferimento che utilizzerò sono:

Primo problema. Lavorando su PC come posso verificare in tempo reale l'aspetto che avrà il documento sullo schermo del mobile? Ho realizzato un piccolo script JS per "simulare" sul monitor del PC di sviluppo l'aspetto approssimativo che il documento avrebbe sul mio dispositivo mobile. Lo script non fa altro che sovrascrivere la regola di stile dell'elemento article che racchiude il contenuto del documento.
Il documento è dotato di un separato foglio di stile, css02.css. Quando si preme il bottone "portrait", in un tag style di css02.html, altrimenti vuoto, viene inserita la regola:

 
      article{
         width:360px;
         background-color:beige;
      }

Alla pressione di "landscape" la regola inserita sarà:

 
      article{
         width:720px;
         background-color:beige;
      }

Il tasto "normal" ripristina la situazione normale ovvero elemento style in css02.html vuoto. In questo caso le regole di stile applicate all'elemento article sono quelle presenti nel file .css ovvero:

 
@media (min-width:360px)and 
                (max-width:720px){
      article{
         width:99%;
         left:0;
         font-size:12pt;
      }
      footer{
         width:99%;
      }
}

In realtà lo script contiene anche altre regole di stile aggiunte mano a mano che il documento diventava più complesso. Questa "complicazione" serve solo ad avere una idea delle proporzioni del documento nelle diverse modalità di visualizzazione e non è rilevante ai fini della comprensione dell'argomento trattato.

La colorazione di background serve per evidenziare gli effetti delle properties padding e margin. Il vederle in azione nelle configurazioni "portrait" e "mobile" consiglia di usarle con grande parsimonia.

Il comportamento "auto-adattativo" del documento alle dimensioni dello schermo del dispositivo di visualizzazione si ottiene con il solo codice css, utilizzando le media queries ed inserendo nel codice html la meta tag viewport:

 
<!DOCTYPE html>
<html lang="it">
   <head>
      <meta charset="utf-8"/>
      <meta name="viewport"
      content="width=device-width, 
      initial-scale=1.0"/>
      ...
      ...

Le immagini che seguono servono per illustrare qualche altro accorgimento da seguire

ciliege

Il posizionamento e le proporzioni sostanzialmente invarianti dell'immagine sono ottenuti utilizzando il posizionamento relativo e il dimensionamento con unità percentuali:

 
#ciliege{
   position:relative;
   width:80%;
   left:10%;
}

Ecco una situazione diversa: in modalità "normale" ma anche in modalità "landscape" il testo che si posiziona alla destra dell'immagine può ancora essere una soluzione accettabile, in modalità "portrait" l'effetto potrebbe essere sgradevole.

Per evitare paragrafi flottanti su schermi di mobile in modalità "portrait", quando la massima ampiezza della viewport è inferiore o uguale a 360px, sono ricorso alla seguente media query:

 
@media(max-width:360px){
   p{clear:left;}
}

Meta tag viewport

Il meta tag Viewport viene generalmente utilizzato per impostare la larghezza della vista e la scala iniziale sui dispositivi mobili. Ecco l'impostazione "standard" di viewport:

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

Sono disponibili anche gli attributi minimum-scale, maximum-scale per limitare le modifiche del livello di zoom, e user-scalable per vietare del tutto la possibilità di zoom, ma la maggior parte dei browser consentono all'utente di eseguire sempre lo zoom a prescindere dalle restrizioni di viewport.

Per prova in questo documento ho scritto:

 
<meta name="viewport" 
   content="width=device-width,
   initial-scale=1.0,
   minimum-scale=0.5, 
   maximum-scale=2.0,
   user-scalable=yes"/>

minimum-scale e maximum-scale possono assumere valori compresi fra 0.0 e 10.0.
maximum-scale deve essere maggiore o uguale di minimum-scale.

Attenzione. Non tralasciare il "/" di chiusura della meta-tag.

Nota. Almeno sulla mia versione di Android l'attributo minimum-scale sembra essere ignorato.

Nota. Sempre su Android, se la meta-tag viewport non è presente, o contiene qualche impostazione giudicata errata, viene proposta la ottimizzazione della pagina per i dispositivi mobili.

Maggiori informazioni sulla meta-tag viewport possono essere trovati in:

Media queries

Le media queries estendono le funzionalità dei media types consentendo un accurato controllo dello stile degli elementi su media con caratteristiche diverse. Una media query è una espressione logica che combina i risultati di uno o più test su particolari proprietà del dispositivo di restituzione corrente, seguita da una o più regole di stile applicate quando la suddetta espressione assume il valore vero.

Una media query può applicarsi ad uno o più media types o a tutti i media types. Ad esempio:
@media screen ... si applica solo ai device di tipo screen
mentre
@media screen and print ... si applica solo ai device di tipo screen e print
@media all ... o @media ... si applica a tutti i devices types
ecco una delle media queries applicate a questo documento:

@media screen and (orientation:landscape) 
                                   and (max-width:800px){
   code{color:red;}
   pre{background-color:yellow;}
}

Essa cambia l'aspetto di alcuni elementi del documento quanto si ruota il dispositivo orizzontalmente (landscape) o verticalmente (portrait). L'ulteriore condizione (max-width:800px) fa si che le regole non siano applicate a schermi con ampiezza massima superiore agli 800px.

Ecco le altre media queries applicate:

@media (min-width:320px) and 
                       (max-width:800px){
      article{
         width:99%;
         left:0;
         font-size:10pt;
      }
      footer{
         width:99%;
      }
}
@media(max-width:360px){
   p{clear:left;}
}

La prima media queries fa si che l'elemento article in cui ho disposto tutto il contenuto del documento occupi praticamente tutta la viewport quando presentata su schermi di dimensione compresa fra 320px e 800px.
La seconda media query resetta il posizionamento float:left dei paragrafi quando restituiti su dispositivi con ampiezza massima inferiore o uguale a 360px

Approccio Mobile-First

Consente di scrivere documenti ottimizzati sia per i dispositivi mobili che per i desktop con il minimo sforzo. Consiste nel focalizzare, in primo momento, tutta l'attenzione allo sviluppo per dispositivi mobili e solo dopo aver completato questa fase, ridistribuire il contenuto sullo spazio più ampio del desktop.

Il primo approccio è quello di pensare il contenuto del documento distribuito in contenitori disposti impilati,uno dopo l'altro, nel body del documento quando questo è visualizzato su piccoli schermi e invece affiancati quando il documento è visualizzato su schermi più grandi.

Ecco come si può fare:

#left{
   background-color:lightgreen;
}
#center{
     background-color:orange;
}
#right{
   background-color:magenta;   
}

/* per schermi larghi più di 600px 
(esempio desktop o mobile in modalità landscape)
*/

@media (min-width: 600px){
   #left{
      float:left;
      width:33.33%;
   }
   #center{
      float:left;
      width:33.33%;
   }
   #right{
      float:left;
      width:33.33%;
   }
}

Sezione 1 - left

eryngium Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, leo ut eleifend pharetra, diam arcu consectetur lacus, dignissim ornare ex augue eget eros. Donec semper, metus at egestas condimentum, lorem nisl porttitor nisi, non dictum est ex vitae ex. Quisque aliquam vitae nisi et placerat. Nulla dapibus purus ac tellus hendrerit, vitae pellentesque ipsum scelerisque. pomodorini Sed interdum tortor varius maximus tempor. costaViola Etiam ac diam vel lectus rutrum convallis. Aenean sed elit lacus. Vestibulum quis condimentum ante.Nulla erat est, convallis et congue vel, auctor non augue.

Sezione 2 - center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, leo ut eleifend pharetra, diam arcu consectetur lacus, dignissim ornare ciliege ex augue eget eros. Donec semper, metus at egestas condimentum, lorem nisl porttitor nisi, non dictum est ex vitae ex. Quisque aliquam vitae nisi et placerat. gelo Nulla dapibus purus ac tellus hendrerit, vitae pellentesque ipsum scelerisque. Sed interdum tortor varius maximus tempor. trafile Etiam ac diam vel lectus rutrum convallis. Aenean sed elit lacus. Vestibulum quis condimentum ante. Nulla erat est, convallis et congue vel, auctor non augue.

Sezione 3 - right

goletta Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, leo ut eleifend pharetra, diam arcu consectetur lacus, dignissim ornare ex augue eget eros. Donec semper, metus at egestas condimentum, lorem nisl porttitor nisi, non dictum est ex vitae ex. Quisque aliquam vitae nisi et placerat. Nulla dapibus purus ac tellus hendrerit, vitae pellentesque ipsum scelerisque. Sed interdum tortor varius maximus tempor. manichino Etiam ac diam vel lectus rutrum convallis. Aenean sed elit lacus. Vestibulum quis condimentum ante. licheni Nulla erat est, convallis et congue vel, auctor non augue.

Ultimo aggiornamento: 17 giugno 2020