Introduzione al layout CSS

Questa traduzione è incompleta. Aiutaci a tradurre questo articolo dall’inglese

Questo articolo riassume alcune caratteristiche del CSS viste nei moduli precedenti, come ad esempio i diversi valori di display, e presenta alcuni concetti che verranno trattati nel corso di questo modulo.

Prerequisiti: Le basi di HTML (leggi Introduzione a HTML) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS [Introduction to CSS].)
Obiettivo: Offrire una panoramica sulle tecniche di CSS usate nei layout delle pagine web. Ogni tecnica viene approfondita negli articoli a seguire.

Le tecniche di CSS applicate al layout di pagina permettono di controllare il posizionamento degli elementi contenuti nella pagina web relativamente alla loro posizione predefinita nel flusso normale di layout, agli elementi contigui, al contenitore padre o all'area di visualizzazione/finestra principale. Le tecniche per il layout di pagina che approfondiremo in questo modulo sono:

  • Flusso normale
  • La proprietà display
  • Flexbox
  • Griglie
  • Elementi float
  • Posizionamento
  • Layout con tabelle
  • Layout multicolonna

Ogni tecnica ha i propri casi d'uso, vantaggi e svantaggi. Nessuna di esse è concepita per funzionare in isolamento. Una volta compreso per quale scopo è stato progettato ciascun metodo, risulterà facile scegliere lo strumento di layout più adatto alle diverse esigenze.

Flusso normale

Per flusso normale si intende il layout predefinito di una pagina HTML, ovvero come viene visualizzata senza interventi da parte nostra. Ecco un breve esempio di codice HTML:

<p>Amo il mio gatto.</p>
    
<ul>
  <li>Compra il cibo per gatti</li>
  <li>Esercitati</li>
  <li>Tira su di morale un amico</li>
</ul>
    
<p>Fine!</p>

Secondo le impostazioni predefinite, il browser visualizza il codice in questo modo:

Notiamo come l'HTML venga visualizzato nell'esatto ordine in cui appare nel codice sorgente, con gli elementi incolonnati uno sotto l'altro: primo paragrafo, elenco non ordinato, secondo paragrafo.

Gli elementi che compaiono uno sotto l'altro vengono definiti come elementi blocco, al contrario degli elementi in linea, che sono disposti uno accanto all'altro come le singole parole di un paragrafo.

Nota: La direzione in cui si dispongono i contenuti di elementi blocco viene definita direzione blocco. La direzione blocco è verticale in lingue come l'inglese, che hanno una modalità di scrittura orizzontale. Al contrario, è orizzontale in lingue come il giapponese, che hanno una modalità di scrittura verticale. La corrispondente direzione in linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.

Nella maggior parte dei casi, il flusso normale è sufficiente a disporre gli elementi nella pagina come ci servono. Tuttavia, per ottenere layout più complessi, occorre modificare la disposizione predefinita grazie ad alcuni strumenti disponibili nel CSS. Partire da un codice HTML ben strutturato è importante, perché permette di ritoccare la disposizione predefinita degli elementi, invece di stravolgerla.

I metodi per influenzare la disposizione degli elementi con il CSS sono i seguenti:

  • La proprietà display: i valori standard come block, inline o inline-block possono mutare il comportamento degli elementi nel flusso normale, ad esempio far sì che un elemento blocco si comporti come un elemento in linea (per maggiori informazioni vedi Tipi di box CSS [Types of CSS boxes]). Esistono anche metodi che influiscono sull'intero layout, ridefinendo il posizionamento degli elementi figlio una volta che assegnamo all'elemento padre che li contiene determinati valori di display. Vedi, per esempio, Griglie CSS [CSS Grid] e Flexbox [Flexbox].
  • Elementi float: applicando a float un valore come left è possibile affiancare altri elementi agli elementi blocco, proprio come le illustrazioni contornate da testo nei layout delle riviste cartacee.
  • La proprietà position: permette un preciso posizionamento di elementi box all'interno di altri box. static è il valore predefinito nel flusso normale, ma applicando altri valori è possibile definire un comportamento differente, come ad esempio fissare il box in cima all'area di visualizzazione.
  • Layout con tabelle: le caratteristiche utilizzate per lo stile di una tabella HTML possono essere riproposte su elementi non tabellari impostando display: table e altre proprietà associate.
  • Layout multicolonna: le proprietà del Layout multicolonna [Multi-column layout] possono distribuire in colonne il contenuto di un blocco, come nella pagina di un quotidiano cartaceo.

