クイークスモード

1. はじめに

1.1. 歴史

ブラウザーにはHTML文書をレンダリングするための複数のレンダリングモードがあります。その理由は基本的には歴史的な偶然によるものです。CSS仕様は既存のWebコンテンツが依存していた従来のブラウザーの動作と互換性がありませんでした。仕様に準拠しつつ既存コンテンツを壊さないために、ブラウザーは新しいレンダリングモード（ノークイークスモード）を導入しました。一部のブラウザーではノークイークスモードでもテーブルセル内の画像のシュリンクラッピング動作が残っており、サイト側がそれに依存し始めたため、仕様通りの動作を実装したブラウザーは3つ目のモード（リミテッドクイークスモード）を導入しました。今振り返れば、デフォルトのCSS動作を既存コンテンツが依存しているものと互換にし、異なる動作にはオプトインできるようにした方がよかったでしょう。これらの異なるモードはその後、CSS以外の点でもいくつかの差異を持つようになりました。

1.2. 目的

• 古い（あるいは特定のpragmaを持つ場合は新しい）HTML文書のレンダリング仕様を作成すること。

  HTML仕様は、文書がどのタイミングで、クイークスモード、リミテッドクイークスモード、またはノークイークスモードに設定されるかを定義しています。 [HTML]

• Web互換性のために必要のないクイークを実装から削除すること。

  例えば、Geckoはリストアイテムの箇条書き記号のサイズに関するクイークを削除しましたし、Chromiumはtable要素にdisplayを強制的にtableまたはinline-tableにするクイークを削除しました。

• Web互換性のために必要なクイークについては各実装間の相互運用性を確保すること。

  例えば、Geckoは:activeおよび:hoverのクイークの実装をこの仕様と合わせることで、他のブラウザーとの相互運用性を向上させました。

• 可能な限り、クイークをレガシー機能の固定セットに限定し、新しい機能には伝播しないようにすること。

  例えば、§ 3.1 ハッシュなし16進数カラーのクイークは固定されたCSSプロパティのセットのみに限定されており、このクイークがSVGの色指定やCSSグラデーションなど、文法が曖昧になる場合には適用されません。

この仕様は現時点でブラウザーに存在するすべてのクイークを列挙しているわけではありません。HTML、DOM、CSSOM、CSSOM Viewなどで定義されているクイークも多くあります。[HTML] [DOM] [CSSOM] [CSSOM-VIEW] どこにも仕様化されていないクイークは、上記の2番目の項目によるものが多いです。

2. 共通インフラストラクチャー

2.1. 適合性

本仕様のすべての図、例、および注記は参考情報であり、また明示的に参考情報と記載された節も参考情報です。それ以外の本仕様のすべては規範的です。

規範的な部分における "MUST"、"MUST NOT"、"REQUIRED"、"SHOULD"、"SHOULD NOT"、"RECOMMENDED"、"NOT RECOMMENDED"、"MAY"、および "OPTIONAL" というキーワードは、RFC2119で説明されているとおりに解釈されます。読みやすさのため、これらの単語は本仕様ではすべて大文字では表示されていません。[RFC2119]

2.2. 用語

本仕様で「foo 要素」と記載されている場合は、ローカル名が foo で、名前空間が http://www.w3.org/1999/xhtml である要素を意味します。

本仕様で「foo 属性」と記載されている場合は、ローカル名が foo で、名前空間を持たない属性を意味します。

文書のbody要素は、子であり、 文書要素が body 要素である場合、その最初の html要素の子要素を指します。そうでなければnullとなります。

文書のbody要素は、HTMLのbody要素とは異なります。後者は frameset 要素でもあり得るためです。

3. CSS

3.1. ハッシュなし16進数カラーのクイーク

CSS Color 4 § B 廃止されたquirkyな16進数カラーを参照。

3.2. 単位なし長さのクイーク

CSS Values 4 § C quirkyな長さを参照。

3.3. 行の高さ計算のクイーク

クイークスモードおよびリミテッドクイークスモードにおいて、以下すべての条件を満たすインラインボックスは、行の高さの計算の目的において、そのボックスのline-heightが0であるかのように振る舞わなければなりません。

