interop 2022 و ویژگی های جدیدی که در سال ۲۰۲۲ به مرورگر ها اضافه میشه

سلام? به تازگی همه مرورگر ها اومدن و دور هم جم شدن و باهم به توافق رسیدن که توی سال ۲۰۲۲ بیان و یکسری از ویژگی های css رو داخل موتور های مرورگر های خودشون پیاده سازی کنن و اسمش رو گذاشتن interop-2022 که میتونید توی این لینک https://wpt.fyi/interop-2022?stable دنبال کنید و ببینید که تا چه حد پیشرفت کردن.

اما من قصد دارم حالا بیام ی توضیح کوتاه و مختصر راجب این ویژگی ها بهتون بدم که بدونیم که باید توی سال ۲۰۲۲ چه انتظاری از مرورگر ها داشته باشیم

حالا با این اوصاف تا کجا پیشرفتن این مرورگرا؟

همینطور که توی این تصویر دارین میبینید، مرورگر های عزیز تا الان تونستن ۶۰% رو پیاده سازی کنن و شاید تا زمانی که شما دارین این مقاله رو میخونید عددش بیشتر شده باشه ولی فعلا که من دارم واستون مینویسم ۶۰% و میبینید که دارن روی ۱۰ تا ویژگی کار میکنن که در ادامه میریم سراغ یَک یَکشون? و ی توضیح کوچولو میدم بتون. بزن بریم?

تو عکس بالا دیدیم که دارن روی ۱۰ تا ویژگی کار میکنن و میخوام حالا از ب بسم الله شروع کنیم و بریم تا اخر پس با من همراه باش که بریم تو کارش?


Cascade Layers

خب توی این ویژگی جدید قراره ی چیزی به اسم @layer به css اضافه بهش. حالا این چیکار میکنه؟

اول بذارید ی تعریف از cascade داشته باشیم:

Cascade ی لیست نامرتب از مقادیر ی ویژگیه که قراره روی ی عنصر اعمال بشن اونم بر اساس اولویتی که براشون تعریف کردیم که در آخر یک مقدار cascade برگشت داده میشه اونم به صورت آبشاری. یکم سخت شد؟ خودمم قبول دارم?

خب بذارید یکم خودمونی تر توضیح بدم که بفهمیم?

Cascade الگوریتمیه که مرورگر با استفاده از آن تصمیم می‌گیره چه CSSای را به یک عنصر اعمال کنه.

حالا فرض کنید که cascade ما همون انتخابگر ها و ویژگی های css که ما نوشتیم. مرورگز میاد و با استفاده از این الگوریتم به هرکدومشون ی وزنی میده و به صورت آبشاری میاد پایین مثلا شما ی سری استایل به body دادین بعد میاد پایین تر میاد سراغ مثلا تگ section بعد میاد پایین تر میره سراغ تگ div و بعد میره سراغ تگ p داخلش. این الگوریتم انقد به صورت آبشاری میاد پایین تا برسه به خود اون المان و استایل هارو اعمال کنه (البته اون وسطا ی سری اولویت ها هم هست که یکیش مثلا میشه همون مقدار important که میذاریم واسه ی سری ویژگی ها)

خب cascade رو فهمیدیم حالا این layer چیه؟

این اومده برای اینکه شما فک کن میخوای وسط اون آبشاری که داره میاد پایین چندتا انشعاب درست کنید. مثلا وسط راه دو تیکش کنید و دوباره پایین تر دوباره یکی بشه.

توی عکس بالا مشخصه که شما میتونید توی چ سطحی این لایه هارو اضافه کنید.


Containment

هدف از استفاده از containment بهبود عملکرد صفحات وب که به توسعه دهنده ها این اجازه بده که فرزندان یک المنت رو از پدرش یا از بقیه صفحه جدا کنند. این به مرورگر ها کمک میکنه که اگه بخشی از صفحه مستقله، بتونه بهتر رندر کنه و عملکرد خودشو بهبود بده. این ویژگی مقادیر متفاوتی میگیره که برای مطالعه بهتر و بیشتر میتونید از لینک https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containmentاستفاده کنید.


Scrolling

وب‌سایت‌ها و برنامه‌های وب امروزی بیشتر از همیشه به نحوه عملکرد اسکرول اهمیت می‌دهن. اسکرول اسنپ ابزارهایی رو در اختیار طراحان و توسعه دهندگان قرار میده تا نحوه اسکرول رابط ها و نحوه نمایش محتوا را کنترل کنند. ویژگی scroll-behavior در CSS رفتار یک جعبه پیمایش را زمانی که پیمایش توسط APIهای پیمایش ناوبری یا CSSOM فعال می شود، تنظیم می کند. ویژگی overscroll-behavior CSS تعیین می‌کند که مرورگر هنگام رسیدن به مرز یک منطقه پیمایش چه کاری انجام بده.



Subgrid

CSS Grid پنج سال پیش در مارس ۲۰۱۷ ارسال شد و اون چیزیه که میتونه وب رو متحول کنه.

Subgrid در CSS Grid level 2 تعریف شده و یک راه آسون برای قرار دادن نوه های یک المان grid در آن شبکه رو در اختیار ما قرار میده. این امکان را فراهم می کنه تا موارد را در طرح بندی های پیچیده بدون توجه به ساختار DOM ردیف کنید. چشم انداز یک سیستم چیدمان کاری در وب با Grid و Subgrid با هم به طور کامل تر تحقق خواهد یافت.


خب برای اینجا کافیه☺️اخه من این پست رو منتشر کردم تا بفهمین ی همچین پست خوبی رو توی سایت آقای مبتدی هست و میتونید اونجا بیاین و این مطلب رو کامل بخونید. (شاید از این حرکت من ناراحت شده باشید ولی اگه دنبال یادگرفتن باشید حتما به سایت میاین و ادامش رو میخونید و اگر هم ناراحت شدین از این حرکت که معذرت میخوام☺️)

لینک مطلب توی سایت آقای مبتدی

https://mrjunior.ir/interop-2022/