جدید در کروم 127

آدریانا خارا

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

  • font-size-adjust به شما کمک می کند خوانایی فونت های بازگشتی را بهبود ببخشید.
  • فعال‌سازی‌های کاربر اکنون بین اسناد تصویر در تصویر و بازکننده آنها منتشر می‌شوند.
  • اکنون محفظه‌های اسکرول به‌طور پیش‌فرض با صفحه‌کلید قابل فوکوس هستند.
  • و چیزهای بیشتری وجود دارد.

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

font-size-adjust CSS

خوانایی سایت شما ممکن است زمانی کاهش یابد که خانواده فونت انتخابی اول در دسترس نباشد و فونت بازگشتی آن دارای مقدار جنبه متفاوتی باشد.

تصویر زیر تفاوت فونت های Verdana و Times را با وجود یکسان بودن متن نشان می دهد.

خطوط متنی که عبارتند از: «این متن از فونت verdana (14 پیکسل) استفاده می‌کند که حروف کوچک نسبتاً بزرگی دارد و «این از فونت Times (14 پیکسل) استفاده می‌کند که خواندن آن در اندازه‌های کوچک سخت است.

اگر سایت شما به فونت Times برگردد خواندن آن بسیار سخت تر می شود.

ویژگی font-size-adjust CSS به شما کمک می کند اندازه فونت فونت های بازگشتی را تنظیم کنید تا مقدار جنبه (ارتفاع حروف کوچک تقسیم بر اندازه فونت) ثابت بماند و اطمینان حاصل شود که متن بدون توجه به فونت استفاده شده مشابه به نظر می رسد.

در تصویر زیر با استفاده از font-size-adjust خوانایی بین فونت های Verdana و Times حفظ می شود.

   font-size-adjust: 0.545;

خطوط متنی که عبارتند از "این متن از فونت verdana (14 پیکسل) استفاده می کند که حروف کوچک نسبتا بزرگ دارد"، "این از فونت Times (14 پیکسل) استفاده می کند که خواندن آن در اندازه های کوچک سخت است" و "این متن با فونت 14 پیکسلی Times است. با همان مقدار فونت Verdana تنظیم شده است، بنابراین فونت های کوچک در بین دو فونت عادی می شوند.

با راه اندازی font-size-adjust در کروم، این ویژگی به Baseline تبدیل می شود که به تازگی در دسترس است. جزئیات را در CSS font-size-adjust اکنون در Baseline قرار دهید.

سند تصویر در تصویر: انتشار فعال سازی کاربر

Document Picture-in-Picture API اکنون فعال سازی های کاربر را بین پنجره تصویر در تصویر سند و بازکننده آن منتشر می کند.

از دمو انتشار فعال سازی با اشاره کاربر دیدن کنید و تغییرات رنگ پس زمینه صفحه را در صورت شناسایی فعال سازی کاربر مشاهده کنید. ژست کاربر در هر دو زمینه پخش می شود و پس زمینه هر دو پنجره را تغییر می دهد.

این باعث می‌شود که فعال‌سازی کاربر در یک پنجره تصویر در تصویر سند در داخل پنجره بازکننده آن و بالعکس قابل استفاده باشد. این تغییر استفاده از APIهای فعال‌سازی شده توسط کاربر را ارگونومیک‌تر می‌کند، زیرا اغلب کنترل‌کننده‌های رویداد در پنجره تصویر در تصویر سند در واقع در زمینه بازکننده اجرا می‌شوند، بنابراین زمینه بازکننده نیاز به دسترسی به ژست کاربر دارد.

برای هر عنصری، نه فقط <video> برای جزئیات بیشتر، از Picture-in-Picture دیدن کنید.

ظروف اسکرول قابل فوکوس روی صفحه کلید.

قابلیت فوکوس شدن ظروف اسکرول با صفحه کلید برای دسترسی بیشتر اسکرول‌ها و محتوای درون پیمایش‌ها برای همه کاربران مهم است.

