`overflow` och `contain` Egenskaper

Articles

Den här artikeln förklarar overflow och contain egenskaperna.

Du kan lära dig hur du beskriver saker som att visa rullningslister och klippa innehåll med overflow egenskapen.

YouTube Video

HTML för förhandsgranskning

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` och `contain` Egenskaper

`overflow`

CSS-egenskapen overflow är en viktig egenskap som styr hur innehållet i ett element visas när det överstiger storleken på dess box. Den används ofta för att utforma layouten och användargränssnittet för webbsidor och hjälper till att hantera visning av rullningslister, klippning och överflödigt innehåll.

Grunderna i `overflow` egenskapen

overflow egenskapen har fyra huvudvärden: visible, hidden, scroll och auto.

`visible`

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

visible är standardvärdet, där innehållet i ett element överflödar utanför storleken på boxen men ändå förblir synligt. De överflödande delarna kan överlappa andra element, men rullningslister visas inte.

Egenskaper:

Innehåll visas utan begränsning.
Inga rullningslister visas.

`hidden`

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

hidden är inställningen där om innehållet i ett element överstiger storleken på boxen, visas inte de överflödande delarna. Inga rullningslister visas och de överflödande delarna av innehållet kommer inte att vara synliga.

Egenskaper:

När innehållet överstiger elementets gräns, döljs den överflödiga delen.
Inga rullningslister visas.

`scroll`

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

När scroll används visas rullningslister tvångsvis om elementets innehåll överstiger boxen. Även om innehållet inte överflödar visas rullningslister alltid.

Egenskaper:

Rullningslister visas även om innehållet passar inom elementets gränser.
Rullning är möjligt i både horisontella och vertikala riktningar.

`auto`

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

auto visar rullningslister endast när innehållet överflödar; om innehållet ryms inom elementets box visas inga rullningslister.

Egenskaper:

Rullningslister visas endast när innehållet överflödar.
Skapar automatiskt ett scrollbart område.

`overflow-x` och `overflow-y`

1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

overflow-egenskapen kan också kontrolleras individuellt för den horisontella (x-axeln) och vertikala (y-axeln) riktningen.

På detta sätt kan du använda overflow-x och overflow-y för att ställa in visningen av vertikala och horisontella rullningslister individuellt.

Överväganden för overflow

När du använder overflow-egenskapen finns det vissa punkter att vara försiktig med.

Effekter på designen på grund av visning av rullningslister

Att använda scroll eller auto för att visa rullningslister kan störa sidans övergripande design. Särskilt om element är placerade vid höger- eller nederkanten kan rullningslister göra dem mindre synliga.

Standardbeteende i webbläsare

Hur rullningslisterna visas och fungerar kan variera mellan webbläsare. Speciellt mellan Windows och macOS finns det skillnader i rullningslistens visningsstilar, vilket kan göra att designen inte ser ut som tänkt. Det är viktigt att genomföra tester mellan olika webbläsare.

Overflow av underordnade element

Att ställa in overflow: hidden på ett överordnat element döljer underordnade element som överstiger förälderns box. Detta kan orsaka att pop-ups och modala fönster inte visas korrekt.

`overflow: clip` (CSS Level 3)

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

I den nya CSS-specifikationen har ett värde som kallas overflow: clip också introducerats. Detta är liknande hidden, men det tillåter inte rullning och klipper bara innehållet. För närvarande stöds det endast av vissa webbläsare.

Egenskaper:

Om innehållet överskrider boxen kommer den delen att bli helt dold.
Inga rullningslister visas.

Slutsats

CSS-egenskapen overflow är ett viktigt verktyg för att kontrollera visningen av innehåll i webbdesign. Genom att hantera situationer där innehållet överskrider elementets box och genom att tillämpa lämpliga rullningslister eller klippning ger det användarna ett mer användarvänligt gränssnitt. Att använda overflow-x och overflow-y möjliggör dessutom finjusterad kontroll. Med detta värde visas rullningslister tvångsmässigt när innehållet i elementet överskrider boxen. Även om innehållet inte överflödar visas rullningslister alltid.

`contain`

Översikt över `contain`-egenskapen

CSS-egenskapen contain begränsar en elements påverkan på andra element och hela sidan, vilket optimerar webbläsarens renderingsprocess. Specifikt begränsar den omflöden och omritningar genom att förhindra att stil- eller layoutändringar i ett element påverkar innehållet utanför det elementet.

Detta är viktigt för webbsideprestanda och är särskilt effektivt för webbplatser med komplexa layouter eller stora mängder innehåll.

Värden för `contain`

contain-egenskapen har följande värden:.

`layout`

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

layout tillämpar restriktioner relaterade till layout. Genom att använda detta värde påverkar inte ett elements storlek och position andra element. Till exempel, även om ett element ändrar storlek internt påverkar inte den ändringen den externa layouten.

`paint`

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

paint begränsar påverkan av målning (ritning). När detta värde anges påverkar ritning inom elementet inte längre externa element, vilket begränsar omritningsberekningarnas omfattning.

`size`

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

size säkerställer att elementets storlek inte beror på externa element. Specifikt förhindrar det att storleksändringar av bakelement påverkar föräldraelementets storlek, vilket förbättrar layoutens stabilitet.

`style`

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

style säkerställer att ett elements stil inte påverkar externa element. Till exempel säkerställer specifikationen contain: style; att stiländringar i det elementet inte påverkar andra element, vilket minskar omräkningsomfattningen.

`content`

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

content är ett sammansatt värde som tillämpar layout, paint, size och style. Genom att använda detta kan du säkerställa att elementets layout, ritning, storlek och stil inte påverkar externa element alls.

Prestandafördelar

Den huvudsakliga anledningen till att använda contain-egenskapen är att förbättra webbsideprestandan. I synnerhet är den effektiv i följande situationer:.

Omflödesoptimering: När storleken eller layouten på ett element förändras kan dess påverkan begränsas till den minsta möjliga omfattningen. Detta minskar omfattningen av onödiga omflöden (layoutomräkningar) och underlättar belastningen på webbläsaren.
Minskning av omritningar: Genom att begränsa ritningsområdet kan den del som behöver omritas när ett elements stil eller innehåll förändras minimeras.
Komponentbaserad utveckling: Eftersom varje komponent eller modul fungerar oberoende av andra element förbättrar det prestandan för varje komponent, även i storskaliga webbapplikationer.

Anteckningar

När du använder contain-egenskapen bör du tänka på följande punkter.

Förståelse för tillämpningsområdet: contain-egenskapen är användbar för prestandaoptimering, men den bör inte tillämpas på varje element. Det är viktigt att använda den på lämpliga ställen. Till exempel kan användning på ofta förändrade element eller delar av en stor DOM-struktur istället försämra prestandan.
Webbläsarkompatibilitet: contain-egenskapen är en relativt ny CSS-funktion och stöds inte fullt ut av alla webbläsare. Den stöds i de stora webbläsarna (Chrome, Firefox, Edge, Safari), men kanske inte fungerar i äldre versioner.

Slutsats

CSS-egenskapen contain är ett kraftfullt verktyg för att optimera prestandan hos webbsidor och applikationer. Genom att begränsa hur ett specifikt element påverkar andra minskar den kostnader för reflow och ommålning, vilket effektiviserar hela renderingsprocessen. Det är dock viktigt att noggrant överväga var det ska tillämpas och att använda det på ett lämpligt sätt.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Jämförelse mellan Flexbox, Grid och kolumnlayouter

`overflow` och `contain` Egenskaper

YouTube Video

HTML för förhandsgranskning

overflow och contain Egenskaper

overflow

Grunderna i overflow egenskapen

visible

hidden

scroll

auto

overflow-x och overflow-y

Överväganden för overflow

Effekter på designen på grund av visning av rullningslister

Standardbeteende i webbläsare

Overflow av underordnade element

overflow: clip (CSS Level 3)

Slutsats

contain

Översikt över contain-egenskapen

Värden för contain

layout

paint

size

style

content

Prestandafördelar

Anteckningar

Slutsats

YouTube Video

`overflow` och `contain` Egenskaper

`overflow`

Grunderna i `overflow` egenskapen

`visible`

`hidden`

`scroll`

`auto`

`overflow-x` och `overflow-y`

`overflow: clip` (CSS Level 3)

`contain`

Översikt över `contain`-egenskapen

Värden för `contain`

`layout`

`paint`

`size`

`style`

`content`