CSS contain 內容範圍
由於瀏覽器的進步,絕大部分頁面都不會遭遇渲染元素的效能問題,但如果是較為複雜的頁面,則可以透過 CSS 的 contain 樣式屬性近一步控制渲染的內容範圍,這篇教學會介紹 contain 樣式屬性與 layout、style、paint、size、strict、content 等屬性值的用法。
快速導覽:
教學影片
搭配教學影片一起閱讀,效果會更好!歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。
認識 contain
使用 CSS contain
之前,需要先了解瀏覽器渲染網頁的幾個主要步驟:
- 解析 HTML:讀取 HTML 並建立 DOM 結構樹。
- 解析 CSS:解析 CSS 規則並建立 CSSOM ( CSS 物件模型 )。
- 合成 Render Tree:結合 DOM 與 CSSOM,過濾不可見元素。
- 佈局 Layout:計算每個元素的大小、位置與盒子模型資訊。
- 繪製 Painting:將邊框、背景、文字等樣式繪製到圖層。
- 合成 Compositing:將多個圖層合併,準備輸出到螢幕。
- 重排 Reflow 重繪 Repaint:響應 DOM 或樣式變化,重新計算佈局或更新視覺內容。
前端開發者通常都是透過改善 HTML 和 CSS 結構、減少 JavaScript 對 HTML 和 CSS 的操作等做法,減輕瀏覽器在計算佈局 Layout、繪製 Painting、合成 Compositing 的負擔,進而加速網頁渲染效率,而 contain
樣式屬性更能夠明確定義計算範圍,明確地告訴瀏覽器哪些元素是「獨立的」,就像在網頁上建立了隔離的區域,區域內的元素不會影響或被外部元素影響,
contain
樣式屬性主要影響的步驟:
- 影響佈局 Layout:變更時只重新計算該元素內部的佈局,不會影響外部。
- 影響繪製 Painting:重繪時只重繪該元素內部的像素,不會影響外部圖層。
- 影響重排 Reflow、重繪 Repaint:讓瀏覽器只針對局部、避免全頁面重新計算與重繪。
雖然 contain
樣式屬性可以幫助開發者提升網頁性能和佈局穩定性。但需要注意下列事項:
- 瀏覽器的支援程度有所不同。
- 能提升複雜網頁或大型應用程式的效能,但對於簡單網頁或小型應用程式沒有太大影響。
- 需要搭配一些新的樣式屬性才能發揮真正功效,例如
size
、inline-size
、container
等。
contain 撰寫語法
contain
使用對應的關鍵字屬性值,沒有繼承特性,下方列出相關屬性值:
屬性值 | 說明 |
---|---|
layout | 只進行元素本身佈局,不考慮外部元素的變化。 |
paint | 只繪製該元素及其子元素的「可見」部分,而不會考慮其周圍元素的繪製,防止不必要的重繪。 |
style | 只作用於計數器和引用的樣式,使其不會影響到父元素或兄弟元素的樣式影響。 |
size | 只基於元素本身內容的 width 和 height 屬性,而不考慮其子元素的內容大小。 |
inline-size | 只基於元素本身內容的 width 屬性,而不考慮其子元素的內容大小。 |
content | 等於同時使用 layout、paint 和 style。 |
strict | 等於同時使用 layout、paint、size 和 style 的縮寫,表示最嚴格的內容範圍。 |
contain
可以使用 1~3 組屬性值,多組數形值之間使用空白分隔,下方列出相關寫法:
div {
contain: layout; /* 使用一種內容範圍 */
contain: layout paint; /* 同時使用兩種內容範圍 */
contain: layout paint style; /* 同時使用三種內容範圍 */
contain: content; /* 等同 layout paint style */
contain: strict; /* 等同 layout paint style size */
}
contain 屬性值 layout
當 contain
屬性值為 layout
時,表示「元素會自成一個佈局」,元素的內容不受其他元素或頁面佈局影響 ( 注意是元素內容,元素本身仍然屬於頁面中的容器 ),因此不論是 float
、position
等排版相關功能都會在自己的容器區域中進行,下方範例會使用三個 div,紅色 div 因為設定了 contain: layout
,就算內容有出現浮動元素或定位,都會採用自身的容器作為佈局依據,另外兩個 div 就會參考頁面本身或父元素進行定位。
<!-- HTML 程式碼 -->
<div class="a">
<h2>contain: layout;</h2>
<h3 class="fixed">fixed1</h3>
<h3 class="absolute">absolute1</h3>
<h3 class="float">float1</h3>
<h3>oxxo</h3>
</div>
<div class="b">
<h2>position: relative</h2>
<h3 class="fixed">fixed2</h3>
<h3 class="absolute">absolute2</h3>
<h3 class="float">float2</h3>
<h3>oxxo</h3>
</div>
<div class="c">
<h2>normal</h2>
<h3 class="fixed">fixed3</h3>
<h3 class="absolute">absolute3</h3>
<h3 class="float">float3</h3>
<h3>oxxo</h3>
</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 250px;
height: 200px;
border: 1px solid #000;
margin: 10px;
float: left;
}
.a {contain: layout;} /* 設定 contain 為 layout */
.b {position: relative;} /* 設定 position 為 relative */
.a h3 {background: #f005;}
.b h3 {background: #0f05;}
.c h3 {background: #00f5;}
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
.absolute {
position: absolute;
top: 0;
right: 0;
}
.float {float: left;}
h3 {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #000;
}
</style>
contain 屬性值 paint
當 contain
屬性值為 paint
時,表示元素「只會渲染寬高尺寸裡的內容」,範圍外的內容都不會渲染,透過這個方法可以提高渲染性能,使用時雖然會呈現類似 overflow: hidden
的效果,但設定 contain: paint
元素內容的 position
定位會以自身佈局為主,下方範例會用三組 div 呈現不同的效果,可以發現設定 contain: paint
的元素內容就算出現了 position: fixed
定位,仍然會以自身佈局為參考依據。
<!-- HTML 程式碼 -->
<div class="a">
<h2>contain: paint;</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
<h3 class="fixed">fixed1</h3>
</div>
<div class="b">
<h2>position: fixed</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
<h3 class="fixed">fixed2</h3>
</div>
<div class="c">
<h2>normal</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
<h3 class="fixed">fixed3</h3>
</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
float: left;
}
.a {contain: paint;} /* 設定 contain 為 paint */
.a h3 {background: #f005;}
.b {overflow: hidden;}
.b h3 {background: #0f05;}
.c h3 {background: #00f5;}
h3 {
margin: 10px;
border: 1px solid #000;
width: 100px;
height: 40px;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
</style>
contain 屬性值 style
當 contain
屬性值為 style
時,表示元素的「計數器和引號會獨立運作」,不會受到其他元素的計數器或引號設定影響,下方的範例會使用清單計數器相關樣式屬性,讓清單中每一筆資料前方的顯示數值,以間隔 50 的方式增加,但設定 contain: style
的清單並不會被影響。
<!-- HTML 程式碼 -->
<ul>
<li>apple</li>
<li>banana</li>
<li class="a">oxxo</li>
<li class="a">oxxo</li>
<li class="a">oxxo</li>
<li>orange</li>
<li>papaya</li>
</ul>
<!-- CSS 程式碼 -->
<style>
ul {counter-reset: oxxo 100;}
li::before {
counter-increment: oxxo 50;
content: counter(oxxo)". ";
}
.a {contain: style;}
</style>
同理,如果內容使用 open-quote
和 close-quote
搭配虛擬元素的方式產生引號,只要是位於 contain:style 裡的元素,就會斷開引號的設定,不會延續引號的設定值影響別的元素 ( 這個做法不是適用 q
元素,因為 q
元素是使用 HTML 元素流產生引號內容,無法單純受到 CSS 控制 ),下方範例有三組 div
,因為第一組 div
設定了 contain: style
,所以裡面的引號序列不會影響到別人,而第二組 div
的引號序列就會影響到第三組。
<!-- HTML 程式碼 -->
<div class="a">
<h3><span>apple</span></h3>
<h3><span>contain: style</span></h3>
<h3><span>banana</span></h3>
<h3><span>oxxo</span></h3>
</div>
上方的引號不會影響下面
<div>
<h3><span>apple</span></h3>
<h3><span>contain: style</span></h3>
<h3><span>banana</span></h3>
<h3><span>oxxo</span></h3>
</div>
上方引號結尾會影響下面
<div>
<h3><span>apple</span></h3>
<h3><span>contain: style</span></h3>
<h3><span>banana</span></h3>
<h3><span>oxxo</span></h3>
</div>
<!-- CSS 程式碼 -->
<style>
div {
width: max-content;
border: 1px solid #000;
margin: 10px;
quotes: "❤️" "❤️" "🔥" "🔥" "💎" "💎" "🎵" "🎵";
}
h3 {
margin: 5px;
}
span::before {
content: open-quote;
}
.a {
contain: style;
}
</style>
contain 屬性值 size 與 inline-size
當 contain
屬性值為 size
時,表示元素「按照設定的寬高顯示」,不會受到內容影響尺寸變化,如果沒有設定寬高,就會根據容器類型設定寬高,當 contain
屬性值為 inline-size
時,表示元素「按照設定的寬度顯示」,寬度不會受到內容影響尺寸變化,但高度會隨內容變化,如果沒有設定寬度,寬度預設值為 0,下方範例會使用三個 div
表現這兩個屬性值的差異。
<!-- HTML 程式碼 -->
<div class="a">
<h2>contain: size;</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
</div>
<div class="b">
<h2>contain: inline-size;</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
</div>
<div class="c">
<h2>normal</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 1px solid #000;
margin: 10px;
padding: 5px;
float: left;
}
.a, .b {margin-right: 250px;}
.a {contain: size;}
.a h3 {background: #f005;}
.b {contain: inline-size;}
.b h3 {background: #0f05;}
.c h3 {background: #00f5;}
h3 {
margin: 10px;
border: 1px solid #000;
width: 200px;
height: 40px;
}
</style>
contain 屬性值 strict 與 content
當 contain
的 strict
和 content
是縮寫格式的屬性值,使用後等於同時設定多個屬性值:
屬性值 | 等同多個屬性值同時使用 |
---|---|
content | 等於同時使用 layout、paint 和 style。 |
strict | 等於同時使用 layout、paint、size 和 style 的縮寫,表示最嚴格的內容範圍。 |
下方範例會呈現這兩種屬性值的差異。
<!-- HTML 程式碼 -->
<div class="a">
<h2>contain: content;</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
<h3>papaya</h3>
<h3 class="fixed">fixed1</h3>
</div>
<div class="b">
<h2>contain: strict;</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
<h3>papaya</h3>
<h3 class="fixed">fixed2</h3>
</div>
<div class="c">
<h2>normal</h2>
<h3>apple</h3>
<h3>banana</h3>
<h3>oxxo</h3>
<h3>papaya</h3>
<h3 class="fixed">fixed3</h3>
</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 250px;
min-height: 100px;
border: 1px solid #000;
margin: 10px;
padding: 5px;
float: left;
}
.a {contain: content;}
.a h3 {background: #f005;}
.b {contain: strict;}
.b h3 {background: #0f05;}
.c h3 {background: #00f5;}
h3 {
margin: 10px;
border: 1px solid #000;
width: 100px;
height: 40px;
}
.fixed {
position: absolute;
bottom: 0;
right: 0;
}
</style>
小結
CSS 的 contain
屬性值通常是應用在需要大量動態刷新內容的頁面,透過局部渲染的方式,可以提高網頁的執行效能,但如果是一些靜態頁面或內容不多的頁面,反而沒有多大差別,有時反而透過原本的樣式屬性還比較容易理解和調整。
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~