Web標準を求めて、Compat 2021からInterop 2022へ ①
4か月ぶりの投稿のYNです。
よろしくお願いします。
今月は、「Web標準を求めて、Compat 2021からInterop 2022へ ①」という事で、下記の記事をネタに、少し書きたいと思います。
Apple、Google、Microsoft、MozillaがWeb改善「Interop 2022」で協力 2022年03月06日 08時11分 公開 [佐藤由紀子，ITmedia]
この投稿を読まれている方は、スマホ・タブレット・PCなどを使って、
それぞれのOS（Android・iOS・Linux・MacOS・Windows…など）で、
そのシステムの中で動くブラウザ（Google Chrome・Microsoft Edge・Mozilla Firefox・Safari…など）で、
この記事を閲覧されているかと思います。
場合によっては移動中や出先などで、小さな画面のスマホやタブレットでだったり、
自宅や仕事場などの落ち着いた環境で、ある程度大きな画面のPCで、
Webサイトに触れられているかと思います。
個人のデザインや機能などに関する、好みや考え方によってブラウザは選ばれ、
それぞれ異なる環境でWebサイトは閲覧されます。
自らWebサイト制作していて、閲覧者から見たときサイトがどう表示されるかに気を配らなければいけない時、
ブラウザのWebサイト表現の互換性というものに配慮が必要です。
そこで、大手のブラウザや、それを動かすためのハードウェアを提供している各社が協力して、
Webサイト表現の標準化を目指して、標準化団体を立ち上げています。
大手のブラウザのWeb標準化団体として、
昨年は「Compat 2021(リンク先はGoogleのWebサイト翻訳で日本語翻訳済み)」という団体が、
今年は「Interop 2022(リンク先はGoogleのWebサイト翻訳で日本語翻訳済み)」という団体が、
大手のブラウザでWebサイト表現の標準化に向けて、日々評価・分析・修正という活動をしています。
2021年は、Compat 2021のGoogleのWebサイト翻訳によると、
「基本的にすべてのWebプラットフォームにブラウザーの互換性の問題がありますが、このプロジェクトの焦点は、大幅に改善できる最も問題のある少数の領域にあり、開発者にとっての最重要課題としてそれらを削除します。」とあります。
Compat 2021では、
「2021年の上位5つの重点分野」について集中的に対策していたようで、
①「CSS flexbox(CSS フレキシブルボックスレイアウト)」
②「CSS Grid(CSS グリッド レイアウト)」
③「CSS position: sticky」
④「CSS aspect-ratioプロパティ」
⑤「CSS transforms(CSS 座標変換)」
について、各ブラウザで同様に高水準の表現ができるように活動していたようです。
「2021年の上位5つの重点分野」について、概要を説明すると下記の通りです。
①「CSS flexbox(CSS フレキシブルボックスレイアウト)(リンク先は英語のWikipediaの内容をGoogleのWebサイト翻訳で日本語翻訳済み)」とは、
Google翻訳されたリンク先を見てもらえば一目瞭然なのですが、一応私も一から作成したことはないので、初心者ながら概要をかいつまんで説明させていただきます。
まずコンセプト(概念)として、
「CSSフレックスボックスレイアウトは、HTMLページのレイアウトを指定するための特定の方法です。
フレックスレイアウトの最も明確な機能の1つは、表示環境に基づいてフォームフィットする機能です。
フレックスボックスは、サイズを調整できます。
スペースを不必要に独占しないように縮小するか、コンテンツを境界内に制限するためのスペースを確保するために拡大します。
さらに、フレックスレイアウトは、コンテンツフローの点で、たとえば、一般的に単方向であるブロックおよびインライン表示タイプのレイアウトよりも制限が少なくなります。
フレックス方向の流れは、右向き、左向き、上向き、または下向きに指定できます。
フレックスコンテナ内の個々のアイテムは、使用可能なレイアウトスペースに合わせて自動的に並べ替えられ、再配置される場合もあります。」
とあり、
歴史としては、
2000年代以降のPCのみでなく、各種モバイル(スマホ・タブレットなど)での、それぞれの画面サイズに対応した流動的なレイアウトの表現が求められ、2010年代にTwitterなどの開発者が開発したフレームワークや一般的なJavaScriptレイアウトフレームワークで対応されてきたものに影響を受けながら、CSSフレックスボックスとグリッドレイアウトの仕様が変化してきたようです。
CSS 3モジュールには、flexboxやgridなどのこれに類似したソリューションが含まれていました。
そしてPC・スマホ・タブレットにインストールされているブラウザのほぼ全てでCSSフレキシブルボックスレイアウトの表示は保証されているようです。
このCSSの記述の始まった日は2009年7月23日のようで、最新バージョンはレベル1の2018年11月9日、プレビュー版のワーキングドラフトが2021年3月25日ということのようです。
用語・使用法に関しては、こちらでは詳細は省きますが、「CSS flexbox」などで検索をかければ、いろいろ有用なサイトが見つけられると思いますので、そちらをご参照ください。
②「CSS Grid(CSS グリッド レイアウト)(リンク先は英語のWikipediaの内容をGoogleのWebサイト翻訳で日本語翻訳済み)」とは、
こちらも同様に、Google翻訳されたリンク先を見てもらえば一目瞭然なのですが、一応私も一から作成したことはないので、初心者ながら概要をかいつまんで説明させていただきます。
まず導入されるための動機として、
「CSSグリッドは、 CSSフロートのような以前のオプションよりも堅牢で柔軟なレイアウトを作成できます。
また、ブラウザ間で機能する、より標準化されたコードも可能になります。これは、特定のブラウザのハッキングや複雑な回避策に依存することとは対照的です。
CSSでfloatを悪用する際の問題の1つは、コンテンツがページの一部に追加されると、ページのフローが中断され、レイアウトが破損する可能性があることです。これは、レイアウト要素の高さが異なるためです。
CSSフレックスボックスは柔軟なレイアウトをサポートし、複雑なレイアウトを作成する柔軟性を提供しますが、2次元空間でレスポンシブレイアウトを作成する必要が生じた場合は失敗します。」
とあり、
歴史としては、
CSSのグリッドレイアウトは、 2011年にMicrosoftのPhil Cuppによって作成され、InternetExplorer10に実装されました。
構文は、主導するCSSワーキンググループのいくつかの相互作用を通じて再構築され、さらに洗練されました。
この機能は、Web開発者によって広く採用されました。
最初のバージョンは2007年4月7日で、最新バージョンがレベル1の2020年12月18日、プレビュー版がレベル2の2021年3月11日ということのようです。
ブラウザのサポートとしては、
「2017年10月の時点で、Chrome、Firefox、Safari、Edgeはすべて、ベンダープレフィックスなしのCSSグリッドをサポートしています。
IE 10および11はCSSグリッドをサポートしていますが、仕様が古くなっています。
モバイルでは、Opera Miniと勇敢なブラウザを除いて、すべての最新のブラウザがCSSグリッドをサポートしています。
古いブラウザを対象とするWeb開発者は、 Modernizr 3.5.0を利用して、必要に応じてWebページを検出し、適切に劣化させることができます。」
とあります。
用語・使用法に関しては、こちらでは詳細は省きますが、「CSS Grid」などで検索をかければ、いろいろ有用なサイトが見つけられると思いますので、そちらをご参照ください。
上記2点の2021年5月時点のブラウザ対応状況に関しては、下記サイトが詳しいです。
「2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法 Post on:2021年5月25日」
③「CSS position: sticky」は、
「position: sticky;の仕組みや実際の使い方をやさしく解説 Post on:2020年2月7日」というサイトを見ていただけるとわかりやすい解説に触れられると思います。
「position: stickyの面白い使い方と使用時の注意点 update更新日 2020年2月17日」というサイトのデモを見ると、映画などの映像作品のコンテンツの公式サイトなどで見るような効果が見れます。
ブラウザ・サポート状況は、「Can I use…」というサイトに各ブラウザの詳しい対応状況が出ています。
④「CSS aspect-ratioプロパティ」は、下記のサイトがわかりやすいかと思われます。
「CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 Post on:2021年10月13日」
「待ってました！Chrome88 で aspect-ratioプロパティがついにサポート 公開日2021.02.03 メンテナンス日2021.12.26」
⑤「CSS transforms(CSS 座標変換)」は、下記のMozillaのサイトが詳しいです。
「MDN Web Docs 開発者向けのウェブ技術 > CSS: カスケーディングスタイルシート > transform」
以上の5点を重点的に標準化していったのが、Compat 2021という標準化団体です。
この段階ではAppleは標準化団体メンバーには入っていなかったようです。
今回の投稿は①ということで「Compat 2021」の記事でしたが、
次回は今年、2022年のWEB標準化団体「Interop 2022」について書きたいと思いますので、また次回の投稿でお会いしましょう。
ここまで読んでいただきありがとうございました。
Follow me!
