Web制作者は要チェック！Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptはどう変わるのか

これから先、フロントエンド開発者に一番大きな影響を与えるのは、Chromiumを採用したEdgeがリリースされることだと思います。
IEへの対応が、、、Edgeへの対応が、、、と思っていた人には、かなりの朗報です。

Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptのどんな機能が使用できるようになり、ワークフロー、ブラウザテスト、そして他のブラウザへの影響など、フロントエンド開発者にとって何を意味するのかを紹介します。

Edge Goes Chromium: What Does it Mean for Front-End Developers?

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• Chromiumを採用したEdgeがリリースされます
• 使うのが楽しみな機能
• 将来はさらにもっと有望
• ブラウザテストへの影響
• 何かを失いますか？
• 他のブラウザに影響はありますか？
• Googleは誇大妄想狂なのか？
• 競争からコラボレーションへ

Chromiumを採用したEdgeがリリースされます

2018年12月、MicrosoftはEdgeがGoogle Chromeを支えるオープンソースプロジェクトChromiumを採用すると発表しました。業界内の多くの人が、ブラウザの多様性が失なわれたことに悲しみました。しかし、私個人としては喜びに満ちています。正式なリリース日はまだ告知されていませんが、今年中になると思われます。

Chromiumを採用したEdgeがリリースされることで、HTML、JavaScript、CSSの全機能がクロスブラウザを完全にサポートするようになります。

Microsoft Edge Insider

すでにプレビュー版はWindowsで利用可能です、そしてmacOS用も準備されています。

2018年に私は「The Slow Death of Internet Explorer and the Future of Progressive Enhancement」という記事を書きました。IEは皆が嫌いなブラウザであり、EdgeはIEが改良された代替品となるはずでした。しかし、Edge自体もかなり遅れていました。EdgeHTMLは、IEのエンジンであるTridentから派生されたものです。MicrosoftはEdgeへの投資を大幅に過小評価しています。

EdgeのUser Voiceのサイトは素晴らしいアイデアで、開発者はどの機能を実装したいか投票することができます。しかし残念ながらこのサイトへの投票は、Dave Rupertが言ったように「コインを井戸に投げるだけ」です。最も要求されている機能は何年経っても、Edgeに実装されていません。

Chromium Edgeより前のバージョンでは現在サポートされていませんが、他の最新のブラウザでサポートされている機能はたくさんあります。それらの多くはポリフィルもなく、回避もできないので、今回のリリースには重要な意味があります。

使うのが楽しみな機能

Chromiumを採用したEdgeがリリースされると、どのような機能が利用できるのか紹介します。

カスタム要素とシャドウDOM

カスタム要素とシャドウDOMを組み合わせることで、開発者は再利用可能なカプセル化されたコンポーネントを定義できます（参考: Web Components）。多くの人がこの機能を求めています。2014年に初めて投票されてから、現時点で13,000票以上集まっています。
参考: Shadow DOM (unprefixed)

HTMLのdetails要素とsummary要素

details要素とsummary要素はHTML5の一部で、2011年以降Chromeでサポートされています。一緒に使用すると、要素はコンテンツを表示したり非表示にしたりするための単純なウィジェットを生成できます。JavaScriptを使用して似たようなことを実装するのは簡単ですが、details要素とsummary要素はJavaScriptが無効になっている場合やロードに失敗した場合でも機能します。
参考: Details/Summary is the Easiest Way Ever to Make an Accordion

JavaScriptのFont Loading API

これは何人かの人々にとって大きな意味があります。最近のブラウザはすべて、CSSのfont-displayプロパティをサポートしています。しかし、あなたはそれでもJavaScriptを使用してフォントをロードすることを望むかもしれません。Zach Leathermanが、font-displayを幅広くサポートしているにもかかわらず、なぜJavaScriptでフォントをロードしたいのかについて説明しています。Zach氏によると、このJavaScriptは下記のようになっているため、このAPIのポリフィルを捨てることは重要です。
参考: Why Would You Still Use JavaScript?

Zach氏は2018年の記事でこう言っています。

2019年現在、IE, Edgeのどちらにもサポートされていません。

Font Loadingのサポートブラウザ

JavaScriptのflatとflatMap

スニペットなどでよく使用される、flat()は別の配列の中にネストした配列があるときに役立ちます。

その名前が示すように、flatMap()はmap()メソッドとflat()の両方を使用することと同等です。これらのメソッドはNode.js v11でもサポートされています。

JavaScriptのTextEncoderとTextDecoder

TextEncoderとTextDecoderはエンコーディング仕様の一部です。それらはstreamsを扱うときに役立ちます。

JavaScriptのObject restとObject spread

これらは配列のrestとspreadプロパティに似ています。

JavaScriptのモジュール: dynamic import

