در دنیای وب، یکی از چالش‌های بزرگی که توسعه‌دهندگان با آن مواجه هستند، کارایی و بهینه‌سازی بارگذاری صفحات وب است. ویژگی محصورسازی (Containment) در CSS به منظور بهبود کارایی و جلوگیری از ترسیم و محاسبه مجدد غیرضروری سبک‌هاست. با این ویژگی می‌توان مدیریت بهتری بر محاسبات عناصر صفحه انجام داد.
فرض کنید ما با یک پروژه بزرگ مواجه ایم که تعداد زیادی عنصر HTML دارد. در این صورت برای کاهش زمان بارگذاری و بهبود کارایی، می‌توانیم از محصورسازی استفاده کنیم. این ویژگی به مرورگر می‌گوید که هر گونه تغییر در عنصری محصور که از محصورسازی بهره می‌برد، نباید تاثیراتی در خارج از آن عنصر داشته باشد؛ نتیجتا مرورگر نیازی به محاسبه مجدد عناصری که تحت تاثیر آن نیستند نخواهد داشت.
محصورسازی CSS به چهار نوع تقسیم‌بندی می‌شود: محصورسازی محتوا، محصورسازی اندازه، محصورسازی سبک و محصورسازی طرح. هر یک از این انواع می‌توانند موارد خاصی از تعاملات و طراحی را بهینه کنند. به طور مثال، با محصورسازی محتوا می‌توان پردازش سرباره محتوایی را کاهش داد و به مرورگر امکان داد از محاسبات غیرضروری اجتناب کند.
استفاده از محصورسازی می‌تواند تجربه کاربری را بهبود ببخشد، زیرا باعث عملکرد سریع‌تر و روان‌تر صفحات وب می‌شود. این ویژگی به خصوص برای سایت‌های سنگین و پیچیده که نیاز به جابجایی داده‌های زیادی دارند، بسیار مفید است. با استفاده درست از این تکنیک می‌توانید از منابع سیستم بهینه‌تر استفاده کنید و کیفیت کلی پروژه خود را افزایش دهید.
در ادامه چند مثال عملی از نحوه استفاده از این خاصیت نمایش داده شده است.
<style>
.container {
contain: layout size style;
}
</style>
<div class="container">
<p>Hello World!</p>
</div>
در مثال بالا:
contain: layout size style; : محصورسازی را در سه بخش ترتیب، اندازه و سبک تعریف می‌کنیم.
<div class="container"> : این div به عنوان عنصر محصور تعریف شده است.
حاوی محتوایی ساده به نام <p>Hello World!</p> است که درون عنصر محصور قرار دارد.