La proprietà display

I modi principali per realizzare il layout di una pagina via CSS risiedono nei diversi valori della proprietà display. Questa proprietà permette di cambiare l'impostazione predefinita per la visualizzazione di un elemento. Nel flusso normale, tutti gli elementi hanno un valore display predefinito, che definisce il comportamento per cui sono stati progettati. Ad esempio, il fatto che i paragrafi di testo nelle lingue occidentali vengano visualizzati uno sotto l'altro è dovuto al loro stile predefinito display: block. Se all'interno di un paragrafo si inserisce un link in una porzione del testo, il link rimane allineato con il resto del testo invece di andare a capo poiché lo stile predefinito dell'elemento <a> è display: inline.

Il tipo di visualizzazione predefinito può essere modificato. Ad esempio, l'impostazione predefinita dell'elemento <li> è display: block. Ciò significa che le voci dell'elenco nel documento vengono visualizzate una sotto l'altra, secondo l'impostazione occidentale. Se il valore di display viene modificato in inline, gli elementi dell'elenco verranno visualizzati uno accanto all'altro, come le parole di una frase. La possibilità di modificare il valore di display per tutti gli elementi significa che è possibile mantenere il loro significato semantico definito nell'HTML, indipendentemente dal modo in cui verranno visualizzati. Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento.

Oltre alla possibilità di cambiare la presentazione dei componenti da block a inline e vice versa, si possono creare layout con metodi più complessi, iniziando proprio dall'impostazione del valore di display. Tuttavia, occorre solitamente abbinarlo ad altre proprietà per realizzare un layout complesso. I due valori principali quando parliamo di layout sono display: flex e display: grid.

Flexbox

Flexbox è l'abbreviazione di Modulo Flexible Box Layout, progettato per facilitare la creazione di layout monodimensionali degli elementi sia in riga che in colonna. Per utilizzare Flexbox, occorre impostare display: flex al padre degli elementi su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio.

Il markup HTML sottostante presenta una classe wrapper associata a un elemento contenitore, nel quale sono presenti tre elementi <div>. Secondo il loro valore predefinito, nel documento d'esempio che ha una direzione di scrittura occidentale, gli elementi dovrebbero essere visualizzati come elementi blocco, uno sotto l'altro.

Tuttavia, una volta specificato display: flex sul padre, i tre componenti figlio si dispongono in colonna. Questo accade perché essi ora sono componenti flex e assumono il medesimo valore iniziale che Flexbox attribuisce loro attraverso il contenitore padre. In questo caso vengono presentati in riga perché il valore iniziale di flex-direction impostato dal padre è row. Si allungano tutti fino a raggiungere l'altezza del componente più alto perché il valore iniziale della proprietà align-items viene impostato a stretch dal padre. Quindi i componenti si distendono fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. Tutti i componenti si schierano al principio del contenitore, lasciando spazio libero alla fine della riga.

.wrapper {
  display: flex;
}
<div class="wrapper">
  <div class="box1">Uno</div>
  <div class="box2">Due</div>
  <div class="box3">Tre</div>
</div>

Oltre alle suddette proprietà applicabili al contenitore flex, esistono anche proprietà che possono essere impostate sui componenti figlio. Tra le altre cose, queste proprietà possono cambiare il modo in cui i componenti si flettono, facendoli espandere o contrarre per adattarsi allo spazio disponibile.

È possibile, per esempio, aggiungere la proprietà flex a tutti i componenti figlio, con valore 1. Questo fa sì che tutti i componenti aumentino in dimensione sino a riempire il contenitore, invece di lasciare dello spazio vuoto alla fine. Se lo spazio aumenta, i componenti si allargano. Se lo spazio diminuisce, si contraggono. Inoltre, se viene aggiunto un nuovo elemento al markup, tutti i componenti diminuiscono la propria dimensione per far spazio al nuovo inserimento continuando a riempire la medesima area, qualsiasi essa sia.

