<pre class="metadata">
Group: WHATWG
H1: Compatibility
Shortname: compat
Text Macro: TWITTER compatstandard
Abstract: This standard describes a collection of non-standard (and often vendor-prefixed) CSS properties and DOM APIs that web browsers need to support for compatibility with the de facto web.
Translation: ja https://triple-underscore.github.io/compat-ja.html
Indent: 2
</pre>

<pre class="anchors">
urlPrefix: https://w3c.github.io/screen-orientation/;
  type: interface
    text: ScreenOrientation; url: #screenorientation-interface
  type: dfn
    text: update the orientation information; url: #dfn-update-the-orientation-information
urlPrefix: https://www.w3.org/TR/CSS/; spec: CSS2
  type: dfn
    text: vendor prefix; url: #vendor-prefix
urlPrefix: https://drafts.csswg.org/mediaqueries-4/; spec: mediaqueries-4
  type: dfn
    text: media query; url: #media-query
    text: media feature; url: #media-feature
    text: resolution; url: #descdef-media-resolution
    text: min-resolution; url: #descdef-media-resolution
    text: max-resolution; url: #descdef-media-resolution
    text: prefixes on range features; url: #mq-min-max
urlPrefix: https://www.w3.org/TR/2011/WD-css3-images-20110217/; spec: css3-images-20110217
  type: dfn
    text: linear-gradient; url: #ltlinear-gradient
    text: radial-gradient; url: #ltradial-gradient
    text: repeating-linear-gradient; url: #ltrepeating-linear-gradient
    text: repeating-radial-gradient; url: #ltrepeating-radial-gradient
urlPrefix: https://drafts.csswg.org/css-backgrounds-3/
  type: dfn
    text: the backgrounds of special elements;url: #special-backgrounds
urlPrefix: https://drafts.csswg.org/css-transitions/
  type: dfn
    text: color; url: #animtype-color
urlPrefix: https://drafts.fxtf.org/css-masking-1/
  type: dfn
    text: clipping path; url: #clipping-path
urlPrefix: https://drafts.csswg.org/css-values-3/
  type: dfn
    text: dppx; url: #dppx
</pre>

<pre class=link-defaults>
spec:css-sizing-3; type:property; text:box-sizing
spec:css-color-4; type:value; text:currentcolor
spec:css-display-3; type:value; for:display; text:flex
spec:css-flexbox-1; type:value; text:inline-flex
spec:filter-effects-1; type:property; text:filter
</pre>

<!-- Commented out until we know what the heck to put here:
<h2 id='goals'>Goals</h2> -->

<h2 id='introduction'>Introduction</h2>
<em>This section is non-normative.</em>

There exists an increasingly large corpus of web content that depends on web browsers supporting a number of <code>webkit</code>-prefixed CSS properties and DOM APIs for functionality or layout. This holds especially true for mobile-optimized web content.

This specification aims to describe the minimal set of <code>webkit</code>-prefixed CSS properties and DOM APIs that user agents are required to support for web compatibility.

<div class="XXX">
The <a href="https://wiki.mozilla.org/Compatibility/Mobile/Non_Standard_Compatibility">Non-Standard Compatibility</a> wiki page will serve as a rough guide for what this specification intends to cover.
</div>

<h2 id='conformance'>Conformance</h2>
All diagrams, examples, and notes in this specification are
non-normative, as are all sections explicitly marked non-normative.
Everything else in this specification is normative.

The keywords "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT",
"SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and
"OPTIONAL" in this document are to be interpreted as described in RFC 2119.
For readability, these words do not appear in all uppercase letters in this
specification. [[!RFC2119]]

