『実践Web Standards Design』買った

css

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips


買った. 分厚いよ(;´Д｀)

一箇所不味いかもしれない点を見つけたので指摘しておく. pp. 355-356のIE6以下での子供セレクタの使用についての内容が微妙.

あり得そうな例として以下を考える *1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  </head>
  <body>

    <blockquote>
      <p><q>外側の引用文<cite>外側のqの引用元</cite></q></p>
      <blockquote>
        <p><q>内側の引用文<cite>内側のqの引用元</cite></q></p>
        <cite>内側の引用元</cite>
      </blockquote>
      <cite>外側の引用元</cite>
    </blockquote>
  </body>
</html>

blockquoteの子である内側の引用元と外側の引用元だけCSSで装飾したい場合, この本の例を使うと

 * {
 color: black;
}
blockquote > cite {
 border: 1px solid gray;
 color: red;
}

とする代わりに

 * {
  color: black;
}

blockquote cite {
  border: 1px solid gray;
  color: red;
}

blockquote * cite {
  border: none;
  color: black;
}

とcssを書くことになる.
しかし, 上の文書にこのcss適用した場合, 外側の引用元のみが赤い字になる. 内側の引用元は, 詳細度の関係でblockquote * citeで指定した方が適用されるので黒字.

*1:Transitionalかよと思った場合は, XHTML 1.0 Strictにして適当にdivの入れ子を考える