.wrapper {
    display: flex;
}

.wrapper > div {
    flex: 1;
}
<div class="wrapper">
    <div class="box1">Uno</div>
    <div class="box2">Due</div>
    <div class="box3">Tre</div>
</div>

Nota: Questa è solo una breve introduzione alle possibilità di Flexbox. Per approfondire l'argomento vai all'articolo Flexbox.

Griglia layout

Mentre Flexbox è stato progettato per il layout monodimensionale, la Griglia layout è stata progettata per essere bidimensionale, cioè per disporre gli elementi in righe e colonne.

Per passare alla modalità Griglia layout occorre innanzitutto impostare un valore di display specifico, display: grid. L'esempio seguente usa un markup simile a quello visto negli esempi di flex: presenta un contenitore e alcuni elementi figlio. Oltre a usare display: grid, definiamo anche una regola per righe e colonne nell'elemento padre utilizzando rispettivamente le proprietà grid-template-rows e grid-template-columns. Definiamo tre colonne di 1fr ciascuna e due righe di 100px. Non occorre specificare alcuna regola per gli elementi figlio, che verranno inseriti nelle celle create dalla nostra griglia in maniera automatica.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}
<div class="wrapper">
    <div class="box1">Uno</div>
    <div class="box2">Due</div>
    <div class="box3">Tre</div>
    <div class="box4">Quattro</div>
    <div class="box5">Cinque</div>
    <div class="box6">Sei</div>
</div>

Una volta impostata la griglia, è possibile posizionarvi all'interno i componenti in maniera esplicita invece di affidarsi all'impostazione automatica come nell'esempio precedente. Nel secondo esempio qui sotto viene definita la stessa griglia, ma in questo caso definiamo delle regole anche per i componenti figlio. La linea iniziale e quella finale di ogni componente vengono impostate nelle proprietà grid-column e grid-row. Questo fa sì che i componenti seguano tracciati diversi.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}
<div class="wrapper">
    <div class="box1">Uno</div>
    <div class="box2">Due</div>
    <div class="box3">Tre</div>
</div>

Nota: Questi due esempi dimostrano solo una piccola parte delle potenzialità della Griglia layout; per scoprirne altre vedi l'articolo Griglia layout [Grid Layout].

La parte restante di questa guida tratta di altri metodi di strutturazione, meno rilevanti per l'impostazione del layout principale della pagina, ma utili per operazioni specifiche. Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.

Elementi float

Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. L'elemento viene spostato a sinistra o a destra e isolato dal flusso normale, il contenuto circostante scorre intorno a questo elemento.

La proprietà float ha quattro possibili valori:

  • left: sposta l'elemento a sinistra.
  • right: sposta l'elemento a destra.
  • none: non causa alcuno spostamento ed è il valore predefinito.
  • inherit: "eredita" il valore della proprietà float dall'elemento padre.

Nel seguente esempio, un elemento <div> viene spostato a sinistra e il suo margin impostato a destra per creare uno spazio tra il testo e l'elemento. In questo modo, il corpo del testo fluisce intorno al box. Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float.

<h1>Esempio semplice di float</h1>
    
