جدید در کروم 64

پیت لی پیج

  • پشتیبانی از ResizeObservers ، زمانی که مستطیل محتوای یک عنصر اندازه خود را تغییر داد به شما اطلاع می‌دهد.
  • ماژول ها اکنون می توانند با import.meta به ابرداده های میزبان خاص دسترسی داشته باشند.
  • مسدود کننده پاپ آپ قوی می شود.
  • window.alert() دیگر فوکوس را تغییر نمی دهد.

و خیلی چیزهای دیگر وجود دارد!

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

لیست کامل تغییرات را می خواهید؟ فهرست تغییرات مخزن منبع Chromium را بررسی کنید.

ResizeObserver

ردیابی زمانی که اندازه یک عنصر تغییر می کند می تواند کمی دردناک باشد. به احتمال زیاد، شنونده‌ای را به رویداد resize سند متصل می‌کنید، سپس getBoundingClientRect یا getComputedStyle را صدا می‌زنید. اما، هر دوی این موارد می‌توانند باعث به هم خوردن طرح شوند.

و اگر اندازه پنجره مرورگر تغییر نمی کرد، اما یک عنصر جدید به سند اضافه می شد، چه؟ یا display: none به یک عنصر؟ هر دوی آنها می توانند اندازه عناصر دیگر را در صفحه تغییر دهند.

ResizeObserver هر زمان که اندازه یک عنصر تغییر کند به شما اطلاع می‌دهد و ارتفاع و عرض جدید عنصر را ارائه می‌کند و خطر شکست طرح را کاهش می‌دهد.

مانند سایر Observer ها، استفاده از آن بسیار ساده است، یک شی ResizeObserver ایجاد کنید و یک callback به سازنده ارسال کنید. به فراخوانی آرایه‌ای از ResizeOberverEntries داده می‌شود - یک ورودی برای هر عنصر مشاهده شده - که شامل ابعاد جدید برای عنصر است.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

ResizeObserver بررسی کنید: برای جزئیات بیشتر و نمونه‌های دنیای واقعی، مانند document.onresize برای Elements است .

من از تب زیر متنفرم. شما آنها را می شناسید، زمانی است که یک صفحه یک پاپ آپ را به مقصدی باز می کند و صفحه را هدایت می کند. معمولاً یکی از آنها یک تبلیغ یا چیزی است که شما نمی خواستید.

از Chrome 64، این نوع پیمایش‌ها مسدود می‌شوند و Chrome مقداری رابط کاربری بومی را به کاربر نشان می‌دهد - به آنها اجازه می‌دهد در صورت تمایل، تغییر مسیر را دنبال کنند.

import.meta

هنگام نوشتن ماژول های جاوا اسکریپت، اغلب می خواهید به ابرداده های اختصاصی میزبان در مورد ماژول فعلی دسترسی داشته باشید. Chrome 64 اکنون از ویژگی import.meta در ماژول‌ها پشتیبانی می‌کند و URL مربوط به ماژول را به‌عنوان import.meta.url نشان می‌دهد.

زمانی که می‌خواهید منابع مربوط به فایل ماژول را بر خلاف سند HTML فعلی حل کنید، واقعاً مفید است.

و بیشتر!

اینها تنها تعدادی از تغییرات کروم 64 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.

  • کروم اکنون از عکس‌برداری‌های نام‌گذاری شده پشتیبانی می‌کند و ویژگی Unicode در عبارات منظم فرار می‌کند .
  • مقدار preload پیش‌فرض برای عناصر <audio> و <video> اکنون metadata است. این کار کروم را با سایر مرورگرها هماهنگ می‌کند و تنها با بارگیری فراداده و نه خود رسانه، به کاهش پهنای باند و استفاده از منابع کمک می‌کند.
  • اکنون می توانید از Request.prototype.cache برای مشاهده حالت کش یک Request و تعیین اینکه آیا درخواست درخواست بارگذاری مجدد است استفاده کنید.
  • با استفاده از Focus Management API، اکنون می توانید یک عنصر را بدون پیمایش به آن با ویژگی preventScroll فوکوس کنید.

window.alert()

اوه، و یکی دیگر! اگرچه این واقعاً یک "ویژگی توسعه دهنده" نیست، اما من را خوشحال می کند. window.alert() دیگر تب پس‌زمینه را به پیش‌زمینه نمی‌آورد! در عوض، زمانی که کاربر به آن برگه برمی‌گردد، هشدار نشان داده می‌شود.

دیگر خبری از تعویض تصادفی برگه نیست زیرا چیزی یک window.alert روی من شلیک کرد. من به تقویم قدیمی گوگل شما نگاه می کنم.

حتماً در کانال یوتیوب ما مشترک شوید ، و هر زمان که ویدیوی جدیدی را راه اندازی کنیم، یک اعلان ایمیل دریافت خواهید کرد.

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