جدید در کروم 121

آدریانا خارا

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

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

به روز رسانی های CSS

بیایید با به‌روزرسانی‌های CSS شروع کنیم:

ویژگی‌های scrollbar-color و scrollbar-width اکنون در دسترس هستند. با آنها می توانید نوارهای پیمایش را سفارشی کنید و رنگ و عرض آنها را - همانطور که احتمالاً حدس زده اید - تغییر دهید.

ویژگی font-palette به شما امکان می دهد یک پالت خاص را برای ارائه یک فونت رنگی انتخاب کنید. این ویژگی اکنون از انیمیشن پشتیبانی می کند، بنابراین جابجایی بین پالت ها تبدیل به یک انتقال صاف بین دو پالت انتخاب شده می شود.

شبه عناصر ::spelling-error و ::grammar-error به شما امکان می دهند رنگ ها را برای اشتباهات املایی و دستوری سفارشی کنید، کلمات غلط املایی را با رنگ های پس زمینه یا تزئینات دیگر برجسته کنید و املای سفارشی را با ظاهری یکپارچه تر اجرا کنید.

پوشش CSS برای SVG بهبود یافته است، این ادامه پشتیبانی بهبود یافته ماسک CSS در کروم 120 است، و پشتیبانی ماسک جدیدی را به SVG اضافه می کند (چند ماسک، و همچنین mask-mode ، mask-composite ، mask-position ، و mask-repeat ). علاوه بر این، ماسک های SVG راه دور (به عنوان مثال، mask: url(masks.svg#star) ) اکنون پشتیبانی می شوند.

تصحیح: نسخه قبلی این مقاله به اضافه کردن شرایط پشتیبانی برای supports() به @import اشاره کرد که اینطور نبود. این تغییر در کروم 122 گنجانده شده است.

به‌روزرسانی‌های API قوانین گمانه‌زنی

سایت‌ها می‌توانند از Speculation Rules API استفاده کنند تا به‌صورت برنامه‌ریزی به Chrome بگویند کدام صفحات را از قبل اجرا کند و با کاهش زمان پیمایش صفحه، تجربه کاربری بهتری ایجاد کند.

اکنون API شامل پشتیبانی از قوانین سند است: آنها یک فرمت برای نحو قوانین حدس و گمان هستند که به مرورگر اجازه می دهد لیست URL ها را برای بارگذاری گمانه زنی از عناصر یک صفحه دریافت کند. قوانین سند ممکن است شامل معیارهایی باشد که کدام یک از این پیوندها را می توان استفاده کرد. این، همراه با یک فیلد جدید «اشتیاق» به شما امکان می‌دهد به‌طور خودکار پیوندها را در صفحات بلافاصله، با شناور یا با ماوس به پایین واکشی یا از قبل اجرا کنید.

در اینجا یک مثال از قوانین سند آورده شده است:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

یک تغییر جداگانه اجازه می دهد تا قوانین حدس و گمان را با استفاده از هدر پاسخ Speculation-Rules HTTP مشخص کنید. هدر جایگزینی برای استفاده از عناصر <script> درون خطی است. مقدار این هدر باید یک URL باشد که به یک منبع متنی با نوع MIME "application/speculationrules+json" اشاره می کند. قوانین منبع به مجموعه قوانین سند اضافه خواهد شد.

همچنین، اشاره No-Vary-Search واکشی های پیش فرضی را قادر می سازد حتی اگر پارامترهای جستجوی URL تغییر کنند، مطابقت داشته باشند. سربرگ پاسخ HTTP No-Vary-Search اعلام می‌کند که برخی یا همه بخش‌های جستجوی URL را می‌توان برای اهداف تطبیق نادیده گرفت. می تواند اعلام کند که ترتیب کلیدهای پارامتر پرس و جو نباید از تطابق ها جلوگیری کند، پارامترهای پرس و جو خاص نباید از تطابق جلوگیری کنند، یا اینکه فقط برخی از پارامترهای پرس و جو شناخته شده باید باعث عدم تطابق شوند.

برای اطلاعات بیشتر در مورد این تغییرات، از Improvements to Speculation Rules API دیدن کنید.

آزمایش اولیه Element Capture API

Element Capture API به صورت آزمایشی اصلی در دسترس است. این API به شما امکان می دهد یک عنصر HTML خاص را ضبط و ضبط کنید. ضبط کل برگه را به یک زیردرخت DOM خاص تبدیل می کند و فقط فرزندان مستقیم عنصر هدف را می گیرد. به عبارت دیگر، هم محتوای مسدود و هم محتوای مسدود را برش داده و حذف می کند.

نمونه ای از مواردی که Element Capture API مفید است، یک برنامه ویدئو کنفرانس است که به شما امکان می دهد برنامه های شخص ثالث را در iframe جاسازی کنید. در این سناریو، ممکن است بخواهید آن iframe را به عنوان یک ویدیو ضبط کنید و آن را به شرکت کنندگان از راه دور منتقل کنید.

اسکرین شات یک تماس ویدئو کنفرانس در کروم.
الاد از یک برنامه شخص ثالث در تماس ویدئو کنفرانس با فرانسوا استفاده می کند.

توجه داشته باشید که می‌توانید از Region Capture برای انجام این کار استفاده کنید، اما در این صورت اگر برخی از محتواها، مانند یک لیست کشویی، بالای محتوای انتخاب شده کشیده شود، آن کشویی بخشی از ضبط خواهد بود.

اسکرین شات از یک لیست کشویی گرفته شده است.
لیست کشویی Elad در بالای محتوای دریافت شده توسط فرانسوا نمایش داده می شود.

Element Capture API این مشکل را حل می‌کند و به شما اجازه می‌دهد عنصری را که می‌خواهید به اشتراک بگذارید، هدف قرار دهید.

اسکرین شات عنصر هدف بدون لیست کشویی در معرض دید.
فرانسوا لیست کشویی Elad را نمی بیند.

پرداخت یک جریان ویدیویی از هر عنصری برای نمونه کد بگیرید و برای آزمایش اولیه ElementCapture ثبت نام کنید

و بیشتر!

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

  • متدهای resizeBy() و resizeTo() که بخشی از Document Picture-in-Picture API هستند، اکنون به یک اشاره کاربر نیاز دارند.

  • شما می توانید انتخابگر گزینه یک عنصر <select> را با روش showPicker() از HTMLSelectElement به صورت برنامه نویسی باز کنید.

  • scope_extensions ، در مرحله آزمایشی اصلی است، در صورتی که بین مبدأ اصلی یک برنامه وب و مبداهای مرتبط با آن توافق وجود داشته باشد، امکان گسترش رفتارهای یک برنامه وب را برای گنجاندن مبداهای دیگر فراهم می کند.

در ادامه مطلب

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

مشترک شوید

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

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