<div class="box">Float</div>
    
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

    
.box {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

Nota: Gli elementi float vengono spiegati in maniera esauriente nell'articolo sulle proprietà float e clear. Prima dell'esistenza di metodi come Flexbox e Griglia layout, gli elementi float venivano utilizzati anche come sistema per suddividere il layout in colonne. È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. Lo scopriremo nella lezione sui metodi di layout legacy.

Tecniche di posizionamento

Il posizionamento permette di spostare un elemento dalla posizione che assumerebbe nel flusso normale a una nuova posizione. Il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare la posizione di un componente specifico.

Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà position. Comprendere la tecnica del posizionamento permette anche di capire cos'è il flusso normale e come estromettere un componente da esso.

I tipi di posizionamento che ci serve conoscere sono cinque:

  • Posizionamento statico: è il valore preimpostato sugli elementi e significa semplicemente "inserisci l'elemento nella posizione stabilita dal flusso di layout del documento, nessuna istruzione speciale".
  • Posizionamento relativo: permette di cambiare la posizione dell'elemento e spostarlo in relazione al flusso normale, come anche di sovrapporlo ad altri elementi nella pagina.
  • Posizionamento assoluto: l'elemento viene completamente isolato dal flusso normale della pagina, come se si trovasse su un livello separato. Da lì è possibile fissarne la posizione ai margini dell'elemento <html> (o del suo elemento contenitore più prossimo). Questa caratteristica è utile per produrre effetti sul layout come i box a scheda, organizzati come un certo numero di schede disposte una sopra l'altra e mostrate o nascoste a comando. Un altro esempio sono i box di notifica, posti inizialmente al di fuori dello schermo, ma che possono essere richiamati nell'area di visualizzazione usando un pulsante di controllo.
  • Posizionamento fisso: assomiglia molto al posizionamento assoluto, con la differenza che àncora l'elemento in relazione all'area di visualizzazione del browser invece che a un altro elemento. Viene usato per creare effetti quali i menu di navigazione che mantengono sempre la stessa posizione sul monitor, anche quando il resto del contenuto scorre.
  • Posizionamento adesivo: è un nuovo tipo di posizionamento per cui un elemento si comporta come se fosse impostato su position: static sino a quando non raggiunge un determinato margine dell'area di visualizzazione, a quel punto muta il suo comportamento in position: fixed.

Semplice esempio di posizionamento

Per familiarizzare con queste tecniche di layout, vediamo un paio di semplici esempi basati sullo stesso codice HTML:

<h1>Posizionamento</h1>

<p>Elemento blocco essenziale.</p>
<p class="positioned">Elemento blocco essenziale.</p>
<p>Elemento blocco essenziale.</p>

Il seguente CSS mostra lo stile preimpostato dell'HTML:

body {
  width: 500px;
  margin: 0 auto;
}

p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

L'output mostrato è il seguente:

Posizionamento relativo

Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. Si potrebbe perciò realizzare lo spostamento di un'icona un po' più in basso per allinearla a un'etichetta testuale, aggiungendo la seguente istruzione:

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}

In questo caso, il secondo paragrafo ha un attributo position di valore relative che non produce alcun effetto di per sé. Quindi, aggiungiamo le proprietà top e left, che spostano l'elemento associato in basso e a destra. Questo passaggio potrebbe sembrare controintuitivo, ma basta figurarselo come se l'elemento subisse una spinta da sinistra e dall'alto che ne provocasse lo spostamento a destra e in basso.

Aggiungendo questo codice, si ottiene il seguente risultato:

.positioned {
  position: relative;
  background: rgba(255,84,104,.3);
  border: 2px solid rgb(255,84,104);
  top: 30px;
  left: 30px;
}

Posizionamento assoluto

Il posizionamento assoluto serve a rimuovere un elemento dal flusso normale e riposizionarlo stabilendo l'offset dai margini di un blocco contenitore.

Riprendendo l'originale esempio senza posizionamento, implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per:

.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}

In questo caso, assegniamo absolute alla proprietà position per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà top e left. Il codice però produce il risultato seguente.

.positioned {
    position: absolute;
    background: rgba(255,84,104,.3);
    border: 2px solid rgb(255,84,104);
    top: 30px;
    left: 30px;
}

La differenza si nota! L'elemento a cui viene assegnato il posizionamento è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. Le proprietà top e left applicate all'elemento producono un effetto diverso a seconda del tipo di posizionamento, se assoluto oppure relativo. In questo caso, l'offset viene calcolato rispetto al lato superiore e sinistro della pagina. L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al posizionamento.

Posizionamento fisso

Il posizionamento fisso estrae l'elemento a cui è applicato dal flusso del documento allo stesso modo del posizionamento assoluto. Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. Poiché il componente rimane fisso rispetto all'area di visualizzazione, siamo in grado di costruire componenti come un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante.

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola position: fixed.