• border-top-width、border-bottom-width、padding-top、padding-bottomプロパティの使用値が0であり、そのボックスが縦書きモードである場合、または border-right-width、border-left-width、padding-right、padding-leftプロパティの使用値が0であり、そのボックスが横書きモードである場合。

• テキストを含まないか、折りたたまれた空白のみを含むこと。

3.4. ブロック要素がline-heightを無視するクイーク

クイークスモードおよびリミテッドクイークスモードにおいて、内容がブロックコンテナー要素で構成されているインラインレベル要素の場合、その要素のline-height は、その要素内のラインボックスの最小高さ計算の目的で無視されなければなりません。

これは「strut（ストラット）」が作成されないことを意味します。

3.5. パーセント高さ計算のクイーク

クイークスモードにおいて、要素elementのheightの計算のために、 elementの算出値のpositionプロパティが relativeまたはstaticであり、 elementのheightプロパティの指定値が<percentage>であり、かつelementの算出値のdisplay プロパティがtable-row、table-row-group、table-header-group、 table-footer-group、table-cell、またはtable-captionでない場合、 elementの包含ブロックは以下のアルゴリズムで計算し、最初に値が返された時点で中断すること：

1. 存在する場合は、elementの最も近い先祖の包含ブロックとする。存在しない場合は、初期包含ブロックを返す。

2. elementの算出値のdisplayプロパティが table-cellである場合、UA定義の値を返す。

3. elementの算出値のheightプロパティが autoでない場合はelementを返す。

4. elementの算出値のpositionプロパティが absoluteである場合、またはelementがブロックコンテナーでも テーブルラッパーボックスでもない場合はelementを返す。

5. 最初の手順に戻る。

執筆時点では、テーブル内のパーセント高さがどのように動作するかはCSSで未定義です。本仕様はテーブル内のパーセント高さ計算時の包含ブロックに何を使うべきかについて規定しません。健闘を祈ります！

このクイークはwriting-modeも考慮する必要があります。

3.6. html 要素がビューポート全体を埋めるクイーク

クイークスモードにおいて、文書要素 element が以下のすべての条件を満たす場合：

• element は html 要素である。

• element の 算出値のwidthプロパティがautoであり、 elementが縦書きモードである、または element の 算出値のheightプロパティが autoであり、elementが横書きモードである。 [CSS-WRITING-MODES-3]

...であれば、elementのborder boxサイズ（ブロックフロー方向）は、以下のアルゴリズムで設定されなければならない：

1. elementが縦書きモードの場合、marginsを elementの使用値である margin-leftとmargin-rightプロパティの合計とし、そうでなければmarginsを 使用値である margin-topとmargin-bottomプロパティの合計とする。

2. sizeを、初期包含ブロックのブロックフロー方向のサイズからmarginsを引いた値とする。

3. sizeと、要素がCSS仕様に従って持つ通常のborder boxサイズのうち大きい方を返す。

3.7. body 要素が html 要素全体を埋めるクイーク

クイークスモードにおいて、文書のbody要素 body がnullでなく、かつ以下のすべての条件を満たす場合：

• bodyの算出値のwidthプロパティがautoであり、 bodyが縦書きモードである、または bodyの算出値のheightプロパティが autoであり、bodyが横書きモードである。[CSS-WRITING-MODES-3]

• bodyの算出値のpositionプロパティがabsolute またはfixedでないこと。

• bodyの算出値のfloatプロパティがnoneであること。

• bodyはインラインレベル要素でないこと。

• bodyはマルチカラムスパン要素でないこと。[CSS3-MULTICOL]

...であれば、bodyのborder boxサイズ（ブロックフロー方向）は以下のアルゴリズムで設定されなければならない：

1. bodyが縦書きモードの場合、marginsを bodyの使用値である margin-leftとmargin-rightプロパティの合計とし、そうでなければmarginsを 使用値である margin-topとmargin-bottomプロパティの合計とする。

2. sizeを、bodyの親要素のcontent boxの ブロックフロー方向のサイズからmarginsを引いた値とする。

3. sizeと、要素がCSS仕様に従って持つ通常のborder boxサイズのうち大きい方を返す。

html および body のwriting-modeが異なる場合はどうすべきか？

3.8. テーブルセル幅計算のクイーク

