containProprietatea în CSS indică browser - ul că elementul și descendenții săi sunt considerate independent de arborele de documente cât mai mult posibil. Acest lucru oferă potențial avantaje de performanță cu calcule de aspect, stil, vopsea, dimensiune sau orice combinație pentru o zonă limitată a DOM și nu pentru întreaga pagină.
Proprietatea are cinci valori standard și două valori de prescurtare care combină variații ale valorilor standard. Fiecare valoare are unele beneficii unice și comune, în funcție de contextul elementului care le aplică.
Utilizarea tipică a acestei proprietăți este un element care conține conținut de un anumit tip. Luați în considerare un widget care redă datele primite care modifică aspectul și imaginile descendenților elementului. Un alt element de luat în considerare este cel care conține rezultatele datelor unor terțe părți, cum ar fi un anunț banner, în care beneficiile de izolare ne permit fie să prioritizăm pictarea anumitor conținut, cum să gestionăm dimensionarea conținutului primit, fie să stabilim dacă conținutul ar trebui să fie chiar vizibile. Un site cu precădere static, pe de altă parte, va beneficia de puține beneficii în afară de primul aspect și va picta pe ecran la încărcarea paginii.
Sintaxă
div ( contain: none | strict | content | ( size || layout || style || paint ); )div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */
contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )Valorile proprietății
Aspect
Valoarea de layoutizolare informează browserul că niciunul dintre descendenții elementului nu afectează alte elemente de pe pagină și nici celelalte elemente nu au niciun efect asupra descendenților elementului conținut. Acest lucru permite browserului să reducă potențial numărul de calcule necesare la crearea aspectului paginii
Un alt avantaj este că, dacă elementul conținut este în afara ecranului sau ascuns într-un fel, browserul poate întârzia sau muta calculele aferente la o prioritate mai mică. Un exemplu în acest sens este un element conținut care nu este vizibil la sfârșitul unui element de bloc și începutul acelui element de bloc este vizibil.
Un element cu layoutizolare devine o casetă de conținut pentru descendenții poziționați - cum ar fi elementele cu poziționare absolută. Elementul primește un nou context de stivuire în raport cu pagina și z-indeproprietatea x poate fi utilizată. Deși, proprietățile direcționale, cum ar fi topsau left, nu se aplică.
Chiar dacă descendenții elementului conținut pot să nu influențeze alte elemente de pe pagină, totuși își pot influența elementul strămoș conținut. De exemplu, un descendent poate determina redimensionarea elementului conținut ca reacție la modificări. În acest caz, elementul conținut poate influența potențial alte elemente de pe pagină, dar descendenții nu vor fi încă implicați în aceste calcule.
Următoarea demonstrație oferă o explicație simplă pentru ceea ce se întâmplă atunci când layouteste aplicat izolația. Când faceți clic pe fiecare dintre casetele superioare, se aplică izolația și săgețile roșii vor schimba aspectul. Aspectul săgeților roșii sugerează dacă descendenții casetei afectează celelalte casete de pe pagină în timpul calculelor de aspect.
A picta
Valoarea de paintizolare informează browserul că niciunul dintre descendenții elementului nu va fi pictat în afara casetei de margine a elementului. Dacă un element descendent este poziționat astfel încât să aibă o porțiune din cutia sa de delimitare care să fie decupată de elementul conținut, border-boxatunci acea porțiune nu va fi vopsită. Dacă un element descendent este poziționat complet în afara elementului conținut, border-boxatunci acesta nu este deloc vopsit. Acest lucru este similar cu aplicarea overflow: hidden;la element, dar fără beneficiile de a sări peste sau de a reduce calculele necesare.
Un alt beneficiu este că, dacă elementul conținut nu este vizibil într-un fel în fereastra de vizualizare, atunci poate sări peste descendenții elementului atunci când efectuează calcule de pictură. Un exemplu în acest sens este un element plasat în afara paginii din stânga ferestrei. Dacă elementul conținut nu este vizibil, atunci este o garanție că conținutul său nu va fi vizibil. Prin urmare, nu li se cere să fie implicați în calculele vopselei.
Un element cu paintizolare devine, de asemenea, o casetă de conținut pentru descendenții poziționați - cum ar fi elementele cu poziționare absolută. Elementul primește, de asemenea, un nou context de stivuire în raport cu pagina și z-indexproprietatea poate fi utilizată. Deși, proprietățile direcționale, cum ar fi topsau left, nu se aplică.
Un element de defilare poate obține avantaje suplimentare prin plasarea descendenților săi într-un nou strat de vopsea care poate ajuta la performanța defilării. În mod normal, elementele de defilare pot provoca repictări constante pe măsură ce descendenții apar și dispar în timpul defilării. Un element de defilare cu reținerea vopselei poate sări peste această repictare constantă a descendenților defilați.
Următoarea demonstrație oferă o explicație simplă pentru ceea ce se întâmplă atunci când painteste aplicat izolația. Faceți clic oriunde pentru a comuta izolația de pe caseta mov. Când se aplică izolare, unele dintre căsuțele verzi își schimbă aspectul. Aspectul cutiilor verzi arată cum sunt vopsite sau nu vopsite.
mărimea
Valoarea de sizeizolare informează browserul că niciunul dintre descendenți nu trebuie luat în considerare atunci când efectuează calcule de aspect pentru pagină. Elementul conținut trebuie să aibă heightși să aibă widthproprietăți aplicate sau se va prăbuși la zero pixeli pătrat. Numai elementul în sine trebuie luat în considerare pentru calculele aspectului paginii, deoarece descendenții nu pot influența dimensiunea elementului. Descendenții elementului conținut sunt complet săriți în astfel de calcule; de parcă nu ar avea deloc descendenți.
Pentru beneficiile complete ale optimizării, sizeizolația este de obicei aplicată cu alte tipuri de izolare.
Un element cu sizeizolare primește un nou context de stivuire în raport cu pagina și z-indexproprietatea poate fi utilizată. Deși, proprietățile direcționale, cum ar fi topsau left, nu se aplică.
Următoarea demonstrație oferă o explicație simplă pentru ceea ce se întâmplă atunci când sizese aplică izolare. Faceți clic oriunde pentru a comuta izolația de pe caseta mov. Când se aplică izolația, cutia mov schimbă dimensiunea. În mod implicit, înălțimea cutiei violete este definită de copiii săi, dar cu izolare, înălțimea trebuie definită. Odată ce se aplică izolare, descendenții nu mai sunt implicați în calculele de aspect legate de dimensiune.
Stil
Valoarea de styleizolare informează browserul că unele proprietăți CSS, cum ar fi contoare și ghilimele, vor fi cuprinse în elementul conținut.
counter-incrementȘi counter-setproprietăți trebuie să fie scoped sub-arbore a elementului conținut lui. Dacă este extins în afara elementului conținut, atunci se creează un contor nou.
Valorile proprietății de conținut de open-quote, close-quote, no-open-quoteși no-close-quotetrebuie să fie scoped sub-arbore a elementului conținut lui.
Această valoare de izolare este considerată cu risc de eliminare din caietul de sarcini.
Conţinut
Valoarea de contentizolare este o combinație atât a aspectului, cât și a valorilor de izolare a vopselei. Acesta este echivalentul aplicării izolației în acest mod:
div ( contain: layout paint; )Toate beneficiile potențiale descrise mai sus pentru fiecare valoare ar fi apoi disponibile pentru elementul conținut. Această izolare ar fi considerată relativ sigură pentru a se aplica pe scară largă la mai multe elemente de pe pagină.
Strict
strictValoarea de izolare este o combinație a layout, paintși sizevalorile de izolare. Acesta este echivalentul aplicării izolației în acest mod:
div ( contain: layout paint size; )Toate beneficiile potențiale descrise mai sus pentru fiecare valoare ar fi apoi disponibile pentru elementul conținut.
Fiind „cea mai strictă” dintre valorile de izolare, această valoare trebuie utilizată cu atenție. Acest lucru se datorează cerințelor de dimensiune pe care le impune elementului conținut. Cu aceste cerințe, această valoare de izolare oferă cele mai potențiale beneficii de performanță ale izolației.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 52 | 69 | Nu | 79 | Nu |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Nu |