<h1>Posizionamento fisso</h1>

<div class="positioned">Fisso</div>

<p>Paragrafo 1.</p>
<p>Paragrafo 2.</p>
<p>Paragrafo 3.</p>
.positioned {
    position: fixed;
    top: 30px;
    left: 30px;
}

Posizionamento adesivo

L'ultimo tipo di posizionamento a nostra disposizione è il posizionamento adesivo. Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in position: fixed.

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

Nota: per saperne di più sul posizionamento, vedi l'articolo Posizionamento [Positioning].

Layout con tabelle

La tabelle HTML sono appropriate per rendere i dati tabulari. Tuttavia, molti anni fa, prima che i vari browser supportassero i più elementari CSS in maniera affidabile, gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. Questo approccio funzionava, ma presentava molti problemi: i layout basati su tabella non erano reattivi, generavano un markup molto pesante, creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader).

Il modo in cui una tabella appare nella pagina web si deve a un'impostazione di proprietà CSS che ne definisce il layout. È possibile utilizzare queste proprietà anche per posizionare elementi diversi dalle tabelle. Talvolta, questo utilizzo viene definito come “tabelle CSS”.

Di seguito viene mostrato un esempio di questo uso. Tuttavia, i layout realizzati con tabelle CSS dovrebbero ormai essere considerati un metodo legacy, riservato a situazioni in cui occorre garantire la compatibilità con browser datati, che non supportano Flexbox e Griglia.

Diamo un'occhiata all'esempio. Innanzitutto vi sono alcuni semplici markup che generano il modulo HTML. Ogni elemento HTML ha un'etichetta, in più è presente un paragrafo contenente una didascalia. Tutti i campi di input accoppiati alle etichette vengono inseriti in <div> al fine di produrre il layout.

<form>
  <p>Prima di tutto, dichiara il tuo nome e la tua età.</p>
  <div>
    <label for="fname">Nome:</label>
    <input type="text" id="fname">
  </div>
  <div>
    <label for="lname">Cognome:</label>
    <input type="text" id="lname">
  </div>
  <div>
    <label for="age">Età:</label>
    <input type="text" id="age">
  </div>
</form>

Segue il CSS dell'esempio. Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà display. Gli elementi <form>, <div>, <label> e <input> vengono rispettivamente impostati come una tabella, righe di tabella e celle di tabella. Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. Rimane solo da regolare la dimensione, i margini ecc. per far apparire l'insieme più gradevole.

Si noti che il paragrafo contenete la didascalia è stato impostato con la regola display: table-caption, che determina un comportamento simile a <caption> all'interno di una tabella. Inoltre, per motivi estetici, ha l'attributo caption-side: bottom;. In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <input>.

Ciò consente una notevole flessibilità.

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

Otteniamo il seguente risultato:

Si veda anche l'esempio dal vivo [TODO] e il codice sorgente [TODO IT source code]

You can also see this example live at css-tables-example.html (see the source code too.)

Layout multicolonna

Il modulo di layout multicolonna permette di strutturare il contenuto in colonne, in maniera simile al testo di un quotidiano cartaceo. Il layout a colonne non è una visualizzazione ottimale nei siti web, in quanto costringe chi legge a scorrere continuamente su e giù per la pagina. Tuttavia, in alcuni casi, suddividere il contenuto in colonne si rivela utile.

Il blocco si può trasformare in un contenitore multicolonna grazie alla proprietà column-count, che indica al browser il numero di colonne desiderate, oppure alla proprietà column-width, che specifica la larghezza delle colonne (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).

Nel seguente esempio, un elemento <div> con classe container contiene un blocco di codice HTML.

<div class="container">
    <h1>Layout multi-colonna</h1>
    
    <p>Paragrafo 1.</p>
    <p>Paragrafo 2.</p>

</div>

La proprietà column-width con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.

    .container {
        column-width: 200px;
    }

Sommario

Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. Continua la lettura per approfondire ogni singolo aspetto di questa tecnologia!

In questo modulo