搜尋

CSS contain 內容範圍

由於瀏覽器的進步,絕大部分頁面都不會遭遇渲染元素的效能問題,但如果是較為複雜的頁面,則可以透過 CSS 的 contain 樣式屬性近一步控制渲染的內容範圍,這篇教學會介紹 contain 樣式屬性與 layout、style、paint、size、strict、content 等屬性值的用法。

快速導覽:

CSS 教學 - CSS contain 內容範圍

教學影片

搭配教學影片一起閱讀,效果會更好!歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道

前往:https://www.youtube.com/@steam.oxxostudio

認識 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:讓瀏覽器只針對局部、避免全頁面重新計算與重繪。

CSS 教學 - 內容範圍 contain - contain 樣式屬性主要影響的步驟

雖然 contain 樣式屬性可以幫助開發者提升網頁性能和佈局穩定性。但需要注意下列事項:

  • 瀏覽器的支援程度有所不同。
  • 能提升複雜網頁或大型應用程式的效能,但對於簡單網頁或小型應用程式沒有太大影響。
  • 需要搭配一些新的樣式屬性才能發揮真正功效,例如 sizeinline-sizecontainer 等。

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 時,表示「元素會自成一個佈局」,元素的內容不受其他元素或頁面佈局影響 ( 注意是元素內容,元素本身仍然屬於頁面中的容器 ),因此不論是 floatposition 等排版相關功能都會在自己的容器區域中進行,下方範例會使用三個 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>

CSS 教學 - 內容範圍 contain - contain 屬性值 layout

contain 屬性值 paint

contain 屬性值為 paint 時,表示元素「只會渲染寬高尺寸裡的內容」,範圍外的內容都不會渲染,透過這個方法可以提高渲染性能,使用時雖然會呈現類似 overflow: hidden 的效果,但設定 contain: paint 元素內容的 position 定位會以自身佈局為主,下方範例會用三組 div 呈現不同的效果,可以發現設定 contain: paint 的元素內容就算出現了 position: fixed 定位,仍然會以自身佈局為參考依據。

線上展示:https://codepen.io/oxxo/pen/azoKLbB

<!-- 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>

CSS 教學 - 內容範圍 contain - contain 屬性值 paint

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>

CSS 教學 - 內容範圍 contain - contain 屬性值 style

同理,如果內容使用 open-quoteclose-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>

CSS 教學 - 內容範圍 contain - contain 屬性值 style 對引號的影響

contain 屬性值 size 與 inline-size

contain 屬性值為 size 時,表示元素「按照設定的寬高顯示」,不會受到內容影響尺寸變化,如果沒有設定寬高,就會根據容器類型設定寬高,當 contain 屬性值為 inline-size 時,表示元素「按照設定的寬度顯示」,寬度不會受到內容影響尺寸變化,但高度會隨內容變化,如果沒有設定寬度,寬度預設值為 0,下方範例會使用三個 div 表現這兩個屬性值的差異。

線上展示:https://codepen.io/oxxo/pen/wBwXrmV

<!-- 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>

CSS 教學 - 內容範圍 contain - contain 屬性值 size 與 inline-size

contain 屬性值 strict 與 content

containstrictcontent 是縮寫格式的屬性值,使用後等於同時設定多個屬性值:

屬性值 等同多個屬性值同時使用
content 等於同時使用 layout、paint 和 style。
strict 等於同時使用 layout、paint、size 和 style 的縮寫,表示最嚴格的內容範圍。

下方範例會呈現這兩種屬性值的差異。

線上展示:https://codepen.io/oxxo/pen/xbKzXjP

<!-- 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 - contain 屬性值 strict 與 content

小結

CSS 的 contain 屬性值通常是應用在需要大量動態刷新內容的頁面,透過局部渲染的方式,可以提高網頁的執行效能,但如果是一些靜態頁面或內容不多的頁面,反而沒有多大差別,有時反而透過原本的樣式屬性還比較容易理解和調整。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

全域關鍵字與文字數值 長度與角度單位 位置名稱與時間單位 特殊樣式屬性 ( all、appearance)

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 選擇器作用域 ( @scope ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path )

顏色與濾鏡

顏色單位 色彩模型 相對顏色 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄 使用 Color Font ( 彩色字型 ) 使用 Icon Font ( 圖示文字 ) 製作自己的 Icon Font 顯示生成內容與引號

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬高尺寸 ( width、height ) 顯示與比例 ( box-sizing、aspect-ratio ) 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度 縮放與調整 ( zoom、resize )

背景與陰影

背景 ( 背景色、背景裁切 ) 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties ) 重置 CSS ( Reset CSS ) 水平置中技巧 垂直置中技巧

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序 動畫進度控制 ( timeline )

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視

視窗與使用者行為

捲軸樣式 ( scrollbar ) 拉霸、滑桿樣式 ( slider ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

CSS 預處理器

認識 CSS 預處理器 Less ( 安裝、開始使用 ) Less ( 巢狀結構、選擇器 ) Less ( 變數、import ) Less ( Extend、Mixin ) Less ( 邏輯、迴圈、函式 )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 電子時鐘數字 漸層色的轉場與動畫 漸層色製作星空背景 漸層色邊框 漸層色製作圖案背景 不規則形狀動畫 彈跳的正方形動畫 3D 正多面體 超連結底線動畫效果 噁心黏黏球效果 CSS 視差滾動效果 捲軸控制放射形選單 捲軸改變文字背景色 CSS 頁面捲動進度條 CSS 水波效果 圓點載入動畫 ( 陰影動畫 ) 字母翻牌效果 探照燈動畫 立體雙色跑馬燈 樓梯文字動態效果 漸層色文字、雙色文字 流動色彩文字 空心文字、文字水波背景 左右傾斜的背景效果 Icon 圖示形狀變換 故障文字效果 按鈕的多種 hover 效果 點擊展開或收折的選單 點擊愛心圖案放射效果 純 CSS 數字載入進度條 純 CSS 碼表 ( 可計時 )