Compatibility Standard

# Compatibility

## Living Standard — Last Updated 1 January 1970

Participate:
  GitHub whatwg/compat (new issue, open issues)
  IRC: #whatwg on Freenode
Commits:
  GitHub whatwg/compat/commits
  [SNAPSHOT-LINK]
  @compatstandard
Tests:
  web-platform-tests compat/ (ongoing work)
Translations (non-normative):
  日本語

## 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.

## 1. Introduction

This section is non-normative.

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.

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.

The Non-Standard Compatibility wiki page will serve as a rough guide for what this specification intends to cover.

## 2. Conformance

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.)

## 3. CSS Compatibility

### 3.1. CSS At-rules

The following `-webkit-` vendor prefixed at-rules must be supported as aliases of the corresponding unprefixed at-rules:

`-webkit-` prefixed at-rule alias | unprefixed at-rule
--- | ---
`@-webkit-keyframes` | `@keyframes`

### 3.2. CSS Media Queries

#### 3.2.1. `-webkit-device-pixel-ratio`

Name: | -webkit-device-pixel-ratio
For: | @media
Value: | <number>
Type: | range

`-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.

The `min-` or `max-` prefixes on range features must not apply to `-webkit-device-pixel-ratio`, instead the following aliases must be used:

legacy `-webkit-` prefixed range media feature alias | standard prefixed range media feature
--- | ---
`-webkit-min-device-pixel-ratio` | `min-resolution`
`-webkit-max-device-pixel-ratio` | `max-resolution`

#### 3.2.2. `-webkit-transform-3d`

Name: | -webkit-transform-3d
For: | @media
Value: | <mq-boolean>
Accepts min/max prefixes: | no

The `-webkit-transform-3d` 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.

### 3.3. CSS Gradients

#### 3.3.1. `-webkit-linear-gradient()`

`-webkit-linear-gradient()` must be treated as an alias of linear-gradient as defined in [css3-images-20110217].

#### 3.3.2. `-webkit-radial-gradient()`

`-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()`

`-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()`

`-webkit-repeating-radial-gradient()` must be treated as an alias of repeating-radial-gradient as defined in [css3-images-20110217].

### 3.4. CSS Properties

#### 3.4.1. Simple property aliases

The following `-webkit-` vendor prefixed properties must be supported as aliases of the corresponding unprefixed property:

`-webkit-` prefixed property alias | unprefixed property
--- | ---
`-webkit-align-items` | `align-items`
`-webkit-align-content` | `align-content`
`-webkit-align-self` | `align-self`
`-webkit-animation-name` | `animation-name`
`-webkit-animation-duration` | `animation-duration`
`-webkit-animation-timing-function` | `animation-timing-function`
`-webkit-animation-iteration-count` | `animation-iteration-count`
`-webkit-animation-direction` | `animation-direction`
`-webkit-animation-play-state` | `animation-play-state`
`-webkit-animation-delay` | `animation-delay`
`-webkit-animation-fill-mode` | `animation-fill-mode`
`-webkit-animation` | `animation`
`-webkit-backface-visibility` | `backface-visibility`
`-webkit-background-origin` | `background-origin`
`-webkit-background-size` Not simple. See issue #28. | `background-size`
`-webkit-border-bottom-left-radius` | `border-bottom-left-radius`
`-webkit-border-bottom-right-radius` | `border-bottom-right-radius`
`-webkit-border-top-left-radius` | `border-top-left-radius`
`-webkit-border-top-right-radius` | `border-top-right-radius`
`-webkit-border-radius` | `border-radius`
`-webkit-box-shadow` | `box-shadow`
`-webkit-box-sizing` | `box-sizing`
`-webkit-flex` | `flex`
`-webkit-flex-basis` | `flex-basis`
`-webkit-flex-direction` | `flex-direction`
`-webkit-flex-flow` | `flex-flow`
`-webkit-flex-grow` | `flex-grow`
`-webkit-flex-shrink` | `flex-shrink`
`-webkit-flex-wrap` | `flex-wrap`
`-webkit-filter` | `filter`
`-webkit-justify-content` | `justify-content`
`-webkit-mask` | `mask`
`-webkit-mask-box-image` | `mask-border`
`-webkit-mask-box-image-outset` | `mask-border-outset`
`-webkit-mask-box-image-repeat` | `mask-border-repeat`
`-webkit-mask-box-image-slice` | `mask-border-slice`
`-webkit-mask-box-image-source` | `mask-border-source`
`-webkit-mask-box-image-width` | `mask-border-width`
`-webkit-mask-clip` | `mask-clip`
`-webkit-mask-composite` | `mask-composite`
`-webkit-mask-image` | `mask-image`
`-webkit-mask-origin` | `mask-origin`
`-webkit-mask-position` | `mask-position`
`-webkit-mask-repeat` | `mask-repeat`
`-webkit-mask-size` | `mask-size`
`-webkit-order` | `order`
`-webkit-perspective` | `perspective`
`-webkit-perspective-origin` | `perspective-origin`
`-webkit-transform-origin` | `transform-origin`
`-webkit-transform-style` | `transform-style`
`-webkit-transform` | `transform`
`-webkit-transition-delay` | `transition-delay`
`-webkit-transition-duration` | `transition-duration`
`-webkit-transition-property` | `transition-property`
`-webkit-transition-timing-function` | `transition-timing-function`
`-webkit-transition` | `transition`

#### 3.4.2. Prefixed property aliases

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-` prefixed property alias | (vendor prefixed) property
--- | ---
`-webkit-text-size-adjust` | `(-prefix-)text-size-adjust`

