IE でどうにかして color:inherit を有効にする

  IE (6 も 7) では、CSS の color: inherit に対応していないので、以下のような場合に他のブラウザと異なる表示になります。

* {
  color: #000;
}
 
p {
  color: #f00;
}
 
span {
  color: inherit;
}

<p><span>ここは color: inherit を指定しています。</span></p>


- Internet Explorer 6.0
  color: inherit of IE

- Firefox 2.0.0.12
  color: inherit of Firefox

  見て分かるとおりに、IE の場合は、ユニバーサルセレクタで指定した #000 が有効になっています。
  要は、CSS 2 に準拠していないということなのですが、これをどうにかして他のブラウザのように #f00 で表示してやろうというのが趣旨です。

  結論から言うと JavaScript での処理になるのですが、はじめに以下のようなスクリプトを書いてみました。

window.onload = function() {
  if (document.all) {
    var e = document.getElementsByTagName('span');
    for (var i = 0, l = e.length; i < l; ++i) {
      e[i].style.color = e[i].parentNode.currentStyle.color;
    }
  }
};


  要は、親要素の color を適用していくという感じです。もちろん、これでうまくいきます。

  jQuery を利用している場合は、以下のような感じで、

$(function() {
  if ($.browser.msie) {
    $('span').each(function() {
      $(this).css('color', $(this).parent().css('color'));
    });
  }
});


  prototype.js を利用している場合は、以下のような感じです。

Event.observe(window, 'load', function() {
  if (Prototype.Browser.IE) {
    $$('span').each(function(e) {
      e.style.color = e.parentNode.currentStyle.color;
    });
  }
});


  さて、上記のスクリプトを見て分かるとおりに IE でしかこの処理は行ないません。
  となると、IE の CSS 拡張 expression が使えそうです。

span {
  color: inherit; /* NOT IE */
  color: expression(this.parentNode.currentStyle.color); /* IE */
}


  これだとシンプルに書くことが出来ます。
  ただし、expression も問題があって、何かしらのイベントが発生するたびに評価されてしまいます。
  例えば、mouseover だったり riseze だったり。
  あともちろん、validator には通りません。

  結論としては、上記の方法を時と場合によって使い分けるのが良いと思います。

# IE が color: inherit をサポートしてくれるのが一番いいんですけどね……
# IE 8 ではどうなっているんでしょう?

- hxxk.jp - IE 7 と color: inherit
  http://hxxk.jp/2006/11/19/2347

Web 標準 XHTML+CSS デザイン クリエイターが身につけておくべき新・100の法則。

  4844324241
  http://www.amazon.co.jp/o/ASIN/4844324241/todaysnonsenc-22/ref=nosim/
  加藤 善規/平澤 隆/両見 英世 (著)
  インプレスジャパン
  ISBN: 4844324241
  2007/7/3
  2,310 円

デザイン的なテクニックだけで満足していませんか?
デザインを忠実に再現するだけではない、ワンランク上の実践的コーディングノウハウを解説。
Web 標準サイト制作を行う上で基本となる XHTML の基礎から現場で使える CSS の技までオールカラーの図解、実例を使って丁寧に解説。
もう「できません」ではすまされない Web クリエイターのための一冊。やりたいことがすぐにできる新・100 の法則シリーズ最新刊!

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

  4861671647
  http://www.amazon.co.jp/o/ASIN/4861671647/todaysnonsenc-22/ref=nosim/
  市瀬 裕哉 (著), 福島 英児 (著), 望月 真琴 (著)
  九天社
  ISBN: 4861671647
  2007/02
  3,360 円

セオリー・オブ・スタイルシート

  4774127833
  http://www.amazon.co.jp/o/ASIN/4774127833/todaysnonsenc-22/ref=nosim/
  技術評論社編集部 (編集)
  技術評論社
  ISBN: 4774127833
  2006/5/19
  3,360 円

  スタイルシートの理論の部分を神崎正英氏が執筆とのことで,これは見なければ.

JavaScript と CSS によるクロスフェードの実現

- Image Cross Fader Redux
  http://slayeroffice.com/code/imageCrossFade/xfade2.html

  面白いんだけど,かなり CPU をつかうなぁ.

各ブラウザがサポートしている CSS 一覧

- Web Browser CSS Support
  http://www.webdevout.net/browser_support_css.php

  以下の項目で IE 6.0,Firefox 1.0,Firefox 1.5,Opera 8.5 がサポートしている
  CSS の一覧を提供している.

  ・CSS 2.1
  ・CSS 3 Color
  ・CSS 3 Media Queries
  ・CSS 3 Paged Media
  ・CSS 3 Ruby
  ・CSS 3 Selectors
  ・CSS 3 User Interface

  ざっと見た感じだと,Firefox 1.5 はかなり対応している印象を受ける.
  リンク先で項目が「I」となっているものはマウスオーバーすると追加の情報をみることが出来る.

安全な style アトリビュートのチェック案

  http://d.hatena.ne.jp/tociyuki/20060206/1139242435

  HTML の style 属性の値を安全なものだけを BNF 記法から正規表現へ.
  Perl のサンプルコードがある.

CSS のボックスモデルをインタラクティブに紹介

  http://www.redmelon.net/tstme/box_model/

  Interactive CSS Box Model Demo

  テーマ自体は新しくも何ともないので面白くないんだけど,Flash を使った説明が非常にわかりやすい.
  スライダーを動かすと一目瞭然.

CSS を使ってキーボードのアイコンっぽく表示させる

  http://kikuz0u.x0.com/td/?date=20060111#p02

kbd {
  color: #333333;
  background-color: white;
  text-align: center;
  border-left: 1px solid #cfcfcf;
  border-top: 1px solid #cfcfcf;
  border-right: 2px solid #666666;
  border-bottom: 2px solid #666666;
  -moz-border-radius: 4px 4px 4px 4px;
  padding-left: 1px;
  padding-top: 0px;
  padding-right: 2px;
  padding-bottom: 0px;
  margin-left: 2px;
  margin-right: 2px;
  vertical-align: top;
  font-family: sans-serif;
}


  例えば,Ctrl+Alt+Del は
  kdb
  のようになる.いい!

PHP で角丸枠 (CSS) を簡単に作る方法

- PhpMyBorder - add round corners by CSS
  http://www.phpmyborder.com/

<?php
require_once 'phpMyBorder2.class.php';
$pmb = new PhpMyBorder();
echo $pmb->begin_round('260px', 'DDDDFF', '78AAFF');
?>

ここに枠内に入れるコンテンツを書く

<?php
echo $pmb->end_round();
?>


  こりゃ便利.

- via: PHPSPOT 開発日誌
  http://phpspot.org/blog/archives/2005/12/phpcss.html