Share
În acest tutorial, vom explora Excluderile CSS. La prima vedere, Excluderile CSS pot arăta asemănătoare cu Formele CSS prin faptul că înfășoară conținut în jurul unui element. Din punct de vedere tehnic, acestea servesc unui scop diferit.
Modulul CSS Shapes definește forma reală a unui element, dar conținutul nu se va înfășura în jurul acelei forme până când elementul nu va fi flotat. Modulul Exclusions CSS, pe de altă parte, este conceput special pentru acest lucru; permițând conținutului în linie să se înfășoare în jurul unui element fără plutitoare, indiferent de modul în care elementul este poziționat-absolut, rudă, sau fix.
Modulul Exclusions CSS introduce câteva proprietăți și valori noi, și anume:
Accentsconagua
Wrap-flux: stabilește zona de excludere, precum și modul în care conținutul trebuie să se înfășoară în jurul acesteia.wrap-marja: este destul de auto-explicativă, stabilind marja sau compensarea din jurul zonei de excludere.Este de remarcat faptul că, în prezent, Exclusions CSS funcționează doar în Internet Explorer 10 și în sus, iar Edge demonstrează încă o dată modul în care Microsoft împinge frontierele browserului web (le mulțumim și pentru dezvoltarea rețelei CSS). Pentru moment, trebuie să prefixăm noile proprietăți cu -Domnișoară- când este folosit.
Și marea roșie continuă spre dreapta ... Pentru a înțelege mai bine cum funcționează excluderile CSS, am pregătit o pagină de pornire simplă care cuprinde câteva linii de conținut și o imagine avatar la sfârșit.
Layout fără excluderi CSS Acesta este un model destul de obișnuit pe web, deci hai să vedem dacă o putem lustrui puțin folosind Excluderile CSS. Presupunând că browserul dvs. acceptă excluderea, urmărim pentru acest rezultat:
Mai întâi, să organizăm conținutul în două coloane și să poziționăm imaginea avatarului în centru. Nu contează cum aranjați aspectul, puteți utiliza CSS Flexbox, CSS Grid sau abordarea "tradițională" utilizând pluti proprietate.
Text minunat, bazat pe coloane (nu este obligatoriu pentru această demonstrație)Putem vedea din imaginea de mai sus că imaginea avatar a fost eliminată din fluxul de documente și este poziționată în partea superioară a conținutului, acoperind-o. Folosind Excluderile CSS, putem forța conținutul să curgă în jurul imaginii avatarului.
Pentru a face acest lucru, am setat Wrap-flux proprietatea pentru avatar și setați valoarea la ambii.
.avatar -ms-wrap-flow: ambele; // Lucrează în IE și Edge. wrap-flow: ambele; // Nu funcționează în niciun browser.
Wrap-flux proprietate stabilește .Avatar ca "zonă de excludere"; o zonă în care nu trebuie să treacă conținut. Așa cum puteți vedea mai jos, conținutul acum circulă spre dreapta și spre stânga imaginii avatarului.
Alte valori acceptabile sunt start, Sfârșit, maxim, minim, și clar.
Prima valoare, start, va înfășura conținutul în jurul zonei de excludere, însă va lăsa capătul zonei goale.
.avatar -ms-wrap-flow: începe;
Având în vedere conținutul de pe pagina noastră, rezultatul va arăta după cum urmează.
Conținutul curge spre stânga imaginii. Sfârșit valoarea, așa cum sugerează și numele, funcționează invers; acesta va înfășura conținutul de la sfârșitul zonei de excludere.
.avatar -ms-wrap-flow: sfârșit;
Acest lucru ne oferă următorul rezultat:
Înfășurați în dreaptaNotă: începutul și sfârșitul zonei de excludere sunt determinate de direcția de scriere a conținutului. În cazul în care scripturile sunt scrise de la dreapta la stânga, cum ar fi adesea văzute în arabă și ebraică, conținutul se înfășoară începând din dreapta și se termină în partea stângă a zonei de excludere.
Cu japoneza, când este scrisă de sus în jos, conținutul se înfășoară începând de sus și se termină în partea de jos.
Conținutul fluxului în diferite direcții de scriere. Imagine de (W3C)A treia valoare acceptabilă este maxim.
.avatar -ms-wrap-flow: maxim;
Acest lucru va înfășura conținutul din jurul zonei de excludere ori de câte ori va găsi spațiul mai larg din zona containerului.
minim valoarea funcționează în sens contrar.
.avatar -ms-wrap-flow: minim;
Aici, conținutul va curge prin cel mai îngust spațiu disponibil în jurul zonei de excludere.
Ultima valoare este clar.
.avatar -ms-wrap-flow: clar;
Acest lucru este destul de similar cu clar sunteți deja familiarizat cu flotoare, prin faptul că va clarifica dreptul și stânga zonei de excludere. Prin urmare, permite doar fluxul de conținut să ajungă în partea de sus și de jos a zonei de excludere.
Similar cu formele CSS, modulul Exclusions CSS vine de asemenea cu o proprietate pentru definirea marjei zonei de excludere, și anume wrap-marja. spre deosebire de margine proprietate, valoarea lui wrap-marja trebuie să fie o valoare pozitivă.
.avatar -ms-wrap-flow: sfârșit; -ms-wrap-margine: -10px; // Invalid. -ms-wrap-margine: 10px; // Valid.
Mai mult decât atât, wrap-marja proprietățile nu ne permit să setăm individual marginea fiecărei părți (dreapta, stânga, partea de sus și partea de jos). Indiferent dacă această caracteristică va fi introdusă în viitor, rămâne de văzut.
.avatar -ms-wrap-flow: sfârșit; -ms-wrap-margine: 10px 20px 10px 30px; // Invalid. -ms-wrap-margine: 10px; // Valid.
După stabilire, ar trebui să vedem mai multe spații în jurul zonei de excludere.
Dat fiind că ne-am poziționat avatarul peste conținut, fără suport pentru CSS Exclude, am rămas cu un aspect dezordonat. Prin urmare, este înțelept să luați în considerare căderea de rezervă și să împachetați stilurile relevante într-un @supports regulă, după cum urmează:
.site-ul conținut .avatar width: 180px; înălțime: 180px; margin-dreapta: auto; margin-stânga: auto; text-align: centru; margin-top: 80px; / * înfășurați regulile relevante într-o declarație @supports, doar pentru a fi sigur * / @supports (-ms-wrap-flow: ambele) .site-content .avatar position: absolute; top: 300px; stânga: 50%; margin-stânga: -90px; -ms-wrap-margine: 50px; -ms-wrap-flow: ambele
Acum, stilurile noastre de excludere CSS vor fi aplicate numai dacă sunt acceptate de browser.
Excluderile CSS, împreună cu formatele CSS și alte specificații de sângerare, ne vor permite să explorăm aspectul site-urilor cu mult peste ceea ce ne-am obișnuit. Sperăm că vom vedea avansarea rapidă în sprijinul browserului și împingerea mai multă a limitelor de la echipa Microsoft Edge!
