M

MLOG

Lietuvių

Išnagrinėkite CSS izoliavimą (Containment) – galingą techniką, skirtą pagerinti interneto svetainių našumą įvairiuose įrenginiuose ir tinkluose visame pasaulyje, optimizuojant atvaizdavimo efektyvumą ir vartotojo patirtį.

CSS izoliavimas (Containment): našumo optimizavimas globalioms interneto patirtims

Didžiuliame, tarpusavyje susijusiame interneto pasaulyje, kur vartotojai turinį pasiekia iš daugybės įrenginių, esant įvairioms tinklo sąlygoms ir iš visų pasaulio kampelių, optimalaus interneto našumo siekis nėra tik techninis tikslas; tai yra pagrindinis reikalavimas įtraukiai ir efektyviai skaitmeninei komunikacijai. Lėtai įsikraunančios svetainės, trūkinėjančios animacijos ir nereaguojančios sąsajos gali atstumti vartotojus, nepriklausomai nuo jų buvimo vietos ar įrenginio sudėtingumo. Pagrindiniai procesai, kurie atvaizduoja tinklalapį, gali būti neįtikėtinai sudėtingi, o augant interneto programų funkcijų gausai ir vizualiniam sudėtingumui, skaičiavimo reikalavimai, keliami vartotojo naršyklei, ženkliai didėja. Šis didėjantis poreikis dažnai sukelia našumo trikdžius, paveikiančius viską nuo pradinio puslapio įkėlimo laiko iki vartotojo sąveikos sklandumo.

Šiuolaikinis interneto svetainių kūrimas pabrėžia dinamiškų, interaktyvių patirčių kūrimą. Tačiau kiekvienas tinklalapio pakeitimas – ar tai būtų elemento dydžio keitimas, turinio pridėjimas, ar net stiliaus savybės pakeitimas – gali sukelti eilę brangių skaičiavimų naršyklės atvaizdavimo variklyje. Šie skaičiavimai, žinomi kaip „reflows“ (išdėstymo skaičiavimai) ir „repaints“ (pikselių atvaizdavimas), gali greitai sunaudoti procesoriaus resursus, ypač mažiau galinguose įrenginiuose ar lėtesniuose tinklo ryšiuose, dažnai pasitaikančiuose daugelyje besivystančių regionų. Šis straipsnis gilinasi į galingą, tačiau dažnai nepakankamai naudojamą CSS savybę, skirtą sušvelninti šiuos našumo iššūkius: CSS izoliavimą (Containment). Suprasdami ir strategiškai taikydami contain savybę, kūrėjai gali ženkliai optimizuoti savo interneto programų atvaizdavimo našumą, užtikrindami sklandesnę, labiau reaguojančią ir teisingesnę patirtį pasaulinei auditorijai.

Pagrindinis iššūkis: kodėl interneto našumas svarbus visame pasaulyje

Norint iš tiesų įvertinti CSS izoliavimo galią, būtina suprasti naršyklės atvaizdavimo procesą. Kai naršyklė gauna HTML, CSS ir JavaScript, ji atlieka kelis kritinius veiksmus, kad parodytų puslapį:

Našumo iššūkiai kyla daugiausia iš Išdėstymo ir Piešimo fazių. Kai tik pasikeičia elemento dydis, padėtis ar turinys, naršyklė gali turėti iš naujo apskaičiuoti kitų elementų išdėstymą (reflow) arba perpiešti tam tikras sritis (repaint). Sudėtingos vartotojo sąsajos su daugeliu dinaminių elementų ar dažnomis DOM manipuliacijomis gali sukelti šių brangių operacijų kaskadą, dėl kurios atsiranda pastebimas trūkčiojimas, stringančios animacijos ir prasta vartotojo patirtis. Įsivaizduokite vartotoją atokioje vietovėje su žemos klasės išmaniuoju telefonu ir ribotu pralaidumu, bandantį sąveikauti su naujienų svetaine, kuri dažnai iš naujo įkelia reklamas ar atnaujina turinį. Be tinkamo optimizavimo jų patirtis gali greitai tapti varginanti.

Pasaulinė našumo optimizavimo svarba negali būti pervertinta:

Pristatome CSS izoliavimą: naršyklės supergalia

