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

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

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

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を使用したAppleのサイト

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を使用する人はいないでしょう。

sponsors

top of page

©2019 coliss