ماژول Containment در CSS حالا به یک استاندارد وب تبدیل شده است

  • آخرین بروزرسانی در شنبه 09 می 2020

کارگروه CSS اخیرا ماژول سطح یک Containment را به عنوان یک استاندارد جدید در وب منتشر کرد. این ماژول CSS پراپرتی contain را ارائه می کند که از آن در نشان کردن المنت هایی استفاده می شود که زیرشاخه شان از سایر بخش های صفحه به نوعی مستقل است. user agent ها با فهمیدن این موضوع ممکن است از آن برای بهینه سازی بیشتر در زمان رندر کردن یک صفحه استفاده کنند در حالی که سازنده هم می تواند مطمئن باشد صفحه ای که ساخته به طور تصادفی داخل یک مسیر اجرایی کند که به سبب تغییرات بی ضرر ایجاد شده وارد نمی شود.

هدف اصلی این استاندارد بهبود عملکرد رندر شدن صفحه های وب با گذر کردن از برخی زیرشاخه های یک سند در بخشی از فرآیند رندر کردن صفحه است. ریچل اندرو، ویرایشگر ارشد مجله Smashing Magazine در مقاله ای مختص این استاندارد جدید وب توضیح می دهد:

زمانی که محتوای باکس ما تغییر می کند، مرورگر باید در نظر داشته باشد که ممکن است هر یکی از المنت ها تغییر کرده باشد. مرورگر ها به طور کلی در رویارویی با چنین مسائلی خوب عمل می کنند چرا که چنین اتفاقاتی رایج است. با در نظر گرفتن این موضوع، به عنوان یک توسعه دهنده، شما می دانید که کدام یک از المنت ها مستقل هستند و این که کدام قسمت ها اگر تغییری کنند سایر بخش ها تاثیر نمی گیرند؛ بنابراین خوب می شود اگر بتوانید از طریق CSS تان به مرورگر این موضوع را اطلاع دهید. پراپرتی contain در CSS چنین امکانی را به شما می دهد.

ریچل اندرو

در این ماژول پراپرتی به نام containتعریف شده که امکان ایزوله سازی قابل پیش بینی یک زیرشاخه را از سایر بخش های صفحه می دهد. پراپرتی contain با گرفتن یکی از 5 مقدارstrict, content, size, layout, paint مشخص می کند که یک المنت و محتوای داخلش به نوعی مستقل از سایر درخت سند (document tree) یا به عبارتی دیگر، سایر بخش های یک صفحه هستند.

مقدار layout اطلاع می دهد که لایه داخلی المنت تحت تاثیر هیچ چیز بیرون از آن المنت قرار نمی گیرد و محتوای داخل آن المنت هیچ تاثیری روی المنت های والد ندارند.

مقدار paint اطلاع می دهد که فرزندان آن المنت نمی توانند بیرون از مرز های آن المنت به نمایش در بیایند و هیچ چیزی از این المنت بیرون نمی زند (و اگر هم بزند نمایش داده نمی شود).

مقدار size به این معناست که ابعاد المنت مستقل از محتوای المنت است. این به این معناست که اندازه باکس برای این المنت بدون توجه به child های المنت قابل محاسبه است.

مقدار content شکل ساده شده contain: layout paint و مقدار strict هم شکل ساده شدهlayout paint size است.

پراپرتی contain به مرورگر ها این اجازه را می دهد تا اندازه، رسم، استایل و لایه یا ترکیبی از این موارد را برای قسمت محدودی از DOM و نه کل صفحه، دوباره محاسبه کنند که باعث می شود تا عملکرد مرورگر ها در بازسازی صفحه به ویژه در رابطه با صفحات حجیم، بهتر شود.

مزایایی که این استاندارد داشته آن قدر زیاد بوده که باعث شده بلومبرگ از تلاش های Igalia برای تعبیه کردن CSS Containment در کرومیوم (سورس کد مورد استفاده در بسیاری از مرورگر ها از جمله کروم، اپرا، ادج و…) پشتیبانی کند. مانوئل رگو کاساسنواس در صحبتی که در CSSconf EU 2019 داشته مثالی از یک رابط کاربری با بیش از 10,000 سلول زده که محتوای متنی آن مدام در حال تغییر است و با استفاده از این استاندارد جدید می تواند 4 برابر سریع تر رندر شود.

بلومبرگ رابط های کاربری پیچیده ای داشته و [آن ها] از CSS containment در ساخت بعضی شان بهره گرفته اند.

CSS containment در مرورگر های جدید مانند فایرفاکس، کروم و… به جز سافاری تعبیه شده و قابل استفاده است.

📌 مستندات
برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!

دیدگاه خود را بیان کنید

@