Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Chrome 64 #新

Powered by Google Translate

  • ResizeObserversサポートは、要素のコンテンツ長方形のサイズが変更されたときに通知します。 *モジュールはimport.metaホスト固有のメタデータにアクセスできるようになりimport.meta
  • pop-up blockerが強くなります。
  • window.alert()はフォーカスを変更しなくなりました。

そして、 plenty moreます!

私はPete LePageです。 Chrome 64のデベロッパー向けに新しくなった機能を紹介しましょう!

ResizeObserver

要素のサイズが変更されたときのトラッキングは、少し苦しいことがあります。ほとんどの場合、リスナーをドキュメントのresizeイベントにresize 、次にgetBoundingClientRectまたはgetComputedStyle呼び出します。しかし、それらの両方がレイアウトスラッシングを引き起こす可能性があります。

ブラウザウィンドウのサイズが変更されず、ドキュメントに新しい要素が追加された場合はどうなりますか?または、 display: noneを要素に追加しましたか?どちらもページ内の他の要素のサイズを変更することができます。

ResizeObserver 、要素のサイズが変更されたときに通知し、要素の新しい高さと幅を提供し、レイアウトのスラッシングのリスクを低減します。

他のオブザーバと同様に、これを使用するのは非常に簡単ですResizeObserverオブジェクトを作成し、コンストラクタにコールバックを渡します。コールバックには、 ResizeOberverEntries配列が与えられますResizeOberverEntriesは、要素の新しいディメンションを含む、観測された要素ごとに1つのエントリです。

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: It's like document.onresize for Elementsをご覧ください。

私はタブアンダーが嫌いです。あなたはそれらを知っています、それはあるページがある目的地へのポップアップを開き、そのページをナビゲートする時です。通常、そのうちの1つは、あなたが欲しくない広告か何かです。

Chrome 64以降、これらのタイプのナビゲートはブロックされ、ChromeはユーザーにいくつかのネイティブUIを表示し、必要に応じてリダイレクトを行うことができます。

import.meta

JavaScriptモジュールを書くときには、現在のモジュールに関するホスト固有のメタデータにアクセスしたいことがよくあります。 Chrome 64では、モジュール内のimport.metaプロパティがサポートされ、モジュールのURLがimport.meta.urlとして公開されるようにimport.meta.url

これは、現在のHTMLドキュメントではなく、モジュールファイルを基準にしてリソースを解決したい場合に非常に便利です。

そしてさらに!

これらは、Chrome 64の開発者向けの変更のほんの一部ですが、もちろん、それ以上のものがあります。

  • Chromeは正規表現でnamed capturesUnicode property escapesをサポートするnamed capturesなりUnicode property escapesた。
  • <audio><video>要素のデフォルトのpreload値は<audio>なりmetadata 。これにより、Chromeは他のブラウザと連動し、メディア自体ではなくメタデータを読み込むだけで、帯域幅やリソースの使用量を削減できます。 *ここで使用することができますRequest.prototype.cacheのキャッシュモード表示しRequest 、要求が再ロード要求であるかどうかを判断します。
  • Focus Management APIを使用すると、 preventScroll属性でスクロールせずに要素にフォーカスを設定できるようになりました。

window.alert()

ああ、もう1つ!これは実際には「開発者機能」ではありませんが、それは私を幸せにします。 window.alert()はフォアグラウンドに背景タブを表示しなくなりました!代わりに、ユーザーがそのタブに戻るときにアラートが表示されます。

何かが私にwindow.alertを発したので、ランダムなタブの切り替えはもうありません。私は古いGoogleカレンダーを見ています。

subscribeYouTube channelに必ずRSS feedしてください。新しいビデオを起動するたびに電子メール通知をRSS feedか、 RSS feedをフィードリーダーに追加します。

私はPete LePageです。Chrome 65がリリースされるとすぐに、Chromeの新機能について説明します。

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!