CSSのデバッグは、けっこう難しい

Web制作で一番悩ましいのが、期待通りに動作しないことだと思います。
CSSも簡単なものであれば、すぐに原因が特定できて修正できますが、デバッグするのが難しい時もあります。

そんな事例を紹介します。

CSS debugging is hard
by Vincent De Oliveira

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSSのデバッグは難しい

CSSはデバッグするのが難しい時があります。Appleのサイトを例に見てみましょう。

blink-devで先日、backdrop-filterの実装についてアナウンスされました。
backdrop-filterとは、要素の背景（その下にあるもの）にフィルタを適用する本当に素晴らしいCSSのプロパティです。このプロパティはすでにSafariとEdgeに実装されており、Chromeでも2015年からflagsでテストすることができます。
参考: backdrop-filterを使用したいろいろな実装例

Appleのサイトでもこのbackdrop-filterが使用されていますが、要素の外側で背景がぼやけているバグがあります。

backdrop-filterは要素の外側に適用されています。

コードを確認してみると、これはバグではなく、backdrop-filterにも関係していないことが分かります。この問題は単に、CSSの基本的なことが原因です。

原因が分からない空きスペースを調べる時に最初に行うことは、各要素を調べてそれがどのように機能するかを確認することです（レイアウトに影響を与えるすべてのプロパティを一つずつ確認し、問題無いものは対象から外します）。運はありません、地道にです。

地道に一つずつ確認します。

原因は他のところにあるかもしれませんが、時間を無駄にすべきではありません、これは私のブログ記事（Deep dive CSS）でも説明したinline alimentsの問題です。具体的には、ベースラインとdisplay: inline-block;の要素によるデフォルトの配置です。

再び、Appleのサイトを見てみましょう。
<li>内の各リンクは、高さ44ピクセル（ナビゲーションバーと同じ高さ）のinline-blockに設定されています。inlineは特に指定がない限り、要素はベースラインに整列されます。しかし、ここではdisplay: inline-block;が設定されているため、そう簡単ではありません。

• 要素にテキストがあり、overflowがvisibleの場合、ベースラインは最後のラインボックスです。
• 要素にテキストがない場合、またはoverflowがvisible以外の場合、ベースラインは下マージンの端です。これが原因です。

何が起きているか分かりやすくするために、<li>内の先頭に幅ゼロの文字（&zwj;）を追加してみます。

幅ゼロの文字追加すると、問題が明らかになります。

原因が明確になりました。
リンクは親のベースラインと揃っているため、ラインボックスは想定よりも高いです。私の記事で述べたように、背景があってもラインボックスは表示されません。

従って、修正は簡単です。
vertical-alignを使用すると、外側のぼやけが無くなります。

ラインボックスの高さを固定するためにvertical-alignを使用。

他にも解決策があります。

• <li>にdisplay: inline-flex;を使用する。
  子はブロック化され、リンクの計算値はブロックになります。
• リンクにfloat: left;を使用する。
  しかし今時floatを使用する人はいないでしょう。