Chrome 65 の新機能

他にもいろいろあります。

ピート ルページです。では、Chrome 65 のデベロッパー向けの新機能を詳しく見ていきましょう。

変更内容の完全なリストを確認するには、Chromium ソース リポジトリの変更リストを確認します。

CSS ペイント API

CSS Paint API を使用すると、background-imageborder-image などの CSS プロパティの画像をプログラムで生成できます。

画像を参照する代わりに、新しい paint 関数を使用して画像を描画できます。これはキャンバス要素に似ています。

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

たとえば、DOM 要素を追加してマテリアル スタイルのボタンに波紋効果を作成する代わりに、Paint API を使用できます。

これは、ブラウザでまだサポートされていない CSS 機能をポリフィルする強力な方法でもあります。

Surma の説明には、いくつかのデモが掲載された素晴らしい投稿があります。

Server Timing API

ナビゲーション API とリソース速度 API を使用して、実際のユーザーによるサイトのパフォーマンスをトラッキングしてください。これまで、サーバーがパフォーマンスのタイミングを報告する簡単な方法はありませんでした。

新しい Server Timing API を使用すると、サーバーからブラウザにタイミング情報を渡すことができます。これにより、全体的なパフォーマンスをより正確に把握できます。

レスポンスに Server-Timing ヘッダーを追加すると、データベースの読み取り時間、スタートアップ時間など、重要な指標を追跡できます。

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

これらは Chrome DevTools に表示されます。また、レスポンス ヘッダーから抽出して、他のパフォーマンス分析に保存することもできます。


display: contents

新しい CSS display: contents プロパティは非常に使いやすくなっています。

コンテナ要素に追加すると、子はすべて DOM 内で置き換わり、基本的に表示されなくなります。div が 2 つあり、その中に 1 つがあるとします。外側の div は赤の枠線とグレーの背景で、幅を 200 ピクセルに設定しています。内側の div は青色の枠線と明るい青の背景です。

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

デフォルトでは、内部 div は外部 div に含まれています。

私は <div> の内側です。

外側の div に display: contents を追加すると、外側の div が消え、その制約が内側の div に適用されなくなります。内部 div の幅は 100% になりました。

DevTools を使用して DOM を調べ、外側の div がまだ存在していることを確認します。

これが役立つケースは多数ありますが、最も一般的なケースは Flexbox です。Flexbox では、Flex コンテナの直接の子のみが Flex アイテムになります。

ただし、display: contents を子に適用すると、その子は Flex アイテムになり、親に適用されたのと同じルールを使用して配置されます。

詳細とその他の例については、Rachel Andrew の優れた投稿「ディスプレイ コンテンツを含む箱を消す」をご覧ください。

など多数

もちろん、これらはデベロッパーにとっての Chrome 65 の変更のごく一部であり、他にも多くの変更があります。

  • 色プロパティの HSLHSLA、および RGBRGBA の座標を指定する構文が、CSS の Color 4 仕様一致するようになりました。
  • 新しい機能ポリシーを使用すると、HTTP ヘッダーまたは iframe allow 属性を使用して同期 XHR を制御できます。

Chrome 65 の DevTools の新機能については、Chrome DevTools の新機能をご確認ください。プログレッシブ ウェブアプリに関心をお持ちの場合は、新しい PWA Roadshow 動画シリーズをご覧ください。次に、YouTube の YouTube チャンネルの [チャンネル登録] ボタンをクリックすると、新しい動画が公開されるたびにメール通知が届きます。

Chrome 66 のリリース時に Chrome の新機能をお知らせします