CSS izoliavimas, nurodomas savybe contain, yra galingas mechanizmas, leidžiantis kūrėjams informuoti naršyklę, kad konkretus elementas ir jo turinys yra nepriklausomi nuo likusios dokumento dalies. Tai darydama naršyklė gali atlikti našumo optimizacijas, kurių kitaip negalėtų. Iš esmės tai praneša atvaizdavimo varikliui: „Ei, ši puslapio dalis yra savarankiška. Tau nereikia iš naujo vertinti viso dokumento išdėstymo ar piešimo, jei kažkas pasikeičia jo viduje.“

Pagalvokite apie tai kaip apie ribos nustatymą aplink sudėtingą komponentą. Užuot naršyklei reikėjus kiekvieną kartą, kai kažkas keičiasi to komponento viduje, nuskaityti visą puslapį, ji žino, kad bet kokios išdėstymo ar piešimo operacijos gali būti apribotos tik tuo komponentu. Tai ženkliai sumažina brangių perskaičiavimų apimtį, todėl atvaizdavimo laikas sutrumpėja, o vartotojo sąsaja tampa sklandesnė.

Savybė contain priima kelias reikšmes, kurių kiekviena suteikia skirtingą izoliavimo lygį, leisdama kūrėjams pasirinkti tinkamiausią optimizaciją konkrečiam naudojimo atvejui.

.my-contained-element {
  contain: layout;
}

.another-element {
  contain: paint;
}

.yet-another {
  contain: size;
}

.combined-containment {
  contain: content;
  /* trumpinys 'layout paint size' */
}

.maximum-containment {
  contain: strict;
  /* trumpinys 'layout paint size style' */
}

Savybės contain reikšmių iššifravimas

Kiekviena savybės contain reikšmė nurodo izoliavimo tipą. Norint efektyviai optimizuoti, labai svarbu suprasti jų individualų poveikį.

contain: layout;

Kai elementui priskirta contain: layout;, naršyklė žino, kad elemento vaikinių elementų išdėstymas (jų padėtis ir dydžiai) negali paveikti nieko, kas yra už elemento ribų. Ir atvirkščiai, dalykų, esančių už elemento ribų, išdėstymas negali paveikti jo vaikinių elementų išdėstymo.

Pavyzdys: dinamiškas naujienų srauto elementas

<style>
  .news-feed-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    contain: layout;
    /* Užtikrina, kad pakeitimai šio elemento viduje nesukels globalių išdėstymo perskaičiavimų */
  }
  .news-feed-item h3 { margin-top: 0; }
  .news-feed-item .actions { text-align: right; }
</style>

<div class="news-feed-container">
  <div class="news-feed-item">
    <h3>Antraštė 1</h3>
    <p>Trumpas naujienos aprašymas. Jis gali išsiskleisti arba susiskleisti.</p>
    <div class="actions">
      <button>Skaityti daugiau</button>
    </div>
  </div>
  <div class="news-feed-item">
    <h3>Antraštė 2</h3>
    <p>Kita naujiena. Įsivaizduokite, kad ji dažnai atnaujinama.</p>
    <div class="actions">
      <button>Skaityti daugiau</button>
    </div>
  </div>
</div>

contain: paint;

Ši reikšmė deklaruoja, kad elemento palikuonys nebus rodomi už elemento ribų. Jei bet koks palikuonio turinys išeitų už elemento rėmelių, jis bus nukirptas (tarsi būtų pritaikyta overflow: hidden;).

Pavyzdys: slenkanti komentarų skiltis

