جدید در کروم 110

آدریانا خارا

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

  • با کلاس جدید :picture-in-picture شبه سبک سفارشی را به عناصر تصویر در تصویر خود اضافه کنید.
  • رفتار راه‌اندازی برنامه وب خود را با launch_handler در مانیفست خود تنظیم کنید.
  • از ویژگی credentialless در iframes برای جاسازی محتوای شخص ثالثی که خط‌مشی جاسازی با مبدا متقابل تنظیم نمی‌کند استفاده کنید.
  • و چیزهای بیشتری وجود دارد.

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

:کلاس شبه تصویر در تصویر

وب‌سایت‌ها با استفاده از Picture-in-Picture API می‌توانند یک پنجره ویدیویی شناور، همیشه در بالا ایجاد کنند تا کاربران همچنان به مصرف رسانه‌ها ادامه دهند، در حالی که با محتوای دیگر تعامل دارند.

اکنون با شبه کلاس :picture-in-picture css می توانید برای بهبود تجربه، استایل هایی را به عناصر اضافه کنید.

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

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

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

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

عضو مانیفست launch_handler.

Launch Handler API به شما امکان می دهد نحوه راه اندازی برنامه وب خود را کنترل کنید، به عنوان مثال، آیا از یک پنجره موجود یا جدید استفاده می کند، و اینکه آیا پنجره انتخاب شده به URL راه اندازی هدایت می شود.

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

اکنون، با استفاده از برنامه های وب اعضای مانیفست launch_handler می توانید رفتار راه اندازی خود را سفارشی کنید.

به عنوان مثال، قطعه زیر باعث می‌شود که تمام راه‌اندازی‌های این برنامه وب به‌جای راه‌اندازی همیشه یک پنجره جدید، بر روی یک پنجره برنامه موجود تمرکز کرده و به آن (در صورت وجود) حرکت کنند.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

آی فریم های credentialless

یکی از بزرگ‌ترین چالش‌های جداسازی مبدا متقاطع این است که همه iframe‌های متقاطع باید از COEP و CORP استفاده کنند. یک iframe بدون آن هدرها توسط مرورگر بارگیری نمی شود.

ویژگی credentialless به جاسازی iframe های شخص ثالثی که این هدرها را تنظیم نمی کنند، کمک می کند.

با credentialless ، iframe از یک زمینه متفاوت و خالی بارگیری می شود. به ویژه، بدون کوکی بارگیری می شود. iframe با یک ظرف کوکی خالی شروع می شود.

به همین ترتیب، API های ذخیره سازی مانند LocalStorage، CacheStorage و غیره، داده ها را در پارتیشن زودگذر جدید بارگیری و ذخیره می کنند. پس از بارگیری سند سطح بالا، تمام این فضای ذخیره سازی پاک می شود. این اجازه می دهد تا محدودیت COEP را حذف کنید.

اطلاعات بیشتری را در این مقاله برای استفاده ایمن credentialless برای بارگیری محتوای شخص ثالث در iframes خود بیابید.

و بیشتر!

و البته موارد دیگر بسیار زیاد است.

Web SQL اکنون در زمینه های غیر ایمن حذف شده است.

خصوصیت initial-letter CSS راهی برای تنظیم تعداد خطوطی که یک حرف ابتدایی باید در خطوط متن زیر قرار گیرد، ارائه می دهد.

FileSystemHandle اکنون شامل یک متد remove() است.

در ادامه مطلب

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

مشترک شوید

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

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