CSS Academy · Lektion

Visibility jämfört med display: none

Lär dig när visibility: hidden respektive display: none ska användas och hur de påverkar layouten.

Lektion 2 av 413 steg

Visibility jämfört med display: none är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 2 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.

Tre sätt att dölja element

CSS erbjuder tre vanliga metoder för att dölja element, och var och en påverkar layout, tillgänglighet och interaktion på olika sätt:

display: none
visibility: hidden
opacity: 0

display: none

Elementet är helt borttaget från layouten. Det upptar inget utrymme, är inte interaktivt och läses inte av skärmläsare (i de flesta implementationer). Elementet finns fortfarande i DOM-trädet.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

Elementet är osynligt men upptar fortfarande utrymme i layouten. Det kan inte klickas på och läses inte av skärmläsare. Det är användbart när något ska döljas utan att layouten förskjuts.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

Elementet är osynligt men fullt interaktivt. Det upptar fortfarande utrymme och reagerar på händelser, till exempel klick och hovring. Skärmläsare kan fortfarande läsa det.

<button class="transparent">Invisible but clickable</button>

Åsidosätt visibility med visibility: visible

Ett underordnat element kan åsidosätta en förälders visibility: hidden genom att ange visibility: visible. Detta är inte möjligt med display: none — underordnade element ärver det ovillkorligen.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Jämförelsetabell

Snabbreferens:

display: none: inget utrymme, inga klick, läses inte
visibility: hidden: upptar utrymme, inga klick, läses inte
opacity: 0: upptar utrymme, kan fortfarande klickas på, kan läsas

Animering av visibility

display kan inte animeras med en övergång. Kombinera visibility med opacity för att tona in och ut element:

<div class="dropdown open">Dropdown menu content</div>

Tillgänglig döljning med SR-only

Mönstret endast för skärmläsare döljer innehåll visuellt men gör det tillgängligt för hjälpmedel:

<button>Save <span class="sr-only">your document now</span></button>

Attributet hidden jämfört med CSS

HTML-attributet hidden tillämpar display: none via webbläsarens stilmall för användaragenten. Det är tillgängligt och semantiskt, men kan åsidosättas av CSS-specificitet.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden hoppar över rendering av delar utanför skärmen men bevarar deras tillgänglighetsträd och layout. Det är en modern prestandateknik för långa sidor.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Om ett element ska förbli synligt men inte interaktivt använder du pointer-events: none. Klick och hovringar passerar genom elementet till elementen under det.

<div class="overlay">Clicks pass through this overlay</div>

Snabb kontroll

Vilken teknik döljer ett element samtidigt som layoututrymmet det upptar bevaras?

Besvara frågan i den interaktiva lektionen

Sammanfattning

display: none tar bort ett element helt från layouten. visibility: hidden döljer det men bevarar utrymmet. opacity: 0 döljer det men behåller interaktiviteten. Använd mönstret .sr-only för tillgänglig döljning. Kombinera visibility och opacity för toningsövergångar.

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 ”Visibility jämfört med display: none” gratis?

Ja – hela texten till ”Visibility jämfört med display: none” 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 ”Visibility jämfört med display: none”?

Lär dig när visibility: hidden respektive display: none ska användas och hur de påverkar layouten. 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 2 av 4.

Hur lång tid tar lektionen ”Visibility jämfört med display: none”?

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

Block jämfört med inline och inline-block
Visibility jämfört med display: none
Overflow: scroll, clip och auto
CSS Reset och Normalize

← Tillbaka till CSS Academy