<style>
  .comment-section {
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: scroll;
    contain: paint;
    /* Perpiešti turinį tik šio rėmelio viduje, net jei komentarai atnaujinami */
  }
  .comment-item { padding: 5px; border-bottom: 1px dotted #eee; }
</style>

<div class="comment-section">
  <div class="comment-item">Komentaras 1: Lorem ipsum dolor sit amet.</div>
  <div class="comment-item">Komentaras 2: Consectetur adipiscing elit.</div>
  <!-- ... daug daugiau komentarų ... -->
  <div class="comment-item">Komentaras N: Sed do eiusmod tempor incididunt ut labore.</div>
</div>

contain: size;

Kai taikoma contain: size;, naršyklė traktuoja elementą taip, tarsi jis turėtų fiksuotą, nekintamą dydį, net jei jo faktinis turinys galėtų rodyti kitaip. Naršyklė daro prielaidą, kad izoliuoto elemento matmenys nebus paveikti jo turinio ar vaikinių elementų. Tai leidžia naršyklei išdėstyti elementus aplink izoliuotą elementą, nereikalaujant žinoti jo turinio dydžio. Tam reikia, kad elementas turėtų aiškiai nurodytus matmenis (width, height) arba kad jo dydis būtų nustatytas kitomis priemonėmis (pvz., naudojant flexbox/grid savybes jo tėviniame elemente).

Pavyzdys: virtualizuoto sąrašo elementas su rezervuotu turiniu

<style>
  .virtual-list-item {
    height: 50px; /* Aiškus aukštis yra būtinas 'size' izoliavimui */
    border-bottom: 1px solid #eee;
    padding: 10px;
    contain: size;
    /* Naršyklė žino šio elemento aukštį nežiūrėdama į vidų */
  }
</style>

<div class="virtual-list-container">
  <div class="virtual-list-item">Elemento 1 turinys</div>
  <div class="virtual-list-item">Elemento 2 turinys</div>
  <!-- ... daug daugiau elementų dinamiškai įkeliama ... -->
</div>

contain: style;

Tai yra turbūt nišinis izoliavimo tipas. Jis nurodo, kad stiliai, taikomi elemento palikuonims, neturi įtakos niekam, kas yra už elemento ribų. Tai daugiausia taikoma savybėms, kurios gali turėti poveikį už elemento submedžio ribų, pavyzdžiui, CSS skaitikliams (counter-increment, counter-reset).

Pavyzdys: nepriklausoma skaitiklių skiltis

<style>
  .independent-section {
    border: 1px solid blue;
    padding: 10px;
    contain: style;
    /* Užtikrina, kad skaitikliai čia nepaveiks globalių skaitiklių */
    counter-reset: local-item-counter;
  }
  .independent-section p::before {
    counter-increment: local-item-counter;
    content: "Elementas " counter(local-item-counter) ": ";
  }
</style>

<div class="independent-section">
  <p>Pirmas punktas.</p>
  <p>Antras punktas.</p>
</div>

<div class="global-section">
  <p>Šio punkto neturėtų paveikti aukščiau esantis skaitiklis.</p>
</div>

contain: content;

Tai trumpinys, reiškiantis contain: layout paint size;. Tai dažnai naudojama reikšmė, kai norite stipraus izoliavimo lygio be `style` izoliavimo. Tai gera bendros paskirties izoliavimo reikšmė komponentams, kurie yra daugiausia nepriklausomi.

Pavyzdys: daugkartinio naudojimo produkto kortelė

<style>
  .product-card {
    border: 1px solid #eee;
    padding: 15px;
    margin: 10px;
    width: 250px; /* Aiškus plotis 'size' izoliavimui */
    display: inline-block;
    vertical-align: top;
    contain: content;
    /* Išdėstymo, piešimo ir dydžio izoliavimas */
  }
  .product-card img { max-width: 100%; height: auto; }
  .product-card h3 { font-size: 1.2em; }
  .product-card .price { font-weight: bold; color: green; }
</style>

<div class="product-card">
  <img src="product-image-1.jpg" alt="Produktas 1">
  <h3>Nuostabus įrenginys Pro</h3>
  <p class="price">$199.99</p>
  <button>Į krepšelį</button>
</div>

<div class="product-card">
  <img src="product-image-2.jpg" alt="Produktas 2">
  <h3>Super valdiklis Elite</h3&n>
  <p class="price">$49.95</p>
  <button>Į krepšelį</button>
</div>

contain: strict;

Tai išsamiausias izoliavimas, veikiantis kaip trumpinys contain: layout paint size style;. Jis sukuria stipriausią įmanomą izoliaciją, iš esmės paversdamas izoliuotą elementą visiškai nepriklausomu atvaizdavimo kontekstu.

Pavyzdys: sudėtingas interaktyvus žemėlapio valdiklis

<style>
  .map-widget {
    width: 600px;
    height: 400px;
    border: 1px solid blue;
    overflow: hidden;
    contain: strict;
    /* Visiškas izoliavimas sudėtingam, interaktyviam komponentui */
  }
</style>

<div class="map-widget">
  <!-- Sudėtinga žemėlapio atvaizdavimo logika (pvz., Leaflet.js, Google Maps API) -->
  <div class="map-canvas"></div>
  <div class="map-controls"><button>Priartinti</button></div>
</div>

contain: none;

Tai numatytoji reikšmė, nurodanti, kad izoliavimo nėra. Elementas elgiasi kaip įprasta, o pakeitimai jo viduje gali paveikti viso dokumento atvaizdavimą.

Praktinis taikymas ir globalūs naudojimo atvejai

Suprasti teoriją yra viena, o efektyviai ją taikyti realiose, visame pasaulyje prieinamose interneto programose – visai kas kita. Štai keletas pagrindinių scenarijų, kur CSS izoliavimas gali duoti didelę našumo naudą:

Virtualizuoti sąrašai / begalinis slinkimas

Daugelis šiuolaikinių interneto programų, nuo socialinių tinklų srautų iki elektroninės komercijos produktų sąrašų, naudoja virtualizuotus sąrašus arba begalinį slinkimą, kad parodytų didelius duomenų kiekius. Užuot atvaizdavus visus tūkstančius elementų DOM (tai būtų didžiulis našumo trikdis), atvaizduojami tik matomi elementai ir keli buferiniai elementai virš ir žemiau matomos srities. Vartotojui slenkant, nauji elementai yra įkeliami, o seni – pašalinami.

<style>
  .virtualized-list-item {
    height: 100px; /* Fiksuotas aukštis yra svarbus 'size' izoliavimui */
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
    contain: layout size; /* Optimizuoti išdėstymo ir dydžio skaičiavimus */
    overflow: hidden;
  }
</style>

<div class="virtualized-list-container">
  <!-- Elementai dinamiškai įkeliami/pašalinami priklausomai nuo slinkties padėties -->
  <div class="virtualized-list-item">Produktas A: Aprašymas ir kaina</div>
  <div class="virtualized-list-item">Produktas B: Detalės ir atsiliepimai</div>
  <!-- ... šimtai ar tūkstančiai daugiau elementų ... -->
</div>

Už ekrano esantys / paslėpti komponentai (modaliniai langai, šoninės juostos, patarimai)

Daugelyje interneto programų yra elementų, kurie ne visada yra matomi, bet yra DOM dalis, pavyzdžiui, navigacijos meniu, modaliniai dialogų langai, patarimai ar dinaminės reklamos. Net kai jie yra paslėpti (pvz., su display: none; arba visibility: hidden;), kartais jie vis tiek gali daryti įtaką naršyklės atvaizdavimo varikliui, ypač jei jų buvimas DOM struktūroje reikalauja išdėstymo ar piešimo skaičiavimų, kai jie pereina į matomą būseną.

<style>
  .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 20px;
    z-index: 1000;
    display: none; /* arba iš pradžių už ekrano ribų */
    contain: layout paint; /* Kai matomas, pakeitimai viduje yra izoliuoti */
  }
  .modal-dialog.is-open { display: block; }
