きた!EdgeがChromiumを採用してリリースされる!!と、個人的に言いたいことを書いてみた。

ウェブ制作に携わる人間ならだれでも歓喜だと思うニュース。
EdgeがChromiumを採用してリリースされる、ということです。

ホームページを制作するって単純に思えるかもしれませんが、いろんなことに配慮・考慮して
とにかく想像よりも多くの知識を必要とします。

ただ、「デザインできます」「コード書けます」って、それだけじゃ全然お客様が求めるホームページは制作できません。
最近、東京の大手制作会社LIGさんのブログ記事「拝啓、お客様。Webサイト制作のコストはここにかかります。」でも書かれていたように昔とは比べられないほど、私たちウェブ制作に携わる人間には求められる知識や教養が多くなっています。

※もしLIGさんのブログ読んでない方は読んでみてください。テキストリンクで飛べます。
お客様に知ってほしいこと、制作側の主張を本当にわかりやすく伝えてくれているブログです。
ウェブディレクター、プロジェクトマネージャーの方もぜひ読んでほしい。

「ホームページを制作する」という言葉の中には、今日の題材でもある『ブラウザごとのウェブサイトの調整』があります。

例えばホームページを1つ作って公開する場合、私たちはPCだけでも
IE、Edge、chrome、Firefox、safariなどのブラウザすべてでサイトの確認を行います。
なぜかって?ブラウザごとに見え方や動きが異なるからです。

そしてこれらのブラウザをありとあらゆるユーザーが使用しているため、限定することも難しい。
正直ウェブに携わっている人間からの意見を言わせていただくと、これだけウェブとアプリが融合してきているこのご時世において、もはやブラウザごとの独自性は必要ないと思うのですが
開発者が異なるので、それに準ずるしか現状術(すべ)はないのです。

と、私の愚痴も混ざりましたが、では「EdgeがChromiumを採用してリリース」されることでどんなことが変わるのかを
私の言葉で少しまとめてみました。
あ、ちなみに正式なリリースはまだされていませんので、あしからず。
リリース日の告知はまだされていませんが、今年中を予定しているようです。

HTML、JavaScript、CSSの全機能がクロスブラウザを完全にサポート

現在、Chromiumを採用したEdgeのプレビュー版はWindowsで利用することができます。
【URL】プレビュー版

正直、ウェブに携わる人間はIEが嫌いな人が大半だと思います。それに反してIEを利用しているユーザーが多いのも頭の痛いところ。
IEに対して不満を漏らしているころ、「Edge」というブラウザをマイクロソフトは発表し、EdgeはIEの改良版としてみんなから愛される?ブラウザになる予定でした。
しかし残念なことに、Edge自体も遅れていることにかわりなく、結局のところウェブ制作に携わる人間からすると頭を悩ませるブラウザが一つ増えたに過ぎませんでした。

Edgeはもともとクロスブラウザテストで無視されており、Edgeユーザーについては他のブラウザのユーザに比べ十分なエクスペリエンスの提供がなされていなかった可能性が高かったのです。
今回はこれらのことが、Chromiumを採用してリリースすることを決めた理由だったようです。
そのため、今回のEdgeがChromiumを採用してリリースすることEdgeを使用しているユーザーはもちろん、私たちのような制作に携わる人間としてもとても、とても重要なことなのです。

どんな機能が使用できるようになるの?

私のほうで把握、理解しているものとしては以下の内容です。
※もっと他にもあるかもしれません。

■details要素とsummary要素

See the Pen detailsタグとsummaryタグでアコーディオン by sayuri (@giraffeweb) on CodePen.0

■text-orientationプロパティ

See the Pen writing-mode1 by sayuri (@giraffeweb) on CodePen.0

■place-contentプロパティ
align-contentとjustify-contentを同時に設定する省略形のplace-contentが使用できるようになる。

■will-changeプロパティ
要素変更を事前にブラウザに通知できるwill-changeプロパティ。これもOK!

■shapeとclip-pathプロパティ
shape-outsideプロパティを使用することで変形している画像やSVGの周りにテキストをうまく折り返すことができます。
clip-pathプロパティと組み合わせると、図形の中に画像を表示することも可能。

■:focus-within疑似クラス
フォーカスがある場合フォームすべてに装飾したい場合は、:focus-within疑似クラス使用することができます。

いかがでしたでしょうか!
これからが本当に楽しみですね~♪

またリリースされればブログを書きたいと思います。
では!