クイークスモードにおいて、テーブルセルcellが包含ブロックとなっているインラインフォーマッティングコンテキストのmin-content幅を計算する目的で、 cellの算出値のwidthプロパティがautoの場合、 そのインラインフォーマッティングコンテキスト内の img 要素でインラインレベルかつ置換要素であるものは、その前後にソフトラップ機会があってはならない。[CSS-TEXT-3] [INTRINSIC]

3.9. テーブルセルnowrap最小幅計算のクイーク

クイークスモードにおいて、以下のすべての条件を満たす要素cellは、オートテーブルレイアウトアルゴリズムにおいて cellの算出値のwidthプロパティと、 テーブルセルのouter min-content幅のうち大きい方を テーブルセルのouter min-content幅とするかのように振る舞わなければならない。[INTRINSIC]

• cellは td または th 要素である。

• cellはnowrap属性を持つ。

• cellの算出値のwidthプロパティが0でない<length>である。

3.10. テーブル折りたたみのクイーク

クイークスモードにおいて、以下のすべての条件を満たす要素tableは、 使用値のheight プロパティを0、使用値の border-styleプロパティをnoneとしなければならない。

• tableの算出値のdisplayプロパティがtableである。

• tableには子のtable-row-group、table-header-group、 table-footer-group、またはtable-captionボックスが存在しない。

• tableには子のtable-column-groupボックスが存在せず、 その子にtable-columnボックスが存在しない。

3.11. text-decorationがテーブルに伝播しないクイーク

クイークスモードにおいて、text-decorationは table 要素へ伝播してはならない。

3.12. テーブルがbodyからcolorを継承するクイーク

クイークスモードにおいて、color プロパティの初期値はquirk-inheritとし、これはキーワードによるマッピングが存在しない特別な値でなければならない。

要素elementの算出値のcolorプロパティは、以下のアルゴリズムで計算されなければならない：

1. elementのcolor プロパティの指定値が quirk-inheritでない場合、最後の手順へジャンプ。

2. elementが table 要素でない場合、最後の手順へジャンプ。

3. 文書のbody要素がnullの場合、最後の手順へジャンプ。

4. 使用値のcolor プロパティ（文書のbody要素のもの）を返す。 これ以降の手順は中止。

5. elementのcolor プロパティの指定値がquirk-inheritである場合は、 elementのcolor プロパティの指定値をCSS仕様に従った初期値とし、 算出値のcolorプロパティをCSS仕様に従って返す。

3.13. テーブルセルheightのボックスサイズクイーク

クイークスモードにおいて、算出値のdisplay プロパティがtable-cellである要素は、使用値のbox-sizing プロパティがborder-boxであるかのように振る舞わなければならないが、これはheight、 min-height、 max-height プロパティの目的に限る。

4. セレクター

4.1. :activeおよび:hoverのクイーク

クイークスモードにおいて、以下すべての条件を満たす複合セレクター selectorは、:any-linkセレクターにも一致しない要素には一致してはならない。 [SELECTORS4]

• selectorが:activeまたは:hover 疑似クラスを使用している。

• selectorが型セレクターを使用していない。

• selectorが属性セレクターを使用していない。

• selectorがIDセレクターを使用していない。

• selectorがクラスセレクターを使用していない。

• selectorが疑似クラスセレクターで:activeおよび :hover以外を使用していない。

• selectorが疑似要素セレクターを使用していない。

• selectorが関数型疑似クラスまたは 疑似要素の引数の一部でない。

セキュリティとプライバシーに関する考慮事項

本仕様には既知のセキュリティまたはプライバシーへの影響はありません。

謝辞

Anne van Kesteren、 Boris Zbarsky、 Chris Rebert、 Dan Mulvey、 David Baron、 Kang-Hao Lu、 Ms2ger、 Simon Sapin、 Tab Atkins に有用なコメントをいただき感謝します。

特にBoris ZbarskyおよびDavid Baronには、MozillaのクイークスをMDNに文書化してくださったことに感謝します。

この標準はSimon Pieters（Mozilla、zcorpan@gmail.com）によって執筆されました。

知的財産権

Copyright © WHATWG (Apple, Google, Mozilla, Microsoft)。この作業はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下で提供されます。その一部がソースコードに組み込まれている場合、ソースコード部分は代わりにBSD 3-Clause Licenseの下でライセンスされます。

これは現行標準です。 特許審査バージョンに関心のある方は、 現行標準審査ドラフトを参照してください。