جدید در کروم 116

آدریانا خارا

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

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

Document Picture-in-Picture API.

Document Picture-in-Picture API باز کردن یک پنجره همیشه در بالا را امکان پذیر می کند که می تواند با محتوای HTML دلخواه پر شود.

یک پنجره تصویر در تصویر در حال پخش ویدیوی تریلر Sintel.
یک پنجره Picture-in-Picture که با Document Picture-in-Picture API ( دمو ) ایجاد شده است.

پنجره Picture-in-Picture در Document Picture-in-Picture API شبیه یک پنجره خالی با همان منبع است که با استفاده از window.open() باز می شود، با برخی تفاوت ها:

  • پنجره Picture-in-Picture روی پنجره های دیگر شناور است.
  • پنجره Picture-in-Picture هرگز از پنجره باز شده بیشتر نمی ماند.
  • پنجره تصویر در تصویر قابل پیمایش نیست.
  • موقعیت پنجره Picture-in-Picture توسط وب سایت قابل تنظیم نیست.

HTML زیر یک پخش کننده ویدیوی سفارشی و یک عنصر دکمه را برای باز کردن پخش کننده ویدیو در یک پنجره تصویر در تصویر تنظیم می کند.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

جاوا اسکریپت زیر documentPictureInPicture.requestWindow() را زمانی که کاربر روی دکمه کلیک می کند تا یک پنجره خالی Picture-in-Picture باز شود، فراخوانی می کند. وعده بازگشتی با یک شی جاوا اسکریپت پنجره Picture-in-Picture حل می شود. پخش کننده ویدیو با استفاده از append() به آن پنجره منتقل می شود.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

برای جزئیات و مثال‌های بیشتر ، تصویر در تصویر را برای هر عنصری بررسی کنید.

DevTools بهبودهایی در اشکال‌زدایی شیت‌ها ندارد.

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

اول: درخت منابع > صفحه اکنون فقط شیوه نامه های با موفقیت مستقر و بارگذاری شده را نشان می دهد تا سردرگمی به حداقل برسد.

همچنین Sources > Editor اکنون نکات مربوط به خطای درون خطی را در کنار عبارات عدم موفقیت، @import ، url() و href زیر خط کشیده و نشان می دهد.

عبارات خط دار با نکات ابزار در پانل منابع.

  • کنسول ، علاوه بر پیوندهایی به درخواست های ناموفق، اکنون پیوندهایی را به خط دقیقی که به شیوه نامه ای که بارگیری نشده است ارجاع می دهد، ارائه می دهد.

کنسول پیوندهایی را به خطوط دقیق با عبارات مشکل دار ارائه می دهد.

پانل شبکه به طور مداوم ستون Initiator را با پیوندهایی به خط دقیقی که به شیوه نامه ای اشاره می کند که بارگیری نشده است، پر می کند.

پانل Issues همه مشکلات بارگیری شیوه نامه ها را فهرست می کند، از جمله URL های شکسته، درخواست های ناموفق، و دستورات @import که به درستی درج نشده اند.

پانل مسائل با پیوندهایی به منابع و درخواست‌ها.

برای همه جزئیات و اطلاعات بیشتر در مورد DevTools در Chrome 116، موارد جدید DevTools را بررسی کنید.

و بیشتر!

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

  • مسیر حرکت به نویسندگان این امکان را می دهد که هر شی گرافیکی را قرار داده و آن را در مسیری که توسط توسعه دهنده مشخص شده است متحرک کنند.
  • ویژگی‌های display و content-visibility اکنون در انیمیشن‌های فریم کلیدی پشتیبانی می‌شوند که به انیمیشن‌های خروجی اجازه می‌دهد صرفاً در CSS اضافه شوند.
  • اکنون می‌توان از واکشی API با خواننده‌های بافر خود بیاورید ، هزینه جمع‌آوری زباله و کپی‌ها را کاهش داد و پاسخگویی را برای کاربران بهبود بخشید.

در ادامه مطلب

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

مشترک شوید

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

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