از این پس اسکرول ها به طور پیش فرض قابل فوکوس برنامه ریزی خواهند بود. قبل از این تغییر، یک عنصر اسکرول تنها زمانی می‌توانست روی برگه متمرکز شود که شاخص برگه به ​​صراحت روی 0 یا بالاتر تنظیم شده بود.

توجه داشته باشید که این رفتار فقط در صورتی اتفاق می‌افتد که پیمایش فرزند قابل تمرکز نداشته باشد. به عنوان مثال، اگر پیمایش قبلاً دارای یک دکمه باشد، فوکوس برگه از پیمایش رد می‌شود و مستقیماً روی دکمه تمرکز می‌کند.

بهترین شیوه‌های دسترس‌پذیری توصیه می‌کنند که همه ویژگی‌ها باید با استفاده از صفحه‌کلید در دسترس باشند. اسکرول های قابل فوکوس با صفحه کلید به طور پیش فرض استفاده از پیمایش فوکوس متوالی را برای دسترسی به اسکرول ها برای کاربر آسان تر می کند.

توجه داشته باشید که این تغییر در طول زمان بسیار آهسته برای کاربران فعال می شود، بنابراین ما می توانیم مشکلات ناشی از تغییر را کنترل کنیم. بنابراین، برخی از کاربران ممکن است این ویژگی را تا نسخه 130 یا حتی بعد از آن فعال نبینند.

جزئیات بیشتر را در اسکرول های قابل فوکوس صفحه کلید مشاهده کنید

و بیشتر!

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

  • انتقال همزمان نمای سند در یک فریم اصلی و iframe با منبع یکسان اکنون در دسترس است.

  • متن جایگزین تولید شده از محتوای CSS اکنون از چندین آرگومان پشتیبانی می کند.

  • پانل عملکرد DevTools اکنون رویدادهای پیام WebSocket را ضبط می کند و آنها را در ردیابی عملکرد نشان می دهد.

یادداشت های انتشار کامل را بخوانید .

در ادامه مطلب

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

مشترک شوید

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

Yo soy Adriana Jara، و به محض اینکه Chrome 127 منتشر شد، من اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!

،

آدریانا خارا

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

  • font-size-adjust به شما کمک می کند خوانایی فونت های بازگشتی را بهبود ببخشید.
  • فعال‌سازی‌های کاربر اکنون بین اسناد تصویر در تصویر و بازکننده آنها منتشر می‌شوند.
  • اکنون محفظه‌های اسکرول به‌طور پیش‌فرض با صفحه‌کلید قابل فوکوس هستند.
  • و چیزهای بیشتری وجود دارد.

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

font-size-adjust CSS

خوانایی سایت شما ممکن است زمانی کاهش یابد که خانواده فونت انتخابی اول در دسترس نباشد و فونت بازگشتی آن دارای مقدار جنبه متفاوتی باشد.

تصویر زیر تفاوت فونت های Verdana و Times را با وجود یکسان بودن متن نشان می دهد.

خطوط متنی که عبارتند از: «این متن از فونت verdana (14 پیکسل) استفاده می‌کند که حروف کوچک نسبتاً بزرگی دارد و «این از فونت Times (14 پیکسل) استفاده می‌کند که خواندن آن در اندازه‌های کوچک سخت است.

اگر سایت شما به فونت Times برگردد خواندن آن بسیار سخت تر می شود.

ویژگی font-size-adjust CSS به شما کمک می کند اندازه فونت فونت های بازگشتی را تنظیم کنید تا مقدار جنبه (ارتفاع حروف کوچک تقسیم بر اندازه فونت) ثابت بماند و اطمینان حاصل شود که متن بدون توجه به فونت استفاده شده مشابه به نظر می رسد.

در تصویر زیر با استفاده از font-size-adjust خوانایی بین فونت های Verdana و Times حفظ می شود.

   font-size-adjust: 0.545;

خطوط متنی که عبارتند از "این متن از فونت verdana (14 پیکسل) استفاده می کند که حروف کوچک نسبتا بزرگ دارد"، "این از فونت Times (14 پیکسل) استفاده می کند که خواندن آن در اندازه های کوچک سخت است" و "این متن با فونت 14 پیکسلی Times است. با همان مقدار فونت Verdana تنظیم شده است، بنابراین فونت های کوچک در بین دو فونت عادی می شوند.

