Share
In questo tutorial, esploreremo le esclusioni CSS. A prima vista, le Exclusioni CSS possono sembrare simili alle forme CSS in quanto avvolgono il contenuto attorno a un elemento. Tecnicamente, tuttavia, hanno uno scopo diverso.
Il modulo CSS Shapes definisce la forma reale di un elemento, ma il contenuto non avvolgerà quella forma fino a quando l'elemento non viene fluttuato. Il CSS Exclusions Module, d'altra parte, è specificamente progettato per questo; permettendo al contenuto inline di avvolgere un elemento senza facendolo galleggiare, indipendentemente da come è posizionato l'elemento-assoluto, parente, o fisso.
Il modulo di esclusioni CSS introduce un paio di nuove proprietà e valori, vale a dire:
Accentsconagua
wrap-flow: imposta l'area di esclusione, nonché il modo in cui il contenuto dovrebbe avvolgersi attorno ad esso.wrap-margine: è piuttosto auto-esplicativo, impostando il margine o l'offset che circonda l'area di esclusione.Vale la pena notare che CSS Exclusions attualmente funziona solo su Internet Explorer 10 e su, e Edge, ancora una volta dimostrando come Microsoft sta spingendo le frontiere dei browser web (dobbiamo ringraziarle anche per lo sviluppo di CSS Grid). Per il momento, dobbiamo prefisso le nuove proprietà con -Signorina- quando viene utilizzato.
E il mare di rosso continua a destra ... Per capire meglio come funziona CSS Exclusions, abbiamo preparato una semplice pagina iniziale comprendente poche righe di contenuto e un'immagine avatar alla fine.
Layout senza esclusioni CSS Questo è un modello abbastanza comune sul web, quindi vediamo se possiamo perfezionarlo un po 'usando le esclusioni CSS. Supponendo che il tuo browser supporti Escludi, miriamo a questo risultato:
Per prima cosa, sistemiamo il contenuto in due colonne e posizioniamo l'immagine dell'avatar al centro. Non importa come organizzi il layout, puoi usare CSS Flexbox, CSS Grid o l'approccio "tradizionale" usando il galleggiante proprietà.
Bel testo basato su colonne (non obbligatorio per questa demo)Possiamo vedere dall'immagine sopra che l'immagine dell'avatar è stata rimossa dal flusso del documento ed è posizionata in cima al contenuto, oscurandola. Usando le esclusioni CSS, possiamo forzare il contenuto a scorrere intorno all'immagine dell'avatar.
Per fare ciò, impostiamo il wrap-flow proprietà per l'avatar e impostare il valore su tutti e due.
.avatar -ms-wrap-flow: entrambi; // Funziona in IE e Edge. wrap-flow: entrambi; // Non funziona con nessun browser.
Il wrap-flow proprietà imposta il .avatar come "area di esclusione"; un'area in cui nessun contenuto dovrebbe passare. Come puoi vedere di seguito, il contenuto ora scorre a destra ea sinistra dell'immagine avatar.
Altri valori accettabili sono inizio, fine, massimo, minimo, e chiaro.
Il primo valore, inizio, avvolgerà il contenuto intorno all'inizio dell'area di esclusione, lasciando vuota la fine dell'area.
.avatar -ms-wrap-flow: start;
Dato il contenuto della nostra pagina, il risultato sarebbe il seguente.
Il contenuto scorre a sinistra dell'immagine. Il fine il valore, come suggerisce il nome, funziona al contrario; avvolgerà il contenuto intorno alla fine dell'area di esclusione.
.avatar -ms-wrap-flow: end;
Questo ci dà il seguente risultato:
Avvolgendo la destraNota: l'inizio e la fine dell'area di esclusione è determinata dalla direzione di scrittura del contenuto. Laddove gli script sono scritti da destra a sinistra, come spesso visto con arabo ed ebraico, il contenuto si avvia a partire da destra e finisce a sinistra dell'area di esclusione.
Con il giapponese, quando viene scritto dall'alto verso il basso, il contenuto viene riavvolto a partire dall'alto e finisce nella parte inferiore.
Flusso di contenuto in diverse direzioni di scrittura. Immagine di (W3C)Il terzo valore accettabile è massimo.
.avatar -ms-wrap-flow: maximum;
Ciò avvolgerà il contenuto intorno all'area di esclusione ovunque trovi lo spazio più ampio all'interno dell'area del contenitore.
Il minimo il valore funziona nel modo opposto.
.avatar -ms-wrap-flow: minimo;
Qui, il contenuto scorrerà attraverso lo spazio più ristretto disponibile intorno all'area di esclusione.
L'ultimo valore è chiaro.
.avatar -ms-wrap-flow: chiaro;
Questo è abbastanza simile al chiaro hai già familiarità con i float, in quanto cancellerà la destra e la sinistra dell'area di esclusione. Pertanto, consente solo il flusso di contenuti nella parte superiore e inferiore dell'area di esclusione.
Analogamente alle forme CSS, il modulo di esclusione CSS viene fornito con una proprietà per definire il margine dell'area di esclusione, vale a dire wrap-margine. non mi piace il margine proprietà, il valore di wrap-margine deve essere un valore positivo.
.avatar -ms-wrap-flow: end; -ms-wrap-margin: -10px; // non valido. -ms-wrap-margin: 10px; // valido.
Inoltre, il wrap-margine le proprietà non ci consentono di impostare il margine di ciascun lato (a destra, a sinistra, in alto e in basso) individualmente. Resta da vedere se questa funzionalità verrà introdotta in futuro.
.avatar -ms-wrap-flow: end; -ms-wrap-margin: 10px 20px 10px 30px; // non valido. -ms-wrap-margin: 10px; // valido.
Una volta impostato, dovremmo vedere più spazi bianchi intorno all'area di esclusione.
Dato che abbiamo posizionato il nostro avatar sul contenuto, senza il supporto per CSS Excludes, abbiamo lasciato un layout disordinato. Pertanto, è consigliabile considerare il fallback e avvolgere gli stili pertinenti all'interno di a @supports regola, in questo modo:
.site-content .avatar width: 180px; altezza: 180 px; margin-right: auto; margin-left: auto; allineamento del testo: centro; margin-top: 80px; / * racchiude le regole pertinenti in una dichiarazione @supports, giusto per essere sicuri * / @supports (-ms-wrap-flow: both) .site-content .avatar position: absolute; in alto: 300 px; a sinistra: 50%; margin-left: -90px; -ms-wrap-margin: 50px; -ms-wrap-flow: entrambi
Ora i nostri stili di esclusione CSS verranno applicati solo se supportati dal browser.
Le esclusioni CSS, insieme a CSS Forme e altre specifiche di bleeding edge, ci permetteranno di esplorare i layout del sito Web ben oltre ciò a cui siamo abituati. Speriamo di vedere un rapido avanzamento nel supporto del browser e una maggiore spinta dei limiti dal team Microsoft Edge!
