iCab Pre2.5 の CSS1 実装状況

Mac 用「第三のブラウザ」iCab 。ながらく待たれてた CSS 実装がよーやく Preview2.5 より開始。最終的には CSS2 対応とする公約のハズだったけどいまのところ CSS1 レベルからコツコツと行くらしい〜。

ともかく、CSS1 Test Suite (日本語訳)にてどの程度使えるのかテストしてみたなり。

まず大まかにまとめ

で、テストしたみた結果を大まかにまとめるとこんなトコかなぁ。

あと気付いた点。

とゆ〜わけで、現状ではかなりキビシ〜ことになっとります。ちょっと文字色や背景をかえてるとか、ちょっとマージン指定してボーダーつけてるとか、そのあたりで止めてるページでないと表示がぐちゃんこになりやすいかんじ。

以下はテスト各項目の結果詳細。か〜な〜り〜イイカゲンにしか見てないのであんまし信用しないでくらはい。

前書き

CSS1対CSS2
△ ... CSS2 未対応
LINKと@import
○ ... 16,17,18 の説明がイミフメイなので無視…。(ぉ

1.0 基礎概念

1.1 HTMLへの組み込み
○
1.2 グループ化
○
1.3 継承
△ ... body への文字色指定が table 内部へ継承されていない。
1.4 クラスセレクタ
△ ... 不正な class セレクタ名に反応している。
1.5 IDセレクタ
○
1.6 文脈セレクタ
○
1.7 コメント
○

2.0 疑似クラスと疑似要素

2.1 アンカー疑似クラス
△ ... カスケード順位不正。 <a name="hoge"> にスタイル適用されず。
2.3 first-line疑似要素
× ... 未実装
2.4 first-letter疑似要素
× ... 未実装
2.5 セレクタ中の疑似要素
× ... 未実装
2.6 疑似要素の複合
× ... 未実装

3.0 カスケード

3.1 important
○
3.2 カスケードの順序
○

4.0 整形モデル

4.1.1 垂直方向の整形
△ ... margin 重合処理が不完全。
4.1.2 水平方向の整形
△ ... Content box 内の文字自体はOKなれど、左 margin 部分に背景色が適用されてしまっている。なぜか table 内では別のトコがおかしかったり、table 外でおかしのが直ったりしている。謎。
4.1.4 フロート要素
× ... まったく float しない。table 内では float 領域が超えてはならない border を超えてしまふ。
4.2 行内要素
× ... インライン要素への margin, padding, border 指定はすべて無効。
4.3 置換要素
△ ... display:block にされた img の中寄せ・右寄せは効かず。table 内では width 変更も不可。ところでこのテストの元画像って 15px 角でわ?
4.4 行の高さ
△ ... 画像へのマイナス margin が無効。
4.5 キャンバス
× ... HTML 要素への背景色指定が無効。

5.2 フォントのプロパティ

5.2.2 フォントファミリー
× ... すべて無効
5.2.3 フォントスタイル
○
5.2.4 異体フォント
× ... 無効。
5.2.5 フォントのウエイト
△ ... bold の太さが常に一定
5.2.6 フォントサイズ
△ ... small, smaller が小さくなりすぎ。
5.2.7 フォント
△ ... 個別指定したときに効かないものは一括指定でも効かない。ウェイト指定が効かなくなることが多い。とにかくうまくいってない(ぉぃ

5.3 色と背景のプロパティ

5.3.1 color
○
5.3.2 background-color
○
5.3.3 background-image
△ ... table 内の bakcground-image: none が無効。そしてなぜか table が縦にやたら伸びてる。
5.3.4 background-repeat
△ ... table 外では OK 。 table 内では背景画像が border-box を越えて敷き詰められている…。
5.3.5 background-attachment
○
5.3.6 background-position
△ ... table 外では OK 。 table 内では例によって背景色がセル全体に漏れだして目印の画像が消えている。
5.3.7 background
△ ... table 外では OK 。 table 内では例によって背景色がセル全体に漏れだしているけど一応 OK 。

5.4 テキストのプロパティ

5.4.1 word-spacing
○
5.4.2 letter-spacing
○ ... ただし日本語テキストだとウィンドウ右端で自動折り返しが効かなくなる。
5.4.3 text-decoration
△ ... 下線の色が、局所的スタイル指定による文字色につられて変わってしまう。ところで、 b { text-decoration: none } でボールドまでしなくなってしまうのは不正。
5.4.4 vertical-align
× ... どんな指定もすべて初期値の baseline 揃えで処理されてしまう。
5.4.5 text-transform
○ ... ただし span 中の span にまで capitalize が(継承されて)効いている。
5.4.6 text-align
△ ... justify は無効。
5.4.7 text-indent
△ ... indent 自体は OK なれど、背景色がインデントの分だけ消失している(要素幅全部が塗りつぶされていなければならない)。
5.4.8 line-height
△ ... % 値でなく倍数で与えられたとき、インライン内でフォントサイズを変更したときの line-height 計算が不正。インライン要素につけられた背景色で親ブロック要素全体を塗りつぶしてしまっている。

5.5 ボックスのプロパティ

5.5.01 margin-top
○ ... ただし li へのマージン指定は marker を置き去りにする。
5.5.01b 行内要素のmargin-top
○ ... ただし、インライン要素への背景色が、指定範囲のある行全体へ矩形に漏れている。その漏れた色がインライン要素出現以前の文字を覆い隠している。
5.5.02 margin-right
△ ... ul 内 li への追加右マージン処理が不正
5.5.02b 行内要素のmargin-right
× ... 無効。例によってインライン要素の背景色が行全体へ漏れている。
5.5.03 margin-bottom
△ ... ul 内 li への指定が無効。マイナスのマージンが無効。
5.5.03b 行内要素のmargin-bottom
○ ... ただし例によってインライン要素の背景色が行全体へ漏れている。
5.5.04 margin-left
△ ... ul 内 li への追加マージン処理が不正。 list-style-position: inside にされたかのような挙動にもなってる。
5.5.04b 行内要素のmargin-left
? ... 例によってインライン要素の背景色が行全体へ漏れていて文字を覆い隠していて、そのために処理が正しいのかどうか見えない。
5.5.05 margin
○ ... ただし li への上下マージン指定は marker を置き去りにする。
5.5.05b 行内要素のmargin
△ ... 左右マージン指定が無効。例によってインライン要素の背景色が行全体へ漏れている。
5.5.06 padding-top
○
5.5.06b 行内要素のpadding-top
○ ... 例によってインライン要素の背景色が行全体へ漏れている。
5.5.07 padding-right
△ ... ul 内 li への追加パディング処理が不正。 table 内では右パディング部分の背景色が消失する。
5.5.07b 行内要素のpadding-right
× ... 無効。例によってインライン要素の背景色が行全体へ漏れている。
5.5.08 padding-bottom
○
5.5.08b 行内要素のpadding-bottom
○ ... 例によってインライン要素の背景色が行全体へ漏れている。
5.5.09 padding-left
△ ... ul 内 li への追加パディング処理は正しいけど、なぜか右パディングも効いてしまっている。 list-style-position: inside にされたかのような挙動にもなってる。 table 内では左パディング部分の背景色が消失する。
5.5.09b 行内要素のpadding-left
? ... 例によってインライン要素の背景色が行全体へ漏れていて文字を覆い隠していて、そのために処理が正しいのかどうか見えない。
5.5.10 padding
△ ... table内で、左右パディング部分の背景色が消失する。
5.5.10b 行内要素のpadding
△ ... 左右パディング無効。例によってインライン要素の背景色が行全体へ漏れている。
5.5.11 border-top-width
△ ... border-width が明示されてない辺の border (初期値 medium )が描かれていない。 border-style が指定されてない場合、ボーダーは出ないが指定された幅の余白が描かれてしまっている。
5.5.11b 行内要素のborder-top-width
× ... インライン要素に border を描くことができない。
5.5.12 border-right-width
△ ... border-width が明示されてない辺の border (初期値 medium )が描かれていない。 border-style が指定されてない場合、ボーダーは出ないが指定された幅の余白が描かれてしまっている。
5.5.12b 行内要素のborder-right-width
× ... インライン要素に border を描くことができない。
5.5.13 border-bottom-width
△ ... border-width が明示されてない辺の border (初期値 medium )が描かれていない。 border-style が指定されてない場合、ボーダーは出ないが指定された幅の余白が描かれてしまっている。
5.5.13b 行内要素のborder-bottom-width
× ... インライン要素に border を描くことができない。
5.5.14 border-left-width
△ ... border-width が明示されてない辺の border (初期値 medium )が描かれていない。 border-style が指定されてない場合、ボーダーは出ないが指定された幅の余白が描かれてしまっている。さらに、 table 内で謎の左マージンが発生。
5.5.14b 行内要素のborder-left-width
× ... インライン要素に border を描くことができない。
5.5.15 border-width
△ ... table 内で謎の左マージンが発生。
5.5.15b 行内要素のborder-width
× ... インライン要素に border を描くことができない。さらに、 table 内で謎の左右マージンが発生。
5.5.16 border-color
○
5.5.16b 行内要素のborder-color
× ... インライン要素に border を描くことができない。
5.5.17 border-style
○ ... すべて OK
5.5.17b 行内要素のborder-style
× ... インライン要素に border を描くことができない。
5.5.18 border-top
△ ... td への border 指定が無効。
5.5.18b 行内要素のborder-top
× ... インライン要素に border を描くことができない。
5.5.19 border-right
△ ... td への border 指定が無効。 li に対する border が border-box 右辺より左の中途半端な位置に描かれてしまっている。
5.5.19b 行内要素のborder-right
× ... インライン要素に border を描くことができない。
5.5.20 border-bottom
△ ... td への border 指定が無効。
5.5.20b 行内要素のborder-bottom
× ... インライン要素に border を描くことができない。
5.5.21 border-left
△ ... td への border 指定が無効。 table 内では p に対する border が border-box 左辺より右の中途半端な位置に描かれてしまっている。
5.5.21b 行内要素のborder-left
× ... インライン要素に border を描くことができない。
5.5.22 border
△ ... 生じてはならないオフセットが出ている。不正な値の宣言を無視できていない。幅 0px であるハズの img の border が表示されてしまっている。 td への border 指定が無効。 table 内において謎の左マージン発生、かつ border 領域に文字が食い込んでいる。
5.5.22b 行内要素のborder
× ... インライン要素に border を描くことができない。
5.5.23 width
△ ... table 内の img の width 変更が無効。
5.5.24 height
○
5.5.25 float
× ... 左右 float ともに無効。
5.5.25b float / margin
× ... float が無効なのですべて無効。
5.5.25c floatにしたテキスト要素
× ... float が無効なのですべて無効。
5.5.25d 複数のfloat要素
× ... float が無効なのですべて無効。
5.5.26 clear
? ... float が無効なので無意味。
5.5.26b clear / float
? ... float が無効なので無意味。
5.5.26c clear / float / その他のプロパティ ("acid test")
× ... ぐちゃぐちゃ。

5.6 分類のプロパティ

5.6.1 display
△ ... display: none のみ有効。
5.6.2 white-space
× ... white-space: pre にすることはできない。ゆえに normal に戻すのが機能しているかどうかフメイ。
5.6.3 list-style-type
○
5.6.4 list-style-image
× ... list-style-image は無効。
5.6.5 list-style-position
○ ... ただし inside 時の marker 出現位置が正しいかどうかは疑問。
5.6.6 list-style
△ ... マーカーを画像にすることはできない。

6.0 値の種類

6.1 物理サイズ
○
6.2 百分率
○
6.3 色
○ ... たぶん(ぉ
6.4 URL
○ ... NN4.x にて有名なバグ。
7.1 上位互換の解析規
△ ... border 関連に不正な値や不足があったときの処理が不正。属性セレクタはCSS1において未知であるからセレクタ全体を無視すべきだけどしていない。不正な値のある宣言全体を無視できていない。不正なセレクタを無視できていない。

Copyright © 1998-2006 ALIMIKA SATOMI/NYAN-NYAN-HANTEN.Created: 2001/04/26, Last-modified: 2001/04/26