CSSハックとかweb標準とか
web標準？
わかるよ、わかるけど、もうそういう単語にすがってwebの先端気取りになるのをやめにしないか。
web2.0もみんな大好きだったね。
考え方や捉え方としての単語なら大歓迎だし、それについて議論するのは良い事だと思う。
でも実際は生産性に欠けるんじゃないかと感じてるし、なんとなくwebのスピードが落ちたように感じてる。
あえて枠にハマる事でできるクリエイティブもあると思うけど、枠にハマらず考えた事をどんどん形にしていったほうがクリエイティビティに富んだwebになるんじゃないかと。
だからハックは邪道だとか、strictなコードじゃないとダメだとかどうでもいい気がしてきた。
本当にstrictなコードを書かないと困るエンドユーザーがどれだけいるの？
ハックしてると困るユーザーがどれだけいるの？
品質として求められるというのはわかるけど、使うのはエンドユーザー。
エンドユーザーの視点から見ると、strictなソースじゃなくてもちゃんとブラウザで表示できればいいわけで。
だからもしすんなりstrictなコードが書けるなら書けばいいと思うけど、それで生産性が落ちるくらいならどんどんハックすればいいと思う。
って、ここまで書いただけで終わらせるのもアレなので私の場合のCSSコーディング方法を参考までに。
- 基本的に、XML宣言あり（IE6を除くモダンブラウザで標準準拠モード）でコーディング
- CSSは共通CSSと各コンテンツCSSに分けて書いてimport
- コンテンツ同士で共通するスタイルがあってもコンテンツ（ページ）別に分けて書く
- まずはwindows firefoxを基準にコーディング
- firefoxでのコーディングが終了したら各CSSファイルの最後にハックを書く
今まで色々と試行錯誤を繰り返したが、一番速く楽にコーディングする方法としては現在のところXML宣言ありでIE6に対してのみwidthとheightの調整をする形に落ち着いています。
CSSは同じスタイルがあるとどうしても共通classにしたくなるが、グッとこらえてコンテンツ別のスタイルとして書く。
レンダンリングはさほどエレガントではないけれど、一番標準的なfirefoxを基準にコーディングしています。
ちなみに、IE6以後のブラウザしかターゲットにしません。
IE5とか使ってる人もいるとは思うけど、もうそんな古いブラウザに対して提供できる新しいサービスを作ることは難しすぎるため。
ソースの例
/**
* common.css（共通CSS）
*/
/* エレメントのスタイル */
body {}
div {}
a {}
...etc
/* ベースレイアウト */
#header {}
#container {}
#footer {}
#left {}
#center {}
#right {}
/* header内のコンテンツスタイル */
#header h1 {}
#header p {}
/* footer内のコンテンツスタイル */
#footer ul {}
#footer ul li {}
#footer p {}
/* left内のコンテンツスタイル */
#left ul.nav {}
#left ul.nav li {}
...etc
/* right内のコンテンツスタイル */
#right ol.hogelist {}
#right ol.hogelist li {}
...etc
/**
* メインコンテンツになるcenter内のスタイルはページごとに別ファイルで書く
* ページごとにコンテンツ名classをつける
* 例）#center.toppage {}
*/
/**
* hack@ie7
* font-sizeをfirefoxより10%ほど下げる
* line-heightを140%くらいに
* letter-spacingを0.1emくらいに
*/
*+html body {}
/**
* hack@ie6
* font-sizeをfirefoxより10%ほど下げる
* line-heightを140%くらいに
* letter-spacingを0.1emくらいに
* paddingとwidth/heightを同時に指定してあるものはwidth/heightをpadding+width/heightに修正
*/
* html body {}
* html body #left ul.nav {
例）padding: 5px; → padding: 5px;
例）width: 200px; → width: 210px;
}感じとしてはこんな形でやるのが今のところ一番効率が良いです。
firefoxでのコーディングが終わった後にIE6で表示すると「うわっ」と思いますが、width/heightを検索して同時にpaddingが指定してあるものは下にコピーし修正で意外と早く済みます。
今まで試行した中で一番効率の悪い方法は、都度色々なブラウザで表示確認をしながらコーディングする方法。
なるべくハックしないように書こうとするとやってしまいがちだけど、一つのブラウザで表示が整っていないために変更を加えるとまた違うブラウザで表示が崩れる、という効率の悪いループを繰り返すハメに。
