Satur - CSS-triki

containĪpašums CSS norāda pārlūkprogrammai, ka elements, un tās pēcteči tiek uzskatīti neatkarīgi no dokumenta koku, cik vien iespējams. Tas potenciāli sniedz veiktspējas priekšrocības, izmantojot aprēķinus izkārtojumā, stilā, krāsā, izmērā vai jebkurā kombinācijā ierobežotai DOM vietai, nevis visai lapai.

Īpašumam ir piecas standarta vērtības un divas stenogrāfijas vērtības, kas apvieno standarta vērtību variācijas. Katrai vērtībai ir daži unikāli un kopīgi ieguvumi atkarībā no elementa konteksta, kas tos lieto.

Šī rekvizīta tipiska izmantošana ir elements, kas satur kāda veida saturu. Apsveriet logrīku, kas atveido ienākošos datus, kas maina elementa pēcnācēju izkārtojumu un vizuālo izskatu. Vēl viens elements, kas jāņem vērā, ir tāds, kas satur trešo pušu datu, piemēram, reklāmkaroga reklāmas rezultātus, kur ierobežošanas priekšrocības ļauj vai nu mazināt prioritāti noteikta satura krāsošanai, kā rīkoties ar saņemtā satura lielumu vai noteikt, vai saturs vajadzētu būt pat redzamai. No otras puses, galvenokārt statiska vietne gūs maz labumu, izņemot pirmo izkārtojumu un krāsu uz ekrāna, ielādējot lapu.

Sintakse

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 */ )

Īpašuma vērtības

Izkārtojums

layoutIerobežošana vērtība informē pārlūks, ka neviens no elementa pēcnācējiem ietekmēt citus elementus lapā, ne arī šie citi elementi ir kāda ietekme uz pēcnācējiem no ietverto elementu. Tas ļauj pārlūkam potenciāli samazināt nepieciešamo aprēķinu skaitu, veidojot lapas izkārtojumu

Vēl viens ieguvums ir tas, ka, ja ietvertais elements ir ārpus ekrāna vai kaut kādā veidā aizklāts, pārlūkprogramma var aizkavēt vai pārcelt saistītos aprēķinus uz zemāku prioritāti. Piemērs tam ir ietverts elements, kas nav redzams bloka elementa beigās, un šī bloka elementa sākums ir redzams.

Elements ar layoutierobežojumu kļūst par saturošu lodziņu novietotajiem pēcnācējiem - piemēram, elementi ar absolūtu pozicionēšanu. Elements saņem jaunu sakraušanas kontekstu attiecībā pret lapu, un z-indevar izmantot rekvizītu x. Lai gan virziena īpašības, piemēram, topvai left, neattiecas.

Kaut arī ietvertā elementa pēcnācēji, iespējams, neietekmē citus lapas elementus, viņi tomēr var ietekmēt viņu saturošo priekšteča elementu. Piemēram, pēcnācējs var izraisīt ietvertā elementa izmēra maiņu, reaģējot uz izmaiņām. Tādā gadījumā ietvertais elements joprojām var potenciāli ietekmēt citus lapas elementus, taču pēcnācēji joprojām netiks iesaistīti šajos aprēķinos.

Šajā demonstrācijā ir sniegts vienkāršs paskaidrojums par to, kas notiek, kad layouttiek piemērots ierobežojums. Noklikšķinot uz katras augšējās rūtiņas, tiek piemērots ierobežojums, un sarkanās bultiņas mainīs izskatu. Sarkano bultiņu izskats norāda, vai lodziņa pēcnācēji izkārtojuma aprēķinu laikā ietekmē citas lapas rūtiņas.

Krāsot

paintIerobežošana vērtība informē pārlūks, ka neviens no pēctečiem elementa tiks krāsotas ārpus pierobežas-box elementa. Ja pēcnācēja elements ir novietots tā, lai tā norobežojošās kastes daļu varētu sagriezt ar ietvertā elementa border-boxdaļu, tad šo daļu nekrāso. Ja pēctecis ir pilnībā novietots ārpus ietvertā elementa, border-boxtas vispār nav nokrāsots. Tas ir līdzīgi kā piemērošana overflow: hidden;elementam, bet bez priekšrocībām, ja izlaižat vai samazinātu nepieciešamos aprēķinus.

Vēl viens ieguvums ir tāds, ka, ja ietvertais elements skata punktā nav kaut kādā veidā redzams, tad, veicot krāsošanas aprēķinus, tas var izlaist elementa pēcnācējus. Piemērs tam ir elements, kas novietots ārpus lapas, kas atrodas pa kreisi no skata loga. Ja ietvertais elements nav redzams, tas garantē, ka tā saturs nebūs redzams. Tāpēc viņiem nav jāiesaistās krāsas aprēķinos.