با راه اندازی font-size-adjust در کروم، این ویژگی به Baseline تبدیل می شود که به تازگی در دسترس است. جزئیات را در CSS font-size-adjust اکنون در Baseline قرار دهید.

سند تصویر در تصویر: انتشار فعال سازی کاربر

Document Picture-in-Picture API اکنون فعال سازی های کاربر را بین پنجره تصویر در تصویر سند و بازکننده آن منتشر می کند.

از دمو انتشار فعال سازی با اشاره کاربر دیدن کنید و تغییرات رنگ پس زمینه صفحه را در صورت شناسایی فعال سازی کاربر مشاهده کنید. ژست کاربر در هر دو زمینه پخش می شود و پس زمینه هر دو پنجره را تغییر می دهد.

این باعث می‌شود که فعال‌سازی کاربر در یک پنجره تصویر در تصویر سند در داخل پنجره بازکننده آن و بالعکس قابل استفاده باشد. این تغییر استفاده از APIهای فعال‌سازی شده توسط کاربر را ارگونومیک‌تر می‌کند، زیرا اغلب کنترل‌کننده‌های رویداد در پنجره تصویر در تصویر سند در واقع در زمینه بازکننده اجرا می‌شوند، بنابراین زمینه بازکننده نیاز به دسترسی به ژست کاربر دارد.

برای هر عنصری، نه فقط <video> برای جزئیات بیشتر، از Picture-in-Picture دیدن کنید.

ظروف اسکرول قابل فوکوس روی صفحه کلید.

قابلیت فوکوس شدن ظروف اسکرول با صفحه کلید برای دسترسی بیشتر اسکرول‌ها و محتوای درون پیمایش‌ها برای همه کاربران مهم است.

از این پس اسکرول ها به طور پیش فرض قابل فوکوس برنامه ریزی خواهند بود. قبل از این تغییر، یک عنصر اسکرول تنها زمانی می‌توانست روی برگه متمرکز شود که شاخص برگه به ​​صراحت روی 0 یا بالاتر تنظیم شده بود.

توجه داشته باشید که این رفتار فقط در صورتی اتفاق می‌افتد که پیمایش فرزند قابل تمرکز نداشته باشد. به عنوان مثال، اگر پیمایش قبلاً دارای یک دکمه باشد، فوکوس برگه از پیمایش رد می‌شود و مستقیماً روی دکمه تمرکز می‌کند.

بهترین شیوه‌های دسترس‌پذیری توصیه می‌کنند که همه ویژگی‌ها باید با استفاده از صفحه‌کلید در دسترس باشند. اسکرول های قابل فوکوس با صفحه کلید به طور پیش فرض استفاده از پیمایش فوکوس متوالی را برای دسترسی به اسکرول ها برای کاربر آسان تر می کند.

توجه داشته باشید که این تغییر در طول زمان بسیار آهسته برای کاربران فعال می شود، بنابراین ما می توانیم مشکلات ناشی از تغییر را کنترل کنیم. بنابراین، برخی از کاربران ممکن است این ویژگی را تا نسخه 130 یا حتی بعد از آن فعال نبینند.

جزئیات بیشتر را در اسکرول های قابل فوکوس صفحه کلید مشاهده کنید

و بیشتر!

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

  • انتقال همزمان نمای سند در یک فریم اصلی و iframe با منبع یکسان اکنون در دسترس است.

  • متن جایگزین تولید شده از محتوای CSS اکنون از چندین آرگومان پشتیبانی می کند.

  • پانل عملکرد DevTools اکنون رویدادهای پیام WebSocket را ضبط می کند و آنها را در ردیابی عملکرد نشان می دهد.

یادداشت های انتشار کامل را بخوانید .

در ادامه مطلب

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

مشترک شوید

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

Yo soy Adriana Jara، و به محض اینکه Chrome 127 منتشر شد، من اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!