As soon as each property is unprefixable it can be defined as a "simple" alias.

#### 3.4.3. Non-aliased vendor prefixed properties

Note: This section used to have a specification for the -webkit-appearance property. This is now defined in CSS Basic User Interface Module.

#### 3.4.4. Property mappings

The following `-webkit-` vendor prefixed properties must be supported as mappings to the corresponding unprefixed property:

`-webkit-` prefixed property | unprefixed property
--- | ---
`-webkit-box-align` | `align-items`
`-webkit-box-flex` | `flex-grow`
`-webkit-box-ordinal-group` | `order`
`-webkit-box-orient` | `flex-direction`
`-webkit-box-pack` | `justify-content`

#### 3.4.5. Keyword mappings

The following `-webkit-` vendor prefixed keywords must be supported as mappings to the corresponding unprefixed keyword:

`-webkit-` prefixed keyword | unprefixed property keyword
--- | ---
`-webkit-box` | `flex`
`-webkit-flex` | `flex`
`-webkit-inline-box` | `inline-flex`
`-webkit-inline-flex` | `inline-flex`

#### 3.4.6. Foreground Text Clipping: the `-webkit-background-clip` property

Name: | -webkit-background-clip
Value: | border-box | padding-box | content-box | text
Initial: | none
Applies to: | all elements
Inherited: | no
Percentages: | N/A
Computed value: | "text"
Canonical order: | per grammar
Animation type: | discrete
Media: | visual

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).

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

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
  The background is painted within (clipped to) the border box.
padding-box
  The background is painted within (clipped to) the padding box.
content-box
  The background is painted within (clipped to) the content box.
text
  Indicates that the background image should clip to the foreground 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;
    }

Browsers that don’t support `-webkit-background-clip` or `-webkit-text-fill-color` will use the `color` declaration as a fallback color.

#### 3.4.7. Text Fill and Stroking

##### 3.4.7.1. Foreground Text Color: the `-webkit-text-fill-color` property

Name: | -webkit-text-fill-color
Value: | <color>
Initial: | currentcolor
Applies to: | all elements
Inherited: | yes
Percentages: | N/A
Computed value: | an RGBA color
Canonical order: | per grammar
Animation type: | as color
Media: | visual

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

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;
    }

Elements with the `one` or `two` classes will have blue text.

##### 3.4.7.2. Text Stroke Color: the `-webkit-text-stroke-color` property

