Articles
Introduksjon til CSS
`overflow`- og `contain`-egenskapene

`overflow`- og `contain`-egenskapene

Denne artikkelen forklarer overflow- og contain-egenskapene.

Du kan lære å beskrive ting som visning av rullefelt og klipping ved hjelp av overflow-egenskapen.

YouTube Video

HTML for 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-egenskapene

overflow

overflow-egenskapen i CSS er en viktig egenskap som styrer hvordan innholdet i et element vises når det overstiger størrelsen på boksen. Den brukes ofte til å utforme oppsettet og brukergrensesnittet på nettsider, og hjelper med å håndtere visning av rullefelt, klipping og overløp av elementer.

Grunnleggende om overflow-egenskapen

overflow-egenskapen har fire hovedverdier: visible, hidden, scroll og auto.

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

visible er standardverdien, hvor innholdet i et element går utover størrelsen på boksen, men forblir synlig. De overskridende delene kan overlappe andre elementer, men rullefelt vises ikke.

Egenskaper:

  • Innhold vises uten begrensninger.
  • Ingen rullefelt vises.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden er innstillingen der innholdet i et element ikke vises hvis det overstiger størrelsen på boksen. Ingen rullefelt vises, og det overskridende innholdet vil ikke være synlig.

Egenskaper:

  • Når innhold overstiger elementets grenser, vil den overflødige delen være skjult.
  • Ingen rullefelt vises.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

Når scroll brukes, vises rullefelt tvungent dersom elementets innhold overstiger boksen. Selv om innholdet ikke overskrides, vises rullefelt alltid.

Egenskaper:

  • Rullefelt vises selv om innholdet passer innenfor elementets grenser.
  • Rulling er mulig i både horisontal og vertikal retning.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto viser rullefelt kun når innholdet overskrides; hvis innholdet passer i elementets boks, vises ingen rullefelt.

Egenskaper:

  • Rullefelt vises bare når innholdet overskrides.
  • Oppretter automatisk et rulleområde.
overflow-x og overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

overflow-egenskapen kan også kontrolleres individuelt for den horisontale (x-aksen) og den vertikale (y-aksen) retningen.

På denne måten kan du bruke overflow-x og overflow-y for å sette visningen av vertikale og horisontale rullefelt individuelt.

Overveielser for Overflow

Når du bruker overflow-egenskapen, er det noen ting du må være oppmerksom på.

Påvirkning på designet på grunn av visningen av rullefelt

Bruk av scroll eller auto for å vise rullefelt kan forstyrre sidens generelle design. Spesielt hvis elementer er plassert på høyre eller nedre kant, kan rullefelt gjøre dem mindre synlige.

Standard nettleseratferd

Hvordan rullefelt vises og fungerer kan variere mellom nettlesere. Spesielt mellom Windows og macOS er det forskjeller i visningsstiler for rullefelt, noe som kan føre til at design ikke ser ut som tiltenkt. Det er viktig å utføre testing på tvers av nettlesere.

Overflow av barnetilfeller

Innstilling av overflow: hidden på et overordnet element skjuler underordnede elementer som overstiger overordnet elementets boks. Dette kan føre til at popup-vinduer og modale vinduer ikke vises riktig.

overflow: clip (CSS Level 3) 

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

I den nye CSS-spesifikasjonen er en verdi kalt overflow: clip også introdusert. Dette ligner på hidden, men tillater ikke rulling og klipper kun innholdet. For øyeblikket støttes det bare av noen nettlesere.

Egenskaper:

  • Hvis innholdet flyter over, vil den delen bli fullstendig skjult.
  • Ingen rullefelt vises.

Konklusjon

CSS-overflow-egenskapen er et viktig verktøy for å kontrollere visningen av innhold i webdesign. Ved å håndtere situasjoner der innhold overstiger elementets boks og ved å bruke riktige rullefelt eller klipping, gir det brukerne et mer brukervennlig grensesnitt. Videre gir bruk av overflow-x og overflow-y mulighet for finjustert kontroll. Med denne verdien blir rullefelt tvunget til å vises når elementinnholdet overstiger boksen. Selv om innholdet ikke overskrides, vises rullefelt alltid.

