Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Esclusioni CSS: come rendere i Layout noiosi meno noiosi

by
Read Time:5 minsLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

In questo tutorial, andremo a esplorare le Esclusioni CSS. A prima vista, le Esclusioni CSS possono sembrare simili alle Forme CSS poiché avvolgono il contenuto intorno a un elemento. Tecnicamente, tuttavia, servono a uno scopo diverso.

Il modulo Forme CSS definisce la forma reale di un elemento, ma il contenuto non avvolge questa forma finché l'elemento è fluttuante. Il modulo Esclusioni CSS, d'altra parte, è specificamente disegnato per questo; permettere al contenuto in linea di avvolgere un elemento senza lasciarlo fluttuare, indipendentemente da come è posizionato l'elemento - absolute, relative o fixed.

Proprietà

Il modulo Esclusioni CSS introduce un paio di proprietà e valori nuovi, ossia:

  • wrap-flow : imposta l'area di esclusione, e anche come il contenuto dovrebbe avvolgersi a esso.
  • wrap-margin : è abbastanza ovvio, imposta il margine o l'offset che circonda l'area di esclusione.

Browser supportati

Vale la pena notare che le Esclusioni CSS al momento funzionano solo da Internet Explorer 10 in su ed Edge, ciò dimostra ancora una volta come Microsoft stia spingendo le frontiere del browser web (dobbiamo ringraziarli anche per lo sviluppo del CSS Grid). Per il momento, dobbiamo aggiungere alle nuove proprietà il prefisso -ms- quando viene utilizzato.

can i use css exclusionscan i use css exclusionscan i use css exclusions
E il mare di rosso continua a scorrere sulla destra...

Per capire meglio come le Esclusioni CSS funzionano, abbiamo preparato una semplice pagina iniziale composta da poche linee di contenuto e un'immagine avatar alla fine.

Layout senza Esclusioni CSS

Questo è un modello abbastanza comune sul web, quindi vediamo se possiamo affinarlo un po' usando le Esclusioni CSS. Presumendo che il vostro browser supporti le Esclusioni, puntiamo a questo risultato:

Usare le Esclusioni CSS

Primo, organizziamo il contenuto in due colonne e posizioniamo l'immagine avatar al centro. Non importa come organizzate il layout, potete usare CSS Flexbox, CSS Grid o l'approccio tradizionale usando la proprietà float.

Testo piacevole, basato su colonne (non obbligatorio per questa demo)

Possiamo vedere dall'immagine sopra che l'immagine avatar è stata rimossa dal flusso del documento ed è posizionata sulla parte superiore del contenuto, nascondendolo. Usando le Esclusioni CSS, possiamo forzare il contenuto a scorrere intorno all'immagine avatar.

Per fare ciò, impostiamo la proprietà wrap-flow all'avatar e impostiamo il valore di both.

La proprietà wrap-flow imposta .avatar come un' "area di esclusione"; un'area dove nessun contenuto deve passare. Come potete vedere sotto, il contenuto ora fluttua a destra e a sinistra dell'immagine avatar.

Valori possibili

Altri valori accettabili sono start, end, maximum, minimum e clear.

Il primo valore, start, avvolgerà il contenuto intorno all'inizio dell'area di esclusione, ma lascerà la fine dell'area vuota.

Dato il contenuto della nostra pagina, il risultato ottenuto è il seguente.

Il contenuto fluttua a sinistra dell'immagine.

Il valore end, come suggerisce il nome, funziona al contrario; avvolgerà il contenuto intorno alla fine dell'area di esclusione.

Questo ci dà l'esito seguente:

Avvolgimento a destra

Nota: l'inizio e la fine dell'area di esclusione è determinata dalla direzione di scrittura del contenuto. Dove i testi sono scritti da destra a sinistra, come spesso si vede con l'arabo e l'ebraico, il contenuto avvolge iniziando da destra e termina a sinistra dell'area di esclusione.

Con il giapponese, quando è scritto dall'alto in basso, il contenuto avvolge iniziando dall'alto e termina verso il basso.

Il flusso del contenuto in diverse direzioni di scrittura. Immagine del (W3C)

Il terzo valore accettabile è maximum.

Questo avvolgerà il contenuto intorno all'area di esclusione ovunque si trova lo spazio più ampio all'interno dell'area contenitore.

Il valore minimum funziona nel modo opposto.

Qui, il contenuto fluttuerà attraverso lo spazio più stretto disponibile intorno all'area di esclusione.

L'ultimo valore è clear.

Questo è abbastanza simile al clear a cui siete già familiari dai floats, in quanto libererà la destra e la sinistra dell'area di esclusione. Perciò lascia solo che il contenuto fluisca verso l'alto e il basso della'area di esclusione.

Il margine delle Esclusioni

Allo stesso modo delle Forme CSS anche il modulo delle Esclusioni CSS è fornito di una proprietà per definire il margine dell'area di esclusione, ossia wrap-margin. A differenza della proprietà margin, il valore di wrap-margin deve essere un valore positivo.

Inoltre, la proprietà wrap-margin non permette di impostare il margine di ogni lato (destra, sinistra, alto e basso) separatamente. Resta da vedere se questa funzione sarà introdotta in futuro.

Una volta impostato, dovremmo vedere molto più spazio bianco intorno all'area di esclusione.

@supports

Dato che abbiamo posizionato il nostro avatar sopra il contento, senza supporto per le Esclusioni CSS ci resta un layout disordinato. Pertanto, è saggio considerare il fallback e avvolgere gli stili rilevanti dentro una regola @supports, come questa:

Adesso i nostri stili per le Esclusioni CSS saranno applicati solo se supportati dal browser.

Riassumendo

Le Esclusioni CSS, in aggiunta alle Forme CSS e altre specifiche all'avanguardia, ci permetteranno di esplorare i layout dei siti web ben oltre quello a cui siamo abituati. Se tutto va bene vedremo dei progressi rapidi nel supporto del browser e un maggiore superamento dei limiti da parte del team di Microsoft Edge!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.