ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

LE ESCLUSIONI CSS: RENDERE UN LAYOUT MENO NOIOSO

Argomenti: ,

Autore: Andrea Baccolini

Le esclusioni css
Feb
02
2017

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.

 

Can i use Esclusioni

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.

 

csss exclusion 1

 

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.

 

css-exclusions-two-columns

 

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

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.

 

css-exclusions-wrap-flow-both

 

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.

Dato il contenuto sulla pagina, il risultato ottenuto è il seguente.

 

css-exclusions-wrap-flow-start

 

Il valore “end”, come suggerisce il nome, funziona al contrario; esso avvolge il contenuto intorno all’estremità della zona di esclusione.

Questo ci dà il seguente esito:

 

css-exclusions-wrap-float-end

 

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.

 

css-exclusions-writing-direction

 

Il terzo valore accettabile è “maximum”.

Ciò avvolgerà il contenuto intorno alla zona di esclusione ovunque si trova il più ampio spazio all’interno della zona del contenitore.

 

css-exclusions-wrap-flow-maximum

 

Il valore “minimum” funziona in modo opposto.

Qui, il contenuto fluirà attraverso lo spazio più stretto disponibile intorno alla zona di esclusione.

 

css-exclusions-wrap-flow-minimum

 

Lultimo valore è “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.

 

css-exclusions-wrap-flow-clear

 

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.

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.

Una volta impostato, dobbiamo vedere più spazio bianco intorno alla zona di esclusione.

 

css-exclusions-wrap-flow-margin

 

@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:

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

 

 

LE ESCLUSIONI CSS: RENDERE UN LAYOUT MENO NOIOSO ultima modifica: 2017-02-02T11:40:45+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

COMMENTA QUESTO ARTICOLO!

Per favore compila il captcha (richiesto):

Andrea Baccolini | Web designer Copyright 2012 - 2017 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.