جدید در کروم 116

Adriana Jara

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

• از Document Picture in Picture API برای افزایش بهره وری کاربر استفاده کنید.
• اکنون اشکال زدایی شیوه نامه های گمشده در DevTools آسان تر است
• و چیزهای بیشتری وجود دارد.

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

Document Picture-in-Picture API.

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

پنجره 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 پیوندهای زیر را بررسی کنید.

• موارد جدید در Chrome DevTools (116)
• لغو و حذف Chrome 116
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 116
• فهرست تغییر مخزن منبع Chromium
• تقویم انتشار کروم

مشترک شوید

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

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

Adriana Jara

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

• از Document Picture in Picture API برای افزایش بهره وری کاربر استفاده کنید.
• اکنون اشکال زدایی شیوه نامه های گمشده در DevTools آسان تر است
• و چیزهای بیشتری وجود دارد.

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

Document Picture-in-Picture API.

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

پنجره 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 پیوندهای زیر را بررسی کنید.

• موارد جدید در Chrome DevTools (116)
• لغو و حذف Chrome 116
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 116
• فهرست تغییر مخزن منبع Chromium
• تقویم انتشار کروم

مشترک شوید

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

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