آموزش CSS Containment و استفاده از آن در پروژه‌های واقعی

بررسی موضوع CSS Containment

CSS Containment یا محتوای CSS یک ویژگی مهم است که به توسعه‌دهندگان وب اجازه می‌دهد تا کارایی رندر صفحات وب را بهبود بخشند، به ویژه در صفحاتی با محتوای پیچیده. در واقع، این ویژگی مشخص می‌کند که کدام بخش‌های صفحه روی قسمت‌های دیگر تأثیر نمی‌گذارند. این ویژگی چندین گزینه‌ی مختلف دارد که به شما امکان می‌دهد سطح‌های مختلفی از استقلال را برای عناصر فراهم کنید.

در زمان طراحی پیچیدگی‌های مختلف صفحه، استفاده از CSS Containment می‌تواند به شما کمک کند تا اطمینان حاصل کنید که تغییرات در یک بخش از صفحه نیازی به بروزرسانی کل ساختار DOM ندارد. با اعمال این تکنیک می‌توانید عملکرد سایت خود را بهبود بخشید.

خصوصیات CSS Containment شامل سه نوع اصلی است: محتوا (content), اندازه (size) و سبک (style). به عنوان مثال، اگر بخواهید برخی از عناصر رندرینگ را محدود کنید تا عملکرد بهینه‌تری داشته باشید، می‌توانید از محتوا و اندازه برای این کار استفاده کنید.

هنگام تنظیم یک پروژه وب پیچیده، سازماندهی و استفاده بهینه از این ویژگی می‌تواند به کاهش بار پردازشی مرورگر کمک کند. بنابراین، برای پروژه‌هایی که دارای انیمیشن‌ها و افکت‌های متعددی هستند، Containment می‌تواند ابزاری حیاتی باشد.

توجه داشته باشید که تمام مرورگرها از این ویژگی پشتیبانی نمی‌کنند. بنابراین، قبل از استفاده، باید بررسی کنید که آیا مرورگر هدف شما از این ویژگی پشتیبانی می‌کند یا خیر.

نمونه کد CSS Containment

div.container {
  contain: layout paint;
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

توضیح کد

div.container: انتخاب کننده div ای که دارای کلاس container است.
contain: layout paint;: استفاده از خاصیت contain برای استفاده از محدودیت‌های layout و paint برای بهبود کارایی.
width: 100px;: تعیین پهنای ۱۰۰ پیکسل برای عنصر.
height: 100px;: تعیین ارتفاع ۱۰۰ پیکسل برای عنصر.
background-color: lightblue;: ست کردن رنگ پس زمینه برای عنصر به رنگ آبی روشن.