به روز رسانی تعطیلات Compat 2021: قبل از پایان سال برای توسعه دهندگان ارائه می شود

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

Philip Jägenstedt

Mariko Kosaka

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

از زمان آخرین به‌روزرسانی ، ما همچنان شاهد پیشرفت‌هایی در همه مرورگرها بوده‌ایم. همه مرورگرها در ابتدای سال با نمرات تست بسیار پایین تری شروع کردند، اما اکنون همه مرورگرها از 90٪ فراتر رفته اند! این بدان معناست که پلت فرم وب به طور قابل توجهی قابلیت همکاری پنج منطقه تمرکز را بهبود بخشیده است.

کمک به موتورهای مرورگر نه تنها توسط فروشندگان مرورگر، بلکه دیگران در جامعه وب نیز انجام می شود. برای این پروژه، ما به ویژه می خواهیم از ایگالیا برای مشارکت و ادامه کار برای بهبود امتیازات تشکر کنیم. Igalia در بهبود هر پنج حوزه تمرکز Compat 2021 کمک کرده است.

در wpt.fyi ، داشبورد نتایج آزمایش، اکنون یک نمای نتایج آزمایش فیلتر شده وجود دارد که همه آزمایش‌های موجود در Compat 2021 را نشان می‌دهد و همچنین نماهایی برای Chrome ، Firefox و Safari که نتایج را با آخرین به‌روزرسانی ما در ماه جولای مقایسه می‌کند.

بیایید نگاهی به پیشرفت ها در هر زمینه بیندازیم!

CSS flexbox

flex-basis: content اکنون در راه همه مرورگرها است و پیاده‌سازی‌ها در Chromium و WebKit فرود می‌آیند. (مقدار content قبلاً توسط Gecko پشتیبانی می شد.)

در Chromium، مشکل مربوط به اندازه فلکس باکس برطرف شده است که با مشخصات و رفتار Gecko مطابقت دارد. و در Gecko، چندین مشکل که Compat 2021 را تحت تأثیر قرار می‌دهد ، برطرف شده است، از جمله مشکل درصد ارتفاع در موارد انعطاف‌پذیر . در نهایت، در WebKit، پشتیبانی از مقادیر بیشتر ویژگی تراز ( چپ، راست ، خود شروع، خود پایان ، شروع، پایان ) اضافه شده است، و پیشرفت های زیادی برای موقعیت یابی مطلق انجام شده است، همچنین نتایج تست flexbox را بهبود می بخشد. Compat 2021.

شبکه CSS

استفاده از CSS Grid در وب همچنان در حال رشد است، همانطور که در سالنامه وب 2021 و معیارهای استفاده کروم مشاهده می شود.

راه اندازی GridNG در کروم و اج 93 بسیاری از مشکلات قدیمی Grid را حل کرد و 38 مشکل چشمگیر را در ردیاب اشکال کرومیوم بسته شد. همراه با بسیاری از پیشرفت‌های کوچک‌تر، امتیاز Compat 2021 برای Grid در Chromium با 3٪ به 97٪ بهبود یافت. این کار توسط تیم Edge در مایکروسافت رهبری شد.

یک اشکال موقعیت یابی مطلق که بر Grid تأثیر می‌گذارد در Gecko برطرف شد و بسیاری از رفع‌ها در WebKit مشاهده شد که منجر به بهبود 1% برای Firefox و 3% بهبود برای Safari در تست‌های Grid شد.

position: sticky

در آخرین به روز رسانی خود، ما به این position: sticky اولین منطقه ای بود که هر مرورگر (در این مورد کروم و اج) به 100% موفقیت در تست ها رسید. در حال حاضر، به دنبال تعدادی اصلاحات در پیاده سازی WebKit، سافاری نیز برای این تست ها امتیاز 100% را کسب می کند. بیشتر این بهبودها در Safari 15 گنجانده شده است.

aspect-ratio CSS

پشتیبانی از مرورگرهای متقابل برای تعریف نسبت ابعاد (نسبت عرض به ارتفاع) عناصر همچنان بهبود یافته است و امتیازات Compat 2021 به ترتیب برای Chrome/Edge، Firefox و Safari به 99، 97 و 95 درصد رسیده است. بسیاری از پیشرفت‌ها مربوط به ویژگی aspect-ratio نیستند، بلکه مربوط به نحوه نگاشت ویژگی‌های width و height به یک مقدار aspect-ratio پیش‌فرض برای عناصر هستند. این برای چندین عنصر در WebKit و <canvas> برای Chromium اجرا شد.

CSS تبدیل می شود

پشتیبانی از transform: perspective(none) اکنون در Chromium ، Gecko و WebKit پشتیبانی می‌شود. این کار باعث می شود که بین یک پرسپکتیو و بدون پرسپکتیو متحرک سازی شود.

در Chromium، transform-style: preserve-3d (که به عناصر فرزند اجازه می‌دهد در صحنه سه بعدی یکسان شرکت کنند) و ویژگی perspective (که تبدیل پرسپکتیو را به عناصر فرزند اعمال می‌کند) اکنون با اعمال آن‌ها فقط برای فرزند ، با مشخصات همسو می‌شوند. عناصر.

افزایش بزرگ امتیازات برای تبدیل‌های CSS برای همه مرورگرها عمدتاً به دلیل بهبود مجموعه آزمایشی است که در آن تست‌های نادرست رفع یا حذف شده‌اند. این باعث می شود که درک مشکلات قابلیت همکاری باقی مانده و جلوگیری از رگرسیون در آینده آسان تر شود.

نتیجه

ما از کاری که همه انجام داده اند تا سال را با پیشرفت های زیادی در نمره و همچنین زیرساخت های تست بهتر به پایان برسانند سپاسگزاریم. aspect-ratio یک ویژگی طولانی مدت از توسعه دهندگان وب بود و اکنون در همه مرورگرها پشتیبانی می شود. استفاده از flexbox، grid و position: sticky همگی در حال رشد هستند و این ویژگی‌ها به لطف بسیاری از پیشرفت‌های انجام شده در سال 2021، اکنون در مرورگرها بهتر پشتیبانی می‌شوند.

بعدش چی؟ ما از ادامه همکاری با سایر فروشندگان مرورگر و جامعه گسترده تر در تکرار بعدی این تلاش هیجان زده هستیم. ما شروع به تحقیق و بحث در مورد حوزه های تمرکز برای سال 2022 کرده ایم. لطفاً به زودی منتظر اعلامیه ای باشید.

اگر بازخورد یا سؤالی دارید، لطفاً با ما در Twitter در @ChromiumDev تماس بگیرید.