互換性

1. 導入

Webブラウザーが特定のベンダーCSSプロパティやDOM APIをサポートすることに依存したウェブコンテンツが、ますます増加している。 特にモバイル最適化されたウェブコンテンツでは -webkit-接頭辞付きプロパティへの依存度が非常に高い。

本仕様は、Web互換性のためにユーザーエージェントがサポートを要求される、他で明示的に規定されていない最小限の -webkit-接頭辞付きCSSプロパティおよびDOM APIについて記述することを目的とする。

主要ブラウザーで使われているHTTP User-Agentヘッダー・フィールドについても記述する。

2. 適合性

この文書における "MUST"、"MUST NOT"、"REQUIRED"、"SHALL"、"SHALL NOT"、"SHOULD"、"SHOULD NOT"、"RECOMMENDED"、"NOT RECOMMENDED"、"MAY"、"OPTIONAL" というキーワードは、RFC 2119に記載されたとおりの意味で解釈される。 可読性のため、これらの単語は本仕様ではすべて大文字では表記されていない。 [RFC2119]

アルゴリズムの一部として命令形で表現されている要求（例えば "先頭の空白文字を除去せよ" や "false を返してこの手順を終了せよ" など）は、そのアルゴリズムの導入時に使われているキーワード（"must", "should", "may" など）に従った意味として解釈される。

アルゴリズムや具体的な手順として表現された適合性要件は、その最終結果が等価である限り、どのような方法で実装してもよい。 （特に、本仕様で定義されるアルゴリズムは理解しやすさを重視しており、性能を意図したものではない。）

3. CSS互換性

3.1. CSSアットルール

以下の-webkit-付きベンダー接頭辞付き アットルールは、対応する非接頭辞付きアットルールのエイリアスとしてサポートされなければならない：

3.2. CSSメディアクエリ

3.2.1. -webkit-device-pixel-ratio

-webkit-device-pixel-ratio は resolution 範囲型メディアフィーチャのエイリアスとして扱われ、その値は dppx単位として解釈されなければならない。

min-やmax-の範囲フィーチャへの接頭辞は -webkit-device-pixel-ratio には適用されず、代わりに次のエイリアスが使われるべきである：

3.2.2. -webkit-transform-3d

-webkit-transform-3d メディアフィーチャは、ユーザーエージェントがCSS 3D変形をサポートしているかどうかを判定するために使われる。[css-transforms-1]

ユーザーエージェントが3D変形をサポートしている場合、その値は1となる。サポートしていない場合は0となる。

3.3. CSSグラデーション関数

3.3.1. -webkit-linear-gradient()

-webkit-linear-gradient() グラデーション関数は、 linear-gradient（[css3-images-20110217]で定義） のエイリアスとして扱われなければならない。

3.3.2. -webkit-radial-gradient()

-webkit-radial-gradient() グラデーション関数は、 radial-gradient（[css3-images-20110217]で定義） のエイリアスとして扱われなければならない。

3.3.3. -webkit-repeating-linear-gradient()

-webkit-repeating-linear-gradient() グラデーション関数は、 repeating-linear-gradient（[css3-images-20110217]で定義） のエイリアスとして扱われなければならない。

3.3.4. -webkit-repeating-radial-gradient()

-webkit-repeating-radial-gradient() グラデーション関数は、 repeating-radial-gradient（[css3-images-20110217]で定義） のエイリアスとして扱われなければならない。

3.4. CSSプロパティ

3.4.1. レガシー名エイリアス

以下の-webkit-ベンダー接頭辞付き プロパティは、対応する非接頭辞付きプロパティの レガシー名エイリアスとしてサポートされなければならない：

3.4.2. 接頭辞付きレガシー名エイリアス

以下の-webkit-ベンダー接頭辞付き プロパティは、対応する非接頭辞付きプロパティの レガシー名エイリアスとしてサポートされなければならない。 もしユーザーエージェントが非接頭辞付き等価プロパティを実装していない場合、-webkit-接頭辞付きプロパティは ユーザーエージェント自身のベンダー接頭辞付きプロパティのエイリアスとして扱われなければならない。

注記: 各プロパティが非接頭辞化された時点で レガシー名エイリアスとして定義できる。

3.4.3. 非エイリアスのベンダー接頭辞付きプロパティ