関数のような構文を使用して、dynamic importを使用すると、ユーザーが必要なときにESモジュールを遅延ロードすることができます。

CSSのbackground-blend-modeプロパティ

background-blend-modeプロパティは、Photoshopスタイルの画像操作をWebにもたらします。
参考: CSS Blender

CSSのprefers-reduced-motionメディア特性

特にこの設定が存在することをすべてのユーザーが認識しているわけではないため、Webサイトのデフォルトにすべきであると感じずにはいられません。Web上のアニメーションがより一般的になるにつれて、アニメーションが原因で一部のユーザーにめまい、吐き気、頭痛を引き起こす可能性があることを認識することが重要です。

macOSのアクセシビリティの設定

CSSのcaret-colorプロパティ

このプロパティはプログレッシブエンハンスメントとして使用されていると思います。テキストのinputフィールドで点滅カーソルをスタイルできます。

8桁の16進数カラー表記

コードベースに一貫性があるのは良いことです。
RGB、16進、またはHSLカラーフォーマット。お好みのフォーマットがhexであれば、透過性を定義するためにいつでもrgba()に切り替える必要があるという問題があります。16進数にアルファ(透過性)値を含めることができるようになりました。たとえば、#ffffff80はrgba(255,255,255、。5)と同じです。おそらく、これは最も直感的なカラーフォーマットではなく、rgba()と比べて実質的な利点はありません。

CSSの組み込みサイズ

CSSの他の新しい機能のような興奮はあまりありませんが、私が個人的に最も注目している機能です。組み込みサイズは要素の内容に基づいてサイズを決定し、CSSに3つの新しいキーワード「min-content」、「max-content」、「fit-content()」を使用できます。これらのキーワードはheight, width, min-width, max-width, min-height, max-height, grid-template-rows, grid-template-columns, flex-basisなど、長さを使用するほとんどのプロパティで使用できます。

CSSのtext-orientationプロパティ

writing-modeプロパティとともに使用すると、期待通りテキストの向きを指定できます。

CSSの:placeholder-shown疑似要素

:placeholder-shownはIEで利用可能でしたが、どういうわけかEdgeでは利用できません。UXの調査によると、プレースホルダーのテキストは一般的に避けるべきであることが分かっています。ただし、プレースホルダーテキストを使用している場合は、ユーザーがinput要素にテキストを入力したかどうかに基づいて条件付きでスタイルを適用するのに便利な方法です。

CSSのplace-contentプロパティ

place-contentは、align-contentとjustify-contentの両方を設定するための省略形です。上下左右の中央配置がより少ないコードで記述できます。

CSSのwill-changeプロパティ

will-changeプロパティはパフォーマンスの最適化として使用でき、要素が変更されることを事前にブラウザに通知します。Pre-Chromium Edgeは、実際にはこのプロパティを必要とせずにアニメーションをうまく処理するのに優れていましたが、現在はクロスブラウザを完全にサポートしています。

CSSのallプロパティ

allは、CSSのすべてのプロパティを一度に定義できる省略形です。例えば、button {all: unset;}は、下記と同じです。

残念ながら、キーワードのrevertはまだSafari以外には実装されていないため、allプロパティから得られるスタイルは制限されてしまいます。

CSSのshapeとclip-pathプロパティ

Webは伝統的に長方形が中心でした。結局のところ、box-modelです。レイアウトのためにfloatを使う必要はもうありませんが、shape-outsideプロパティを使ってイメージや図形の周りにテキストを折り返すためにそれらを創造的に使うことができます。また、clip-pathプロパティと組み合わせることで、図形の中に画像を表示する機能もあります。

Clippy

CSSの:focus-within疑似クラス

いずれかの入力にフォーカスがあるときにフォーム全体に特殊なスタイルを適用したい場合は、 :focus-within疑似クラスをセレクタにすると便利です。

CSSのcontentsキーワード

CSS Gridを使用する場合、contentsは不可欠です。開発者から3,920票も投票があるにもかかわらず、Edgeでは「計画外」とされています。

CSSのFlexboxとGridはともに、直接の子だけがそれぞれFlexアイテムまたはGridアイテムになります。より深くネストされたものは、FlexboxやGridを使用して配置することはできません。仕様ではdisplay: contents;が親要素に適用されると、「要素は要素ツリー内でその内容によって置き換えられたかのように扱われなければならない」とあります。詳しい説明は、Get Ready for display: contents;をご覧ください。

しかし残念ながら、アクセシビリティに影響を与えるいくつかのバグがまだあります。

display: contents;のサポートブラウザ

将来はさらにもっと有望

