Andrea Baccolini, web designer, siti internet

Progettare un design reattivo, ma mantenendo gli elementi visivi esteticamente equilibrati su tutti i layout breakpoint (lett. punti di interruzione”, passaggi) è un’arte.
Oggi ho intenzione di condividere 5 dei miei CSS tricks comunemente usati insieme a casi di esempio per la codifica di disegni reattivi.
Essi sono semplici proprietà CSS come il min-width, max-width, overflow e relativo valore — ma queste proprietà svolgono un ruolo importante nel design reattivo.

1. Video Responsive (demo)
Questo trucco CSS per il video reattivo è stato scoperto da tjkdesign.com.
Esso fa in modo di incorporare il video alla massima larghezza.

.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

2. Min & Max Width (demo)

La proprietà “max-width” consente di impostare la larghezza massima dell’elemento.
Lo scopo di max-width è di impedire che l’elemento che si estenda oltre il bordo del contenitore.

Max-Width Container
Nell’esempio riportato di seguito, è 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%;
}

Il codice CSS reattivo sopra funziona su IE7 e IE9, ma non funziona su IE8.
Per risolvere il problema, aggiungere larghezza: auto.
Si può applicare un CSS condizionale appositamente per IE8 o utilizzare l’hack IE qui sotto:

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

Min-Width
Min-width è opposto a max-width.
Imposta la larghezza minima di un elemento.
Nel modulo di esempio qui sotto, min-width è usato sul campo di testo di input per prevenire che l’input diventi troppo piccolo quando si ridimensiona.

3. Valori relativi (demo)

Responsive design, sapere quando utilizzare il valore relativo può semplificare il CSS e massimizzare il miglior risultato di layout. Di seguito sono riportati alcuni esempi.

Margine relativo
Qui di seguito posto un esempio di un commentlist dove il margine relativo sinistro viene utilizzato per distanziare i commenti filettati.
Invece di utilizzare il valore di pixel fisso, ho usato il valore percentuale per distanziare le sottoliste.
Come mostrato sul lato sinistro della schermata, la casella del contenuto nelle sottoliste che si ottiene è molto piccola sulla risoluzione mobile se è stato utilizzato il margine sinistro in pixel.

Dimensione del carattere relativa
Con valore relativo (es. em o %), la dimensione del carattere, line-height e spaziatura del margine possono essere ereditate.
Per esempio, posso cambiare la dimensione del carattere su tutti gli elementi discendenti semplicemente cambiando la dimensione del carattere dell’elemento padre.

Padding Relativo
La schermata qui sotto mostra che è meglio utilizzare la percentuale nel padding relativo rispetto a spaziatura fissa in pixel.
Il box a sinistra mostra uno spazio padding sbilanciato se è stato utilizzato il pixel.
Il box con il padding in percentuale sulla destra mostra che l’area del contenuto viene ingrandita.

4. Overflow: hidden trucco (demo)

E’ possibile cancellare il “float” con la proprietà overflow.
Questo trucco è estremamente utile.
È possibile cancellare il “float” dall’elemento precedente e mantenere il contenuto all’interno del contenitore mediante l’applicazione di overflow: hidden.

5. Word-break (demo)

È possibile forzare il testo unbreaking (es. testo URL lungo) a capo invece di correre in una sola riga.

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

(traduzione dell’articolo “5 Useful CSS Tricks for Responsive Design” del blog “web designer wall“)