Elements ar paintnorobežojumu kļūst arī par saturošu lodziņu novietotajiem pēcnācējiem - piemēram, elementus ar absolūtu pozicionēšanu. Elements saņem arī jaunu sakraušanas kontekstu attiecībā pret lapu, un z-indexrekvizītu var izmantot. Lai gan virziena īpašības, piemēram, topvai left, neattiecas.

Ritināšanas elements var iegūt papildu priekšrocības, ja tā pēcnācēji tiek ievietoti jaunā krāsas slānī, kas var palīdzēt ritināšanas darbībā. Parasti ritināšanas elementi var izraisīt pastāvīgu pārkrāsošanu, jo ritināšanas laikā pēcnācēji parādās un pazūd. Ritināšanas elements ar krāsas ierobežotāju var izlaist šo ritošo pēcnācēju pastāvīgo pārkrāsošanu.

Šajā demonstrācijā ir sniegts vienkāršs paskaidrojums par to, kas notiek, kad painttiek piemērots ierobežojums. Noklikšķiniet jebkur, lai pārslēgtu izolāciju purpursarkanajā lodziņā. Kad tiek piemērots ierobežojums, daži zaļie lodziņi izmainās. Zaļo kastīšu izskats parāda, kā tās tiek krāsotas vai nekrāsotas.

Izmērs

sizeIerobežošana vērtība informē pārlūks, ka neviens no pēcnācējiem, ir jāņem vērā, veicot izkārtojumu aprēķinus lapas. Iekļautajam elementam ir jābūt heightun widthīpašībām jāpiemēro, pretējā gadījumā tas sabruks līdz nulle pikseļu kvadrātam. Lapas izkārtojuma aprēķinos jāņem vērā tikai pats elements, jo pēcnācēji nevar ietekmēt elementa lielumu. Šādos aprēķinos ietvertā elementa pēcnācēji ir pilnībā izlaisti; it kā tam vispār nebūtu pēcnācēju.

Lai pilnvērtīgi izmantotu optimizācijas priekšrocības, sizeizolāciju parasti lieto kopā ar citiem ierobežošanas veidiem.

Elements ar sizenorobežojumu saņem jaunu sakraušanas kontekstu attiecībā pret lapu, un z-indexrekvizītu var izmantot. Lai gan virziena īpašības, piemēram, topvai left, neattiecas.

Šajā demonstrācijā sniegts vienkāršs paskaidrojums par to, kas notiek, ja sizetiek piemērota ierobežošana. Noklikšķiniet jebkur, lai pārslēgtu izolāciju purpursarkanajā lodziņā. Kad tiek piemērots ierobežojums, purpursarkanā lodziņa izmērs mainās. Pēc noklusējuma purpursarkanās kastes augstumu nosaka tās bērni, bet ar ierobežojumu ir jādefinē augstums. Pēc ierobežošanas piemērošanas pēcnācēji vairs netiek iesaistīti izmēru aprēķinos.

Stils

styleIerobežošana vērtība informē pārlūks, ka daži CSS īpašības, piemēram, skaitītāji un citātus, tiks apmērs ir līdz ietverto elementu.

counter-incrementUn counter-setīpašībām jābūt tvērumu, kas ietverta elementa sub-koku. Ja tas tiek izvērsts ārpus ietvertā elementa, tiek izveidots jauns skaitītājs.

Satura īpašuma vērtības open-quote, close-quote, no-open-quote, un no-close-quoteir jābūt ar tvērumu, kas ietverta elementa sub-koku.

Tiek uzskatīts, ka šī ierobežojuma vērtība var tikt izslēgta no specifikācijas.

Saturs

contentIerobežošana vērtība ir gan izkārtojuma un krāsas norobežošanas vērtību kombinācija. Tas ir ekvivalents ierobežošanas piemērošanai šādā veidā:

div ( contain: layout paint; )

Visi iepriekš aprakstītie potenciālie ieguvumi katrai vērtībai tad būs pieejami ietvertajam elementam. Šo ierobežojumu uzskatīs par samērā drošu, lai to varētu plaši izmantot vairākiem lapas elementiem.

Stingri

strictIerobežošana vērtība ir no kombinācija layout, paintun sizelokalizācijas vērtībām. Tas ir ekvivalents ierobežošanas piemērošanai šādā veidā:

div ( contain: layout paint size; )

Visi iepriekš aprakstītie potenciālie ieguvumi katrai vērtībai tad būs pieejami ietvertajam elementam.

Tā kā ierobežojuma vērtības ir visstingrākās, šī vērtība jāizmanto, rūpīgi apsverot. Tas ir saistīts ar izmēru prasībām, ko tas uzliek ietvertajam elementam. Ievērojot šīs prasības, šī izolācijas vērtība patiešām nodrošina vislielākās iespējamās izolācijas veiktspējas priekšrocības.

Pārlūkprogrammas atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome	Firefox	IE	Mala	Safari
52	69	Nē	79	Nē

Mobilais / planšetdators

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81.	Nē