ここまで、EdgeがChromiumに移行した際に、すべてのモダンブラウザでサポートされる機能を見てきました。とはいえ、旧来のEdgeがなくなることで、ほかの多くの機能もはるかに近く感じられるようになったと思います。EdgeはWeb Animation APIで足を引っ張っていた唯一のブラウザで、例えばHoudiniの仕様のどの部分にも興味を示しませんでした。

Is Houdini ready yet‽

ブラウザテストへの影響

Browserstack

もちろん、Web開発者にとって大きな利点の一つが、ブラウザテストが少なくなることです。クロスブラウザのテストで無視されていたEdgeが多いため、Edgeユーザーは満足なエクスペリエンスが提供されていない可能性が高かったです。このことが、MicrosoftがChromiumに切り替えることを決めた主な理由でした。

もしあなたのサイトが1つのChromiumブラウザでバグがなければ、おそらくそれらすべてで問題ないはずです。Edgeチームの言葉を借りると、Chromiumは「顧客にとってのWeb互換性の向上と、すべてのWeb開発者にとってのWebの細分化が少ない」ということになります。多種多様なデバイスとブラウザのおかげで、ブラウザテストはフロントエンド開発者として最も責任のあるタスクの1つになっています。

もう一つ大事なことは、macOSユーザーもEdgeを利用できるようになることです。これは、macOSを使用している多くの人にとって素晴らしいことです。BrowserStackへのサブスクリプションの必要性が少なくなります。

何かを失いますか？

私の知る限りでは、Chromeを除くすべてでサポートされていた唯一の機能はSVGカラーフォントです。これはEdgeでは機能しません。他のカラーフォントフォーマット（COLR, SBIX, CBDT/CBLC）は引き続き機能します。

Uh, @GoogleChrome Are you planning to support #OpenTypeSVG soon? Supported in Safari (12+), Firefox (26+) even EdgeHTML (38+) Photoshop, Illustrator - but not Chrome
/cc @colorfontswtf pic.twitter.com/tgwJ3AqHm2

— Chris Lilley (@svgeesus) 2019年2月15日

他のブラウザに影響はありますか？

確かにEdgeは、最後のサブブラウザではありません。この記事で紹介したすべての機能はIEでサポートされていないため、今後もサポートされます。もしあなたがロシアをターゲットにするなら、Yandexをサポートする必要があるでしょう。またアフリカをターゲットにするなら、Opera Miniをサポートする必要があり、中国ならUCとQQをサポートする必要があります。こういった地域的な考慮事項がない場合は、IEのサポートをやめて、現代のWebが提供する機能を受け入れる絶好の機会です。多くのPCユーザーは、純粋に習慣的にIEを使い続けています。

Microsoftの公式ブログ記事「The perils of using Internet Explorer as your default browser」では、IEを既定のブラウザとして使用することの危険性と、最近の開発者はIEのテストをしていないと結論付けています。残っているユーザーにとって、Webの大部分はますます壊れているように見えるに違いありません。IEが終わる時がきました。

Googleは誇大妄想狂なのか？

Web開発者にとって生活は楽になりつつありますが、Microsoftの発表に対する反応は決して肯定的なものではありません。

Mozillaはこの発表に対して、Microsoftは「インターネットのための独立した共有プラットフォームを公式にあきらめた」と非難し、Googleは「私たちのオンライン生活のインフラをほぼ完全に管理している」と「独自の資産を独占的に保有している」と述べています。その結果、「基本的なオンラインのインフラストラクチャを単一の企業に統制することはひどい」とコメントをだしています。
参考: Goodbye, EdgeHTML

ブラウザがこのような圧倒的な市場シェアを達成した最後の時といえば、多くの人がIE6の時代を思い出します。ブラウザ戦争に勝利したIEは、停滞に屈しました。これとは対照的に、Chromeは絶え間なく新機能を推進しています。Googleは、Web標準化団体であるW3CとWHATWGに積極的に参加しています。おそらく、これらの団体に大きな影響を与え、間違いなくWebの将来の形を決定づける力を持っています。Google Developer RelationsはChromeでのみ実装されている機能を誇大宣伝する傾向があります。

競争からコラボレーションへ

Edgeは新しいIEになるより、Webを前進させることに貢献するでしょう。多くの分野で遅れをとっていましたが、CSS Grid、CSS exclusions、CSS regions、そして新しいHTMLインポート仕様のために先駆的役割を果たします。Microsoftはオープンソースプロジェクトの世界最大の支持者の一人になりました。このことは、すべての主要ブラウザがオープンソースになったことを意味します。

Microsoftは、Chromiumの重要な寄稿者になるつもりであると述べています。実際に、300以上のマージがすでに行われています。これはEdgeユーザーはもちろん、Chrome、Opera、Brave、および他のChromiumベースのブラウザのユーザーにも役立ちます。
参考: What to expect in the new Microsoft Edge Insider Channels