大藤幹『世界の「最先端」事例に学ぶCSSベスト・プラクティス』を読んだ。

CSS2の復習用に『世界の「最先端」事例に学ぶ CSS ベスト・プラクティス』(asin:483992676X)を読んでみた。
とりあえず

• 画像置換はimg要素＋(unobtrusiveな）javascriptでやるに限る
• CSSのみを使う画像置換テクニックは、デメリットが解消されない
  • text-indent:-9999px;とか

ということを改めて再確認した
追記:2008.04.15
以下この本から学んだ諸点：
ボックスモデルハックのポイントは、voice-familyプロパティの値内部の波括弧（}）を宣言ブロックの終了と解釈してしまうか、値の一部とみなすかどうか。モダンブラウザは値の一部として解釈。IE5.5以前では値の一部ではなく宣言ブロックの終了として解釈。p.8

voice-family: "\"}\"";

Star htmlハックがポピュラーな理由↓

視覚的に目立ったポイントが先頭にあって、普通の表示指定とは区別しやすく、セレクタレベルで使うもので、問題のあるWebブラウザに対して使用するもの。p.11

* html #hack{....}

仕様ではq要素は前後に引用符がデフォルトで表示される。しかしIE4〜6では引用符が表示されない。対策として、q要素の前後に引用符を表示させないようにして（:before、:after擬似要素を使う。例↓）、引用符をマークアップする。p.17

q:before,q:after{content:"";}

属性セレクタのみを使ったセレクタの使用例↓（初めて見た）。p.17

[title]{border-bottom:1px dotted #999;}

letter-spacing:-9999em;を使った画像置換。MIR image replacement | And all that Malarkey。利点はないんじゃね？ｂｙ著者。p.21
clearfixを使わずに、親ボックスの大きさを伸ばすやり方として、親ボックスをfloatさせる。Netscape6では効かない。p.27
body要素にclassを指定して、レイアウトパターンを増やすやり方の起源。Douglas BowmanのStopdesign。p.30
仕様上class属性は複数指定できるが、仕様通りの動きをするのは「ヴァージョン５以降のWebブラウザ」p.34

フォームは多くの場合、そのサイトの最大の目的である購買や登録に結びつく場面で使われることが多い。さまざまな環境下でユーザーがフォームの内容を自然に理解・判断でき、余計なストレスを感じないようにした方が適切だと言えるだろう。p.37

ie6までli要素にバグあり。ソースを改行してると、余白を表示の際に入れてしまう場合がある。回避策の１つはソース内で改行しないことだが、デメリットは可読性が下がること。もう一つの回避策はKhmerang.comが採用してる、li要素の閉じタグ内部で改行するやりかた↓p.41

また、IEではa要素内に含まれる要素を絶対配置にするとマウスカーソルの形状が変化しなくなるp.41

heightプロパティにパーセント指定をしても、基準になる親要素のheightプロパティが「auto」の場合は、自動的に「auto」に上書きされる。回避策は、親要素にheight指定していない場合は、明示的にheight:100%;を指定。p.61
フォーム関連要素へのcssの指定は、表示結果がブラウザごとに相当変わる。表示テストが必須。p.67
背景画像のロールオーバーのコツ。通常時とhover時のbackground-positionの位置をpixel単位で指定する必要がないような形で画像を用意する。例えば通常時は、background-position:top left;。hover時はbackground-position:bottom left;。.71
media属性は仕様上のデフォルトはscreenだけど、多くのブラウザの実装はallになってる。p.75
IBMホームページリーダーのVer.2世代はエンジンがNetscape4であるため、このヴァージョンのスクリーンリーダー向けのアクセシビリティ対策をするときは、Netscape4向けの対策が必要。p.77
font-sizeプロパティは1パーセント刻みで指定できるが、ブラウザ上でのレンダリング結果はブラウザごとに変わる。ie6だと2パーセントごとにしかかわらない（例えば、70%と71%は表示結果は同じになる）。p.86
id名・class名にアンダースコア(_)を使うと、旧世代のブラウザでは無視される。p.100
height:0;でテキストを消してpadding-topに背景画像を表示させる画像置換について。この場合は、消されたテキストをIBMホームページリーダーのVer.2以降で読み上げられる。

ここで注意すべき点は、古いWebブラウザの中には1ピクセル四方の小さな背景画像をタイル上に表示させると、動作が極端に重くなってしまうものがあることだ。たとえばNetscape6.xでこのサイトを見ると表示されるまでにかなりの時間を要する。p.127

各ブラウザで「1em=10px」に揃えるための指定p.133

body{font-size:62.5%;}

Safari2で使える（Safari3には効かない）ハックp.163

body:last-child:not(:root:root)

floatとposition:relative;の併用がダメなブラウザ＝Mac IE5 p.171
floatといわゆるnegative marginの併用が駄目なブラウザ＝IE6以下。p.171

特別な意図がない限り、line-heightプロパティには単位なしの相対値を指定しておいたほうが安全だ。p.175

大文字で入力すると、音声ブラウザ環境で正しく読み上げられなくなるなどの問題が発生する場合がある。p.1755

インライン要素にはmargin-topとmargin-bottomが指定できない。包含している子要素があればそれをfloatさせることで余白が取れるようになる。p.178
background-positionプロパティにキーワードと数値の組み合わせることは、CSS2ではダメだがCSS2.1ではOK.p.189
ie5.5以下とie6-7（の後方互換モード時）ではimg要素に指定したpaddingは効かない。p.219
●今度は以下おかしい点：
・The Web Standards Projectの２段組の背景画像がウィンドウサイズに柔軟に対応してるわけは、背景画像のサイズと、cssでのbackground-positionの指定↓、と言ってる。p.85

#container, body.category #container {background: url(/files/theme/container.gif) repeat-y 40% 0;}

↑ツッコミ。上記１行をfirebug上で削除しても表示は変化しない。WaSpのサイトのレイアウトの実現はもっと複雑な指定が必要。著者の書き方はミスリード。
・Olson Sundberg Kundig Allen Architectsの背景画像がロードごとに切り替わる処理についての説明

XHTML内の「style属性」で指定されている。p.97

↑ツッコミ。bodyタグのstyle属性内部にスタイルを書き込まれている。ロード時の切替はもちろんcssでできることではないし、このサイトにではjavascriptも使わず、サーバーサイドでページを生成している（jsオフ環境でも動作する）。

世界の「最先端」事例に学ぶ CSS ベスト・プラクティス [Web Designing Books] (Web Designing BOOKS)

posted with amazlet at 08.08.21

大藤 幹
毎日コミュニケーションズ
売り上げランキング: 26139

おすすめ度の平均:

「最先端」のページレイアウトを取り込むために

Amazon.co.jp で詳細を見る