جدید در کروم 100

پیت لی پیج

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

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

کروم 100

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

لوگوی کروم و فایرفاکس

کروم 100 اکنون در دسترس است و فایرفاکس 100 به زودی عرضه می شود. این شماره‌های نسخه سه رقمی پتانسیل ایجاد مشکلاتی را در سایت‌هایی دارند که به نوعی به شناسایی نسخه مرورگر متکی هستند. طی چند ماه گذشته، تیم فایرفاکس و تیم کروم آزمایش‌هایی را انجام دادند که در آن مرورگر نسخه شماره 100 را گزارش کرد، اگرچه اینطور نبود.

این منجر به چند مشکل گزارش شد که بسیاری از آنها قبلاً رفع شده اند. اما، ما همچنان به کمک شما نیاز داریم.

  • اگر یک نگهدار وب سایت هستید، وب سایت خود را با کروم و فایرفاکس 100 تست کنید.
  • اگر یک کتابخانه تجزیه کاربر-عامل ایجاد می‌کنید، آزمایش‌هایی را برای تجزیه نسخه‌های بزرگتر و مساوی 100 اضافه کنید.

به زودی Chrome و Firefox را بررسی کنید تا برای جزئیات بیشتر به نسخه اصلی 100 در web.dev برسید.

100 لحظه جالب وب

تصویر تبلیغاتی 100 لحظه جالب وب

تماشای رشد وب و دیدن همه چیزهای شگفت انگیزی که در 100 نسخه اخیر Chrome ساخته اید، هیجان انگیز است. ما فکر می‌کردیم که سرگرم‌کننده است که در خط حافظه قدم بزنیم و #100 CoolWebMoments را که در 14 سال گذشته اتفاق افتاده است جشن بگیریم.

به ما بگویید کدام لحظات را بیشتر دوست داشتید. اگر چیزی را از دست داده‌ایم (و مطمئن هستیم که داریم)، ​​با استفاده از #100CoolWebMoments برای ما توییت کنید Chromiumdev@ . لذت ببرید!

رشته User-Agent کاهش یافته است

در مورد عامل کاربر، Chrome 100 آخرین نسخه ای خواهد بود که به طور پیش فرض از یک رشته User-Agent کاهش نیافته پشتیبانی می کند. این بخشی از استراتژی جایگزینی استفاده از رشته User-Agent با User-Agent Client Hints API است.

از Chrome 101، عامل کاربر به تدریج کاهش می یابد.

برای کسب اطلاعات بیشتر درباره مواردی که حذف می‌شوند و چه زمانی، نسخه آزمایشی و تاریخ‌های اولیه کاهش نماینده کاربر را در [وبلاگ Chromium][crblog] بررسی کنید.

API قرار دادن پنجره چند صفحه‌ای

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

Multi-Screen Window Placement API امکان شمارش نمایشگرهای متصل به دستگاه کاربر و قرار دادن پنجره ها بر روی صفحه نمایش های خاص را فراهم می کند.

با window.screen.isExtended می‌توانید به سرعت بررسی کنید که آیا بیش از یک صفحه به دستگاه متصل است یا خیر.

const isExtended = window.screen.isExtended;
// returns true/false

اما، عملکرد کلیدی در window.getScreenDetails() است که جزئیات مربوط به نمایشگرهای پیوست شده را ارائه می دهد.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

به عنوان مثال، می توانید صفحه اصلی را تعیین کنید، سپس از requestFullscreen() برای ایجاد یک عنصر تمام صفحه در آن نمایشگر استفاده کنید.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

و راهی برای گوش دادن به تغییرات فراهم می کند، به عنوان مثال اگر صفحه نمایش جدیدی به برق وصل یا حذف شود، وضوح تغییر می کند و غیره.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

برای غواصی عمیق‌تر، مقاله به‌روزرسانی‌شده تام ، مدیریت چندین نمایشگر با API قرار دادن پنجره چند صفحه‌ای را در web.dev ببینید.

و بیشتر!

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

یک متد forget() جدید برای دستگاه‌های HID وجود دارد که به شما امکان می‌دهد مجوز یک دستگاه HID را که توسط یک کاربر اعطا شده است لغو کنید.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

و برای WebNFC، متد makeReadOnly() به شما امکان می دهد تگ های NFC را به صورت دائمی فقط خواندنی بسازید.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

در ادامه مطلب

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

مشترک شوید

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

من Pete LePage هستم، و به محض اینکه Chrome 101 منتشر شد، اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!