Requirements phrased in the imperative as part of algorithms
(such as "strip any leading space characters" or "return false and
terminate these steps") are to be interpreted with the meaning of the
keyword ("must", "should", "may", etc.) used in introducing the
algorithm.

Conformance requirements phrased as algorithms or specific steps
may be implemented in any manner, so long as the end result is
equivalent. (In particular, the algorithms defined in this
specification are intended to be easy to follow, and not intended to
be performant.)

<h2 id="css-compat-section">CSS Compatibility</h2>

<h3 id="css-at-rules">CSS At-rules</h3>

The following <code>-webkit-</code> <a>vendor prefixed</a> at-rules must be supported as aliases of the corresponding unprefixed at-rules:

<table>
  <thead>
    <tr>
     <th><code>-webkit-</code> prefixed at-rule alias</th>
     <th>unprefixed at-rule</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code><dfn at-rule>@-webkit-keyframes</dfn></code></td>
      <td><code><a>@keyframes</a></code></td>
    </tr>
  </tbody>
</table>

<h3 id="css-media-queries">CSS Media Queries</h3>

<h4 id="css-media-queries-webkit-device-pixel-ratio">
  <code>'-webkit-device-pixel-ratio'</code>
</h4>

<pre class='descdef mq'>
Name: -webkit-device-pixel-ratio
Value: <<number>>
For: @media
Type: range
</pre>

<code>'-webkit-device-pixel-ratio'</code> must be treated as an alias of the <code><a>resolution</a></code> range type <a>media feature</a>, with its value interpreted as a <a>dppx</a> unit.

The <code>min-</code> or <code>max-</code> <a>prefixes on range features</a> must not apply to <code>'-webkit-device-pixel-ratio'</code>, instead the following aliases must be used:

<table>
  <thead>
    <tr>
     <th>legacy <code>-webkit-</code> prefixed range <a>media feature</a> alias</th>
     <th>standard prefixed range <a>media feature</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code><dfn descriptor for="@media">-webkit-min-device-pixel-ratio</dfn></code></td>
      <td><code><a>min-resolution</a></code></td>
    </tr>
    <tr>
      <td><code><dfn descriptor for="@media">-webkit-max-device-pixel-ratio</dfn></code></td>
      <td><code><a>max-resolution</a></code></td>
    </tr>
  </tbody>
</table>

<h4 id="css-media-queries-webkit-transform-3d">
  <code>'-webkit-transform-3d'</code>
</h4>

<pre class='descdef mq'>
Name: -webkit-transform-3d
Value: <<mq-boolean>>
For: @media
Accepts min/max prefixes: no
</pre>

The <code>'-webkit-transform-3d'</code> media feature is used to query whether the user agent supports CSS 3D transforms. [[css-transforms-1]]

If the user agent supports 3D transforms, the value will be 1. Otherwise the value is 0.

<h3 id="css-image-type">CSS Gradients</h3>

<!-- Uncomment when I add -webkit-gradient()
Both the [[css3-images-20110217]] draft <code>-webkit-</code> prefixed <<image>> gradient functions and the 2008 <code>-webkit-gradient()</code> (<a href="https://webkit.org/blog/175/introducing-css-gradients/">blog post</a>, <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34">Safari developer documentation</a>) must be supported for compatibility.
-->

<h4 id="css-gradients-webkit-linear-gradient">
  <code>''-webkit-linear-gradient()''</code>
</h4>

<code><dfn export>-webkit-linear-gradient()</dfn></code> must be treated as an alias of <a>linear-gradient</a> as defined in [[css3-images-20110217]].
<!-- The stupid parens outside of the ref link are a hack because bikeshed hates me and my attempts to link to http://www.w3.org/TR/2011/WD-css3-images-20110217/#ltlinear-gradient. Pull requests welcome? -->

<h4 id="css-gradients-webkit-radial-gradient">
  <code>''-webkit-radial-gradient()''</code>
</h4>

<code><dfn export>-webkit-radial-gradient()</dfn></code> must be treated as an alias of <a>radial-gradient</a> as defined in [[css3-images-20110217]].

<h4 id="css-gradients-repeating-webkit-linear-gradient">
  <code>''-webkit-repeating-linear-gradient()''</code>
</h4>

<code><dfn export>-webkit-repeating-linear-gradient()</dfn></code> must be treated as an alias of <a>repeating-linear-gradient</a> as defined in [[css3-images-20110217]].

<h4 id="css-gradients-repeating-webkit-radial-gradient">
  <code>''-webkit-repeating-radial-gradient()''</code>
</h4>

<code><dfn export>-webkit-repeating-radial-gradient()</dfn></code> must be treated as an alias of <a>repeating-radial-gradient</a> as defined in [[css3-images-20110217]].

<!--
<h4 id="css-gradients-webkit-gradient">
  <code>-webkit-gradient()</code>
</h4>

<div class="XXX">TODO</div> -->

<h3 id="css-properties">CSS Properties</h3>

<h4 id="css-simple-aliases">Simple property aliases</h4>

The following <code>-webkit-</code> <a>vendor prefixed</a> properties must be supported as aliases of the corresponding unprefixed property:

<table>
  <thead>
    <tr>
     <th><code>-webkit-</code> prefixed property alias</th>
     <th>unprefixed property</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code><dfn property>-webkit-align-items</dfn></code></td>
      <td><code>'align-items'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-align-content</dfn></code></td>
      <td><code>'align-content'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-align-self</dfn></code></td>
      <td><code>'align-self'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-name</dfn></code></td>
      <td><code>'animation-name'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-duration</dfn></code></td>
      <td><code>'animation-duration'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-timing-function</dfn></code></td>
      <td><code>'animation-timing-function'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-iteration-count</dfn></code></td>
      <td><code>'animation-iteration-count'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-direction</dfn></code></td>
      <td><code>'animation-direction'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-play-state</dfn></code></td>
      <td><code>'animation-play-state'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-delay</dfn></code></td>
      <td><code>'animation-delay'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation-fill-mode</dfn></code></td>
      <td><code>'animation-fill-mode'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-animation</dfn></code></td>
      <td><code>'animation'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-backface-visibility</dfn></code></td>
      <td><code>'backface-visibility'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-background-origin</dfn></code></td>
      <td><code>'background-origin'</code></td>
    </tr>
    <tr>
      <td>
        <code><dfn property>-webkit-background-size</dfn></code>
        <p class="XXX">
          Not simple. See <a href="https://github.com/whatwg/compat/issues/28">issue #28</a>.
        </p>
      </td>
      <td><code>'background-size'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-border-bottom-left-radius</dfn></code></td>
      <td><code>'border-bottom-left-radius'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-border-bottom-right-radius</dfn></code></td>
      <td><code>'border-bottom-right-radius'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-border-top-left-radius</dfn></code></td>
      <td><code>'border-top-left-radius'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-border-top-right-radius</dfn></code></td>
      <td><code>'border-top-right-radius'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-border-radius</dfn></code></td>
      <td><code>'border-radius'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-box-shadow</dfn></code></td>
      <td><code>'box-shadow'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-box-sizing</dfn></code></td>
      <td><code>'box-sizing'</code></td>
    </tr>
    <tr>
      <td><code><dfn property lt="-webkit-flex-propdef">-webkit-flex</dfn></code></td>
      <td><code>'flex'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-flex-basis</dfn></code></td>
      <td><code>'flex-basis'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-flex-direction</dfn></code></td>
      <td><code>'flex-direction'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-flex-flow</dfn></code></td>
      <td><code>'flex-flow'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-flex-grow</dfn></code></td>
      <td><code>'flex-grow'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-flex-shrink</dfn></code></td>
      <td><code>'flex-shrink'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-flex-wrap</dfn></code></td>
      <td><code>'flex-wrap'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-filter</dfn></code></td>
      <td><code>'filter'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-justify-content</dfn></code></td>
      <td><code>'justify-content'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask</dfn></code></td>
      <td><code>'mask'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-box-image</dfn></code></td>
      <td><code>'mask-border'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-box-image-outset</dfn></code></td>
      <td><code>'mask-border-outset'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-box-image-repeat</dfn></code></td>
      <td><code>'mask-border-repeat'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-box-image-slice</dfn></code></td>
      <td><code>'mask-border-slice'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-box-image-source</dfn></code></td>
      <td><code>'mask-border-source'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-box-image-width</dfn></code></td>
      <td><code>'mask-border-width'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-clip</dfn></code></td>
      <td><code>'mask-clip'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-composite</dfn></code></td>
      <td><code>'mask-composite'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-image</dfn></code></td>
      <td><code>'mask-image'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-origin</dfn></code></td>
      <td><code>'mask-origin'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-position</dfn></code></td>
      <td><code>'mask-position'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-repeat</dfn></code></td>
      <td><code>'mask-repeat'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-mask-size</dfn></code></td>
      <td><code>'mask-size'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-order</dfn></code></td>
      <td><code>'order'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-perspective</dfn></code></td>
      <td><code>'perspective'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-perspective-origin</dfn></code></td>
      <td><code>'perspective-origin'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transform-origin</dfn></code></td>
      <td><code>'transform-origin'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transform-style</dfn></code></td>
      <td><code>'transform-style'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transform</dfn></code></td>
      <td><code>'transform'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transition-delay</dfn></code></td>
      <td><code>'transition-delay'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transition-duration</dfn></code></td>
      <td><code>'transition-duration'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transition-property</dfn></code></td>
      <td><code>'transition-property'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transition-timing-function</dfn></code></td>
      <td><code>'transition-timing-function'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-transition</dfn></code></td>
      <td><code>'transition'</code></td>
    </tr>
  </tbody>
</table>

<h4 id="css-prefixed-aliases">Prefixed property aliases</h4>

The following <code>-webkit-</code> <a>vendor prefixed</a> properties must be supported as aliases of the corresponding unprefixed properties. If the user agent does not ship the unprefixed equivalent, the <code>-webkit-</code> prefixed property must be treated as an alias of the user agent's own vendor prefixed property.

<table>
  <thead>
    <tr>
     <th><code>-webkit-</code> prefixed property alias</th>
     <th>(vendor prefixed) property</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code><dfn property>-webkit-text-size-adjust</dfn></code></td>
      <td><code>(-prefix-)'text-size-adjust'</code></td>
    </tr>
  </tbody>
</table>

<br>
<div class="note">As soon as each property is unprefixable it can be defined as a "simple" alias.</div>

<h4 id="css-non-aliased">Non-aliased vendor prefixed properties</h4>

Note: This section used to have a specification for the '-webkit-appearance' property.
This is now defined in <a href="https://drafts.csswg.org/css-ui/#appearance-switching">CSS Basic User Interface Module</a>.

<h4 id="css-property-mappings">Property mappings</h4>

The following <code>-webkit-</code> <a>vendor prefixed</a> properties must be supported as mappings to the corresponding unprefixed property:

<table>
  <thead>
    <tr>
     <th><code>-webkit-</code> prefixed property</th>
     <th>unprefixed property</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code><dfn property>-webkit-box-align</dfn></code></td>
      <td><code>'align-items'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-box-flex</dfn></code></td>
      <td><code>'flex-grow'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-box-ordinal-group</dfn></code></td>
      <td><code>'order'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-box-orient</dfn></code></td>
      <td><code>'flex-direction'</code></td>
    </tr>
    <tr>
      <td><code><dfn property>-webkit-box-pack</dfn></code></td>
      <td><code>'justify-content'</code></td>
    </tr>
  </tbody>
</table>

<h4 id="css-keyword-mappings">Keyword mappings</h4>

The following <code>-webkit-</code> <a>vendor prefixed</a> keywords must be supported as mappings to the corresponding unprefixed keyword:

<table>
  <thead>
    <tr>
     <th><code>-webkit-</code> prefixed keyword</th>
     <th>unprefixed property keyword</th>
    </tr>
  </thead>
  <tbody dfn-for="flex">
    <tr>
      <td><code><dfn value>-webkit-box</dfn></code></td>
      <td><code>''flex''</code></td>
    </tr>
    <tr>
      <td><code><dfn value lt="-webkit-flex-valdef">-webkit-flex</dfn></code></td>
      <td><code>''flex''</code></td>
    </tr>
    <tr>
      <td><code><dfn value>-webkit-inline-box</dfn></code></td>
      <td><code>''inline-flex''</code></td>
    </tr>
    <tr>
      <td><code><dfn value>-webkit-inline-flex</dfn></code></td>
      <td><code>''inline-flex''</code></td>
    </tr>
  </tbody>
</table>

<h4 id="the-webkit-background-clip-property">Foreground Text Clipping: the <code>
'-webkit-background-clip'</code> property</h4>

<pre class='propdef'>
Name: -webkit-background-clip
Value:  border-box | padding-box | content-box | text
Initial: none
Applies to: all elements
Inherited: no
Computed value: "text"
Percentages: N/A
Media: visual
Animation type: discrete
</pre>

The <code>'-webkit-background-clip'</code> property&mdash;when its value is ''text''&mdash;creates a background <a>clipping region</a> from the outer text stroke of the foreground text (including alpha transparency).

The <code>'-webkit-background-clip'</code> property is a simple alias of the 'background-clip' property for all other <<box>> values.

<div class="note">
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 <a>the backgrounds of special elements</a>.
</div>

<dl>
  <dt><dfn value for='-webkit-background-clip'>border-box</dfn>
  <dd>The background is painted within (clipped to) the border box.

  <dt><dfn value for='-webkit-background-clip'>padding-box</dfn>
  <dd>The background is painted within (clipped to) the padding box.

  <dt><dfn value for='-webkit-background-clip'>content-box</dfn>
  <dd>The background is painted within (clipped to) the content box.

  <dt><dfn value for='-webkit-background-clip'>text</dfn>
  <dd>Indicates that the background image should clip to the foreground text
</dl><br>

<div class="example" id="example-webkit-background-clip">
Here's an example showing how to use <code>'-webkit-background-clip': text</code> together with
<code>-webkit-text-fill-color: transparent</code> to achieve text with a gradient color effect.
<pre class="lang-css">
p {
  background: linear-gradient(90deg, red, blue);
  color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</pre>
Browsers that don't support <code>'-webkit-background-clip'</code> or <code>'-webkit-text-fill-color'</code> will use the <code>color</code> declaration as a fallback color.
</div>

<h4 id="text-fill-and-stroking">Text Fill and Stroking</h4>

<h5 id="the-webkit-text-fill-color">Foreground Text Color: the <code>
'-webkit-text-fill-color'</code> property</h5>

<pre class='propdef'>
Name: -webkit-text-fill-color
Value: <<color>>
Initial: ''currentcolor''
Applies to: all elements
Inherited: yes
Computed value: an RGBA color
Percentages: N/A
Media: visual
Animation type: as <a>color</a>
</pre>

The '-webkit-text-fill-color' property defines the foreground fill color of an element's text
content.

<div class="example" id="example-webkit-text-fill-color">
Here's an example showing <code>'-webkit-text-fill-color'</code> will always determine the
foreground fill color of an element's text.
<pre class="lang-css">
.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;
}
</pre>

Elements with the <code>one</code> or <code>two</code> classes will have blue text.
</div>

<h5 id="the-webkit-text-stroke-color">Text Stroke Color: the <code>
'-webkit-text-stroke-color'</code> property</h5>

<pre class='propdef'>
Name: -webkit-text-stroke-color
Value: <<color>>
Initial: ''currentcolor''
Applies to: all elements
Inherited: yes
Computed value: an RGBA color
Percentages: N/A
Media: visual
Animation type: as <a>color</a>
</pre>

The '-webkit-text-stroke-color' property specifies a stroke color for an element's text.

<h5 id="the-webkit-text-stroke-width">Text Stroke Thickness: the <code>
'-webkit-text-stroke-width'</code> property</h5>

<pre class='propdef'>
Name: -webkit-text-stroke-width
Value: <<line-width>>
Initial: 0
Applies to: all elements
Inherited: yes
Computed value: absolute length
Percentages: N/A
Media: visual
Animation type: discrete
</pre>

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.

<h5 id="the-webkit-text-stroke">Text Stroke Shorthand: the <code>
'-webkit-text-stroke'</code> property</h5>

<pre class='propdef'>
Name: -webkit-text-stroke
Value: <<line-width>> || <<color>>
Initial: See individual properties
Applies to: See individual properties
Inherited: yes
Computed value: See individual properties
Percentages: N/A
Media: visual
Animation type: See individual properties
</pre>

The '-webkit-text-stroke' property is a shorthand property for setting the stroke width and stroke
color of an element's text.

<div class="example" id="example-webkit-text-stroke">
Here are two examples showing how to use the longhand and shorthand <code>'-webkit-text-stroke'</code>
properties to achieve white text with a black stroked text effect.
<pre class="lang-css">
.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;
}
</pre>

The element <pre>&ltp class="stroked-text-longhand"&gt;Serious typography&lt;/p&gt;</pre> would be
rendered as follows:

<img style="width: 381px;height: 116px;" src="stroked-text.png" alt="image of stroked text">
</div>

<h3 id="css-property-values">CSS Property values</h3>

<h4 id="touch-action">Additional <code>touch-action</code> values</h4>

This section augments the <a href="https://w3c.github.io/pointerevents/#the-touch-action-css-property">
definition of <code>touch-action</code></a> from [[!pointerevents2]] to
<a href="https://github.com/whatwg/compat/issues/68">add</a> the <code>pinch-zoom</code> value.

<pre class='propdef'>
Name: touch-action
Value: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
Initial: auto
Applies to: all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.
Inherited: no
Computed value: Same as specified value
Percentages: N/A
Media: visual
</pre>

When specified, the <code>pinch-zoom</code> 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 <code>pinch-zoom</code>, <code>manipulation</code>, or <code>auto</code> values on itself
or an ancestor).

