در اینجا چیزی است که شما باید بدانید:
- با View Transitions API، ترانزیشن های صیقلی را در برنامه تک صفحه ای خود ایجاد کنید.
- با پشتیبانی از CSS Color Level 4 رنگ ها را به سطح بعدی بیاورید.
- ابزارهای جدید را در پانل استایل کشف کنید تا از عملکرد رنگ جدید حداکثر استفاده را ببرید.
- و چیزهای بیشتری وجود دارد.
من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 111 وجود دارد.
مشاهده API Transitions.
ایجاد انتقال صاف در وب یک کار پیچیده است. View Transitions API اینجاست تا با گرفتن عکس‌های فوری، ایجاد انتقال‌های صیقلی را ساده‌تر کند و به DOM اجازه دهد بدون همپوشانی بین حالت‌ها تغییر کند.
انتقال نمای پیش‌فرض یک cross fade است، قطعه زیر این تجربه را پیاده‌سازی می‌کند.
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
هنگامی که .startViewTransition() فراخوانی می شود، API وضعیت فعلی صفحه را ثبت می کند.
پس از تکمیل، callback شده به .startViewTransition() فراخوانی می شود. اینجاست که DOM تغییر می کند. سپس، API وضعیت جدید صفحه را ثبت می کند.
توجه داشته باشید که API برای برنامه های تک صفحه ای (SPA) راه اندازی شده است، اما پشتیبانی از مدل های دیگر نیز در حال اجرا است.
جزئیات زیادی برای این API وجود دارد، در مقاله ما حاوی نمونه‌ها و جزئیات بیشتر بیاموزید، یا اسناد View Transitions در MDN را بررسی کنید.
سطح رنگ CSS 4.
با سطح رنگ 4 CSS، CSS اکنون از نمایشگرهای با وضوح بالا پشتیبانی می کند، رنگ ها را از طیف های HD مشخص می کند و در عین حال فضاهای رنگی با تخصص را نیز ارائه می دهد.
به طور خلاصه به این معنی است که 50٪ رنگ های بیشتری را انتخاب کنید! شما فکر کردید که 16 میلیون رنگ بسیار زیاد به نظر می رسند. من هم همینطور فکر می کردم.
خودتان آن را امتحان کنید
پیاده سازی شامل تابع color() است. می توان از آن برای هر فضای رنگی که رنگ ها را با کانال های R، G و B مشخص می کند استفاده کرد. color() ابتدا یک پارامتر فضای رنگ، سپس یک سری از مقادیر کانال برای RGB و در صورت تمایل مقداری آلفا می گیرد.
در اینجا چند نمونه از استفاده از تابع رنگ با فضاهای رنگی مختلف آورده شده است.
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
این مقاله را برای مستندات بیشتر برای استفاده کامل از رنگ‌های با وضوح بالا با استفاده از CSS بررسی کنید.
ابزارهای رنگی جدید.
Devtools دارای ویژگی های جدیدی برای پشتیبانی از مشخصات رنگ css سطح 4 است.
اکنون صفحه Styles از 12 فضای رنگی جدید و 7 طیف جدید مشخص شده در مشخصات پشتیبانی می کند. در اینجا نمونه هایی از تعاریف رنگ CSS با color()، lch()، oklab() و color-mix() آورده شده است.
هنگام استفاده از color-mix() که امکان ترکیب درصدی از یک رنگ به رنگ دیگر را فراهم می کند، می توانید خروجی رنگ نهایی را در صفحه Computed مشاهده کنید. 
همچنین انتخابگر رنگ از تمام فضاهای رنگی جدید با ویژگی های بیشتر پشتیبانی می کند. برای مثال، روی نمونه رنگی (display-p3 1 0 1) کلیک کنید. یک خط مرزی نیز اضافه شده است که برای درک واضح تری از وسعت رنگ انتخابی شما، بین گستره های sRGB و display-p3 تمایز قائل می شود. 
انتخابگر رنگ همچنین از تبدیل رنگ ها بین فرمت های رنگی پشتیبانی می کند.
برای اطلاعات بیشتر در مورد اشکال زدایی رنگ و سایر ویژگی های جدید در ابزارهای توسعه، این پست را بررسی کنید.
و بیشتر!
البته چیزهای بیشتری وجود دارد.
- CSS توابع مثلثاتی، واحدهای فونت ریشه اضافی را اضافه کرد و شبه انتخابگر فرزند n-ام را گسترش داد .
- Document Picture in Picture API در حال آزمایش اولیه است
- اقدامات
previousslideوnextslideاکنون بخشی از Media Session API هستند. نسخه ی نمایشی را اینجا بررسی کنید.
بیشتر خواندن
این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 111 پیوندهای زیر را بررسی کنید.
- موارد جدید در Chrome DevTools (111)
- لغو و حذف Chrome 111
- به‌روزرسانی‌های ChromeStatus.com برای Chrome 111
- فهرست تغییر مخزن منبع Chromium
- تقویم انتشار کروم
اشتراک در
برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.
من آدریانا جارا هستم، و به محض اینکه کروم 112 منتشر شد، اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!