1. 序論
~INFORMATIVE[ ~web~browserが,各種[ `webkit^css 接頭辞付き~CSS~propや, ~DOM~API ]を~supportすること ]に機能性や~layoutが依存するような,大量の~web内容が集積されてきている。 このことは、とりわけ携帯に最適化された~web内容に該当する。 ◎ There exists an increasingly large corpus of web content that depends on web browsers supporting a number of webkit-prefixed CSS properties and DOM APIs for functionality or layout. This holds especially true for mobile-optimized web content.
この仕様は、~UAに対し ~web互換性のための~supportが要求される,各種[ `webkit^css 接頭辞付き~CSS~prop, および ~DOM~API ]からなる最小限の集合について記述することを目指す。 ◎ This specification aims to describe the minimal set of webkit-prefixed CSS properties and DOM APIs that user agents are required to support for web compatibility.
この仕様が受持つものと意図される概要は、 Non-Standard Compatibility ( “非標準の互換性” ) wiki 頁にある。 ◎ The Non-Standard Compatibility wiki page will serve as a rough guide for what this specification intends to cover.
2. 適合性
3. ~CSSとの互換性
3.1. 各種~CSS at-規則
次に挙げる各種 `-webkit-^css `~vendor接頭辞付き$ at-規則は、[ それぞれに対応する接頭辞なし at-規則の別名 ]として~supportされ~MUST: ◎ The following -webkit- vendor prefixed at-rules must be supported as aliases of the corresponding unprefixed at-rules:
`-webkit-^css 接頭辞付き at-規則(別名) | 接頭辞なし at-規則 |
---|---|
`-webkit-keyframes@at | `keyframes$at |
3.2. ~CSSの各種~媒体~照会
3.2.1. `-webkit-device-pixel-ratio^d
◎述 `-webkit-device-pixel-ratio@d ◎用 `media$at ◎値 `number$t ◎型 `範囲~型$ ◎表終`-webkit-device-pixel-ratio$d は、その値を,`dppx$css 単位として解釈する下で,[ `範囲~型$の`媒体~特能$ `resolution$d ]の別名として扱われ~MUST。 ◎ -webkit-device-pixel-ratio must be treated as an alias of the resolution range type media feature, with its value interpreted as a dppx unit.
範囲~型の媒体~特能に対する `min-^css / `max-^css 接頭辞 は、 `-webkit-device-pixel-ratio$d には適用されては~MUST_NOT。 代わりに,次に挙げる別名が利用され~MUST: ◎ The min- or max- prefixes on range features must not apply to -webkit-device-pixel-ratio, instead the following aliases must be used:
旧来の, `-webkit-^css 接頭辞付き, 範囲~型の`媒体~特能$(別名) | 標準の, `min-^css / `max-^css 接頭辞付き, 範囲~型の`媒体~特能$ |
---|---|
`-webkit-min-device-pixel-ratio@d | `min-resolution$d |
`-webkit-max-device-pixel-ratio@d | `max-resolution$d |
3.2.2. `-webkit-transform-3d^d
◎述 `-webkit-transform-3d@d ◎用 `media$at ◎値 `mq-boolean$t ◎型 `離散~型$ ◎表終`-webkit-transform-3d$d `媒体~特能$は、~UAが~CSS三次元変形を~supportするかどうかを照会するために利用される。 `css-transforms-1$r ◎ The -webkit-transform-3d media feature is used to query whether the user agent supports CSS 3D transforms. [css-transforms-1]
その値は、~UAが三次元変形を~supportするならば 1 になり,他の場合 0 になる。 ◎ If the user agent supports 3D transforms, the value will be 1. Otherwise the value is 0.
3.3. 各種~CSS~gradient
3.3.1. `-webkit-linear-gradient^f
`-webkit-linear-gradient@f は、 `css3-images-20110217$r にて定義される `linear-gradient$f の別名として扱われ~MUST。 ◎ -webkit-linear-gradient() must be treated as an alias of linear-gradient as defined in [css3-images-20110217].
3.3.2. `-webkit-radial-gradient^f
`-webkit-radial-gradient@f は、 `css3-images-20110217$r にて定義される `radial-gradient$f の別名として扱われ~MUST。 ◎ -webkit-radial-gradient() must be treated as an alias of radial-gradient as defined in [css3-images-20110217].
3.3.3. `-webkit-repeating-linear-gradient^f
`-webkit-repeating-linear-gradient@f は、 `css3-images-20110217$r にて定義される `repeating-linear-gradient$f の別名として扱われ~MUST。 ◎ -webkit-repeating-linear-gradient() must be treated as an alias of repeating-linear-gradient as defined in [css3-images-20110217].
3.3.4. `-webkit-repeating-radial-gradient^f
`-webkit-repeating-radial-gradient@f は、 `css3-images-20110217$r にて定義される `repeating-radial-gradient$f の別名として扱われ~MUST。 ◎ -webkit-repeating-radial-gradient() must be treated as an alias of repeating-radial-gradient as defined in [css3-images-20110217].
3.4. 各種~CSS~prop
3.4.1. 単純な別名~prop
次に挙げる各種 `-webkit-^css `~vendor接頭辞付き$~propは、それぞれに対応する接頭辞なし~propの別名として~supportされ~MUST。 ◎ The following -webkit- vendor prefixed properties must be supported as aliases of the corresponding unprefixed property:
`-webkit-^css 接頭辞付き~prop(別名) | 接頭辞なし~prop |
---|---|
`-webkit-align-items@p | `align-items$p |
`-webkit-align-content@p | `align-content$p |
`-webkit-align-self@p | `align-self$p |
`-webkit-animation-name@p | `animation-name$p |
`-webkit-animation-duration@p | `animation-duration$p |
`-webkit-animation-timing-function@p | `animation-timing-function$p |
`-webkit-animation-iteration-count@p | `animation-iteration-count$p |
`-webkit-animation-direction@p | `animation-direction$p |
`-webkit-animation-play-state@p | `animation-play-state$p |
`-webkit-animation-delay@p | `animation-delay$p |
`-webkit-animation-fill-mode@p | `animation-fill-mode$p |
`-webkit-animation@p | `animation$p |
`-webkit-backface-visibility@p | `backface-visibility$p |
`-webkit-background-origin@p | `background-origin$p |
`-webkit-background-size@p
単純でない。 issue #28 を見よ。 ◎ Not simple. See issue #28. | `background-size$p |
`-webkit-border-bottom-left-radius@p | `border-bottom-left-radius$p |
`-webkit-border-bottom-right-radius@p | `border-bottom-right-radius$p |
`-webkit-border-top-left-radius@p | `border-top-left-radius$p |
`-webkit-border-top-right-radius@p | `border-top-right-radius$p |
`-webkit-border-radius@p | `border-radius$p |
`-webkit-box-shadow@p | `box-shadow$p |
`-webkit-box-sizing@p | `box-sizing$p |
`-webkit-flex@p | `flex$p |
`-webkit-flex-basis@p | `flex-basis$p |
`-webkit-flex-direction@p | `flex-direction$p |
`-webkit-flex-flow@p | `flex-flow$p |
`-webkit-flex-grow@p | `flex-grow$p |
`-webkit-flex-shrink@p | `flex-shrink$p |
`-webkit-flex-wrap@p | `flex-wrap$p |
`-webkit-filter@p | `filter$p |
`-webkit-justify-content@p | `justify-content$p |
`-webkit-mask@p | `mask$p |
`-webkit-mask-box-image@p | `mask-border$p |
`-webkit-mask-box-image-outset@p | `mask-border-outset$p |
`-webkit-mask-box-image-repeat@p | `mask-border-repeat$p |
`-webkit-mask-box-image-slice@p | `mask-border-slice$p |
`-webkit-mask-box-image-source@p | `mask-border-source$p |
`-webkit-mask-box-image-width@p | `mask-border-width$p |
`-webkit-mask-clip@p | `mask-clip$p |
`-webkit-mask-composite@p | `mask-composite$p |
`-webkit-mask-image@p | `mask-image$p |
`-webkit-mask-origin@p | `mask-origin$p |
`-webkit-mask-position@p | `mask-position$p |
`-webkit-mask-repeat@p | `mask-repeat$p |
`-webkit-mask-size@p | `mask-size$p |
`-webkit-order@p | `order$p |
`-webkit-perspective@p | `perspective$p |
`-webkit-perspective-origin@p | `perspective-origin$p |
`-webkit-transform-origin@p | `transform-origin$p |
`-webkit-transform-style@p | `transform-style$p |
`-webkit-transform@p | `transform$p |
`-webkit-transition-delay@p | `transition-delay$p |
`-webkit-transition-duration@p | `transition-duration$p |
`-webkit-transition-property@p | `transition-property$p |
`-webkit-transition-timing-function@p | `transition-timing-function$p |
`-webkit-transition@p | `transition$p |
3.4.2. 接頭辞付き別名~prop
次に挙げる各種 `-webkit-^css `~vendor接頭辞付き$~propは、それぞれに対応する接頭辞なし~propの別名として~supportされ~MUST。 ~UAが接頭辞なし等価を出荷していない場合、 `-webkit-^css 接頭辞付き~propは、~UAの自前の~vendor接頭辞付き~propの別名として扱われ~MUST。 ◎ The following -webkit- vendor prefixed properties must be supported as aliases of the corresponding unprefixed properties. If the user agent does not ship the unprefixed equivalent, the -webkit- prefixed property must be treated as an alias of the user agent’s own vendor prefixed property.
`-webkit-^css 接頭辞付き~prop(別名) | (~vendor接頭辞付き)~prop |
---|---|
`-webkit-text-size-adjust@p | (-prefix-)`text-size-adjust$p
|
注記: 各~propは、接頭辞を付与し得なくなり次第, “単純な” 別名として定義し得るようになる ◎ As soon as each property is unprefixable it can be defined as a "simple" alias.
3.4.3. ~propの対応付け
次に挙げる各種 `-webkit-^css `~vendor接頭辞付き$~propは、それぞれに対応する接頭辞なし~propに対応付けるように~supportされ~MUST: ◎ The following -webkit- vendor prefixed properties must be supported as mappings to the corresponding unprefixed property:
`-webkit-^css 接頭辞付き~prop | 接頭辞なし~prop |
---|---|
`-webkit-box-flex@p | `flex-grow$p |
`-webkit-box-ordinal-group@p | `order$p |
`-webkit-box-align@p | `align-items$p |
`-webkit-box-pack@p | `justify-content$p |
3.4.4. ~keywordの対応付け
次に挙げる各種 `-webkit-^css `~vendor接頭辞付き$~keywordは、それぞれに対応する接頭辞なし~keywordに対応付けるように~supportされ~MUST: ◎ The following -webkit- vendor prefixed keywords must be supported as mappings to the corresponding unprefixed keyword:
`-webkit-^css 接頭辞付き~keyword | 接頭辞なし~propの~keyword |
---|---|
`-webkit-box@v | `flex$v |
`-webkit-flex@v | `flex$v |
`-webkit-inline-box@v | `inline-flex$v |
`-webkit-inline-flex@v | `inline-flex$v |
3.4.5. 前景~textによる切抜き: `-webkit-background-clip^p ~prop
◎名 `-webkit-background-clip@p ◎値 `border-box$v | `padding-box$v | `content-box$v | `text$v ◎初 `none^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 `text$v ◎順 文法に従う ◎ア 離散的 ◎表終`-webkit-background-clip$p ~propは、その値が `text$v のときは,前景~textの外縁~text~strokeから背景`切抜き領域$を作成する(~alphaによる透明度も含めて)。 ◎ The -webkit-background-clip property—when its value is text—creates a background clipping region from the outer text stroke of the foreground text (including alpha transparency).
他のすべての `box$t 値に対しては、 `-webkit-background-clip$p ~propは,単純に `background-clip$p ~propの別名になる。 ◎ The -webkit-background-clip property is a simple alias of the background-clip property for all other <box> values.
注記: 根~要素の`背景~塗り区画$は他と異なるので、 `-webkit-background-clip$p ~propは,根~要素~上に指定されても効果はない。 `特別な要素の背景$を見よ。 ◎ Note that the root element has a different background painting area, and thus the -webkit-background-clip property has no effect when specified on it. See the backgrounds of special elements.
- `border-box@v
- 背景は~border~boxの中に塗られる(切抜かれる) ◎ The background is painted within (clipped to) the border box.
- `padding-box@v
- 背景は~padding~boxの中に塗られる(切抜かれる)。 ◎ The background is painted within (clipped to) the padding box.
- `content-box@v
- 背景は内容~boxの中に塗られる(切抜かれる)。 ◎ The background is painted within (clipped to) the content box.
- `text@v
- 背景~画像は前景~textで切抜かれるべきであることを,指示する。 ◎ Indicates that the background image should clip to the foreground text
`-webkit-background-clip$p: `text$v と `-webkit-text-fill-color$p: `transparent^v を併用して,~gradient色~効果を伴う~textを達成する方法を次の例に示す。 ◎ Here’s an example showing how to use -webkit-background-clip: text together with -webkit-text-fill-color: transparent to achieve text with a gradient color effect.
p { background: linear-gradient(90deg, red, blue); color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
`-webkit-background-clip$p / `-webkit-text-fill-color$p を~supportしない~browserは、~fallback色として `color^css 宣言を利用することになる。 ◎ Browsers that don’t support -webkit-background-clip or -webkit-text-fill-color will use the color declaration as a fallback color.
3.4.6. ~textの~fillと~stroke
3.4.6.1. 前景~text色: `-webkit-text-fill-color^p ~prop
◎名 `-webkit-text-fill-color@p ◎値 `color$t ◎初 `currentcolor$v ◎適 すべての要素 ◎継 される ◎百 受容しない ◎算 ~RGBA色 ◎順 文法に従う ◎ア `色として$ ◎表終`-webkit-text-fill-color$p ~propは、要素の~text内容の前景~fill色を定義する。 ◎ The -webkit-text-fill-color property defines the foreground fill color of an element’s text content.
`-webkit-text-fill-color$p が、要素の~textの前景~fill色を常に決定する例を示す: ◎ Here’s an example showing -webkit-text-fill-color will always determine the foreground fill color of an element’s text.
.one {
color: blue;
/*
次の宣言は、初期値を指定しているので省略できる:
◎
the following can be omitted because it’s the initial value:
-webkit-text-fill-color: currentcolor; */
}
.two {
color: red;
-webkit-text-fill-color: blue;
}
`one^css / `two^css ~classを伴う要素の~textは、青くなる。 ◎ Elements with the one or two classes will have blue text.
3.4.6.2. ~text~stroke色: `-webkit-text-stroke-color^p ~prop
◎名 `-webkit-text-stroke-color@p ◎値 `color$t ◎初 `currentcolor$v ◎適 すべての要素 ◎継 される ◎百 受容しない ◎算 ~RGBA色 ◎順 文法に従う ◎ア `色として$ ◎表終`-webkit-text-stroke-color$p ~propは、要素の~textの~stroke色を指定する。 ◎ The -webkit-text-stroke-color property specifies a stroke color for an element’s text.
3.4.6.3. ~text~strokeの太さ: `-webkit-text-stroke-width^p ~prop
◎名 `-webkit-text-stroke-width@p ◎値 `line-width$t ◎初 `0^v ◎適 すべての要素 ◎継 される ◎百 受容しない ◎算 絶対化された長さ ◎順 文法に従う ◎ア 離散的 ◎表終`-webkit-text-stroke-width$p ~propは、要素の~textの各~glyphの辺に描かれる~stroke幅(太さ)を指定する。 値を~zeroにすると,~strokeは塗られなくなる。 負の値は無効。 ◎ The -webkit-text-stroke-width property specifies the width of the stroke drawn at the edge of each glyph of an element’s text. A zero value results in no stroke being painted. A negative value is invalid.
3.4.6.4. ~text~stroke略式~prop: `-webkit-text-stroke^p ~prop
◎名 `-webkit-text-stroke@p ◎値 `line-width$t || `color$t ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 される ◎百 受容しない ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終`-webkit-text-stroke$p ~propは、要素の~textの[ ~stroke幅, ~stroke色 ]を一括して設定するための略式~propである。 ◎ The -webkit-text-stroke property is a shorthand property for setting the stroke width and stroke color of an element’s text.
白く~fillされる~textに黒く~strokeする(縁取りする)効果を達成する 2 つの例を示す。 最初の例では下位propを利用し, 2 番目の例では `-webkit-text-stroke$p 略式~propを利用して、同じ結果を得る: ◎ Here are two examples showing how to use the longhand and shorthand -webkit-text-stroke properties to achieve white text with a black stroked text effect.
.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; }
これにより、次の要素は: ◎ The element
<p class="stroked-text-longhand">Serious typography</p>
次のように描画されることになる: ◎ would be rendered as follows:
![~strokeされた~textの画像](compat/stroked-text.png)
3.5. ~CSS~prop値
3.5.1. 追加の `touch-action^p 値
この節では、 `pointerevents2$r による `touch-action$p の定義を増補する `pinch-zoom^v 値を 追加する。 ◎ This section augments the definition of touch-action from [pointerevents2] to add the pinch-zoom value.
◎名 `touch-action$p ◎値 `auto^v | `none^v | [ [ `pan-x^v | `pan-left^v | `pan-right^v ] || [ `pan-y^v | `pan-up^v | `pan-down^v ] || `pinch-zoom^v ] | `manipulation^v ◎表終【 この訳では、定義~表の必要な部位だけ示す。 全部的な定義~表は、リンク先を参照されたし。 】
`pinch-zoom^v を指定した場合、複数の手指による頁の~panningや~zoomingが可能化される。 ~zoomingが生じるためには、【触れている】すべての手指が,[ `pinch-zoom^v の挙動が(自身または先祖における `pinch-zoom^v, `manipulation^v, `auto^v いずれかの値を介して)可能化された要素 ]から開始され~MUST。 ◎ When specified, the pinch-zoom token enables multi-finger panning and zooming of the page. For zooming to occur, all fingers must start on an element that has the pinch-zoom behavior enabled (via one of the pinch-zoom, manipulation, or auto values on itself or an ancestor).
注記: 画像~回転台にて~panningを横方向だけ不能化したいと望むなら、不必要に~zoomingが不能化されるのを避けるため, `touch-action^p に "`pan-y pinch-zoom^v" を利用できる。 ◎ Scenarios like image carousels which wish to disable only horizontal panning can use "touch-action: pan-y pinch-zoom" to avoid disabling zooming unnecessarily.
`manipulation^v は、 "`pan-x pan-y pinch-zoom^v" の別名である。 ◎ manipulation is an alias for "pan-x pan-y pinch-zoom".
4. ~DOMの互換性
4.1. `WebKitCSSMatrix^I ~interface
注記: `WebKitCSSMatrix$I は、今や DOM Geometry `geometry-1$r 仕様にて定義された。 ◎ WebKitCSSMatrix is now defined by the DOM Geometry specification. [geometry-1].
4.2. `window.orientation^m API
partial interface `Window$I { readonly attribute `short$ `orientation$m; attribute `EventHandler$I `onorientationchange@m; }; partial interface `HTMLBodyElement$I { attribute `EventHandler$I `onorientationchange@m; };
`orientation@m 属性の取得子は、~UAは次の手続きを走らせ~MUST: ◎ When getting the orientation attribute, the user agent must run the following steps:
- `担当の文書$の現在の `window.orientation^m 角度 を返す。 ◎ Return the responsible document’s current window.orientation angle.
~UAは、機器の自然な方位と異なる角度で表示域を描くときは,次の手続きを走らせ~MUST: ◎ Whenever the viewport is drawn at a different angle compared to the device’s natural orientation, the user agent must run the following steps:
- `Window$I ~objの`作動中の文書$に向けて,名前 `orientationchange@et の`~eventを発火する$ ◎ Fire an event named orientationchange at the Window object of the active document.
`window.orientation$m 属性, および それに結付けられている `orientationchange$et ~eventを実装している~UAは、~desktop~platformには,それらを公開しては~MUST_NOT。 ◎ User agents implementing the window.orientation attribute and its associated orientationchange event must not expose them on Desktop platforms.
注記: iOS Safari も `body$e 要素に向けて `orientationchange^et ~eventを発火するが、他の実装は発火しない — したがって,~webとの互換性には必要とされないことになる。 ◎ iOS Safari also fires an orientationchange event on the body element, but other implementations do not, suggesting it’s not necessary for compatibility with the web.
4.2.1. `window.orientation^m 角度
`window.orientation$m 角度がとり得る値は[ `-90^v, `0^v, `90^v, `180^v ]である。 ~UAは、これらの値のうち[ `-90^v, `0^v, `90^v ]は~supportし~MUST。 また、任意選択で `180^v も~supportしてよい。 ◎ The possible values for the window.orientation angle are: -90, 0, 90, 180. User agents must support the -90, 0 and 90 values and may optionally support 180.
`0^v は、自然な方位を表現する。 [ `90^v, `180^v, `-90^v ]は、順に,自然な方位から時計回りに[ 90 度t, 180 度t, 270 度t ]の回転を表現する。 ◎ 0 represents the natural orientation. -90 represents a rotation 90 degrees clockwise from the natural orientation. 90 represents a rotation 90 degrees counterclockwise from the natural orientation. 180 represents a rotation 180 degrees from the natural orientation.
~UAは、現在の `window.orientation$m 角度を決定するためには、[ `ScreenOrientation$I の `方位~情報を更新する$ ~algoを,その段 3 に次の変更を加えた上で,走らせた結果 ]を返さ~MUST: ◎ In order to determine the current window.orientation angle, the user agent must run the following steps: ◎ Return the result of step 3 of the ScreenOrientation's update the orientation information algorithm with the following changes:
- `角度^V は、段 3 の結果の orientation angle( “方位~角度” )を表すとする ( 0 以上, 360 未満)。
- [ `角度^V ~EQ 180 ]~AND[ ~UAは 値 `180^v を~supportしない ]ならば: 0 を返す
- 他の場合, `角度^V ~LTE 180 ならば: `角度^V を返す
- 他の場合: ( `角度^V − 360 ) を返す
4.2.2. `Window^I ~obj / `body^e 要素~上の~event~handler
すべての [ `Window$I ~obj / `body$e 要素 ]は、次に挙げる~event~handler, および それぞれに対応する~event~handler~event型を,属性として~supportし~MUST: ◎ The following are the event handlers and their corresponding event handler event types that must be supported on all Window objects and body elements as attributes:
`~event~handler$ | `~event~handler~event型$ |
---|---|
`onorientationchange$m | `orientationchange$et |
WebKit は、これを `HTMLFrameSetElement^I 上にも有する 。 それも互換性のために必要かどうかは はっきりしない。 ◎ WebKit also has this on HTMLFrameSetElement. It’s unclear if this is needed for compatibility.
謝辞
この標準に~feedbackを寄せられ,協力された次の方々に:
Thanks to Alan Cutter, Chris Rebert, Chun-Min (Jeremy) Chen, Daniel Holbert, David Håsäther, Domenic Denicola, hexalys, Jean-Yves Perrier, Jacob Rossi, Philip Jägenstedt, Rick Byers, Simon Pieters, Stanley Stuart, William Chen and Your Name Here for feedback and contributions to this standard.
`ScreenOrientation$I ~interface `screen-orientation$r を定義された Mounir Lamouri, Marcos Cáceres 両氏に。 ◎ Thanks to Mounir Lamouri and Marcos Cáceres for defining the ScreenOrientation interface. [screen-orientation]
この仕様に定義されている内容のかなりの部分を占める初期の記述を供された Apple, および WebKit.org のブログ著者に特別な謝意を。 ◎ Special thanks to Apple and the WebKit.org blog authors for providing initial descriptions of much of the content defined in this specification.
This standard is written by Mike Taylor (Mozilla, miket@mozilla.com)
Copyright © 2018 WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a Creative Commons Attribution 4.0 International License.