<div class="note">Scenarios like image carousels which wish to disable only horizontal panning can use "<code>touch-action: pan-y pinch-zoom</code>"
to avoid disabling zooming unnecessarily.</div>

<code>manipulation</code> is an alias for "<code>pan-x pan-y pinch-zoom</code>".

<h2 id="dom-compat-section">DOM Compatibility</h2>

<h3 id="webkitcssmatrix-interface">The WebKitCSSMatrix interface</h3>

<div class="note">{{WebKitCSSMatrix}} is now defined by the DOM Geometry specification. [[!geometry-1]].</div>

<h3 id="windoworientation-interface"><a attribute lt="orientation"><code>window.orientation</code></a> API</h3>

<pre class="idl">
partial interface Window {
    readonly attribute short orientation;
    attribute EventHandler onorientationchange;
};

partial interface HTMLBodyElement {
    attribute EventHandler onorientationchange;
};
</pre>

When getting the <dfn attribute for="Window">orientation</dfn> attribute, the user agent must run the following steps:

1. Return the <a>responsible document</a>'s current <a href="#dfn-window-orientation-angle"><code>window.orientation</code> angle</a>.

Whenever the viewport is drawn at a different angle compared to the device's natural orientation, the user agent must run the following steps:

1. <a lt="fire an event">Fire an event</a> named <code><dfn id="event-orientationchange" lt="orientationchange">orientationchange</dfn></code> at the {{Window}} object of the <a>active document</a>.

