جدید در کروم 111

آدریانا خارا

در اینجا چیزی است که شما باید بدانید:

  • با View Transitions API، ترانزیشن های صیقلی را در برنامه تک صفحه ای خود ایجاد کنید.
  • با پشتیبانی از CSS Color Level 4 رنگ ها را به سطح بعدی بیاورید.
  • ابزارهای جدید را در پانل استایل کشف کنید تا از عملکرد رنگ جدید حداکثر استفاده را ببرید.
  • و چیزهای بیشتری وجود دارد.

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 111 وجود دارد.

مشاهده API Transitions.

ایجاد انتقال صاف در وب یک کار پیچیده است. View Transitions API اینجاست تا با گرفتن عکس‌های فوری، ایجاد انتقال‌های صیقلی را ساده‌تر کند و به DOM اجازه دهد بدون همپوشانی بین حالت‌ها تغییر کند.

انتقال ایجاد شده با View Transition API. سایت آزمایشی را امتحان کنید – به Chrome 111+ نیاز دارد.

انتقال نمای پیش‌فرض یک 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() آورده شده است.

نمونه هایی از تعاریف رنگ CSS.

هنگام استفاده از color-mix() که امکان ترکیب درصدی از یک رنگ به رنگ دیگر را فراهم می کند، می توانید خروجی رنگ نهایی را در صفحه Computed مشاهده کنید. نتیجه ترکیب رنگ در صفحه Computed.

همچنین انتخابگر رنگ از تمام فضاهای رنگی جدید با ویژگی های بیشتر پشتیبانی می کند. برای مثال، روی نمونه رنگی (display-p3 1 0 1) کلیک کنید. یک خط مرزی نیز اضافه شده است که برای درک واضح تری از وسعت رنگ انتخابی شما، بین گستره های sRGB و display-p3 تمایز قائل می شود. یک خط مرزی وسعت.

انتخابگر رنگ همچنین از تبدیل رنگ ها بین فرمت های رنگی پشتیبانی می کند.

تبدیل رنگ ها بین فرمت های رنگی

برای اطلاعات بیشتر در مورد اشکال زدایی رنگ و سایر ویژگی های جدید در ابزارهای توسعه، این پست را بررسی کنید.

و بیشتر!

البته چیزهای بیشتری وجود دارد.

در ادامه مطلب

این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 111 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

من آدریانا جارا هستم، و به محض اینکه کروم 112 منتشر شد، اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!