contain

Oversikt over contain-egenskapen

CSS-contain-egenskapen begrenser påvirkningen et element har på andre elementer og hele siden, og optimaliserer nettleserens gjengivelsesprosess. Spesifikt begrenser den reflows og repaints ved å forhindre at stil- eller layoutendringer i et element påvirker innhold utenfor det elementet.

Dette er viktig for ytelsen til websider og er spesielt effektivt for nettsider med komplekse layout eller store mengder innhold.

Verdier for contain

contain-egenskapen har følgende verdier:.

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

layout anvender restriksjoner knyttet til layout. Ved bruk av denne verdien påvirker ikke størrelsen og posisjonen til et element andre elementer. For eksempel, selv om et element endres i størrelse internt, påvirker ikke den endringen den eksterne layouten.

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

paint begrenser påvirkningen av å tegne (rendering). Når denne verdien spesifiseres, påvirker ikke tegning innenfor elementet eksterne elementer, og dermed begrenses omfanget av repaint-beregninger.

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

size sikrer at elementets størrelse ikke avhenger av eksterne elementer. Spesifikt forhindrer den at endringer i størrelsen på barnelementer påvirker foreldreelementets størrelse, noe som forbedrer stabiliteten i layouten.

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

style sørger for at stilendringer i et element ikke påvirker eksterne elementer. For eksempel, ved å spesifisere contain: style; sikres det at stilendringer i det elementet ikke påvirker andre elementer, noe som reduserer omfanget av beregninger.

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

content er en sammensatt verdi som bruker layout, paint, size og style. Ved å bruke dette kan du sikre at elementets layout, tegning, størrelse og stil ikke påvirker eksterne elementer i det hele tatt.

Ytelsesgevinster

Hovedgrunnen til å bruke contain-egenskapen er å forbedre ytelsen til websider. Spesielt er den effektiv i følgende situasjoner:.

  1. Optimalisering av Reflow: Når størrelsen eller layouten til et element endres, kan påvirkningen begrenses til det minste mulige området. Dette reduserer omfanget av unødvendige reflows (layoutberegninger) og letter belastningen på nettleseren.

  2. Reduserte Repaints: Ved å begrense tegneområdet kan delen som må males på nytt når et elements stil eller innhold endres, minimeres.

  3. Komponentbasert Utvikling: Siden hver komponent eller modul opererer uavhengig av andre elementer, forbedres ytelsen til hver enkelt komponent selv i store webapplikasjoner.

Notater

Når du bruker contain-egenskapen, bør du huske på følgende punkter.

  1. Forståelse av anvendelsesområdet: contain-egenskapen er nyttig for ytelsesoptimalisering, men bør ikke brukes på hvert eneste element. Det er viktig å bruke den på riktig måte og på passende steder. For eksempel kan bruk av den på elementer som ofte endres eller deler av en stor DOM-struktur forringe ytelsen i stedet.

  2. Nettleserkompatibilitet: contain-egenskapen er en relativt ny CSS-funksjon og støttes ikke fullt ut av alle nettlesere. Den støttes i de fleste store nettlesere (Chrome, Firefox, Edge, Safari), men er kanskje ikke tilgjengelig i eldre versjoner.

Konklusjon

CSS-egenskapen contain er et kraftig verktøy for å optimalisere ytelsen til nettsider og applikasjoner. Ved å begrense innvirkningen et spesifikt element har på andre, reduserer den kostnadene for reflow og repaint, og effektiviserer den totale rendering-prosessen. Det er imidlertid viktig å vurdere nøye hvor den skal brukes og å bruke den på en hensiktsmessig måte.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Sammenligning av Flexbox, Grid og Kolonneoppsett