タグ

CSSと_WWW WATCHに関するhxxkのブックマーク (4)

  • !important だらけの CSS にお別れを

    CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて (段階的に) 適用されます。よって、簡単に言っ

    !important だらけの CSS にお別れを
    hxxk
    hxxk 2007/03/01
    <q>先頭に記述されたものから適用されていき、後に記述したものが上書きされていくので、結果、「後に記述したものほど優先順位が高くなる」 というルールが基本になります</q>CSS HappyLifeとあわせて。
  • line-height に単位ありの指定は駄目?

    最近、CSSline-height プロパティに指定する値は単位なし (<number>) が良いという話が話題になっているようです。別に今に始まった話題ではないんですけども、最近この話題に触れている記事の中に、ちょっと気になる書き方をされる方がいるので書いてみます。 で、そもそもなんで line-height の値は <number> で指定しておいた方がいの?ってところですが、その理由をわかりやすくまとめている Lucky bag::blog さんの記事をまずは紹介しておきます。 line-height の値には単位なしが良いとされる理由 : Lucky bag::blog line-height の値には、 normal inherit <length> <number> <percentage> が指定できますが、ユーザーエージェントのデフォルト値を使用する normal と

    line-height に単位ありの指定は駄目?
    hxxk
    hxxk 2007/02/23
    <q>「問題が起こります」 という書き方からすると、何か意図しないことが起こるというか、単位ありの指定は駄目です的なニュアンスに聞こえてしまう</q>あとで書籍の言い回しを確認。
  • CSS セレクタに関するおさらい 3

    前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関して... 前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」 を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基になる予定ですので、今回は仕様書に合わせて 「::」 と記述しています。 この 「::」 方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。 擬似要素 (pseudo-element) E::first-line

    CSS セレクタに関するおさらい 3
  • IE7 の CSS レンダリングを検証

    IE7 の日語版もリリースされ、ぼちぼち使い始める人たちも増えてきそうな今日この頃。 IE7 からは今まで Firefox 等に比べて遅れていた CSS への対応も進み、サイト制作者にとってはうれしい限りなのですが、実際 IE7 のCSS レンダリングはいかがなものか、簡単に検証してみました。 今回検証したのは、IE7 におけるボックスモデルの取り扱いと、セレクタへの対応状況。 まずはボックスモデルの検証ですが、用意したのは下記の XHTMLCSS。 <ul> <li class="first_list">First element of list</li> <li class="second_list">Second element of list is a bit longer to illustrate wrapping.</li> </ul> ul { margin:0;

    IE7 の CSS レンダリングを検証
    hxxk
    hxxk 2006/11/26
    <q>IE7 はボックスモデルの解釈は IE6 から変化なし (だと思う)。最大の改善は、互換モードへの切り替え仕様が変更になったところ。</q>
  • 1