2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
Post on:2021年5月25日
sponsors
2021年、CSSのクロスブラウザ対応の現状を紹介します。
Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。
しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。
The State of CSS Cross-Browser Development
by Ahmad Shadeed
先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。
参考: Internet Explorer 11 デスクトップアプリは 2022年6月15日にサポート終了
参考: WordPressから重要なお知らせ、次のバージョンでIE11のサポートを終了
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
クロスブラウザ対応とは、デスクトップとモバイルの異なるブラウザでWebページの見た目と動作を同じにすることです。このクロスブラウザ対応はフロントエンドのデベロッパーにとって、5年ほど前は非常に困難なものでした。
しかし現在では、CSS GridやFlexboxといった最新のCSSがサポートされたことで、クロスブラウザ対応は非常に簡単になりました。
下記のモックアップは、私がSketchでデザインしたものです。
UIのモックアップ
4つの異なるブラウザでどのように表示されるかを示します。違いはないですよね？ これがクロスブラウザ対応の目標であり、異なるブラウザで見た目と動作を同じにするということです。
現在主流の4つの異なるブラウザで表示
複雑なことではないことは知っていますが、私の目標はそのアイデアを説明することでした。何年もの間、わたし達はブラウザの一貫性のない多くの問題に悩まされてきました。そのため、フロントエンドのデベロッパーの仕事は実際にCSSを書くことよりもデバッグして修正することの方が多いというレベルで、非常に困難なものになっていました。
CSSのクロスブラウザ対応がどのように行われてきたか
時をさかのぼって2011年、Internet Explorerの最新バージョンはIE9でした。Google Chromeはリリースされてから3年ほどで、当時は複数のブラウザをサポートする実装は困難でした。
CSSを初めて使用する人は、過去にデベロッパーがWebレイアウトをどのように実装していたか知らないかもしれません。2011年当時はIE8で動作することが前提条件となっており、その頃のCSSの最新機能（CSSグラデーションなど）を使用する場合には、画像のフォールバックを用意していました。
新旧のブラウザに一貫したエクスペリエンスを提供することは非常に困難な時代でした。フロントエンドのデベロッパーは、必要なレイアウトを実現するためにCSSの古いテクニックを使用するか、適切なフォールバックを提供する必要がありました。
当時は、Webサイトの一貫性を保つというコンセプトはオプションにはありませんでした。ちなみに、2010年のIEの使用率は52%です（StatCounter調べ）。その使用率を考えると、IEを無視することはできません。
過去10年のCSS開発状況
2010年から現在まで、CSS開発がどのように行われてきたかを簡単にまとめてみました。クロスブラウザ対応をより簡単にするためにWebコミュニティが行ってきた努力を評価するためにも、デベロッパーが知っておくことは重要です。
2010年: ハロー、レスポンシブWebデザイン
2010年5月、Ethan MarcotteはレスポンシブWebデザイン（RWD）という用語を作りました。当時のレスポンシブWebデザインは、@mediaにfloatとclearfixを使用することが、クロスブラウザ対応のレイアウトを構築する唯一の方法でした。
参考: Responsive Web Design
2010年のCSS開発状況
例えば、グリッドを実装するには各カラムにfloatを与え、必要に応じてwidthを指定します。これで各カラムの中にコンポーネントを配置することができます。
|
1 2 3 4 5 6 7 8 |
<div class="wrapper clearfix"> <div class="column column-6"> <div class="item"></div> </div> <div class="column column-6"> <div class="item"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.column { float: left; padding-right: 16px; } .column:last-child { padding-right: 0; } .column-6 { width: 50%; } .clearfix { content: ""; display: table; clear: both; } |
Flexboxの古い構文は一部のブラウザ（Chrome, Firefox, Safari）でサポートされていましたが、IEに比べて使用率が非常に低いため、当時はFlexboxを使用するという選択肢はありませんでした。
2011年: CSS3の年
私は2011年の当時、フロントエンドのデベロッパーですらありませんでしたが、Smashing Magazineを見ると、グラデーションやドロップシャドウなどのCSS3の新機能が人気を博していたようです。
2011年のCSS開発状況
2010年からの大きな変更点はありませんが、CSS3の機能をより多く使用し、サポートしていないブラウザ（Hello, IE！）に適切なフォールバックを提供しています。
2012年: Flexboxを使用できますか？
簡単に言うと、「ノー」です。IEは半数以上のユーザーが使用しており、その選択肢はありませんでした。しかも、Flexboxでサポートされていたのは古い構文で、レスポンシブデザインにとって非常に重要な複数行の折り返しが含まれていません。
CSS Tricksによると、Flexboxには3つの異なるバージョンがありました。
2012年のCSS開発状況
Flexboxの記述が少し複雑でしたが、この問題は2012年に状況が改善します。
また、人気のあるCSSレイアウトフレームワークであるSuzyがリリースされたのも2012年です。オンデマンドでグリッドを持つというアイデアが可能になりました。
|
1 2 3 |
nav { @include span(3 of 12); } |
2013年: そろそろ、Flexboxを使用できますか？
使用できるようになりましたが、新旧の構文があるため、フォールバックを提供しなければなりません。CSS Tricksからフォールバックを紹介します。
|
1 2 3 4 5 6 7 |
.page-wrap { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } |
2013年のCSS開発状況
当時、Flexboxを使用するのは、要素をラップせずに水平または垂直に並べる場合に限られていました。かなり新しい構文で、flex-wrapがサポートされました。
2014-2016年: Flexboxの新しい構文がすべての主要なブラウザでサポート
私がフロントエンド開発の世界に入ったのは2014年です。当時、レイアウトを実装するために知っていたのは、floatだけでした。しかしFlexboxの新しい構文が存在していることが分かったので、最終的にはFlexboxを使用してレスポンシブ対応のグリッドを実装できるようになりました。
Flexboxはプログレッシブエンハンスメントで使用しました。つまり、ブラウザが新しい構文をサポートしていない場合は、他のものにフォールバックするというものです。それを実現するために、Modernizrを使用しました。
Modernizrを使用すると、ルートHTML要素に.flexboxが追加され、そのクラスを使用して必要に応じてFlexboxを適用できます。
当時、フォールバックを提供することは重要でした。Flexboxをサポートしていないブラウザを使用しているユーザーは、エクスペリエンスが損なわれます。
2014-2016年のCSS開発状況
2017年: ハロー、CSS Grid
Rachel Andrewのおかげで、2015年、2016年とCSS Gridが普及してきました。2017年には、CSS Gridの新しい仕様がChromeとFirefoxで正式にサポートされました。CSS Gridは、フロントエンド開発の真のゲームチェンジャーと言えるでしょう。2017年以降、CSS Gridはわたし達がWebを実装する方法を大きく変えました。
2018-2020年: CSS Gridの採用が改善されています
CSS Gridがすべての主要ブラウザでサポートされていても、フォールバックが必要でした。当時はFlexboxがよくサポートされていたので、予備の方法として使用することができます。
2018-2020年のCSS開発状況
Grid to FlexboxはFlexboxをフォールバックにして、CSS Gridを生成するツールです。
2021年、CSSのクロスブラウザ対応
2021年になり、クロスブラウザ対応はこれまで以上に簡単になりました。FlexboxやGridをはじめ、多くの新機能がCSSにはあり、過去4年間のブラウザで動作させることができます。フォールバックを提供したい場合でも、段階的に拡張することができます。
さらに、Microsoftは2022年6月15日にIE11（最後のIEブラウザ）のサポートを終了することを発表しました。これにより、多くの人々がCSSの新しい機能を使用するようになるでしょう。これからが楽しみですね！
@supportsルール
CSSの新機能を確認するには、CSSの@supportsルールが便利です。例えば、CSSの比較機能は2019年後半～2020年前半にサポートされるようになり、1年を待たずに使えるようになりました。
|
1 2 3 |
@supports (width: clamp(20px, 10vw, 50px)) { // 適用するスタイルを記述 } |
さらに@supportsの利点はサポートされていないブラウザにCSSの新機能を使用してもレイアウトが崩れることがないことです。ブラウザはそのスタイルを無視し、継承された値またはデフォルトの値を使用します。今日では、このようなフォールバックを簡単に使用できます。
ただし、IEではサポートされていないことに注意してください。
ベンダープレフィックスは必要ないかもしれません
以前はCompassまたはAutoprefixerを使用してCSSを記述していましたが、現在記述するCSSのほとんどはベンダープレフィックスを全く必要としません。
2015年以降、ベンダープレフィックスは不要
例えば、下記のCSSは過去5年間にリリースされたブラウザ（Chrome、Firefox、Safari）用のプレフィックスをまったく必要としません。
|
1 2 3 4 5 6 7 8 9 10 |
.element { display: grid; grid-template-columns: 1fr 1fr; transform: scale(2); } .element-2 { display: flex; flex-wrap: wrap; } |
Autoprefixerは、見落としがちなCSSプロパティのベンダープレフィックスを追加するのに役立つ素晴らしいツールです。2021年になってもベンダープレフィックスが必要なCSSプロパティのリストを紹介します。
一貫したフロントエンドのエクスペリエンスを実現
最近では、ブラウザの一貫性のなさを気にすることは少なくなりました。そのため、特定のブラウザで起こる奇妙なレイアウトのバグを修正しようとするのではなく、目の前の作業にもっと集中できるようになります。
これだけでも、フロントエンドの開発がこれまで以上にエキサイティングになります。CSSの問題やバグについて冗談を言う人もいると思いますが、現在では状況はずっと良くなっています。
CSSの新機能に対するブラウザの採用
2021年になってブラウザの不整合を生むのは、CSSの新機能を実装するタイミングです。例えば、FlexboxのgapはChrome, Firefox, Edgeでサポートされていますが、Safariでは2021年4月にようやくサポートされました。gapを使用するには、適切なフォールバックを提供することが重要です。これがCSSの新機能を採用するのが遅れる理由です。
ありがたいことに、Compat2021のような取り組みにより、ブラウザは新機能をより一貫して提供することになっています（期待しています！）。
CSSフレームワークへの依存度の低下
よく思い出してみると、Bootstrapのようなフレームワークの人気が高い理由の一つは、コミュニティのサポートが充実していて、異なるブラウザでも一貫したエクスペリエンスを提供していることです。最近では、そのような心配をする必要はありません。正直なところ、CSS GridやFlexboxなどがあれば、フレームワークを使用する正当な理由すらありません。
レイアウトを目的にするなら、フレームワークは必要ない
念のために言葉にしておくと、上記の比較はCSS GridやFlexboxで解決できるレイアウト目的でフレームワークを使用する場合です。フレームワークのコンポーネントなどを入手するためにフレームワークを使用するのであれば、それはまったく問題ありません。
いまだに修正が必要なCSSの問題点
Flexboxと画像
これはWebkit系のブラウザで起こる不具合です。Safariでは、親にFlexboxを使用し、その親に直接imgの子がある場合に、画像が引き伸ばされることがあります。
Safariだと画像が引き伸ばされてしまう
この不具合は、まもなく修正される予定です。
参考: Flexbox Cats (a.k.a fixing images in flexbox)
CSS Gridのアニメーション
現在、Firefox以外では、CSS Gridをアニメーション化することはできません。この機能はChromeとSafariも追随すると思われますので、Compat2021にあるように、すぐにアップデートされることを期待しています。
スティッキーのポジショニング
Compat2021によると、CSSのposition: sticky;は、いくつかの使用例で不安定です。例えば、<table>のヘッダをスティッキーにすると、異なるブラウザ間で一貫して動作しません。ありがたいことに、これは今年中に解決される予定です。
複数行の省略
現在、複数行を省略するためにブラウザ間で一貫した方法は見当たりません。私が知る唯一の方法は、ChromeとSafariのみでサポートされている-webkit-line-clampを使うことです。
複数行の省略
|
1 2 3 4 5 |
.element { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } |
CSSは少し奇妙ですが、機能します。
透明のカラー
私の知る限り、transparentキーワードがグラデーションで使用されている場合、Safariでは期待通りに機能しません。
Safariでは機能しない
|
1 2 3 |
.element { background: linear-gradient(to top, transparent, #6187db); } |
これに対する現在の回避策は、代わりにrgbaを使用することです。
|
1 2 3 |
.element { background: linear-gradient(to top, rgba(255, 255, 255, 0), #6187db); } |
ビューポート単位
スマホで100vhを使用すると、予期せぬスクロールが発生することがあります。この原因は、ブラウザがアドレスバーの高さを考慮するために発生します。Louis Hoebregtsはこの問題を解決する簡単な修正方法を記事にしています。
スマホで100vhを使用したのに、高さいっぱいにならない
これを修正する方法は次のとおりです。
解説記事: スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
|
1 2 3 4 |
.my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); } |
|
1 2 3 4 |
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document document.documentElement.style.setProperty("--vh", `${vh}px`); |
インライン開始側のスクロール可能な領域
CSSの仕様によると、
UAは、ボックスのブロック開始側とインライン開始側にあるスクロールコンテナのスクロール可能なオーバーフロー領域をクリップする必要がある（これにより、その側にスクロール可能なオーバーフローがないかのように動作します）。
親要素の外側に負の値で配置された装飾的な子要素を持つセクションがあるとします。期待される動作は、スクロールをクリップすることです。しかし、ドキュメントの方向がRTLの場合、Firefoxではそうはなりません。
Firefoxではスクロールバーがクリップされない
興味のある方のために、この問題について記事を書きました。
終わりに
クロスブラウザの対応は、昔に比べて格段に進歩しています。古いブラウザで壊れた体験をする恐れがなくなり、自信を持ってCSSを書くことができます。古いブラウザを使用しているユーザーが許容できるエクスペリエンスを提供できるように、プログレッシブエンハンスメントを使用して実装してください。
コメントや提案があれば、@shadeed9までお願いします。
謝辞
Una Kravets、Facundo Corradini、Bramus、Kevin Pennekampの有益なフィードバックに感謝します。
sponsors