Name: | -webkit-text-stroke-color
Value: | <color>
Initial: | currentcolor
Applies to: | all elements
Inherited: | yes
Percentages: | N/A
Computed value: | an RGBA color
Canonical order: | per grammar
Animation type: | as color
Media: | visual

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

##### 3.4.7.3. Text Stroke Thickness: the `-webkit-text-stroke-width` property

Name: | -webkit-text-stroke-width
Value: | <line-width>
Initial: | 0
Applies to: | all elements
Inherited: | yes
Percentages: | N/A
Computed value: | absolute length
Canonical order: | per grammar
Animation type: | discrete
Media: | visual

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.7.4. Text Stroke Shorthand: the `-webkit-text-stroke` property

Name: | -webkit-text-stroke
Value: | <line-width> || <color>
Initial: | See individual properties
Applies to: | See individual properties
Inherited: | yes
Percentages: | N/A
Computed value: | See individual properties
Canonical order: | per grammar
Animation type: | See individual properties
Media: | visual

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

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:

### 3.5. CSS Property values

#### 3.5.1. Additional `touch-action` values

This section augments the definition of `touch-action` from [pointerevents2] to add the `pinch-zoom` value.

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
Percentages: | N/A
Computed value: | Same as specified value
Canonical order: | per grammar
Animation type: | discrete
Media: | visual

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).

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` is an alias for "`pan-x pan-y pinch-zoom`".

## 4. DOM Compatibility

### 4.1. The WebKitCSSMatrix interface

`WebKitCSSMatrix` is now defined by the DOM Geometry specification. [geometry-1].

### 4.2. `window.orientation` API

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

    partial interface HTMLBodyElement {
        attribute EventHandler onorientationchange;
    };

When getting the `orientation` attribute, the user agent must run the following steps:

1. Return the responsible document’s current `window.orientation` angle.

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. Fire an event named `orientationchange` at the `Window` object of the active document.

User agents implementing the `window.orientation` attribute and its associated orientationchange event must not expose them on Desktop platforms.

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` angle

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` 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.

In order to determine the current `window.orientation` angle, the user agent must run the following steps:

1. Return the result of step 3 of the `ScreenOrientation`'s update the orientation information algorithm with the following changes:
   1. If the orientation angle is less than or equal to 180, return the orientation angle
   2. If the orientation angle is greater than 180, return the orientation angle - 360.
   3. If the resulting orientation angle is 180 and the user agent does not support that value, return 0.

#### 4.2.2. Event Handlers on `Window` objects and ``body`` elements

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 type
--- | ---
``onorientationchange`` | `orientationchange`

WebKit also has this on HTMLFrameSetElement. It’s unclear if this is needed for compatibility.

## Acknowledgements

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 Mike Taylor (Mozilla, miket@mozilla.com).

Copyright © 1970 WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a Creative Commons Attribution 4.0 International License.

## Index

### Terms defined by this specification

- border-box, in §3.4.6
- content-box, in §3.4.6
- onorientationchange
  - attribute for HTMLBodyElement, in §4.2
  - attribute for Window, in §4.2
- orientation, in §4.2
- orientationchange, in §4.2
- padding-box, in §3.4.6
- text, in §3.4.6
- touch-action, in §3.5.1
- -webkit-align-content, in §3.4.1
- -webkit-align-items, in §3.4.1
- -webkit-align-self, in §3.4.1
- -webkit-animation, in §3.4.1
- -webkit-animation-delay, in §3.4.1
- -webkit-animation-direction, in §3.4.1
- -webkit-animation-duration, in §3.4.1
- -webkit-animation-fill-mode, in §3.4.1
- -webkit-animation-iteration-count, in §3.4.1
- -webkit-animation-name, in §3.4.1
- -webkit-animation-play-state, in §3.4.1
- -webkit-animation-timing-function, in §3.4.1
- -webkit-backface-visibility, in §3.4.1
- -webkit-background-clip, in §3.4.6
- -webkit-background-origin, in §3.4.1
- -webkit-background-size, in §3.4.1
- -webkit-border-bottom-left-radius, in §3.4.1
- -webkit-border-bottom-right-radius, in §3.4.1
- -webkit-border-radius, in §3.4.1
- -webkit-border-top-left-radius, in §3.4.1
- -webkit-border-top-right-radius, in §3.4.1
- -webkit-box, in §3.4.5
- -webkit-box-align, in §3.4.4
- -webkit-box-flex, in §3.4.4
- -webkit-box-ordinal-group, in §3.4.4
- -webkit-box-orient, in §3.4.4
- -webkit-box-pack, in §3.4.4
- -webkit-box-shadow, in §3.4.1
- -webkit-box-sizing, in §3.4.1
- -webkit-device-pixel-ratio, in §3.2.1
- -webkit-filter, in §3.4.1
- -webkit-flex-basis, in §3.4.1
- -webkit-flex-direction, in §3.4.1
- -webkit-flex-flow, in §3.4.1
- -webkit-flex-grow, in §3.4.1
- -webkit-flex-propdef, in §3.4.1
- -webkit-flex-shrink, in §3.4.1
- -webkit-flex-valdef, in §3.4.5
- -webkit-flex-wrap, in §3.4.1
- -webkit-inline-box, in §3.4.5
- -webkit-inline-flex, in §3.4.5
- -webkit-justify-content, in §3.4.1
- @-webkit-keyframes, in §3.1
- -webkit-linear-gradient(), in §3.3.1
- -webkit-mask, in §3.4.1
- -webkit-mask-box-image, in §3.4.1
- -webkit-mask-box-image-outset, in §3.4.1
- -webkit-mask-box-image-repeat, in §3.4.1
- -webkit-mask-box-image-slice, in §3.4.1
- -webkit-mask-box-image-source, in §3.4.1
- -webkit-mask-box-image-width, in §3.4.1
- -webkit-mask-clip, in §3.4.1
- -webkit-mask-composite, in §3.4.1
- -webkit-mask-image, in §3.4.1
- -webkit-mask-origin, in §3.4.1
- -webkit-mask-position, in §3.4.1
- -webkit-mask-repeat, in §3.4.1
- -webkit-mask-size, in §3.4.1
- -webkit-max-device-pixel-ratio, in §3.2.1
- -webkit-min-device-pixel-ratio, in §3.2.1
- -webkit-order, in §3.4.1
- -webkit-perspective, in §3.4.1
- -webkit-perspective-origin, in §3.4.1
- -webkit-radial-gradient(), in §3.3.2
- -webkit-repeating-linear-gradient(), in §3.3.3
- -webkit-repeating-radial-gradient(), in §3.3.4
- -webkit-text-fill-color, in §3.4.7.1
- -webkit-text-size-adjust, in §3.4.2
- -webkit-text-stroke, in §3.4.7.4
- -webkit-text-stroke-color, in §3.4.7.2
- -webkit-text-stroke-width, in §3.4.7.3
- -webkit-transform, in §3.4.1
- -webkit-transform-3d, in §3.2.2
- -webkit-transform-origin, in §3.4.1
- -webkit-transform-style, in §3.4.1
- -webkit-transition, in §3.4.1
- -webkit-transition-delay, in §3.4.1
- -webkit-transition-duration, in §3.4.1
- -webkit-transition-property, in §3.4.1
- -webkit-transition-timing-function, in §3.4.1

https://drafts.csswg.org/css-align-3/#propdef-align-content Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-align-3/#propdef-align-items Referenced in:

- 3.4.1. Simple property aliases
- 3.4.4. Property mappings

https://drafts.csswg.org/css-align-3/#propdef-align-self Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-align-3/#propdef-justify-content Referenced in:

- 3.4.1. Simple property aliases
- 3.4.4. Property mappings

https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes Referenced in:

- 3.1. CSS At-rules

https://drafts.csswg.org/css-animations-1/#propdef-animation Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-delay Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-direction Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-duration Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-iteration-count Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-name Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#typedef-box Referenced in:

- 3.4.6. Foreground Text Clipping: the -webkit-background-clip property

https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width Referenced in:

- 3.4.7.3. Text Stroke Thickness: the -webkit-text-stroke-width property
- 3.4.7.4. Text Stroke Shorthand: the -webkit-text-stroke property

https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip Referenced in:

- 3.4.6. Foreground Text Clipping: the -webkit-background-clip property

https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-left-radius Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-right-radius Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-left-radius Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-right-radius Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-color-3/#valuea-def-color Referenced in:

- 3.4.7.1. Foreground Text Color: the -webkit-text-fill-color property
- 3.4.7.2. Text Stroke Color: the -webkit-text-stroke-color property
- 3.4.7.4. Text Stroke Shorthand: the -webkit-text-stroke property

https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor Referenced in:

- 3.4.7.1. Foreground Text Color: the -webkit-text-fill-color property
- 3.4.7.2. Text Stroke Color: the -webkit-text-stroke-color property

https://drafts.csswg.org/css-conditional-3/#at-ruledef-media Referenced in:

- 3.2.1. -webkit-device-pixel-ratio
- 3.2.2. -webkit-transform-3d

https://drafts.csswg.org/css-display-3/#valdef-display-flex Referenced in:

- 3.4.5. Keyword mappings (2)

https://drafts.csswg.org/css-flexbox-1/#propdef-flex Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction Referenced in:

- 3.4.1. Simple property aliases
- 3.4.4. Property mappings

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-grow Referenced in:

- 3.4.1. Simple property aliases
- 3.4.4. Property mappings

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-shrink Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-flexbox-1/#valdef-display-inline-flex Referenced in:

- 3.4.5. Keyword mappings (2)

https://drafts.csswg.org/css-flexbox-1/#propdef-order Referenced in:

- 3.4.1. Simple property aliases
- 3.4.4. Property mappings

https://drafts.fxtf.org/css-masking-1/#clipping-region Referenced in:

- 3.4.6. Foreground Text Clipping: the -webkit-background-clip property

https://drafts.fxtf.org/css-masking-1/#propdef-mask Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-border Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-border-outset Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-border-repeat Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-border-slice Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-border-source Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-border-width Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-clip Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-composite Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-image Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-origin Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-position Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-repeat Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/css-masking-1/#propdef-mask-size Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-size-adjust-1/#propdef-text-size-adjust Referenced in:

- 3.4.2. Prefixed property aliases

https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transforms-1/#propdef-transform Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transforms-2/#propdef-perspective Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transforms-2/#propdef-perspective-origin Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transforms-2/#propdef-transform-style Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transitions-1/#propdef-transition Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transitions-1/#propdef-transition-delay Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transitions-1/#propdef-transition-duration Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transitions-1/#propdef-transition-property Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-transitions-1/#propdef-transition-timing-function Referenced in:

- 3.4.1. Simple property aliases

https://drafts.csswg.org/css-ui-4/#propdef--webkit-appearance Referenced in:

- 3.4.3. Non-aliased vendor prefixed properties

https://drafts.csswg.org/css-values-3/#number-value Referenced in:

- 3.2.1. -webkit-device-pixel-ratio

https://drafts.csswg.org/css-values-4/#comb-one Referenced in:

- 3.4.6. Foreground Text Clipping: the -webkit-background-clip property (2) (3)
- 3.5.1. Additional touch-action values (2) (3) (4) (5) (6) (7)

https://drafts.csswg.org/css-values-4/#comb-any Referenced in:

- 3.4.7.4. Text Stroke Shorthand: the -webkit-text-stroke property
- 3.5.1. Additional touch-action values (2)

https://www.w3.org/TR/CSS/#vendor-prefix Referenced in:

- 3.1. CSS At-rules
- 3.4.1. Simple property aliases
- 3.4.2. Prefixed property aliases
- 3.4.4. Property mappings
- 3.4.5. Keyword mappings

https://www.w3.org/TR/2011/WD-css3-images-20110217/#ltlinear-gradient Referenced in:

- 3.3.1. -webkit-linear-gradient()

https://www.w3.org/TR/2011/WD-css3-images-20110217/#ltradial-gradient Referenced in:

- 3.3.2. -webkit-radial-gradient()

https://www.w3.org/TR/2011/WD-css3-images-20110217/#ltrepeating-linear-gradient Referenced in:

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

https://www.w3.org/TR/2011/WD-css3-images-20110217/#ltrepeating-radial-gradient Referenced in:

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

https://dom.spec.whatwg.org/#concept-event-fire Referenced in:

- 4.2. window.orientation API

https://drafts.fxtf.org/filter-effects-1/#propdef-filter Referenced in:

- 3.4.1. Simple property aliases

https://drafts.fxtf.org/geometry-1/#webkitcssmatrix Referenced in:

- 4.1. The WebKitCSSMatrix interface

https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler Referenced in:

- 4.2. window.orientation API (2)

https://html.spec.whatwg.org/multipage/sections.html#htmlbodyelement Referenced in:

- 4.2. window.orientation API

https://html.spec.whatwg.org/multipage/window-object.html#window Referenced in:

- 4.2. window.orientation API (2)
- 4.2.2. Event Handlers on Window objects and body elements (2)

https://html.spec.whatwg.org/multipage/browsers.html#active-document Referenced in:

- 4.2. window.orientation API

https://html.spec.whatwg.org/multipage/sections.html#the-body-element Referenced in:

- 4.2. window.orientation API
- 4.2.2. Event Handlers on Window objects and body elements (2)

https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers Referenced in:

- 4.2.2. Event Handlers on Window objects and body elements

https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type Referenced in:

- 4.2.2. Event Handlers on Window objects and body elements

https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document Referenced in:

- 4.2. window.orientation API

https://drafts.csswg.org/mediaqueries-4/#typedef-mq-boolean Referenced in:

- 3.2.2. -webkit-transform-3d

https://drafts.csswg.org/mediaqueries-4/#descdef-media-resolution Referenced in:

- 3.2.1. -webkit-device-pixel-ratio (2) (3)

https://drafts.csswg.org/mediaqueries-4/#media-feature Referenced in:

- 3.2.1. -webkit-device-pixel-ratio (2) (3)

https://drafts.csswg.org/mediaqueries-4/#descdef-media-resolution Referenced in:

- 3.2.1. -webkit-device-pixel-ratio (2) (3)

https://drafts.csswg.org/mediaqueries-4/#mq-min-max Referenced in:

- 3.2.1. -webkit-device-pixel-ratio

https://drafts.csswg.org/mediaqueries-4/#descdef-media-resolution Referenced in:

- 3.2.1. -webkit-device-pixel-ratio (2) (3)

https://heycam.github.io/webidl/#idl-short Referenced in:

- 4.2. window.orientation API

### Terms defined by reference

- [css-align-3] defines the following terms:
  - align-content
  - align-items
  - align-self
  - justify-content
- [css-animations-1] defines the following terms:
  - @keyframes
  - animation
  - animation-delay
  - animation-direction
  - animation-duration
  - animation-fill-mode
  - animation-iteration-count
  - animation-name
  - animation-play-state
  - animation-timing-function
- [css-backgrounds-3] defines the following terms:
  - <box>
  - <line-width>
  - background-clip
  - background-origin
  - background-size
  - border-bottom-left-radius
  - border-bottom-right-radius
  - border-radius
  - border-top-left-radius
  - border-top-right-radius
  - box-shadow
- [css-color-3] defines the following terms:
  - <color>
- [css-color-4] defines the following terms:
  - currentcolor
- [css-conditional-3] defines the following terms:
  - @media
- [css-display-3] defines the following terms:
  - flex
- [css-flexbox-1] defines the following terms:
  - flex
  - flex-basis
  - flex-direction
  - flex-flow
  - flex-grow
  - flex-shrink
  - flex-wrap
  - inline-flex
  - order
- [css-masking-1] defines the following terms:
  - clipping region
  - mask
  - mask-border
  - mask-border-outset
  - mask-border-repeat
  - mask-border-slice
  - mask-border-source
  - mask-border-width
  - mask-clip
  - mask-composite
  - mask-image
  - mask-origin
  - mask-position
  - mask-repeat
  - mask-size
- [css-size-adjust-1] defines the following terms:
  - text-size-adjust
- [css-sizing-3] defines the following terms:
  - box-sizing
- [css-transforms-1] defines the following terms:
  - transform
  - transform-origin
- [css-transforms-2] defines the following terms:
  - backface-visibility
  - perspective
  - perspective-origin
  - transform-style
- [css-transitions-1] defines the following terms:
  - transition
  - transition-delay
  - transition-duration
  - transition-property
  - transition-timing-function
- [css-ui-4] defines the following terms:
  - -webkit-appearance
- [css-values-3] defines the following terms:
  - <number>
- [css-values-4] defines the following terms:
  - |
  - ||
- [CSS2] defines the following terms:
  - vendor prefix
- [css3-images-20110217] defines the following terms:
  - linear-gradient
  - radial-gradient
  - repeating-linear-gradient
  - repeating-radial-gradient
- [DOM] defines the following terms:
  - fire an event
- [filter-effects-1] defines the following terms:
  - filter
- [geometry-1] defines the following terms:
  - WebKitCSSMatrix
- [HTML] defines the following terms:
  - EventHandler
  - HTMLBodyElement
  - Window
  - active document
  - body
  - event handler
  - event handler event type
  - responsible document
- [mediaqueries-4] defines the following terms:
  - <mq-boolean>
  - max-resolution
  - media feature
  - min-resolution
  - prefixes on range features
  - resolution
- [WebIDL] defines the following terms:
  - short

## References

### Normative References

[CSS-ALIGN-3]
  Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://drafts.csswg.org/css-align/
[CSS-ANIMATIONS-1]
  Dean Jackson; et al. CSS Animations Level 1. URL: https://drafts.csswg.org/css-animations/
[CSS-BACKGROUNDS-3]
  Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-COLOR-3]
  Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. URL: https://drafts.csswg.org/css-color-3/
[CSS-COLOR-4]
  Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4. URL: https://drafts.csswg.org/css-color/
[CSS-CONDITIONAL-3]
  CSS Conditional Rules Module Level 3 URL: https://drafts.csswg.org/css-conditional-3/
[CSS-DISPLAY-3]
  Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. URL: https://drafts.csswg.org/css-display/
[CSS-FLEXBOX-1]
  Tab Atkins Jr.; et al. CSS Flexible Box Layout Module Level 1. URL: https://drafts.csswg.org/css-flexbox-1/
[CSS-MASKING-1]
  Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. URL: https://drafts.fxtf.org/css-masking-1/
[CSS-SIZE-ADJUST-1]
  CSS Mobile Text Size Adjustment Module Level 1 URL: https://drafts.csswg.org/css-size-adjust-1/
[CSS-SIZING-3]
  Tab Atkins Jr.; Elika Etemad. CSS Intrinsic & Extrinsic Sizing Module Level 3. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-TRANSFORMS-1]
  Simon Fraser; et al. CSS Transforms Module Level 1. URL: https://drafts.csswg.org/css-transforms/
[CSS-TRANSFORMS-2]
  CSS Transforms Module Level 2 URL: https://drafts.csswg.org/css-transforms-2/
[CSS-TRANSITIONS-1]
  David Baron; et al. CSS Transitions. URL: https://drafts.csswg.org/css-transitions/
[CSS-VALUES-3]
  Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. URL: https://drafts.csswg.org/css-values-3/
[CSS-VALUES-4]
  Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS2]
  Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: http://dev.w3.org/csswg/css2/
[CSS3-IMAGES-20110217]
  Elika Etemad; Tab Atkins Jr.. CSS Image Values and Replaced Content Module Level 3. URL: https://www.w3.org/TR/2011/WD-css3-images-20110217/
[DOM]
  Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[FILTER-EFFECTS-1]
  Dirk Schulze; Dean Jackson. Filter Effects Module Level 1. URL: https://drafts.fxtf.org/filter-effects-1/
[GEOMETRY-1]
  Simon Pieters; Chris Harrelson. Geometry Interfaces Module Level 1. URL: https://drafts.fxtf.org/geometry/
[HTML]
  Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[MEDIAQUERIES-4]
  Florian Rivoal; Tab Atkins Jr.. Media Queries Level 4. URL: https://drafts.csswg.org/mediaqueries-4/
[POINTEREVENTS2]
  Matt Brubeck; et al. Pointer Events. URL: https://w3c.github.io/pointerevents/
[RFC2119]
  S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[SCREEN-ORIENTATION]
  Mounir Lamouri; Marcos Caceres; Johanna Herman. The Screen Orientation API. URL: https://w3c.github.io/screen-orientation/
[WebIDL]
  Boris Zbarsky. Web IDL. URL: https://heycam.github.io/webidl/

### Informative References

[CSS-UI-4]
  Florian Rivoal. CSS Basic User Interface Module Level 4. URL: https://drafts.csswg.org/css-ui-4/

## Property Index

Name | Value | Initial | Applies to | Inh. | %ages | Animation type | Canonical order | Computed value | Media
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
-webkit-background-clip | border-box | padding-box | content-box | text | none | all elements | no | N/A | discrete | per grammar | "text" | visual
-webkit-text-fill-color | <color> | currentcolor | all elements | yes | N/A | as color | per grammar | an RGBA color | visual
-webkit-text-stroke | <line-width> || <color> | See individual properties | See individual properties | yes | N/A | See individual properties | per grammar | See individual properties | visual
-webkit-text-stroke-color | <color> | currentcolor | all elements | yes | N/A | as color | per grammar | an RGBA color | visual
-webkit-text-stroke-width | <line-width> | 0 | all elements | yes | N/A | discrete | per grammar | absolute length | visual
touch-action | auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation | auto | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups. | no | N/A | discrete | per grammar | Same as specified value | visual

### @media Descriptors

Name | Value | Initial | Accepts min/max prefixes | Type
--- | --- | --- | --- | ---
-webkit-device-pixel-ratio | <number> |  |  | range
-webkit-transform-3d | <mq-boolean> |  | no |

## IDL Index

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

    partial interface HTMLBodyElement {
        attribute EventHandler onorientationchange;
    };

#descdef-media--webkit-device-pixel-ratio Referenced in:

- 3.2.1. -webkit-device-pixel-ratio (2) (3)

#descdef-media--webkit-transform-3d Referenced in:

- 3.2.2. -webkit-transform-3d (2)

#propdef--webkit-background-clip Referenced in:

- 3.4.6. Foreground Text Clipping: the -webkit-background-clip property (2) (3) (4) (5) (6)

#valdef--webkit-background-clip-text Referenced in:

- 3.4.6. Foreground Text Clipping: the -webkit-background-clip property

#propdef--webkit-text-fill-color Referenced in:

- 3.4.6. Foreground Text Clipping: the -webkit-background-clip property
- 3.4.7.1. Foreground Text Color: the -webkit-text-fill-color property (2) (3)

#propdef--webkit-text-stroke-color Referenced in:

- 3.4.7.2. Text Stroke Color: the -webkit-text-stroke-color property (2)

#propdef--webkit-text-stroke-width Referenced in:

- 3.4.7.3. Text Stroke Thickness: the -webkit-text-stroke-width property (2)

#propdef--webkit-text-stroke Referenced in:

- 3.4.7.4. Text Stroke Shorthand: the -webkit-text-stroke property (2) (3)

#dom-window-onorientationchange Referenced in:

- 4.2.2. Event Handlers on Window objects and body elements

#dom-window-orientation Referenced in:

- 4.2. window.orientation API (2) (3)
- 4.2.1. window.orientation angle (2) (3)

#event-orientationchange Referenced in:

- 4.2. window.orientation API
- 4.2.2. Event Handlers on Window objects and body elements