،

آدریانا خارا

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

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

Document Picture-in-Picture API.

Document Picture-in-Picture API باز کردن یک پنجره همیشه در بالا را امکان پذیر می کند که می تواند با محتوای HTML دلخواه پر شود.

یک پنجره تصویر در تصویر در حال پخش ویدیوی تریلر Sintel.
یک پنجره Picture-in-Picture که با Document Picture-in-Picture API ( دمو ) ایجاد شده است.

پنجره Picture-in-Picture در Document Picture-in-Picture API شبیه یک پنجره خالی با همان منبع است که با استفاده از window.open() باز می شود، با برخی تفاوت ها:

  • پنجره Picture-in-Picture روی پنجره های دیگر شناور است.
  • پنجره Picture-in-Picture هرگز از پنجره باز شده بیشتر نمی ماند.
  • پنجره تصویر در تصویر قابل پیمایش نیست.
  • موقعیت پنجره Picture-in-Picture توسط وب سایت قابل تنظیم نیست.

HTML زیر یک پخش کننده ویدیوی سفارشی و یک عنصر دکمه را برای باز کردن پخش کننده ویدیو در یک پنجره تصویر در تصویر تنظیم می کند.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

جاوا اسکریپت زیر documentPictureInPicture.requestWindow() را زمانی که کاربر روی دکمه کلیک می کند تا یک پنجره خالی Picture-in-Picture باز شود، فراخوانی می کند. وعده بازگشتی با یک شی جاوا اسکریپت پنجره Picture-in-Picture حل می شود. پخش کننده ویدیو با استفاده از append() به آن پنجره منتقل می شود.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

برای جزئیات و مثال‌های بیشتر ، تصویر در تصویر را برای هر عنصری بررسی کنید.

DevTools بهبودهایی در اشکال‌زدایی شیت‌ها ندارد.

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

اول: درخت منابع > صفحه اکنون فقط شیوه نامه های با موفقیت مستقر و بارگذاری شده را نشان می دهد تا سردرگمی به حداقل برسد.

همچنین Sources > Editor اکنون نکات مربوط به خطای درون خطی را در کنار عبارات عدم موفقیت، @import ، url() و href زیر خط کشیده و نشان می دهد.

عبارات خط دار با نکات ابزار در پانل منابع.

  • کنسول ، علاوه بر پیوندهایی به درخواست های ناموفق، اکنون پیوندهایی را به خط دقیقی که به شیوه نامه ای که بارگیری نشده است ارجاع می دهد، ارائه می دهد.

کنسول پیوندهایی را به خطوط دقیق با عبارات مشکل دار ارائه می دهد.

پانل شبکه به طور مداوم ستون Initiator را با پیوندهایی به خط دقیقی که به شیوه نامه ای اشاره می کند که بارگیری نشده است، پر می کند.

پانل Issues همه مشکلات بارگیری شیوه نامه ها را فهرست می کند، از جمله URL های شکسته، درخواست های ناموفق، و دستورات @import که به درستی درج نشده اند.

پانل مسائل با پیوندهایی به منابع و درخواست‌ها.

برای همه جزئیات و اطلاعات بیشتر در مورد DevTools در Chrome 116، موارد جدید DevTools را بررسی کنید.

و بیشتر!

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

  • مسیر حرکت به نویسندگان این امکان را می دهد که هر شی گرافیکی را قرار داده و آن را در مسیری که توسط توسعه دهنده مشخص شده است متحرک کنند.
  • ویژگی‌های display و content-visibility اکنون در انیمیشن‌های فریم کلیدی پشتیبانی می‌شوند که به انیمیشن‌های خروجی اجازه می‌دهد صرفاً در CSS اضافه شوند.
  • اکنون می‌توان از واکشی API با خواننده‌های بافر خود بیاورید ، هزینه جمع‌آوری زباله و کپی‌ها را کاهش داد و پاسخگویی را برای کاربران بهبود بخشید.

در ادامه مطلب

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

مشترک شوید

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

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