02/13
CSS初期化のトレンド?■1ピクセルのずれも許せないWebデザイナのためにResetting Again
(マイコミジャーナル)
Webの流れってホント流行り廃りが早いけど、
そんな中でも今回はコーディングについての話題。
一昔前まではテーブルレイアウトを普通にやってたわけだけど、
今テーブルレイアウトで組んだりすると、同業者からは
それこそ鼻つまみ者的な扱いを受けますよね。(おおげさ w
まぁ、おかげさまでCSSレイアウトの流れには何とか乗れている(?)
わけですが、CSSレイアウトの中でも組み方に主流と呼ばれる流れが
あったりするものです。
私はCSSでのコーディング時に、
面倒なので*(アスタリスク)でmarginやpaddingを
全初期化することが多いのですが、最近はその流れも古いようで
上記URLの記事のように、一部の要素だけを初期化して
ブラウザ間のずれも吸収して表示を最適化してしまおうよ、
てのが主流のようです。
たしかに*(アスタリスク)での初期化はすべてのプロパティを
初期化するわけなので、処理が重くなりがちですし、
顕著なのが<input>タグ等のフォームでpaddingが0になると
Firefoxでの表示が詰まりすぎたりして、結局inputプロパティの
padding値を設定しなおしたりという無駄なコードが増えるわけですし。
まぁ、あれだ。
「初期化は計画的に!」
てことネ。(これが言いたかっただけ
01/10
こいつを待ってたゼ!『IE7.js』■IE6以下をWeb標準に準拠させるライブラリ『IE7.js』(to-R)
▼以下抜粋
こいつがあれば、IE6以下のためだけにハックを多用せずに済みますので、より理想的なソースが書けるってもんですよね。
(長期的な流れの中でIE6以下を対応ブラウザから切る場合も
JSのリンクをはずすだけで済むわけですし。)
透過PNG対応もうれしいですが、
min-height
とかのプロパティに対応してくれているのも何気にうれしい。
疑似クラスへの対応もうれしい限りです。
:first-child
とかね。
ダブルマージンのバグの対応もしてくれる徹底ぶり。
これで検証も楽になりそう。
01/08
IE7:filterを使用するとフォントのアンチエイリアスが無効になるタイトルのままなのですが、
これまた遭遇確率の低い地味な現象なので備忘録として。
IEの独自拡張として用意されているfilterですが、Web制作時には
おもに透明度(opacityとか-moz-opacity)のクロスブラウザ対策として
使用することが比較的多いかと思います。
その際、IE7でこのfilterを指定すると指定された要素内のテキストの
アンチエイリアスが無効になるようです。
07/17
参考:input タグ周りのCSS適用前後のビジュアル一覧元ネタは古いのですが、おもにコーディング前のデザイン時や
提案資料作成時に参考になるかもな記事があったので紹介しておきます。
Styling even more form controls | 456 Berea Street
ブラウザとOSごとのボタンやプルダウンなどの入力フォーム回り
のビジュアルが一覧で紹介されている
(2007/7/17時点ではVistaでのビジュアルはないようです)ほか、
それぞれに同じCSSを適用した時の変化状態も確認できるので、
フォームにデザイン的なアクセントをつけようとされる際には
参考になるかもですね。
まぁ、アクセントといっても
ご覧になれば言うまでもないことかもですが、
特にフォーム回りはブラウザごとにビジュアルが大きく異なり、
CSSの対応状況もまちまちです。
ので、個人的にはフォームには余白とフォントサイズの指定程度
にしておくのが現状ではベターかと思いますけどね。