P-0032 Netscape 6/Mozilla の CSS 独自拡張

Netscape 6(Mozilla) は CSS 1 ・ CSS 2 部分サポート以外にも、様々なプロパティ・値を独自拡張で実装しているようです。分かる範囲で調べてみました。

空白の部分は未調査です。また、バイナリの中からそれらしい語を拾ってきているだけの部分もありますので、実際にはまだ動かないプロパティもあるようです（少なくとも html.css などの中で使われているものは、おそらく実際に動いているはず）。 CSS 3 の先取りと書いてあるものは、 W3C の CSS 3 WD 等で検討されているプロパティに等しいと思われるものです。将来の CSS 3 勧告では削除される可能性も無いとは言い切れません。

独自の疑似要素・疑似クラスも大量に実装しているようですが、それについては調べていません。

独自拡張のプロパティ
プロパティ値説明適用例
-moz-box-sizing
  • content-box
  • border-box
 CSS 3 の「 box-sizing 」の先取り実装。別項にて解説。 例
-moz-outline
  • 〜 -style
  • 〜 -width
  • 〜 -color
 border と同じ CSS 2 の「 outline 」らしい。ただし、要素の border の内側に表示される。 例
-moz-border-radius
  • 〜 -topleft
  • 〜 -topright
  • 〜 -bottomright
  • 〜 -bottomleft
 数値 CSS 3 の「 border-radius 」関連の先取り実装。 border の角を丸める（丸みの円弧の半径を指定）。「 100% 」で円になる。背景も丸くなるので、「丸角テーブル」の再現に利用可能。 border と同じ要領で左上・右上・右下・左下の順に個別に指定可能。 例
-moz-opacity パーセント値、又は0〜 1 の小数値 CSS 3 の「 opacity 」の先取り実装。要素の透明度を指定する（ボーダー・背景・文字全てが透過する）。 例
-moz-float-edge
  • margin-box
(-moz-resizer)
  • auto
  • both
  • horizontal
  • vertical
  • none
 CSS 3 の「 resizer 」の先取り実装。要素の表示領域をユーザーが拡縮することを許可する。「 auto 」は実装依存、「 both 」は縦横両方に許可。 overflow:scroll とは異なることに注意。実際にはまだ動かない様子。
-moz-binding
  • none
  • URL
(-moz-key-equivalent)
  • キーの組み合わせのキーワード
  • 実際のキーの組み合わせ
  • none
 CSS 3 の「 key-equivalent 」の先取り実装。 HTML 4/XHTML の accesskey の代用になるらしい。実際にはまだ動かない様子。
-moz-user-input
  • enabled
  • disabled
  • none
 CSS 3 の「 user-input 」の先取り実装。フォーム系要素の有効無効を設定する。
(-moz-user-modify)
  • read-only
  • read-write
  • write-only
 CSS 3 の「 user-modify 」の先取り実装。要素内のテキストの変更の許可を設定する。標準では、例えば<textarea> は「 read-write 」、<p> は「 read-only 」となる。実際にはまだ動かない様子。
-moz-user-select
  • none
 CSS 3 の「 user-select 」の先取り実装。
-moz-user-focus
  • normal
  • none
 CSS 3 の「 user-focus 」の先取り実装。「 none 」だと、 Tab などでフォーカスをその要素に移動できなくなる。

※全てのプロパティには、値「 inherit （親要素の指定を継承）」が指定可能。

独自拡張の値
値指定するプロパティ説明適用例
-moz-pre-wrap white-space 「 pre 」のようにテキストを整形済で表示し、且つ自動折り返しする。 <textarea wrap="soft"> などの CSS での再現用と思われる。 例
  • -moz-center
  • -moz-right
 text-align 中に入る要素のブロックそのものを中寄せ/右寄せする。中の要素に margin:0 auto; / margin:0 0 0 auto; と指定するのと同様。<center><div align="right"> や IE での text-align:center/right; の再現用と思われる。 例
  • -moz-scrollbars-vertical
  • -moz-scrollbars-horizontal
  • -moz-scrollbars-none
 overflow IE の overflow-y:scroll; / overflow-x:scroll; に相当する。「 vertical 」で縦、「 horizontal 」で横方向のみのスクロール。 overflow:auto と違って常にスクロールバーが出るのが難。「 none 」だと、スクロールバーなしでスクロール可能になる（ドラッグでテキストを選択するとスクロールするのが分かる）。 例
-moz-fixed
  • font-family
  • font
 フォントファミリー名「等幅フォント」のことらしい。「 monospace 」との違いは不明。
  • -moz-bg-inset
  • -moz-bg-outset
  • border-style
  • border
 「 border-color 」を無視して、親要素の背景色で「 inset 」「 outset 」の枠線を描く。ただし、その要素に背景色が指定されている場合は、要素の背景色になる。 NN 4.x までの<hr> の再現用と思われる。 例
-moz-field color 系全般 N 6/Moz の標準の背景色（グレー？）。 例
-moz-all

代用

N 6 は IE や NN 4.x と違って仕様に忠実な表示をしますが、それだけでは過去の指定（ IE などは仕様よりもこちらを優先）に基づいたソースを正しく表示できないため、これまで通りの表示を再現するために独自のプロパティ・値を実装しているようです。

white-space:-moz-pre-wrap

<textarea> で wrap="soft" と指定すると右端で自動折り返しをしますが、 CSS 2 までの仕様では「折り返さない」「折り返すが、半角空白や改行は無視」という融通の利かない指定しかありません。

text-align:-moz-center/-moz-right

CSS の仕様では、「 text-align 」の指定は中身のテキストの配置だけを指定することになっています。そのため、 table を <div style="text-align:center"> で囲っても、本来なら雹の中の文字が中寄せされるだけというのが正しい解釈となります。

border:-moz-bg-inset/-moz-bg-outset

NN 4.x までや IE では、<hr> の色は親要素の背景色がベースとなっていました。 CSS 2 では継承されるのは親要素の枠線の色だけなので、再現のためには独自拡張を使う必要があったようです。

PageTop

B:Back