注記: この節はかつて-webkit-appearanceプロパティを規定していたが、 これは現在 CSS Basic User Interface Moduleで定義されている。

3.4.4. プロパティマッピング

以下の-webkit-ベンダー接頭辞付き プロパティは、対応する非接頭辞付きプロパティへのマッピングとしてサポートされなければならない：

-webkit-box-* の定義はWeb互換性がないことが知られている。[Issue #87]

3.4.5. キーワードマッピング

以下の-webkit-ベンダー接頭辞付き キーワードは、対応する非接頭辞付きキーワードへのマッピングとしてサポートされなければならない：

-webkit-box の定義はWeb互換性がないことが知られている。[Issue #87]

3.4.6. テキスト塗りつぶしとストローク

3.4.6.1. 前景テキスト色： -webkit-text-fill-color プロパティ

-webkit-text-fill-colorプロパティは、要素のテキスト内容の前景 塗りつぶし色を定義する。

.one {
  color: blue;
  /* 次は初期値なので省略可：
  -webkit-text-fill-color: currentcolor; */
}

.two {
  color: red;
  -webkit-text-fill-color: blue;
}

3.4.6.2. テキストストローク色： -webkit-text-stroke-color プロパティ

-webkit-text-stroke-colorプロパティは、要素のテキストに対してストローク色を指定する。

3.4.6.3. テキストストロークの太さ： -webkit-text-stroke-width プロパティ

-webkit-text-stroke-widthプロパティは、要素の各グリフの縁に描画されるストロークの幅を指定する。値が0の場合はストロークは描画されない。負の値は無効である。

3.4.6.4. テキストストロークのショートハンド： -webkit-text-stroke プロパティ

-webkit-text-strokeプロパティは、 -webkit-text-stroke-widthおよび -webkit-text-stroke-color プロパティのショートハンドであり、要素テキストのストロークの幅と ストローク色を設定できる。

.stroked-text-longhand {
  color: #fff;
  -webkit-text-stroke-color: #000;
  -webkit-text-stroke-width: 1px;
}

.stroked-text-shorthand {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: thin #000;
}

<p class="stroked-text-longhand">Serious typography</p>

3.5. CSSプロパティ値

3.5.1. 追加のtouch-action値

この節は touch-actionの定義（[pointerevents2]） を拡張し、pinch-zoom値を追加する。

pinch-zoomトークンを指定すると、ページのマルチフィンガーパンおよびズームが有効になる。ズーム動作を行うには、すべての指が pinch-zoom動作を有効にした要素（pinch-zoom、manipulation、または auto値が自身または先祖に指定されている）上で始まる必要がある。

manipulationは"pan-x pan-y pinch-zoom"のエイリアスである。

4. DOM互換性

4.1. WebKitCSSMatrixインターフェース

注記: WebKitCSSMatrix は現在DOM Geometry仕様で定義されている。[geometry-1]。

4.2. window.orientation API

partial interface Window {
    readonly attribute short orientation;
    attribute EventHandler onorientationchange;
};

partial interface HTMLBodyElement {
    attribute EventHandler onorientationchange;
};

orientation属性を取得するとき、ユーザーエージェントは次の手順を実行しなければならない：

1. documentをthisの関連グローバルオブジェクトの関連付けられたDocumentとする。

2. documentの現在のwindow.orientation角度を返す。

ビューポートがデバイスの自然な向きと異なる角度で描画されるたびに、ユーザーエージェントは次の手順を実行しなければならない：

1. イベントを発火する名前は orientationchange とし、 アクティブなドキュメント の Window オブジェクトで発火する。

window.orientation 属性および関連するorientationchangeイベントを実装するユーザーエージェントは、非モバイルプラットフォーム上でそれらを公開してはならない。

4.2.1. window.orientation角度

window.orientation角度として可能な整数値は、-90、0、90、180である。ユーザーエージェントは-90、0、90値をサポートし、180は任意でサポートしてもよい。

0は自然な向きを表す。-90は自然な向きから時計回りに90度回転した状態。90は自然な向きから反時計回りに90度回転した状態。180は自然な向きから180度回転した状態。

現在のwindow.orientation角度を決定するために、ユーザーエージェントは次の手順を実行しなければならない：

1. orientationAngleを現在のオリエンテーション角度とする。
   1. orientationAngleが180未満なら、orientationAngleを返す。
   2. orientationAngleが180で、ユーザーエージェント がその値をサポートする場合、orientationAngleを返し、そうでなければ0を返す。
   3. orientationAngleが180より大きければ、orientationAngle - 360 を返す。

4.2.2. Window オブジェクトおよび body 要素上のイベントハンドラ

すべてのWindow オブジェクトおよび body 要素に、属性としてサポートされなければならないイベントハンドラと対応するイベントハンドライベント型は以下のとおりである：

5. ユーザーエージェント文字列

User-Agentヘッダーフィールドの構文は[HTTP-SEMANTICS]で正式に定義されており、その値に関してSHOULDレベルの指針が示されている。本節は、いわゆる主要なウェブブラウザーで見られるUser-Agentパターンの記述的な記録として機能し、多くは同系統（フォークや組み込みなど）やUser-Agentヘッダーを送信するより一般的な意味でのユーザーエージェントにも適用される。

5.1. ユーザーエージェントトークン

ユーザーエージェントトークンは、User-Agent文字列内の意味的な単位を抽象化した文字列である。本書ではトークンを、「<」で始まり「>」で終わる文字列（例：<version>）として形式化する。トークンは他のトークンを含むこともできる。

ユーザーエージェント定数とは、値が変化しない文字列である。

トークンの値が1つ以上のトークンおよびオプションで定数から構成される場合、それはそれらのトークンと定数に分解されるという。

5.1.1. ユーザーエージェントトークンリファレンス

これは一般的なユーザーエージェントトークンの非網羅的なリストである。

5.2. メタ構造

以下に示すユーザーエージェント文字列は共通のメタ構造を持つ：

"Mozilla/5.0 (a) b"

ここでaはデバイス情報を表す1つ以上のトークン、bはブラウザー情報を表す1つ以上のトークンである。

5.3. Chrome

5.3.1. Chromeユーザーエージェントパターン

"Mozilla/5.0 (<unifiedPlatform>) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/<majorVersion>.0.0.0 <deviceCompat>Safari/537.36"

5.3.2. Chrome固有トークン

5.4. Firefox

5.4.1. Firefoxユーザーエージェントパターン

"Mozilla/5.0 (<firefoxPlatform>; rv: <firefoxVersion>) Gecko/<geckoVersion> Firefox/<firefoxVersion>"

5.4.2. Firefox固有トークン

<firefoxVersion> は次のように分解される：

"<majorVersion>.0"

デスクトッププラットフォーム（Windows, macOS, Linux等）では <geckoVersion> は固定のビルド日 "20100101"。Firefox for Android では <geckoVersion> は <firefoxVersion>と同じ値。

<firefoxPlatform> は次のように分解される：

デスクトッププラットフォームでは "<platform>; <oscpu>"。

Firefox for Android では "<platform>; <deviceCompat>"。

5.5. Safari

5.5.1. Safariユーザーエージェントパターン

"Mozilla/5.0 (<safariPlatform>) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/<safariVersion> <deviceCompat> Safari/<webkitVersion>"

5.5.2. Safari固有トークン

<safariVersion> は次のように分解される：

"<majorVersion>.<minorVersion>" ここで <minorVersion> は1桁の数字である。

<safariPlatform> は次のように分解される：

デスクトップおよび大きなiPadフォームファクターでは、定数 「Macintosh; Intel Mac OS X 10_15_7」。

モバイルプラットフォーム（小型iPad含む）では "<appleProduct>; CPU <mobileOSName> <iOSVersion> like Mac OS X"。

謝辞

ScreenOrientationインターフェースの定義にMounir Lamouri氏とMarcos Cáceres氏にも感謝します。 [screen-orientation]

本仕様の多くの内容の初期説明を提供したApple社およびWebKit.orgブログの著者にも特別な謝意を表します。

本標準はMike Taylor （Google、 miketaylr@google.com）によって執筆されています。

知的財産権

Copyright © WHATWG (Apple, Google, Mozilla, Microsoft). この成果物はCreative Commons Attribution 4.0 International Licenseの下でライセンスされています。一部がソースコードに組み込まれている場合、当該部分はBSD 3-Clause Licenseの下でライセンスされます。

これは現行標準です。 特許レビュー版を閲覧したい場合は 現行標準レビュードラフト を参照してください。