Chrome 49 ベータ: CSS カスタム プロパティ、Service Worker を使用したバックグラウンド同期、および ES2015 の新機能_html/css_WEB-ITnose

英語原文: Chrome 49 Beta: CSS カスタム プロパティ、サービス ワーカーとのバックグラウンド同期、および ES2015 の新機能

著者: Josh Karlin、Syncing Samurai

特に断りのない限り、以下に説明する更新は最新の Chrome に適用されますベータ版 (Android、Chrome OS、Linux、Mac、Windows)。

CSS カスタム プロパティ

最近の Web サイトでは、CSS ファイルに繰り返し値が含まれることがよくあります。たとえば、ページ全体の配色からいくつかの色を再利用しています。このデータは 1 つ以上の CSS ファイルにまたがっているため、変更は面倒でエラーが発生しやすくなります。 この状況を改善するために、Chrome は CSS カスタム プロパティをサポートするようになり、開発者は外部フレームワークを使用せずに CSS でプロパティ変数を定義できるようになりました。開発者は、var() 関数を使用して、ドキュメント内の任意の場所でこれらのカスタム プロパティを参照できます。

カスタム プロパティを変更すると、Web サイト内の複数のコンポーネントが更新される可能性があります

CSS カスタム プロパティはシャドウ ルート間で継承することもできるため、Web コンポーネントはコンポーネントの内容を知らなくても使用できる「スタイル API」を提供できます。コンポーネントとテーマを設定します。 Polymer ライブラリは、このプラットフォーム機能を利用してカスタム コンポーネントを簡素化します。

バックグラウンド同期に Service Worker を使用する

以前は、更新がネットワーク経由で送信される前にユーザーがサイトに留まらなかった場合、サイトのローカルの変更が失われるか、同期が失われる可能性がありました。たとえば、ユーザーが「送信」をクリックしてすぐに移動すると、電子メール Web クライアントは進行中のメッセージを失う可能性があります。新しいバックグラウンド同期 API は、次回デバイスがネットワークに接続したときに (Web サイトが開いていない場合でも) Service Worker によってユーザーのローカル変更の 1 回限りの同期を実行することにより、ネットワークの信頼性を向上させます。

ECMAScript 2015 サポートの改善

ES2015 仕様 (ES6) は JavaScript のメジャーアップデートであり、開発者はより明確で、より強力で、よりメモリ効率の高いアプリケーション ロジックを作成できます。 Chrome V8 エンジンの最新バージョンは、JavaScript ES2015 機能の 91% をサポートしています。開発者は、配列やオブジェクトからデータを抽出するとき、または関数パラメーターのデフォルト値を設定するときに、分割パラメーターとデフォルト パラメーターを使用して定型コードを回避できるようになりました。 プロキシ オブジェクトと Reflect API は、プロパティの検索や割り当てなど、以前は非表示だったオブジェクトの動作をカスタマイズできます。 Chrome の最新バージョンでは、クラスなどのブロックレベルの構造を構築して、厳密モード以外でも利用できるようにすることもできます。

Keygen と application/x-x509-user-cert

要素は、HTML フォームの一部であるキー ペアを生成するために使用されます。これはユーザーのセキュリティを強化するために使用できますが、MIME タイプ application/x-x509-user-cert 経由で送信される ユーザー証明書が悪用されて、ユーザーの安全な通信が中断され、デバイスの操作が妨害される可能性もあります。またはユーザーの同意なしにユーザーを追跡すること。今後、 はデフォルトで空の文字列を返し、MIME タイプ application/x-x509-user-cert 経由で送信されたユーザー証明書を自動的にダウンロードおよびインストールしなくなります。

このリリースのその他の機能

• ユーザーの同意があれば、Web サイトはプラグインに依存せずに、新しい MediaRecorder API を使用してオーディオとビデオを記録できます。

• 開発者は CSS font-display を使用してフォントの読み込み方法を制御し、ページの読み込み速度を向上できるようになりました。

• Web サイトは、FetchEvent.clientID プロパティを使用して、どの Service Worker クライアントがフェッチ リクエストを開始したかを確認し、専用の応答を返すことができるようになりました。

• マウス ホイールなどの不連続なスクロール デバイスの場合、Chrome はスクロールをアニメーション化し、よりスムーズなユーザー エクスペリエンスを実現します。

• Chrome はセキュア Cookie をより厳密に保護し、開発者が Cookie プレフィックスを使用してセキュア Cookie を識別できるようになりました。

• Web サイトは、disableRemotePlayback 属性 (リモート再生 API の一部) を使用してメディアのリモート再生を防止できるようになりました。

• Event.timeStamp は DOMTimeStamp の代わりに DOMHighResTimeStamp を使用するようになり、高精度のスクロール遅延とポインター速度の測定が可能になりました。

• Promise の拒否処理を、UnhandledRejection および RejectionHandled イベントを使用して追跡できるようになりました。

• 開発者は、URLSearchParams を使用して URL の GET パラメータをより簡単に操作できるようになりました。

• WebAudio API は、DecodeAudioData の Promise に加えて、IIR フィルター、OfflineAudioContext.suspend() およびresume() をサポートするようになりました。

• WindowClient.navigate() を使用すると、Service Worker は制御されているウィンドウを新しい URL に見つけることができます。

• Web サイトは、Save-Data ヘッダー フィールドを選択することで、ユーザーがデータ使用量の削減を要求したかどうかを検出し、より迅速かつ簡単に応答できます。

小さな変更

• Chrome のコンテンツ セキュリティ ポリシーでは、「script-src http:」が HTTP および HTTPS と一致することを許可するようになり、開発者が安全なリソースを誤って拒否することを防ぎます。

• Fetch API の Request.mode 列挙は、仕様への準拠を強化するためにナビゲーション モードをサポートするようになりました。

• 開発者は、属性セレクターを照合するときに大文字と小文字を無視することを選択できるようになりました。

• 現在、開発者はリストにないポップアップ ウィンドウを作成でき、ページはこのウィンドウを開くために「rel=noopener」を使用します。

• addEventListener() と RemoveEventListener() は最初の 2 つの引数を必要とし、辞書構文を使用して「キャプチャ」オプションを指定するようになりました。これにより、仕様への準拠が向上し、柔軟性が向上します。

• Chromium は、TLS の標準 ChaCha-Poly1305 暗号スイートをサポートするようになりました。

• Navigator.getStorageUpdates() は Navigator 仕様に存在しなくなったため、削除されました。

• MouseEvent.webkitMovementX/Y は削除され、プレフィックスのないバージョンに置き換えられました。

• initTouchEvent は、仕様への準拠を強化するために TouchEvent コンストラクターを優先して非推奨になり、Chrome 53 では完全に削除されます。

• Object.observe() は標準化のトレンドに適合しなくなったため非推奨となり、将来のバージョンでは削除される予定です。

• getComputedStyle(e).cssX の動作は、正式に仕様の一部ではないため、非推奨になりました。

• 特定の RTCPeerConnection レガシー メソッドの非標準的な使用は、WebRTC 仕様の Promise ベースの実装では非推奨になりました。

• Document.defaultCharset は、仕様要件への準拠を強化するために非推奨になりました。

Post Views: 1

特に明記されていない限り、この記事の内容はクリエイティブ コモンズ表示 3.0 ライセンスに基づいてライセンスされており、コード サンプルは Apache 2.0 ライセンスに基づいてライセンスされています。詳細については、利用規約をご覧ください。