clearfix CSSハックに関する教訓

Clearfix CSS Hackに関する教訓

ほぼすべてのサイトでCSSの clearfix hackを使用しています。 clearfix hack(「 簡単クリアクリアハック 」とも呼ばれます)は、構造化マークアップを使用せずに浮動除算( div s)をクリアするために使用されます。 構造とプレゼンテーションを混在させる必要はなく、レイアウトの問題やブラウザの不一致を解決するのに非常に効果的です。 ここ数年の間に、私は簡単クリアメソッドに関するいくつかの有用な情報を書き留めました。 この記事では、これらの教訓をまとめ、clearfixハックの(わずかに)拡張版を示します。

ドットの代わりにスペースを使用してレイアウトを破らないようにする

ここでは、メソッドをカバーする元の記事の 1つに示されているように、clearfixハックのdefacto実装があります:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

content: ".";を含む行に注目してくださいcontent: "."; プロパティ。 私は、引用符で指定されたピリオド(またはドット)が特定のレイアウトを破る厄介な傾向があることを発見しました。.clearfix除算のに(すなわち、 .clearfix:afterセレクタを介して)リテラルドットを追加することによって、clearfix hackは、特定のブラウザのための障害ブロックを作成します。 Internet Explorerだけでなく、レイアウトによっては、Firefoxの:afterにあるレイアウトを塞ぐこともあります。 この微妙なデザインの混乱に対する解決策は? "content: " "; – このトリックは一貫して成功していることが証明され、私が使用するすべてのclearfixハックでこれをデフォルトのプロパティとして使用しています。

/* drop the dot, replace with space */ .clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; } . . .

すべてのスムーズにするには、font-sizeプロパティをゼロに追加する

font-sizeプロパティがハックに含まれ、続いてゼロに設定されると、クリアフィックスされた(おそらく実際の動詞ではない)レイアウトに関連する別の奇妙な矛盾が消えているようです。

/* zero font-size added to prevent potential layout issues */ .clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; } . . .

これは、実際のドットの代わりに空白を使用している場合(前述のように)、残念ですが正直なところ気にしません。 私はいくつかの種類のCSS動物のようなものです – 地獄の戦いと戦うために利用可能な武器をすべて使用しています。 振り返ってみると、私は空白の修正を発見する前にこの解決法を実装したかもしれないと思う。 しかし、一部のブラウザでは空白をテキストとして処理することがありますが、それでも有益な場合があります。 たぶん、おそらく – 私はあなたのCSSの達人のためにそこにそれを投げ捨てるつもりです。

この方法に関する誤った情報に注意してください

いいえ、私はこの記事で提供されているヒントに対してあなたに警告しようとしていません – あなたは彼らが全く無害であることがわかります。 代わりに、私はインターネット上の他の場所や印刷された形で見つかった誤った情報に言及しています。 ここでは、Joseph W. Loweryの他にも優れた本であるCSS Hack&Filtersに示されているように、clearfix hackのプレゼンテーションがあります:

.clearItem:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; } .clearItem { display: inline; } /* Start Commented Backslash Hack \*/ * html .clearItem, * html .clearItem * {height: 1%;} .clearItem { display: block; } /* Close Commented Backslash Hack */

Yikes! あなたは問題が見えますか? 実際、Loweryの “.clearItem”ハックには2つの潜在的な問題があります。 最初のものは、途中の.clearItem宣言のdisplayプロパティのinline値の非推奨使用です:

.clearItem { display: inline; }

..元の記事で説明したように、 IE / Macで浮動小数点数を修正するには、ここでプロパティ値をinline-blockにする必要があります。

.clearItem { display: inline-block; }

Lowery氏の “.clearItem”ハックの2番目の欠陥は、 * html .clearItem *セレクタで、次の行にあります:

* html .clearItem, * html .clearItem * {height: 1%;}

この行の最初のセレクタは、成功したハッキン​​グを達成するために必要なすべてです。 ただし、 2番目のセレクタでは、すべてのInternet Explorerブラウザの高さを効果的に1%設定します。 これはうんざりし、私は難しい方法を見つけました。このバージョンのハックを1ヶ月程度使った後、訪問者の半数( IEを使用している人)がコメントフィールドを残すことができないことが分かったわずか1ピクセルの高さでした! 幸運にも、上記の誤ったコードで見られるように、悪意のあるCSSワイルドカードセレクタ( * )は、 あまりにも時間をかけて犯人を打ち破ることはできませんでした。 その2番目のセレクタを削除した後、すべてがクリックされました。

それでここの物語の道徳は何ですか? シンプル。 盲目的にコピーして勝利に向かう前に、常にコードを二重チェックし、批判的に考えてください。 専門の作家やプログラマーでも間違いがあるので、注意を払って前提を作らないようにしてください。

すべて一緒に今..

すべてをまとめ、これらの教訓をEasy Clear Methodの元の(正しい)バージョンと組み合わせることで、完全に機能し、欠陥を修正するclearfix式を作成します。

/* slightly enhanced, universal clearfix hack */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */

それはラップです! 私はこの記事を書いている間に私がしたのと同じくらい楽しい時間を過ごしたことを願っています。もしそうでなければ、この “ラーニングレッスン”のラウンドは、遍在する、 最後に、この記事ではCSSに焦点を当てているので、ここで提示されたアイデアに関して最も批判的なものではないと私は期待しています。 – 火を遠ざけて、あなたが狂ったCSSヘッド! ;)

No Comments

    Leave a reply