User agents implementing the <a attribute lt="orientation"><code>window.orientation</code></a> attribute and its associated <a>orientationchange</a> event must not expose them on Desktop platforms.

<div class="note">iOS Safari also fires an <code>orientationchange</code> event on the <code><{body}></code> element, but other implementations do not, suggesting it's not necessary for compatibility with the web.</div>

<h4 id="dfn-window-orientation-angle"><a attribute lt="orientation"><code>window.orientation</code></a> angle</h4>

The possible values for the <a attribute lt="orientation"><code>window.orientation</code></a> angle are: <code>-90</code>, <code>0</code>, <code>90</code>, <code>180</code>. User agents must support the <code>-90</code>, <code>0</code> and <code>90</code> values and may optionally support <code>180</code>.

<p class="note"><code>0</code> represents the natural orientation. <code>-90</code> represents a rotation 90 degrees clockwise from the natural orientation. <code>90</code> represents a rotation 90 degrees counterclockwise from the natural orientation. <code>180</code> represents a rotation 180 degrees from the natural orientation.
</p>

In order to determine the current <a attribute lt="orientation"><code>window.orientation</code></a> angle, the user agent must run the following steps:

<ol>
  <li>Return the result of step 3 of the {{ScreenOrientation}}'s <a>update the orientation information</a> algorithm with the following changes:
    <ol>
      <li>If the orientation angle is less than or equal to 180, return the orientation angle
      <li>If the orientation angle is greater than 180, return the orientation angle - 360.
      <li>If the resulting orientation angle is 180 and the user agent does not support that value, return 0.
      <!-- This is what Windows phone, some iPhones running various iOSes, and Chrome Mobile do on some of my test Androids. It's possible something else happens! -->
    </ol>
  </li>
