Articles
Introduktion til CSS
`overflow` og `contain` Egenskaber

`overflow` og `contain` Egenskaber

Denne artikel forklarer overflow og contain egenskaberne.

Du kan lære at beskrive funktioner som visning af rullebjælker og klipning med overflow egenskaben.

YouTube Video

HTML til forhåndsvisning

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow og contain Egenskaber

overflow

CSS-egenskaben overflow er en vigtig egenskab, der styrer, hvordan indholdet af et element vises, når det overstiger størrelsen på dets boks. Den bruges ofte til at forme layoutet og brugergrænsefladen på websider og hjælper med at håndtere visning af rullebjælker, klipning og element-overflow.

Grundlæggende om overflow Egenskaben

overflow egenskaben har fire hovedværdier: visible, hidden, scroll og auto.

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible er standardværdien, hvor indholdet af et element løber ud over boksen, men forbliver synligt. De overløbne dele kan overlappe andre elementer, men rullebjælker vises ikke.

Egenskaber:

  • Indhold vises uden begrænsning.
  • Ingen rullebjælker vises.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden er indstillingen, hvor hvis indholdet af et element overstiger boksen, vises de overløbne dele ikke. Ingen rullebjælker vises, og det overløbne indhold er ikke synligt.

Egenskaber:

  • Når indholdet overstiger elementets grænse, skjules den overskydende del.
  • Ingen rullebjælker vises.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

Når scroll bruges, vises rullebjælker tvunget, hvis elementets indhold overstiger boksen. Selv hvis indholdet ikke overstiger, vises rullebjælker altid.

Egenskaber:

  • Rullebjælker vises, selvom indholdet passer inden for elementets grænse.
  • Rulning er mulig i både vandrette og lodrette retninger.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto viser kun rullebjælker, når indholdet overstiger; hvis indholdet passer inden for elementets boks, vises der ingen rullebjælker.

Egenskaber:

  • Rullebjælker vises kun, når indholdet overstiger.
  • Opretter automatisk et område med rullefunktion.
overflow-x og overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

overflow-egenskaben kan også styres individuelt for den horisontale (x-akse) og vertikale (y-akse) retning.

På denne måde kan du bruge overflow-x og overflow-y til at indstille visningen af vertikale og horisontale rullebjælker individuelt.

Overvejelser om Overflow

Når du bruger overflow-egenskaben, er der nogle ting, du skal være opmærksom på.

Effekter på designet på grund af visning af rullebjælker

At bruge scroll eller auto til at vise rullebjælker kan forstyrre sidens overordnede design. Især hvis elementer er placeret ved højre eller nederste kant, kan rullebjælker gøre dem mindre synlige.

Standardadfærd for browsere

Måden, hvorpå rullebjælker vises og fungerer, kan variere mellem browsere. Især mellem Windows og macOS er der forskelle i visningsstile for rullebjælker, hvilket kan få design til ikke at fremstå som tilsigtet. Det er vigtigt at udføre kryds-browser testning.

Overflow af børneelementer

Ved at indstille overflow: hidden på et overordnet element skjules børneelementer, der overskrider den overordnedes boks. Dette kan medføre, at pop-ups og modale vinduer ikke vises korrekt.

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

I den nye CSS-specifikation er der også blevet introduceret en værdi kaldet overflow: clip. Dette ligner hidden, men det tillader ikke scrolling og klipper kun indholdet. I øjeblikket understøttes det kun af nogle browsere.

Egenskaber:

  • Hvis indholdet overflyder, vil den del blive helt skjult.
  • Ingen rullebjælker vises.

Konklusion

CSS overflow-egenskaben er et essentielt værktøj til at kontrollere visningen af indhold i webdesign. Ved at håndtere de situationer, hvor indhold overstiger elementets boks, og ved at anvende passende rullebjælker eller klipning, giver det brugerne en mere brugervenlig grænseflade. Desuden giver brugen af overflow-x og overflow-y mulighed for finjusteret kontrol. Med denne værdi vises rullebjælker tvungent, når elementets indhold overstiger boksen. Selv hvis indholdet ikke overstiger, vises rullebjælker altid.

contain

Oversigt over contain-egenskaben

CSS contain-egenskaben begrænser, hvor meget et element påvirker andre elementer og hele siden, og optimerer browserens gengivelsesproces. Specifikt begrænser det omflytninger og genmaling ved at forhindre, at stil- eller layoutændringer i et element påvirker indhold uden for det pågældende element.

Dette er vigtigt for websidens ydeevne og er især effektivt for hjemmesider med komplekse layouts eller store mængder indhold.

Værdier for contain

Contain-egenskaben har følgende værdier:.

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout anvender begrænsninger relateret til layout. Ved at bruge denne værdi påvirker et elements størrelse og position ikke andre elementer. For eksempel, selv hvis et element ændrer størrelse internt, påvirker denne ændring ikke det eksterne layout.

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint begrænser påvirkningen af maling (tegning). Når denne værdi angives, påvirker tegning inden for elementet ikke længere eksterne elementer, hvilket begrænser omfanget af genmaleberegninger.

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size sikrer, at et elements størrelse ikke afhænger af eksterne elementer. Specifikt forhindrer det, at ændringer i størrelsen på underordnede elementer påvirker overordnet elements størrelse, hvilket forbedrer layoutets stabilitet.

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style sikrer, at et elements stil ikke påvirker eksterne elementer. For eksempel sikrer angivelse af contain: style; at ændringer i stil inden for det element ikke påvirker andre elementer, hvilket reducerer behovet for genberegninger.

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content er en sammensat værdi, der anvender layout, paint, size og style. Ved at bruge dette kan du sikre, at elementets layout, tegning, størrelse og stil slet ikke påvirker eksterne elementer.

Ydelsesfordele

Hovedårsagen til at bruge contain-egenskaben er at forbedre websidens ydeevne. Specifikt er den effektiv i følgende situationer:.

  1. Optimering af omflytning: Når størrelsen eller layoutet af et element ændres, kan dets påvirkning begrænses til det mindst mulige område. Dette reducerer omfanget af unødvendige omflytninger (layoutgenberegninger) og letter belastningen på browseren.

  2. Reducerer genmaling: Ved at begrænse tegneområdet kan den del, der skal genmales, når et elements stil eller indhold ændres, minimeres.

  3. Komponentbaseret udvikling: Da hver komponent eller modul fungerer uafhængigt af andre elementer, forbedrer det ydeevnen for hver komponent, selv i store webapplikationer.

Noter

Når du bruger contain-egenskaben, bør du huske følgende punkter.

  1. Forståelse af anvendelsesområdet: contain-egenskaben er nyttig til optimering af ydeevne, men den bør ikke anvendes på hvert element. Det er vigtigt at bruge den passende og på relevante steder. For eksempel kan brug af den på ofte ændrende elementer eller dele af en stor DOM-struktur forringe ydeevnen i stedet.

  2. Browserkompatibilitet: contain-egenskaben er en forholdsvis ny CSS-funktion og understøttes ikke fuldt ud af alle browsere. Den understøttes i de største browsere (Chrome, Firefox, Edge, Safari), men fungerer muligvis ikke i ældre versioner.

Konklusion

CSS contain-egenskaben er et effektivt værktøj til at optimere ydeevnen af websider og applikationer. Ved at begrænse effekten, som et specifikt element har på andre, reducerer den omkostningerne ved reflow og repaint og effektiviserer rendringsprocessen som helhed. Det er dog vigtigt nøje at overveje, hvor det skal anvendes, og bruge det på passende måde.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Sammenligning af Flexbox-, Grid- og Kolonnelayouts