タグ

*CSSと歴史に関するyamadarのブックマーク (2)

  • floatを解除する手法のclearfix と 次世代のレイアウトの話

    floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

    floatを解除する手法のclearfix と 次世代のレイアウトの話
    yamadar
    yamadar 2013/06/20
    もっとCSS3の話になるかと思ったら歴史の話だった。でもそれぞれのプロパティについて理解を深める良い内容。小手先の技術でなく、基本をきちんと理解してるのは強いです。
  • なぜリセットではなく Normalize.css を使うのか | Yomotsu net

    まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、末転倒な HTML まで

    なぜリセットではなく Normalize.css を使うのか | Yomotsu net
    yamadar
    yamadar 2013/05/24
    歴史もちゃんと解説してくれる素晴らしい記事。
  • 1