Traduzione dell’articolo “CSS Exclusions: Making Boring Layouts Less Boring By Louie Rootfield” del blog “ENVATOTUTS+.“
In questo tutorial, ci accingiamo ad esplorare le “esclusioni” CSS. A prima vista, le “esclusioni” potrebbero essere simili alle “shapes” (forme) CSS in quanto avvolgono il contenuto di un elemento. Tecnicamente, però, servono ad uno scopo diverso.
I moduli shapes CSS definiscono una vera e propria forma di un elemento, ma il contenuto non si avvolge intorno alla forma fino a quando l’elemento è in float. Il modulo esclusioni CSS, invece, è specificamente progettato per questo; permettendo ad un contenuto in riga di avvolgersi intorno a un elemento float, a prescindere se l’elemento è posizionato in modo “absolute”, “relativ” o “fixed”.
PROPRIETA’
I moduli esclusioni CSS introducono un paio di nuove proprietà e valori, vale a dire:
- wrap-flow: imposta l’area di esclusione, e come il contenuto deve avvolgere intorno ad esso.
- wrap-margin: è abbastanza auto-esplicativo, imposta il margine o offset che circonda la zona di esclusione.
BROWSER SUPPORTATI
Vale la pena notare che le esclusioni CSS attualmente funzionano solo da Internet Explorer 10 in su, ed Edge, dimostrando ancora una volta come Microsoft stia spingendo le frontiere del browser web (li dobbiamo troppo ringraziare per lo sviluppo della “Griglie CSS“). Per il momento, dobbiamo anteporre le nuove proprietà con “-MS-” quando viene utilizzato.
Clikka sull’immagine per aprire la pagina
Per capire meglio come funziona CSS esclusioni, abbiamo preparato una pagina iniziale semplice composto da poche righe di contenuto e di un’immagine avatar alla fine.
Questo è un modello abbastanza comune sul web, e vediamo se siamo in grado di abbellirlo un po ‘utilizzando le Esclusioni CSS. Presumendo che il browser supporti le Esclusioni, puntiamo a questo risultato:
USIAMO LE ESCLUSIONI CSS
In primo luogo, cerchiamo di organizzare il contenuto in due colonne e posizionare l’immagine avatar al centro. Non importa come organizzare il layout, è possibile utilizzare i Flexbox CSS, le Griglia CSS , o l’approccio “tradizionale” utilizzando la proprietà float.
Possiamo vedere dall’immagine sopra che l’avatar è stato rimosso dalla ine del documento ed è posizionato sopra il contenuto, nascondendolo. Utilizzando le Esclusioni CSS, siamo in grado di forzare il contenuto a scorrere intorno all’avatar
Per fare ciò, abbiamo impostato la proprietà “wrap-flow” all’avatar e impostato il valore “both”.
.avatar {
-ms-wrap-flow: both; // Works in IE and Edge.
wrap-flow: both; // Does't not work in any browser.
}La proprietà “wrap-flow” imposta l’avatar come se fosse una “zona di esclusione”; una zona dove nessun contenuto deve passare attraverso. Come potete vedere qui sotto, il contenuto ora scorre a destra e a sinistra dell’immagine avatar.
VALORI POSSIBILI
Altri valori accettati sono “start”, “end”, “maximum”, “minimum”, e “clear”.
Il primo valore, “start”, comincerà ad avvolgere il contenuto attorno all’inizio dell’area di esclusione, ma lascerà la fine in una zona vuota.
.avatar {
-ms-wrap-flow: start;
}Dato il contenuto sulla pagina, il risultato ottenuto è il seguente.
Il valore “end”, come suggerisce il nome, funziona al contrario; esso avvolge il contenuto intorno all’estremità della zona di esclusione.
.avatar {
-ms-wrap-flow: end;
}Questo ci dà il seguente esito:
Nota: l’inizio e la fine della zona di esclusione è determinato dalla direzione di scrittura del contenuto. Dove i testi sono scritti da destra a sinistra, come spesso visto con l’arabo e l’ebraico, il contenuto avvolge a partire da destra e termina sul lato sinistro dell’area di esclusione.
Con il giapponese, scritto dall’alto al basso, i contenuti si avvolgono partendo dalla zona superiore e terminando nella parte inferiore.
Il terzo valore accettabile è “maximum”.
.avatar {
-ms-wrap-flow: maximum;
}Ciò avvolgerà il contenuto intorno alla zona di esclusione ovunque si trova il più ampio spazio all’interno della zona del contenitore.
Il valore “minimum” funziona in modo opposto.
.avatar {
-ms-wrap-flow: minimum;
}Qui, il contenuto fluirà attraverso lo spazio più stretto disponibile intorno alla zona di esclusione.
Lultimo valore è “clear”
.avatar {
-ms-wrap-flow: clear;
}Questo è molto simile al “clear” se hai già familiarità con i “float”, in quanto sarà vuoto sia a destra che a sinistra della zona di esclusione. Esso pertanto consente solo il contenuto in alto e in basso della zona di esclusione.
I MARGINI DELLE ESCLUSIONI
Analogamente alle shapes CSS le esclusioni vengono inoltre fornite di una proprietà per definire il margine della zona di esclusione, cioè il “wrap-margin”. A differenza della proprietà “margin”, il valore di “wrap-margin” deve essere un valore positivo.
.avatar {
-ms-wrap-flow: end;
-ms-wrap-margin: -10px; // Invalid.
-ms-wrap-margin: 10px; // Valid.
}Inoltre, le proprietà wrap-margin non ci permettono di impostare il margine di ciascun lato (destra, sinistra, alto e basso) singolarmente. Se questa funzione verrà introdotta in futuro, resta da vedere.
.avatar {
-ms-wrap-flow: end;
-ms-wrap-margin: 10px 20px 10px 30px; // Invalid.
-ms-wrap-margin: 10px; // Valid.
}Una volta impostato, dobbiamo vedere più spazio bianco intorno alla zona di esclusione.
@SUPPORTS
Dato che abbiamo posizionato il nostro avatar sul contenuto, senza il supporto per le esclusioni CSS potremmo ottenere un layout disordinato. Pertanto, è opportuno considerare il fallback, e mettere gli stili rilevanti all’interno di una regola “@supports”, in questo modo:
.site-content .avatar {
width: 180px;
height: 180px;
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 80px;
}
/* wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
.site-content .avatar {
position: absolute;
top: 300px;
left: 50%;
margin-left: -90px;
-ms-wrap-margin: 50px;
-ms-wrap-flow: both
}
}Ora verranno applicati solo i nostri stili CSS di esclusione se supportati dal browser.
Traduzione dell’articolo “CSS Exclusions: Making Boring Layouts Less Boring By Louie Rootfield” del blog “ENVATOTUTS+.“