</style>

<div class="modal-dialog">
  <h3>Sveikinimo pranešimas</h3>
  <p>Tai modalinis dialogas. Jo turinys gali būti dinamiškas.</p>
  <button>Uždaryti</button>
</div>

Sudėtingi valdikliai ir daugkartinio naudojimo UI komponentai

Šiuolaikinis interneto kūrimas labai priklauso nuo komponentais pagrįstų architektūrų. Tinklalapis dažnai sudarytas iš daugybės nepriklausomų komponentų – akordeonų, skirtukų sąsajų, vaizdo grotuvų, interaktyvių diagramų, komentarų skilčių ar reklaminių blokų. Šie komponentai dažnai turi savo vidinę būseną ir gali atsinaujinti nepriklausomai nuo kitų puslapio dalių.

<style>
  .interactive-chart-widget {
    width: 100%;
    height: 300px;
    border: 1px solid #ddd;
    contain: content; /* Išdėstymas, piešimas, dydis izoliuoti */
    overflow: hidden;
  }
</style>

<div class="interactive-chart-widget">
  <!-- JavaScript čia atvaizduos sudėtingą diagramą, pvz., naudojant D3.js arba Chart.js -->
  <canvas id="myChart"></canvas>
  <div class="chart-controls">
    <button>Peržiūrėti duomenis</button>
    <button>Priartinti</button>
  </div>
</div>

Iframes ir įterptas turinys (atsargiai)

