SEEDA - 街風

音楽

街風

街風

><

CSS3 Color Module - RGBA, opacity

CSS

アルファチャンネルが要素の背景色や文字の色の透明度を個別に指定するのに対して、opacityプロパティは要素全体の透明度を指定する。

http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20367886,00.htm

CSS 3では、opacityプロパティは、RGBAの処理の後に適用するものと定義されている。この定義によると、opacityを指定した要素はまず、子要素も含めてRGBAでレンダリングされ、オフスクリーンイメージとなる。その後、オフスクリーンイメージをページに表示するときに、opacityで指定した透明度を適用することになっている。

http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20367886,00.htm

Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

http://www.w3.org/TR/2003/CR-css3-color-20030514/

アドオンの互換性チェックを無視する

Firefox

テスト目的で、アプリケーションにアドオンインストール時の互換性チェックを無視するよう指示することができます。単に真偽値設定の extensions.checkCompatibility を作り、false に設定してください。

http://developer.mozilla.org/ja/docs/Extension_Versioning,_Update_and_Compatibility
  1. about:configへ移動
  2. 右クリック、新規作成、真偽値
  3. 「extensions.checkCompatibility」と入力
  4. falseを選択

RangeのcreateContextualFragment()で消される可能性のあるノード

DOM JavaScript Firefox Opera Safari
  • 文書型宣言
  • 処理命令
  • マーク区間
  • html
  • head
  • title
  • meta
  • link
  • body
  • ...
var str = "<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'><html>"+
   "<head><meta content=''><link><title>a</title></head>"+
   "<body><?test ?><p><![CDATA[ a ]]></p></body>"+
   "</html>";
var range = document.createRange();

//document直下を選択中の場合
//Firefox 3 beta 3ではcreateContextualFragment()でエラーになる
//Safari 3.0.4 betaではcreateContextualFragment()で落ちる
range.setStartAfter(document.body);
var f = range.createContextualFragment(str);
alert(new XMLSerializer().serializeToString(f));
Firefox 3 beta 3
<META content=""/><LINK/><TITLE>a</TITLE><P><!--[CDATA[ a ]]--></P>
Opera 9.50 beta 1
<meta content=""/><link/><title>a</title><?test ?><p><![CDATA[ a ]]></p>
Safari 3 beta (3.0.4)
<p></p>
  • ≒innerHTML

clip (IE, 2 vs 2.1)

CSS IE
clip 2 2.1
適用 ブロックレベル, 置換要素 絶対位置決めされた要素
rectの区切り子 空白? コンマ? コンマ(must), 空白(may)
0 上右下左それぞれの辺 上下は上ボーダ辺、左右はテキスト方向によって左ボーダ辺か右ボーダ辺

counter

CSS Firefox Safari 
<head>
<style>
body { counter-reset: test; } /* ← */
h1 { counter-increment: test; }
h1::before { content: counter(test) ". "; }
</style>
</head>
<body>
<div><h1>a</h1></div>
<div><h1>b</h1></div>
</body>