重點摘要
全新的「CSS 容器」屬性可讓開發人員限制瀏覽器樣式、版面配置和繪製工作的範圍。
其中有幾個值，因此語法如下：
contain: none | strict | content | [ size || layout || style || paint ]
這項 Chrome 52 以上版本和 Opera 40 以上版本 (以及 Firefox 公開支援) 支援，趕快試試看吧，讓我們知道你的表現如何！
包含屬性
無論是製作網頁應用程式，甚至是複雜的網站，重大效能挑戰都在於限制樣式、版面配置和油漆效果，有時， DOM 的「整個」在運算工作中都會被視為「在範圍內」，這可能表示在網路應用程式中嘗試獨立「檢視區塊」可能會有點困難：因為 DOM 的某個部分變更可能會影響其他部分，而且您無法判斷瀏覽器應該屬於或超出範圍。
舉例來說，假設部分 DOM 看起來會像這樣：
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
然後將新元素附加至單一檢視畫面，即可觸發樣式、版面配置和繪製作業：
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
但是，在本例中，「整個 DOM」在範圍內有效。也就是說，無論元素是否經過變更，樣式、版面配置和繪製計算都必須考量「所有元素」。DOM 越大，需要執行的運算工作就越多，這也意味著您的應用程式可以不回應使用者輸入內容。
好消息是，新世代的瀏覽器正在自動限制樣式、版面配置和繪製作業的範圍，這表示您不必採取任何行動就能加快作業速度。
但更棒的是，現在有新的 CSS 屬性可為開發人員提供範圍控管機制：遏制。
「CSS Containment」是新屬性，關鍵字中包含的值可支援以下四個值：
layoutpaintsizestyle
這些值可讓您限制瀏覽器所需的轉譯工作量。下文將詳細說明各項細節。
版面配置 (包含版面配置)
除了 contain: paint 之外，納入版面配置的最大優勢可能是遏制最大的效益。
版面配置通常是以文件為範圍，因此會根據 DOM 的大小按比例縮放，因此如果您變更元素的 left 屬性，則可能需要檢查 DOM 中的每個元素。
在這裡啟用遏制功能，可能會減少文件數量，而非僅處理整份文件，進而為瀏覽器省下大量不必要的工作，大幅改善效能。
塗料 (in: paint)
限定範圍的顏料也是抑制功能的另一個實用優點。塗料抑制基本上是扣掉相關元素，但也會產生其他副作用：
- 可說是具有絕對位置和固定位置元素的容器。換句話說，任何子項都是根據
contain: paint元素來定位，而不含任何其他父項元素，例如文件。 - 而更是堆疊的背景資料這表示
z-index等項目會對元素產生影響，而且會根據新結構定義堆疊子項。 - 這會變成新的格式設定內容換句話說，如果您的區塊層級元素含有油漆牆，系統會將該元素視為新的「獨立」版面配置環境。這表示元素外部的版面配置通常不會影響所屬元素的子項。
大小 (包含大小)
contain: size 代表該元素的子項不會影響父項的大小，且系統會使用該元素推測或宣告的尺寸。因此，如果您設定了 contain: size，但沒有直接或透過彈性屬性指定元素尺寸，它就會以 0 px x 0px 顯示！
設定大小限制是皮帶和大括號的方法，可確保您在設定大小時不會仰賴子項元素，但這種元素本身並不會對效能帶來太大助益。
樣式 (包含：樣式)
要預測變更元素樣式會對 DOM 樹狀結構造成什麼影響，並不容易。例如在 CSS 計數器中，變更子項目的計數器可能會影響文件中其他地方使用相同名稱的計數器值。設定 contain: style 後，樣式變更就不會備份至所屬元素後方。
具體來說，contain: style「無法」與 Shadow DOM 提供的內容一樣，提供限定範圍樣式；本文的純粹只是用來限制樣式變動時要考量的樹狀結構部分，而「不是」宣告樣式時要考慮的部分。
嚴格和內容遏制
您也可以合併關鍵字 (例如 contain: layout paint)，這樣只會對元素套用這些行為。但也支援下列兩個其他值：
contain: strict代表與contain: size layout paint相同contain: content代表與contain: layout paint相同
如果您事先知道元素的大小 (或希望保留其尺寸)，就很適合使用嚴格遏制。不過請注意，如果您「沒有」尺寸指定嚴格限制，則該元素可能會以 0px x 0px 方塊的形式呈現。
另一方面，內容納入功能可以大幅改善範圍，但您不必事先瞭解或指定元素尺寸。
從兩者中，contain: content 是您應預設使用的記錄。當 contain: content 不夠滿足您的需求時，您應該將嚴格遏制限制視為較安全的方法。
告訴我們你如何開始
從報導開始，加入索引是開始向瀏覽器說明您打算單獨顯示的內容的好方法。快來試試 Chrome 52 以上版本，並與我們分享你的體驗吧！