フロントエンドを担当する開発者達は、いつもウェブブラウザの互換性の問題に悩まされています。

いつもいつも悩ましいウェブブラウザの互換性の問題

一般的なプロジェクトでは、プロジェクトに入る寸前、見積や提案段階などで今回開発するシステムの対象となるブラウザとバージョンを決めてしまうことが多いのですが、プロジェクトがスタートしてかも内在している問題に直面することは少なくありません。

その中で最も多いのが、ブラウザの互換性などの問題です。

RFCで書かれた内容をブラウザ開発するチームがそれぞれの解釈をもって開発を進めてきた背景がある為に、フロントエンドの開発者が毎度毎度苦しんできた訳ですね。

Compat2021

そこで、GoogleとMicrosoft？が中心となって#Compat2021と呼ばれる取り組みを始めました。#Compat2021は、「開発者が信頼性のある基盤として自信を持ってビルドできるようにするために、５つの主要な分野におけるブラウザの互換性問題を排除すること」としています。

2021年に排除を目指す上位5つの重点分野

  • CSS Flexbox
  • CSS Grid
  • CSS position: sticky
  • CSS aspect-ratio property
  • CSS transform

思い当たる節があるもの5つが並んでいますが、この中で最もよく使っているのは、「CSS Flexbox」ではないでしょうか。

「CSS Flexbox」はWebで広く使われているフレキシブル ボックス レイアウト モジュール（Flexible Box Layout Module）です。

CSS Flexboxとは

CSSユーザーインターフェースに最適化されたCSSフレキシブルボックスモデルですので、柔軟且つ簡単にボックスレイアウトを組むことができるとっても便利なボックスモデルです。

使い方も簡単で、Flexコンテナーと呼ばれる親要素となる箱の中にFlexアイテムと呼ばれる箱である子要素を入れていきます。

HTML
<div class="conteiner">
 <div class="item">hoge1</div>
 <div class="item">hoge2</div>
</div>
CSS
.container {
  display: flex;
}

子要素の並ぶ向きを変更したいときは、CSSにflex0drection:row-reverse;　などを入れてあげれば簡単に子要素の向きを変更することもできます。

画像が歪んでしまう auto-height

さて、そんな便利な「CSS Flexbox」ですが、auto-heightフレックスコンテナに画像のサイズが正しく表現されない！問題があるということで、“2021年に排除を目指す上位5つの重点分野”として挙げられています。

web.devでも紹介されていますが、IgaliaのFlexboxCatsブログで多くの例が挙げられていますので、念の為、ここにもリンクを張っておきます。

その他、プロジェクトの中で使いそうだなと気になるのは、「CSSアスペクト比プロパティ（CSS aspect-ratio property）」でしょうか。プロジェクトに入り、いざ開発を進めていくとあれ？動かないな？？となりドツボにハマることにならないように、ここで挙げられた5つの重要分野は頭の片隅に入れておくことにします。(;^ω^)

今日も一日頑張りましょう！

Have a great day!