Nors iframes jau sukuria atskirą naršymo kontekstą, didžiąja dalimi izoliuodami savo turinį nuo tėvinio dokumento, CSS izoliavimas kartais gali būti svarstomas elementams *iframe viduje* arba specifiniais atvejais, kai iframe matmenys yra žinomi, bet jo turinys yra dinamiškas.

Progresyviosios interneto programėlės (PWA)

PWA siekia suteikti į gimtąją programėlę panašią patirtį internete, pabrėžiant greitį, patikimumą ir įsitraukimą. CSS izoliavimas tiesiogiai prisideda prie šių tikslų.

Geriausios praktikos ir svarstymai globaliam diegimui

Nors CSS izoliavimas yra galingas, tai nėra panacėja. Strateginis taikymas, kruopštus matavimas ir jo pasekmių supratimas yra būtini, ypač kai siekiama įvairios pasaulinės auditorijos.

Strateginis taikymas: netaikykite visur

CSS izoliavimas yra našumo optimizavimas, o ne bendra stiliavimo taisyklė. Taikant contain kiekvienam elementui, paradoksalu, gali kilti problemų ar net panaikinti naudą. Naršyklė dažnai puikiai optimizuoja atvaizdavimą be aiškių nurodymų. Sutelkite dėmesį į elementus, kurie yra žinomi našumo trikdžiai:

Prieš taikydami izoliavimą, nustatykite, kur atvaizdavimo sąnaudos yra didžiausios, naudodami profiliavimo įrankius.

Matavimas yra svarbiausia: patvirtinkite savo optimizacijas

Vienintelis būdas patvirtinti, ar CSS izoliavimas padeda, yra išmatuoti jo poveikį. Pasikliaukite naršyklės kūrėjų įrankiais ir specializuotomis našumo testavimo paslaugomis:

Testavimas imituojamomis sąlygomis (pvz., greitas 3G, lėtas 3G, žemos klasės mobilusis įrenginys) kūrėjų įrankiuose ar „WebPageTest“ yra labai svarbus norint suprasti, kaip jūsų optimizacijos virsta realia pasauline vartotojų patirtimi. Pakeitimas, kuris duoda minimalią naudą galingame staliniame kompiuteryje, gali būti transformuojantis žemos klasės mobiliajame įrenginyje regione su ribotu ryšiu.

Pasekmės ir galimi spąstai

Progresyvus tobulinimas

CSS izoliavimas yra puikus kandidatas progresyviam tobulinimui. Naršyklės, kurios jo nepalaiko, tiesiog ignoruos savybę, o puslapis bus atvaizduojamas taip, kaip būtų be izoliavimo (nors potencialiai lėčiau). Tai reiškia, kad galite jį taikyti esamiems projektams, nebijodami sugadinti senesnių naršyklių.

Naršyklių suderinamumas

Šiuolaikinės naršyklės puikiai palaiko CSS izoliavimą (Chrome, Firefox, Edge, Safari, Opera palaiko gerai). Naujausią suderinamumo informaciją galite patikrinti Can I Use. Kadangi tai yra našumo patarimas, palaikymo trūkumas reiškia tik praleistą optimizaciją, o ne sugadintą išdėstymą.

Komandos bendradarbiavimas ir dokumentacija

Pasaulinėms kūrėjų komandoms labai svarbu dokumentuoti ir komunikuoti apie CSS izoliavimo naudojimą. Nustatykite aiškias gaires, kada ir kaip jį taikyti savo komponentų bibliotekoje ar dizaino sistemoje. Švieskite kūrėjus apie jo naudą ir galimas pasekmes, kad užtikrintumėte nuoseklų ir efektyvų naudojimą.

Pažangūs scenarijai ir galimi pavojai

Gilinantis toliau, verta išnagrinėti subtilesnes sąveikas ir galimus iššūkius diegiant CSS izoliavimą.

Sąveika su kitomis CSS savybėmis

Izoliavimo problemų derinimas

Jei pritaikę contain susiduriate su netikėtu elgesiu, štai kaip derinti problemas:

Pernelyg didelis naudojimas ir mažėjanti grąža

