このページは 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 などの CSS プロパティ用の画像をプログラマティックに生成するまたは border-image。

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

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

たとえば、URL に DOM 要素を追加する代わりに、さまざまな Material Styleed ボタンの場合は、Paint API を使用できます。

また、これは、サポートされていない CSS 機能をポリフィルする優れた方法でもあります。確認できます。

スマさんは素晴らしい投稿をしています。デモ説明をご覧ください。

Server Timing API

おそらく Navigation API と Resource Timing 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 つあるとします。あります。外側の 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 を適用すると、子はフレキシブルになります。適用されるのと同じルールに従って配置されます。できます。

Rachel Andrew の優れた投稿をご覧くださいディスプレイコンテンツを備えた消毒箱をご覧ください。

その他

これらはデベロッパー向け Chrome 65 の変更のほんの一例にすぎません。ほかにもたくさんあります。

HSL 座標と HSLA 座標、RGB 座標と RGBA 座標を指定する構文 color プロパティを一致 CSS カラー 4 仕様。
新しい機能ポリシーにより、 HTTP ヘッダーまたは iframe の allow 属性。

Chrome DevTools の新機能、をご覧ください。またプログレッシブウェブアプリ向けの新しい PWA ロードショーの動画シリーズ。次に、 YouTube チャンネル新しい動画が公開されるたびにメール通知が届きます。

Chrome 66 がリリースされたらすぐに対応してでは Chrome の新機能を紹介します。