軽飛行機の飛行を学んでいます。 それはコンピューターから私をそらします。 最近、ブリストル空港に近づくと、セスナ-150を低空に保つことができませんでした。 私は文字通り上向きの流れによって雲に吸い込まれました。 私のフライトインストラクターは言った：「これはあなたのせいではなく、あなたの問題です。」 彼は、たとえ何かが私に対して不利に働いたとしても、私は身長を維持しなければならなかったことを意味しました。 私はそのような状況がどうなるかを知り、試験運用時に対処することを学ぶ必要がありました。
着陸後、「これはあなたのせいではないが、あなたの問題」というフレーズは、ほとんどすべての状況に最適だと思いました。 この記事では、CSS Grid Layoutのような新しいテクノロジーを使用する際に古いブラウザーをサポートするというトピックを取り上げます。 開発者は、ブラウザのサポートを顧客や同僚と議論する際に、サイトがIE9で最新のFirefoxやChromeとまったく同じに見えないという事実を非難するように、しばしば恥ずかしがります。 それは私たちのせいではないことを受け入れる時です。 しかし、皆の利益のために適切に対処する義務は、主に私たちの問題です。
グリッドは完全に新しいです！ 彼らはおそらくひどいブラウザをサポートしていますか？
CSSグリッドレイアウトは、今年の3月からChrome、Firefox、Opera、Safariで既に機能しています。 Microsoft Edgeは最近、フラグの背後にあるグリッドを備えたプリビルドをリリースしました。 この記事の公開時点で、IE 10-11からのプレフィックスと現在のEdgeを含むバージョンを追加した場合、 Can I UseはCSSグリッドレイアウトのグローバルサポートが65.64％または70.75％であることを示しています。 これまで、このような壮大なノベルティがそれほど早く紹介されるのを見たことはありません。 人々がどれだけ多くの訪問者が支援を得るか理解していないことは驚くことではありません。
これに言及する価値はありませんでしたが、サイトのオーディエンスに応じて、あなたの数字は多かれ少なかれかもしれません。 ただし、今すぐ新しいサイトを作成している場合は、CSSグリッドレイアウトを活用する良い機会があります。
なぜグリッドを使用する必要があるのですか？
前の記事で説明したように 、CSS Grid Layoutを使用すると、行を折り返すための追加のマークアップなしで2次元レイアウトを実行できます。 レイアウトは2次元であるため、レイアウト内の要素は、信頼性が高く予測可能な方法で複数の行にまたがることができます。
いくつかの素晴らしいデザイン効果を達成できます。 たとえば、要素を設計するには、少なくとも一定の高さでしたが、この例のように 、より高いコンテンツで引き伸ばされました。
グリッドのfrユニットを使用して、 固定幅要素とフレキシブル要素を簡単に切り替えることができます。 これにより、固定サイズを維持する必要があるレイアウト要素を簡単に処理できます。
コンテナレベルでレイアウトを再定義して 、レスポンシブデザインを基本タスクにし、さまざまなウィンドウサイズに合わせてデザインを個別にカスタマイズできます。
要素を互いに重ね合わせることができ 、それらはz-indexプロパティに従うため、異なる要素を同じグリッドセルに配置できるため、創造性の範囲が広がります。
しかし、サポートされていないブラウザはどうでしょうか？
CSSには解決策があります。 第一に、グリッドとフレックスボックスの仕様は、これらの仕様が古いレイアウト方法を再定義する方法をすでに正確に定義しています。
したがって、フロート、インラインブロック、マルチカラムレイアウト、フレックスボックス、またはdisplay：tableをグリッドレイアウトのフォールバックとして使用する場合、すべてが仕様で提供されています。 これらのメソッドは、信頼できる予測可能な方法でオーバーライドできます。 フォールバックを説明するチートシートを作りました。 それらのいくつかは、今年初めのRenderカンファレンスでの私の講演で言及されています。
CSSには機能チェックもあります。 それは本当に素晴らしいブラウザのサポートを備えており、特にそれに関連して楽しいです、あなたはそのサポートなしでブラウザを心配する必要はありません。 グリッドをサポートし、サポートをサポートしないブラウザはありません。 CSSファイルに必要なものは次のとおりです。
- フォールバック用のCSS
- グリッドのCSS
すべてのブラウザはフォールバックスタイルを理解します。 グリッドをサポートしないものはそこで止まります。 そして、サポートするものはグリッドのスタイルを使用します。そして、仕様で説明され、チートシートで説明されているルールのおかげで、フォールバックの動作の多くはリセットされます。
原則として、フォールバックのスタイルでは、グリッド上のレイアウトに「リーク」するものがあります。 多くの場合、これは要素の幅です。古いレイアウトでは、グリッドに似たものを模倣するように幅を設定する必要があるためです。 したがって、単純なsupportsディレクティブを使用して、グリッドのサポートを確認し、その中で、おそらく幅をautoに戻します。 一般に、古いブラウザに表示されることを恐れずに、グリッドバージョンに対して何でもできます。
CSSを使用してCSSを記述します。 ポリフィル、ハックはありません。 すべてが仕様に厳密に従っています。
しかし、フォールバックとは、レイアウトを2回書くことを意味します！
これは、作業中のサイトがすべてのブラウザーで同じように見えるという事実から進んでいる場合にのみ当てはまります。 そして、あなたは何を知っていますか？ これは無意味です。
2002年に私が書いた記事は次のとおりです。 2002年、人々はCSSレイアウトを学ぶことを恐れました。サイトがすべてのブラウザで「等しく表示」されるわけではないからです。 しかし、私はCSSを使用してサイトを構成し、これを最善の方法で行う方法を見つけ、他の人に私が学んだことを教えました。 私自身の会社が開設されて以来、すべてがNetscape 4で動作することを要求するクライアント向けのWebサイトを作成しました。 私は20年間、互換性の問題に取り組んできました。 今、私はIE9まで動作するはずのインターフェースを持つ製品を作っています。 これらの古いブラウザが存在したのは私のせいではありませんが、私の問題と私の仕事は、これらすべてに対処することにありました。
あなたのサイトが本当にすべてのブラウザで同じように見える必要がある場合（それがあなたにとって何を意味するにせよ）、グリッドでしかできないことは使用できません。 この場合、グリッドを使用しないでください！ 古いテクノロジーでは通常は実行できないことを達成したい場合は、グリッドレイアウトを使用します。 次に、あまり高度でないブラウザーで使用できるフォールバックを作成します。まったく同じことを行う心配はありません。 グリッドの力は、それらを使用すると、以前は不可能だった何かを実行できることです。 これを使用して、古いデザインを再作成しないでください。
魔法のポリフィールが欲しい！
レイアウト全体を親友でグローバルにバックアップすると、ユーザーにとってこれは悪夢になります。 JSツールを使用してグリッドの機能を実装すると、すべてが非常に遅くなります。 その結果、ページをロードするとひどくぎこちなく見えます。 スクリプトを使用してグリッドレイアウトを強制するよりも、これらの古いブラウザに機能に合わせたよりシンプルなオプションを与える方がはるかに優れています。
ポリファイルを作成しようとすると、開発者とテストの時間、および小規模なユーザーグループの開発とテストの時間が大幅に遅れることがあります。 繰り返しますが、すべての人に同じ外観があなたのサイトに理想的であれば、私は今グリッドを使用することをお勧めしません。 世界に古いブラウザが存在するため、グリッドレイアウトを楽しむことができるすべてのユーザーがグリッドレイアウトを奪われることを受け入れる必要があります。
それはウェブ向けに設計することの意味です
Webブラウジングは、まだ完全にサポートされていないものがなければ考えられません。 これが、私たちが事業を営む業界の性質です。 あなたの仕事は、各プロジェクトの避けられない技術的妥協点を見つけることです。
あなたの仕事は、新しいことを学び、利用可能なすべてのテクノロジーを使用してビジネス目標を実現するための最良の方法についてクライアントまたは経営陣に助言することです。 これを行うには、まずこれらの新製品を自分で学習する必要があります。 その後、どの妥協をする価値があるかについてアドバイスすることができます。 追加のマークアップ、追加の開発時間、またはすべてのブラウザーの利便性の強制的な制限を犠牲にして、均一な設計を保証するには？ または、IE9の簡素化されたレイアウトは、開発時間を短縮し、最終的に新しいテクノロジーによりサイトを高速化しますか？ 各オプションの長所と短所を理解すれば、議論を擁護できます。
新しいテクノロジーを使用しても利点がまったくない場合は、使用しないでください。 しかし、クライアントがグリッドなどの新しいテクノロジーでのみ意味のあるもの、またはグリッドで迅速に実行できるものを望んでいる場合、それらがなければ多くの苦労が必要になります。
複雑さの軽減により、現在および将来の開発時間をどれだけ節約できるかを説明します。
設計者は、グリッドなしでは確実に作成することは不可能な見事なデザインを作成したという事実によって、それらを説明します。
それらを迅速に説明してください。多くの場合、この議論はうまくいきます。面倒なフレームワークを取り除くことができ、それなしではそれができなくなるからです。
これはすべて、古いブラウザに簡素化されたレイアウトを提供するという要件と引き換えに受け取ります。 しかし、これは「レイアウトなし」という意味ではありません。 ブラウザにグリッドを埋め込むことは、以前見たCSSに何かを埋め込むこととは異なることを説明する準備をしてください。 実装はこれまで以上に互換性があります。 Edgeは、ビルド前のフラグの背後にあるグリッドを既に更新しています。 サポートされていないブラウザは、過去の経験から予想されるよりもずっと早く消えます。
質問の価格に関する必要な情報をすべて把握していれば、議論は非常に簡単になります。 古いブラウザが存在するという事実はあなたのせいではありません。 過去10年間にリリースされたすべてのブラウザでサイトを同じように見せるためのタスクに失敗したかのように、これらの議論を開始しないでください。 それはあなたのせいではなく、あなたの問題です。 あなたの問題、つまりウェブの専門家としての責任は、各プロジェクトに適切な行動方針を選択できる条件に身を置くことです。
それが私たちがやろうとしていることです
テーブルレイアウトからCSSへの移行により、Webの外観が変わりました。 彼は、ピクセル単位のスライス画像から、より柔軟なものへと私たちを導きました。テキストは、印刷デザインのように見えませんでした。 過去15年間、Webの外観はCSSの技術的な制限によって決定されてきました。 グリッド、フレックスボックス、Webシェイプなどの新しいレイアウトメソッドは、外観を再び変更すると思います。 しかし、私たちはこれを起こさなければなりません。新しいものを実験し、学び、創造できるようにする必要があります。
これらの方法の利点を、サイトやアプリケーションを作成する人々に示す準備ができている場合にのみ、これを行うことができます。 これは、少なくともこれらすべてのことを学ぶまで、Web、ブラウザー、および実装のペースに関する偏見をなくした場合にのみ可能です。 そうしてはじめて、各プロジェクトに対して正しい判断を下すことができます。 明確な「いずれか-または」が存在することは決してなく、常にトレードオフがあります。 私たちの仕事は、いつものようにこれに対処することです。