</ol>

<h4 id="event-handlers">Event Handlers on {{Window}} objects and <code><{body}></code> elements</h4>

The following are the event handlers and their corresponding event handler event types that must be supported on all {{Window}} objects and <code><{body}></code> elements as attributes:

<table>
  <thead>
    <tr>
     <th><a>event handler</a></th>
     <th><a>event handler event type</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
          <code>{{Window/onorientationchange}}</code>
      </td>
      <td>
        <code><a lt="orientationchange">orientationchange</a></code>
      </td>
    </tr>
  </tbody>
</table>

<div class="XXX">
WebKit also has this on <a href="https://github.com/WebKit/webkit/blob/e455672f9e6861ced85d8be01cb7bc03a30a0555/LayoutTests/fast/dom/event-handler-attributes.html#L335">HTMLFrameSetElement</a>. It's unclear if this is needed for compatibility.
</div>

<h2 id="acknowledgements" class="no-num">Acknowledgements</h2>
Thanks to Alan Cutter, Cameron McCormack, 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.

Thanks to Mounir Lamouri and Marcos Cáceres for defining the {{ScreenOrientation}} interface. [[!screen-orientation]]

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
<a href="https://miketaylr.com/">Mike Taylor</a>
(<a href="https://www.mozilla.org/">Mozilla</a>,
<a href=mailto:miket@mozilla.com>miket@mozilla.com</a>).
