CSS Academy · Lektion

Egenskapen isolation

Styr blandningens omfång och förhindrar oönskade blandningseffekter med egenskapen isolation.

Lektion 4 av 413 steg

Egenskapen isolation är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är isolation?

Egenskapen isolation styr om ett element skapar en ny staplingskontext som isolerar dess innehåll från blandningseffekter från element utanför den isolerade gruppen.

isolation: isolate

isolation: isolate skapar en ny staplingskontext utan någon visuell effekt. Det enda syftet är att förhindra att blandningslägen inuti elementet påverkar element utanför det.

<div class="page-bg">
  <div class="card">Card content <span class="accent">accent</span></div>
</div>

Problemet som det löser

Utan isolering blandas mix-blend-mode med ALLA underliggande element i samma staplingskontext – inklusive sidans bakgrund och andra komponenter. Det leder till oavsiktlig blandning över komponentgränser.

Praktiskt exempel

Ett kort med ett blandningsläge som inte ska påverka den globala bakgrunden:

<div class="page">
  <div class="card">Card <span class="accent">Accent</span></div>
</div>

Andra sätt att skapa en staplingskontext

Andra egenskaper som implicit skapar en staplingskontext (och därmed isolerar blandningslägen):

opacity mindre än 1
transform annat än none
filter annat än none
will-change för vissa egenskaper

isolation: isolate är det avsiktliga alternativet utan bieffekter.

isolation: auto (standard)

isolation: auto (standard) skapar ingen ny staplingskontext. Blandningslägen läcker utåt om inte någon annan egenskap råkar skapa en.

isolation kontra z-index

Enbart z-index skapar inte en staplingskontext om det inte kombineras med en position som inte är static. isolation: isolate är det uttryckliga sättet utan bieffekter att skapa en staplingskontext.

isolation för SVG

I SVG styr isolation om blandningslägen tillämpas inom SVG-visningsområdet eller fortsätter att påverka underliggande HTML-innehåll. Om det anges på ett SVG-element hålls SVG-blandningen inom SVG:n.

Mönster för komponentgränser

Som bästa praxis bör du tillämpa isolation: isolate på behållaren för varje större UI-komponent för att förhindra att blandning läcker ut:

<div class="card">Card</div>
<div class="modal">Modal</div>
<div class="sidebar">Sidebar</div>
<div class="tooltip">Tooltip</div>

Felsökning av problem med blandningslägen

Om ett blandningsläge påverkar oväntade element beror det vanligtvis på att isolering saknas. Lägg till isolation: isolate på den närmaste gemensamma föräldern till de komponenter som blandas, så att effekten begränsas.

Prestandapåverkan

isolation: isolate skapar en ny staplingskontext och därmed ett nytt kompositlager. Detta är vanligtvis resurseffektivt – betydligt billigare än att främja ett lager med will-change: transform.

Snabb kontroll

Vad händer när mix-blend-mode: multiply tillämpas på ett element inuti en behållare som har isolation: isolate?

Besvara frågan i den interaktiva lektionen

Sammanfattning

isolation: isolate skapar en ny staplingskontext utan visuella bieffekter – det enda syftet är att begränsa effekterna från mix-blend-mode till en komponentgräns. Tillämpa det på behållarna för alla större UI-komponenter för att förhindra att blandningslägen oavsiktligt påverkar den globala bakgrunden eller intilliggande komponenter. Det är det avsiktliga och rena alternativet till att använda opacity eller transform som en oavsiktlig isoleringsmekanism.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Egenskapen isolation” gratis?

Ja – hela texten till ”Egenskapen isolation” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Egenskapen isolation”?

Styr blandningens omfång och förhindrar oönskade blandningseffekter med egenskapen isolation. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Egenskapen isolation”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

filter: blur brightness contrast grayscale
backdrop-filter för frostat glas
mix-blend-mode för lagerblandning
Egenskapen isolation

← Tillbaka till CSS Academy