Q: Quirks モードのブラウザで CSS 属性にユニットがない場合はどうなりますか?

単位のない CSS 属性: PX へのフォールバック

CSS では、属性値から単位を省略すると便利に思えるかもしれません。ただし、これを行うと、予期しないフォールバック シナリオが発生する可能性があります。 quirks モードでは、単位のない属性に遭遇したときにブラウザが一貫性のない動作をする可能性があります。この記事では、フォールバックの動作、その影響、ブラウザ間での不一致について検証します。

PX へのフォールバック

CSS 属性に「px」などの単位がない場合、 「em」または「%」ブラウザでは、デフォルトでフォールバック ユニットが使用される場合があります。 Quirks モードでは、多くのブラウザーがフォールバック単位として「px」を選択します。この動作は、ピクセル長を単位のない値として受け入れる従来の HTML 属性と一致しています。

ただし、この動作はブラウザ間で一貫していません。標準モードの Internet Explorer 7 以降などの一部のブラウザは、単位のないルール属性を無視しますが、Chrome、Firefox、Safari などの他のブラウザは引き続き「px」にフォールバックします。

W3C 仕様

CSS の W3C 仕様では、ゼロ以外の長さの値には単位が必要であると規定されています。したがって、単位のない属性は無効です。この仕様は、標準モードのレンダリングに適用されます。 quirks モードでは、ブラウザーはより自由に奇妙な動作を実装できるため、フォールバック動作の変動を説明できます。

必須のフォールバック ルール

を義務付ける特定のルールはありません。ブラウザは優先ユニットにフォールバックします。この決定はブラウザーの裁量に任されており、ブラウザーのバージョン、レンダリング モード、関連する特定のプロパティによって異なる場合があります。

動作例

インターネットExplorer は、quirks モードと標準モードで動作が異なります。 Quirks モードでは、width と border-width を「px」にフォールバックしていました。ただし、標準モードでは、単位のない属性ルールは無視されます。

Firefox は、quirks モードでは Internet Explorer とは異なります。幅を「px」に戻しますが、border-width 属性は無視されます。 Chrome、Opera、Safari はすべて、quirks モードで width と border-width の両方を「px」にフォールバックします。

結論

CSS で単位のない属性を使用することはお勧めできません。特に Quirk モードでは、予期しない結果やブラウザの不整合が発生する可能性があります。すべての長さの値の単位を指定するという W3C 推奨に従うことで、ブラウザー間で一貫したレンダリングが保証されます。

以上がQ: Quirks モードのブラウザで CSS 属性にユニットがない場合はどうなりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。