June 20, 2005
Internet Explorer 周りの CSS 制御
とりあえず現行バージョンのすべてのブラウザで問題なく見れるようになった。
Win IE 用に取った対策としては、PNG 透過を使用している部分の画像を新たに JPEG/GIF に変更し、グラデーションの背景は使わない方向で決めたら、あとは CSS の設定を変えるだけで済んだので、結局のところ修正にかかった時間は半日ってところ。
Mac IE に関しては、PNG フォーマットがサポートされていたのでもっと簡単だった。邪魔してる部分の値をコメントアウトするだけで済んだから。
もともと Safari や Firefox では表示に問題はなかったので、つまり IE 周りの制御方法がきちんとできれば良いのだから、その辺を検索してみたら大変分かり易い記事を見つけることができた。
忘れないうちに自分用にメモ。
[参考]
- "そろそろIEをはじくCSSも整理しておきますか" - できる！CSSを使いこなす
- "CSS, Way to go! _SETUP" - 『Web Designing』2004年11月号
具体的にやってみた CSS でのコントロールは以下ような感じ。
1. Mac IE のみに別の値を適応させる（サンプル）
// コメントの終了サイン"*/"をエスケープ"\"することにより、それ以降の記述を読み込ませないようにすることが可能。この場合次のコメント終了サインまでを Mac IE は認識しない。
// 記述例：
P {
/*ココからの値をMac IEは認識しない\*/
color: #FF7171;
/*ココまでの値をMac IEは認識しない*/
}
2. Win IE のみに別の値を適応させる（サンプル）
// Win IE 以外のブラウザは "!important" の記述がある特定の値を優先して認識するが、Win IE は未対応のために、それ以降に別の値を記述し、これを上書きする。
// 記述例：
P {
color: #8F1849 !important;
color: #333333;
}
3. Win IE & Mac IE のみに特定の CSS 設定を適応させる（サンプル）
// htmlを子孫セレクタとして、半角スペースで区切って先頭にアスタリスクマーク"*"を付けた場合、Win/Mac IE 以外のブラウザはこの設定を読み込まない。
// 記述例：
div {
background-color: #8F1849;
}
* html div {
background-color: #CCCCCC;
}
4. Win IE に特定の CSS 設定を適応させない（サンプル）
// ">"サインで示す子セレクタを Win IE は読み込まない。
// 記述例：
html>body div {
background-color: #FF7171;
}
5. Win IE のみに特定の CSS 設定を適用させる（サンプル）
// 上記をふまえると、コメント終了サインをエスケープすることでまず Mac IE を除外し、Win/Mac IE のみに特定の CSS 設定を認識させる方法を使うことで Win IE のみに CSS 設定を読み込ませることができる。
// 記述例：
html>body div {
background-color: #FF7171;
}
/*ココからの値をMac IEは認識しない\*/
* html div {
background-color: #CCCCCC;
}
/*ココからの値をMac IEは認識しない*/
2 と 5 にあまり違いはないけど、一応値のみ変更したい場合と、セレクタ（クラス）全体を変更したい場合とで分けてみた。まぁ組み合わせれば他にもいろいろとできるだろうけど一応今回使った組み合わせを後々のためにも記録。
December 19, 2004
角丸をスタイルシートで表現
CSSのみを使用して、角Rの箱を表現します。サンプルコードはここ。
- 四角形のそれぞれの角R用に画像を用意する。
- :before 擬似要素を用いて、左上の角R画像を表示させ、右上の角R画像は背景画像として指定。
displayプロパティを用いてブロックレベル要素として指定（:block）すれば、角Rボックス内に表示させたい内容の前にそれらを追加することができる。 - 同じ要領で、:after疑似要素を用いて左下の角R画像、backgroundプロパティで右下の角R画像を追加。
---
参考URL:
• Overture ― Academic HTML::CSS2 ＞ Part 1. Let's begin CSS : Chapter 4. “要素の操作” ＞
4.8 自動生成(1)
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs4-08.htm
