- CSS Paint API を使用すると、プログラムで画像を生成できます。
- Server Timing API により、ウェブサーバーは HTTP ヘッダーを介してパフォーマンスの計時情報を提供できます。
- 新しい CSS の
display: contents
プロパティを使用すると、ボックスを消すことができます。
他にもいろいろあります。
ピート ルページです。では、Chrome 65 のデベロッパー向けの新機能を詳しく見ていきましょう。
変更内容の完全なリストを確認するには、Chromium ソース リポジトリの変更リストを確認します。
CSS ペイント API
CSS Paint API を使用すると、background-image
や border-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 に display: contents
を追加すると、外側の div
が消え、その制約が内側の div
に適用されなくなります。内部 div
の幅は 100% になりました。
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 Roadshow 動画シリーズをご覧ください。次に、YouTube の YouTube チャンネルの [チャンネル登録] ボタンをクリックすると、新しい動画が公開されるたびにメール通知が届きます。
Chrome 66 のリリース時に Chrome の新機能をお知らせします