رفتن به عمق CSS Containment

مقدمه‌ای بر CSS Containment

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

فرض کنید که یک صفحه وب سنگین دارید که شامل چندین المان بزرگ و پیچیده است. با به‌کارگیری CSS Containment می‌توانید به مرورگر بگویید که یک المان خاص و فرزندانش تنها بر خودش تاثیر دارد و هیچ‌گونه تغییر یا محاسباتی نیاز ندارد که بر بقیه صفحه تاثیر بگذارد.

هدف اصلی از استفاده از این ویژگی بهبود کارایی صفحات وب است. به این ترتیب، مرورگر می‌تواند تغییرات را تنها در بخش‌های معینی محاسبه کرده و از انجام محاسبات غیر ضروری جلوگیری کند. این امر خصوصاً در صفحات پیچیده و دارای تعداد زیادی المان مفید است.

توسعه‌دهندگان بسیاری هنوز با این خصوصیت جدید آشنا نیستند و ممکن است آن را نادیده بگیرند، اما با توجه به اهمیت عملکرد بالا و سرعت لودینگ صفحات، کاربرد CSS Containment بیشتر می‌شود.

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

کد نمونه برای CSS Containment

  <style>
    .container {
      contain: layout paint style;
    }
  </style>

  <div class="container">
    <p>This content is contained!</p>
  </div>

توضیحات کد مرحله به مرحله

.container – این کلاس برای المانی تعریف شده که ویژگی containment را باید داشته باشد.
contain: layout paint style; – از این ترکیب استفاده شده تا اطمینان حاصل شود که هیچ تاثیری بر نمای لایه‌بندی، نقاشی یا عملیات سبک‌دهی خارج از این المان ندارد.
<div class="container"> – یک المان div که خصوصیت contain را داراست.
<p> – پاراگرافی که داخل المان div قرار دارد و به صورت معمولی در مرورگر رندر می‌شود.