CSS が勧告されたのは 1996年です。それまで Web ページの見た目は HTML の table タグや font タグで作られていました。CSS の歴史は、見た目の指定を HTML から切り離していく過程そのものです。

テーブルレイアウトの時代

1990年代後半から2000年代前半まで、段組みは table で作られていました。左にメニュー、右に本文という2列は、1行2列の表です。余白は幅1pxの透明な画像（スペーサーGIF）を引き伸ばして作っていました。

この書き方は、見た目と中身が完全に混ざります。レイアウトを変えるには HTML を組み直すしかなく、読み上げソフトは表として読んでしまいます。いまでもメールの HTML では table が使われますが、それはメールソフトの対応が限られているためで、Web ページでは理由がありません。

float の時代

2000年代半ばから、段組みは float で作られるようになります。要素を左右に寄せて回り込ませる指定で、本来は画像に文章を回り込ませるためのものでした。段組みに転用したため、回り込みを解除する clearfix という決まり文句が必要になります。

改修案件で clearfix というクラスを見かけたら、その時代に作られたCSSです。高さの計算が中身に依存するため、片方の列だけ背景色が途切れるといった崩れ方をします。

CSS3 とベンダープレフィックス

CSS3 は、ひとつの大きな仕様ではなく、角丸・影・アニメーションといった機能ごとのモジュールに分かれて策定されました。そのため「CSS3 に対応している」という言い方は、実際には機能ごとに状況が違います。

この時期、仕様が固まる前の機能を試すために -webkit- や -moz- を頭に付ける書き方が広まりました。いまも古いCSSに残っていますが、現在のブラウザでは不要なものがほとんどです。

Flexbox と Grid

• Flexbox … 1方向に並べるための仕組み。2015年前後から実用的に使えるようになった
• Grid … 行と列を指定する仕組み。2017年に主要ブラウザが一斉に対応した

この2つで、段組みのために float を使う理由がなくなりました。「段組みのための仕組みで段組みをする」状態に、CSS が始まってから20年かけてたどり着いたことになります。

いま何を基準に書くか

CSS にはバージョン番号が振られなくなり、機能ごとに仕様が更新され続けています。そのため「CSS4 に対応」という基準は存在しません。使えるかどうかは機能ごとに調べることになります。

実務では、主要ブラウザの直近2〜3年のバージョンで動くかどうかを基準にすることが多い形です。対応範囲を先に決めておかないと、確認の手間も修正の範囲も見積もれません。

古いサイトを引き継ぐとき

1. table で段組みされていないか（されていれば作り直しの判断が要る）
2. clearfix が使われているか（float 時代のCSS）
3. ベンダープレフィックスがどれくらい残っているか
4. リセットCSSが何を使っているか（時代によって中身が違う）

当社では、改修のご相談をいただいた際にこの4点を確認し、部分的な修正で足りるか、CSSから組み直したほうが早いかをお伝えしています。