Chapter 3 Q&A編
2010/08/25(水) 18:09 CSS親記事へこのエントリーをはてなブックマークに追加

Category_XHTML

Theme 001 「条件分岐コメント」とは何ですか?

IEにしか使えない表記法、というかIEにしか使わない。
特定のバージョンに適応


特定のバージョンだけ無視させる
<![If 条件式]>
<![endif]>

Theme 002 「標準準拠モード」「後方互換モード」とは何ですか?

「標準準拠モード」 Web標準
「後方互換モード」 古いページへの互換性を持った表示
IEは「後方互換モード」が元でそれに「標準準拠モード」を追加しているの対して、
他のブラウザは「標準準拠モード」に「後方互換モード」を追加している。

Theme 003 「代替スタイルシート」の指定方法は?

Alternative style sheets - MDC
IEとwebkit系は未対応

Category_CSS

Theme 004 「CSSハック」とは何ですか?

Theme 016 CSSハックは厳選したものだけをポイントを押さえて使うなどを守って使う。
CSSハック表。

Theme 006 「hasLayout」とはどのようなプロパティですか?

hasLayoutプロパティはIE独自のプロパティで、内部的に2種類の状態に分けてどちらの状態かを示している
  1. 親要素の大きさや位置に四手自信の大きさや位置が決定される false
  2. 要素自身でその大きさや位置を決定してる true
[CSS]IEのhasLayout関連のバグと解決方法をまとめたサイト -hasLayout.net | コリス trueにするプロパティの組み合わせなどがあり、trueにすると問題を解決できたりするが、弊害もあるので。

Theme 008 セレクタを組み合わせる時のルールがわかりません

シンプルセレクタは3つの要素からなるセレクタの基本単位
シンプルセレクタ
タイプセレクタ、要素名id , class疑似属性(:beforeなど)
ユニバーサルセレクタ *疑似クラス(:hoverなど)
属性セレクタ([属性名="属性値"]など)
シンプルセレクタ同士をセレクタの結合子で組み合わせて要素を指定する。
ホワイトスペース、> +を使う。CSS3とかではもっと増えているけど。

Theme 009 指定が競合した場合はどのような指定が優先されますか?

まあ普通のCSSの場合ならstyle属性 > !important > styleタグ
3者間の分類での優先度なら
ユーザー!important > 制作者!important > 制作者 > ユーザー > ブラウザ
となります。
また上の場合ではユーザー > 制作者ですが、時系列順で後から!importantをつけたものを指定すれば優先されます。
最後に制作者内で同じ要素に対して複数のセレクタでCSSを指定したときにどう優先されているのかはセレクタの固有性の計算で決まります。
style属性は特別なので、制作者内なら固有性は最も高く優先されます。
それ以外の場合は以下のように固有性が高いほど優先されます。
つまり、上に行くほど固有性が高く優先されるので、そのセレクタで指定したものが適応されます。
div#header h1
   #header h1
div.header h1
   .header h1
div h1
    h1
        *

Theme 010 line-heightの値に単位を付けた時と付けない時の違いがわかりません

line-height:1.5;のようにしたときは文字サイズに対しての相対指定。

Theme 011 コメントの使いどころがわかりません

CSSのコメントは見やすさをあげるためには大切。
CSSには=が出てこないので検索ジャンプのために=クラス名などの工夫も見かけることがある。
/* =class *?
.class

名前:  非公開コメント   

  • TB-URL  http://efcl.info/adiary/064/tb/