このページは Cloud Translation API によって翻訳されました。

Chrome 65 の新機能

Pete LePage

CSS Paint API を使用すると、プログラムで画像を生成できます。
Server Timing API を使用すると、ウェブサーバーは HTTP ヘッダー経由でパフォーマンスのタイミング情報を提供できます。
新しい CSS の display: contents プロパティを使用すると、ボックスがなくなります。

他にもたくさんの機能があります。

Pete LePage と申します。Chrome 65 のデベロッパー向け新機能を見てみましょう。

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

CSS Paint API

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

画像を参照する代わりに、新しいペイント関数を使用して、キャンバス要素と同じように画像を描画できます。

<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 で置き換わり、実質的に消えます。たとえば、2 つの div があり、1 つはもう 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 の変更のほんの一部であり、もちろん他にも多くの変更があります。

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

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

Chrome 66 がリリースされたらすぐにお知らせします