به‌روزرسانی میانسال Compat 2021: شکاف را در همه جا منعطف کنید

به‌روزرسانی اواسط سال در Compat 2021 - تلاشی برای از بین بردن مشکلات سازگاری مرورگر در پنج حوزه اصلی تمرکز: CSS flexbox، CSS Grid، موقعیت: چسبنده، نسبت ابعاد، و تبدیل‌های CSS.

Philip Jägenstedt

Mariko Kosaka

زمان به‌روزرسانی اواسط سال Compat 2021 فرا رسیده است - تلاشی برای حذف مشکلات سازگاری مرورگر در پنج حوزه اصلی تمرکز. برای جزئیات بیشتر در مورد کار #compat2021 و نحوه تصمیم گیری ما در زمینه های تمرکز، اطلاعیه ماه مارس را بررسی کنید.

بهبودهای Chromium که در این پست مورد بحث قرار گرفته‌اند به Chrome، Edge و همه مرورگرهای مبتنی بر Chromium می‌رسند.

چگونه پیشرفت را اندازه گیری می کنیم

می‌توانید داشبورد Compat 2021 را برای تست‌های پلتفرم وب بررسی کنید تا تعداد تست‌های قبولی و نمودارهای روند برای مرورگرهای مختلف را ببینید.

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

CSS flexbox

هر سه موتور مرورگر شاهد بهبودهایی در flexbox بودند.

Safari 14.1 ویژگی gap را برای flexbox ارسال کرد. ویژگی gap روشی مناسب برای تنظیم فاصله بین موارد است. این ویژگی اغلب در طرح‌بندی Grid استفاده می‌شود و پشتیبانی در طرح‌بندی flexbox یکی از ویژگی‌های درخواستی در گزارش سازگاری مرورگر MDN بود. با این به روز رسانی، ویژگی gap در طرح بندی های انعطاف پذیر در همه مرورگرهای اصلی موجود است و چالش سازگاری برتر حل می شود. Safari 14.1 همچنین شامل اصلاحات بسیاری برای تصاویر در flexbox است که نیاز به راه‌حل‌های قدیمی را از بین می‌برد.

فایرفاکس رندر جداول را به‌عنوان آیتم‌های انعطاف‌پذیر حل کرد و فایرفاکس را به 100% قبولی در تست‌ها نزدیک کرد (در حال حاضر 98.5%).

جداول کرومیوم ثابت به عنوان آیتم های انعطاف پذیر نیز هست. در Chromium 88، بازنویسی تصاویر به‌عنوان موارد انعطاف‌پذیر نیز وجود داشت که تعدادی از باگ‌های قدیمی را برطرف کرد. سرانجام، Chromium اخیراً از کلیدواژه‌های تراز جدید پشتیبانی کرده است: start ، end ، self-start ، self-end ، left و right . این کلمات کلیدی در Chrome Canary و Edge Canary برای امتحان در دسترس هستند.

شبکه CSS

استفاده از CSS Grid به طور پیوسته در حال رشد است، در حال حاضر 9٪ از بازدیدهای صفحه. هر سه موتور مرورگر اصلی CSS Grid را پیاده‌سازی می‌کنند و در حال حاضر بیش از 89 درصد از تست‌های مربوط به پلتفرم وب را گذرانده‌اند. بستن شکاف سازگاری برای حمایت از رشد ثابت این ویژگی مهم است.

تا کنون در سال 2021، Safari از 89٪ به 93٪ با موفقیت در تست ها بهبود یافته است، و Chromium در حال کار بر روی یک معماری جدید برای حل مشکلات بیشتر CSS Grid به نام GridNG است. این تلاشی است که توسط تیم مایکروسافت رهبری می شود و منجر به افزایش اخیر از 94٪ به 97٪ در تست های Grid هدفمند شده است . می‌توانید به‌زودی منتظر به‌روزرسانی GridNG در وبلاگ Edge باشید.

position: sticky

در Chromium، position: sticky سرصفحه‌های جداول با راه‌اندازی TablesNG برطرف شد - تلاشی چند ساله برای معماری مجدد رندر جداول. این تغییر، همراه با چند اصلاح نهایی ، کانال توسعه‌دهنده کروم و اج 93 را به گذراندن 100 درصد از آزمایش‌های هدفمند سوق داد.

فراتر از position: sticky ، TablesNG 72 باگ Chromium را برطرف کرد !

aspect-ratio CSS

ویژگی aspect-ratio ، که تنظیم نسبت عرض به ارتفاع را ساده می کند، برای طراحی وب واکنش گرا بسیار مهم است. همچنین راه حلی برای جلوگیری از تغییرات طرح بندی تجمعی است.

ویژگی aspect-ratio اکنون در نسخه های پایدار کروم، اج و فایرفاکس و در سافاری 15 بتا پشتیبانی می شود. با بهبود پشتیبانی از مرورگرهای متقابل، استفاده در حال افزایش است.

اگرچه هیچ مرورگری 100٪ تست های موفقیت آمیز ندارد، شکاف سازگاری برای aspect-ratio کوچکترین از تمام پنج منطقه تمرکز برای Compat 2021 است . بیش از 90٪ تست های موفقیت آمیز برای همه مرورگرهای اصلی دارد. با حرکت رو به جلو، ما به نظارت بر پیشرفت با استفاده از این مجموعه آزمایشی ادامه می‌دهیم تا آن را به یک ویژگی ثابت تبدیل کنیم.

درباره استفاده و مزایای ویژگی aspect-ratio در web.dev بیشتر بیاموزید.

CSS تبدیل می شود

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

تیم Chromium همچنین در حال کار بر روی بهبود قابلیت همکاری transform-style: preserve-3d و transform :perspective() است. امیدواریم در آپدیت بعدی پیشرفت بیشتری برای به اشتراک گذاشتن داشته باشیم.

بهبود نمره کلی

از زمان اعلام در ماه مارس، هر سه موتور مرورگر امتیازات Compat 2021 خود را بهبود بخشیده اند:

• Chrome و Edge Dev از 86 به 92 رسیدند.
• فایرفاکس از 83 به 86 رسید.
• سافاری از سال 64 به 82 رسید.

شایان ذکر است، سافاری تلاش کرده است که شکاف سازگاری را با 18 امتیاز کاهش دهد، به لطف کار زیاد همکاران WebKit. به‌ویژه تیم Igalia به ویژگی aspect-ratio و بهبودهای زیادی در Flexbox و Grid کمک کرد، مانند gap برای flexbox و رفع اشکال‌های مختلف.

پیشرفت Compat 2021 را دنبال کنید

برای دنبال کردن پیشرفت Compat 2021، داشبورد را زیر نظر داشته باشید، در لیست پستی ما مشترک شوید یا با chromiumdev@ تماس بگیرید. اگر مشکلی را تجربه کردید، مطمئن شوید که یک اشکال را برای مرورگر آسیب دیده ثبت کنید .