Svarbu dar kartą pabrėžti, kad CSS izoliavimas nėra panacėja. Aklas jo taikymas arba taikymas kiekvienam elementui gali duoti minimalią naudą ar net sukelti subtilių atvaizdavimo problemų, jei nėra visiškai suprantamas. Pavyzdžiui, jei elementas jau turi stiprią natūralią izoliaciją (pvz., absoliučiai pozicionuotas elementas, kuris neturi įtakos dokumento srautui), pridėjus `contain` nauda gali būti nereikšminga. Tikslas yra tikslinis nustatytų trikdžių optimizavimas, o ne visuotinis taikymas. Sutelkite dėmesį į sritis, kuriose išdėstymo ir piešimo sąnaudos yra akivaizdžiai didelės ir kur struktūrinė izoliacija atitinka jūsų komponento semantinę prasmę.

Interneto našumo ir CSS izoliavimo ateitis

CSS izoliavimas yra gana subrendęs interneto standartas, tačiau jo svarba ir toliau auga, ypač atsižvelgiant į pramonės dėmesį vartotojo patirties metrikoms, tokioms kaip „Core Web Vitals“. Šios metrikos (Didžiausias turinio atvaizdavimas, Pirmosios įvesties delsa, Kumuliacinis išdėstymo poslinkis) tiesiogiai gauna naudos iš atvaizdavimo optimizacijų, kurias suteikia `contain`.

Interneto programoms tampant vis sudėtingesnėms ir reaguojančioms pagal numatytuosius nustatymus, tokios technikos kaip CSS izoliavimas tampa nepakeičiamos. Jos yra platesnės interneto kūrimo tendencijos dalis, siekiant didesnės atvaizdavimo proceso kontrolės, leidžiančios kūrėjams kurti itin našią patirtį, kuri yra prieinama ir maloni vartotojams, nepriklausomai nuo jų įrenginio, tinklo ar vietos.

Nuolatinė naršyklių atvaizdavimo variklių evoliucija taip pat reiškia, kad protingas interneto standartų, tokių kaip `contain`, taikymas ir toliau bus labai svarbus. Šie varikliai yra neįtikėtinai sudėtingi, tačiau jiems vis tiek naudingi aiškūs patarimai, padedantys priimti efektyvesnius sprendimus. Pasinaudodami tokiomis galingomis, deklaratyviomis CSS savybėmis, prisidedame prie vienodai greitesnės ir efektyvesnės interneto patirties visame pasaulyje, užtikrindami, kad skaitmeninis turinys ir paslaugos būtų prieinami ir malonūs visiems ir visur.

Išvada

CSS izoliavimas yra galingas, tačiau dažnai nepakankamai naudojamas įrankis interneto kūrėjo arsenale, skirtas našumo optimizavimui. Aiškiai informuodami naršyklę apie tam tikrų UI komponentų izoliuotą pobūdį, kūrėjai gali ženkliai sumažinti skaičiavimo naštą, susijusią su išdėstymo ir piešimo operacijomis. Tai tiesiogiai virsta greitesniu įkėlimo laiku, sklandesnėmis animacijomis ir labiau reaguojančia vartotojo sąsaja, o tai yra svarbiausia siekiant suteikti aukštos kokybės patirtį pasaulinei auditorijai su įvairiais įrenginiais ir tinklo sąlygomis.

Nors iš pradžių koncepcija gali atrodyti sudėtinga, išskaidžius savybę contain į atskiras reikšmes – layout, paint, size ir style – atsiskleidžia tikslių įrankių rinkinys tiksliniam optimizavimui. Nuo virtualizuotų sąrašų iki už ekrano esančių modalinių langų ir sudėtingų interaktyvių valdiklių – praktinis CSS izoliavimo taikymas yra platus ir paveikus. Tačiau, kaip ir bet kuri galinga technika, ji reikalauja strateginio taikymo, kruopštaus testavimo ir aiškaus jos pasekmių supratimo. Netaikykite jos aklai; nustatykite savo trikdžius, išmatuokite poveikį ir tobulinkite savo požiūrį.

CSS izoliavimo priėmimas yra aktyvus žingsnis kuriant tvirtesnes, našesnes ir įtraukesnes interneto programas, kurios tenkina vartotojų poreikius visame pasaulyje, užtikrinant, kad greitis ir reagavimas būtų ne prabanga, o pagrindinės mūsų kuriamų skaitmeninių patirčių savybės. Pradėkite eksperimentuoti su contain savo projektuose jau šiandien ir atrakinkite naują našumo lygį savo interneto programoms, paversdami internetą greitesne ir prieinamesne vieta visiems.