Compatibility

Living Standard — Last Updated

Participate:
GitHub whatwg/compat (new issue, open issues)
Chat on Matrix
Commits:
GitHub whatwg/compat/commits
Snapshot as of this commit
@compatstandard
Tests:
web-platform-tests compat/ (ongoing work)
Translations (non-normative):
日本語

Abstract

This standard describes a collection of web platform features 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 specific vendor CSS properties and DOM APIs for functionality or layout. This holds especially true for mobile-optimized web content, which is highly dependent on -webkit--prefixed properties.

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, which aren’t specified elsewhere.

The HTTP User-Agent header field as found in major browsers today is also described.

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>
Type: discrete

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 Gradient Functions

3.3.1. -webkit-linear-gradient()

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

3.3.2. -webkit-radial-gradient()

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

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

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

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

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

3.4. CSS Properties

3.4.1. Legacy name aliases

The following -webkit- vendor prefixed properties must be supported as legacy name 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-clip background-clip
-webkit-background-origin background-origin
-webkit-background-size

Not really a legacy name alias. 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 legacy name aliases

The following -webkit- vendor prefixed properties must be supported as legacy name 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
For example, -webkit-text-size-adjust is treated as an alias of -moz-text-size-adjust in Firefox.

Note: As soon as each property is unprefixable it can be defined as a legacy name alias.

3.4.3. Non-aliased vendor prefixed properties

Note: This section used to specify 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

These definitions of -webkit-box-* are known to not be web compatible.

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

These definitions of -webkit-box-* are known to not be web compatible.

3.4.6. Text Fill and Stroking

3.4.6.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: by computed value type
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.6.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: by computed value type
Media: visual

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

3.4.6.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.6.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 the -webkit-text-stroke-width and -webkit-text-stroke-color properties, 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:

image of stroked text

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: not animatable
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

Note: 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. Let document be this's relevant global object's associated Document.

  2. Return 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 non-Mobile 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 integer 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. Let orientationAngle be the current orientation angle.
    1. If orientationAngle is less than 180, return orientationAngle.
    2. If orientationAngle is 180, and the user agent supports that value, return orientationAngle, else return 0.
    3. If orientationAngle is greater than 180, return orientationAngle - 360.

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

5. The User-Agent String

The User-Agent header field syntax is formally defined by [HTTP-SEMANTICS] and provides SHOULD-level guidance on its value. This section serves as a descriptive record of the User-Agent patterns found in the so-called major web browsers, but much of it will apply to other browsers with a shared heritage (i.e., forks and embedders) as well as any user agent in the more general sense that send a User-Agent header.

5.1. User-Agent Tokens

A User-Agent token is a string that represents an abstraction over a semantic unit in the User-Agent string. This document formalizes a token as a string that begins with an opening bracket "<" and ends with a closing ">" bracket, e.g., <version>. A token may also contain other tokens.

A User-Agent constant is a string whose value does not change.

When a token’s value is made up from one or more tokens, and optionally constants, it is said to decompose to those tokens and constants.

5.1.1. User-Agent Token Reference

This is a non-exhaustive list of common User-Agent tokens.

Tokens Description
<deviceCompat> Represents the form-factor of the device. Primarily this is "Mobile ", or just the empty string, for Desktop or non-mobile devices. Some browsers have also sent token values such as "Tablet", "TV", "Mobile VR", etc., or included build information as well.
<majorVersion> Represents the browser’s major version number.
<minorVersion> Represents the browser’s non-major version numbers.
<oscpu> Represents the device operating system and (optionally) CPU architecture.
<platform> Represents the underlying device platform.

5.2. Meta Structure

The User-Agent strings that follow share the common meta structure:

"Mozilla/5.0 (a) b"

Where a is one or more tokens representing device information and b is one or more tokens representing browser information.

5.3. Chrome

5.3.1. Chrome User-Agent pattern

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

Desktop: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"

Mobile: "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Mobile Safari/537.36"

5.3.2. Chrome-specific tokens

Tokens Description
<unifiedPlatform> Per-platform constant that is one of the following values:

"Linux; Android 10; K"
"Windows NT 10.0; Win64; x64"
"Macintosh; Intel Mac OS X 10_15_7"
"X11; Linux x86_64"
"X11; CrOS x86_64 14541.0.0"
"Fuchsia"

5.4. Firefox

5.4.1. Firefox User-Agent pattern

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

Desktop: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0"

Mobile: "Mozilla/5.0 (Android 10; Mobile; rv:100.0) Gecko/100.0 Firefox/100.0"

5.4.2. Firefox-specific tokens

<firefoxVersion> decomposes to the following:

"<majorVersion>.0"

In Firefox on desktop platforms (Windows, macOS, Linux, etc.), <geckoVersion> is the frozen build date "20100101". In Firefox for Android, <geckoVersion> is the same value as <firefoxVersion>.

<firefoxPlatform> decomposes to the following:

On desktop platforms, "<platform>; <oscpu>".

On Firefox for Android, "<platform>; <deviceCompat>".

Tokens Description
<deviceCompat> The string "Mobile", without any leading or trailing spaces.

5.5. Safari

5.5.1. Safari User-Agent pattern

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

Desktop: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Safari/605.1.15"

Mobile: "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"

5.5.2. Safari-specific tokens

<safariVersion> decomposes to the following:

"<majorVersion>.<minorVersion>", where <minorVersion> is a single digit.

<safariPlatform> decomposes to the following:

On desktop and larger iPad form factors, the constant "Macintosh; Intel Mac OS X 10_15_7".

On mobile platforms, including smaller iPad form factors "<appleProduct>; CPU <mobileOSName> <iOSVersion> like Mac OS X".

Tokens Description
<appleProduct> Represents the marketing product name of the mobile device, which is one of "iPad", "iPhone", and "iPod".
<iOSVersion> Represents the iOS version number, delimited by an underscore ( for historical compatibility reasons).
<mobileOSName> A constant that is one of two values: "OS" (for iPad-like devices) or "iPhone OS" (non-iPad-like devices).
<webkitVersion> A constant that is one of two values: "605.1.15" (for larger devices, including non-mini iPad) or "604.1" (for smaller mobile devices, including iPad mini).

Acknowledgements

Thanks to Alan Cutter, Cameron McCormack, Chris Rebert, Chun-Min (Jeremy) Chen, Daniel Holbert, David Håsäther, Domenic Denicola, Eric Portis, hexalys, Jean-Yves Perrier, Jacob Rossi, Karl Dubost, 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 (Google, [email protected]).

Intellectual property rights

Copyright © WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a Creative Commons Attribution 4.0 International License. To the extent portions of it are incorporated into source code, such portions in the source code are licensed under the BSD 3-Clause License instead.

This is the Living Standard. Those interested in the patent-review version should view the Living Standard Review Draft.

Index

Terms defined by this specification

Terms defined by reference

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]
David Baron; et al. CSS Animations Level 1. URL: https://drafts.csswg.org/css-animations/
[CSS-ANIMATIONS-2]
David Baron; Brian Birtles. CSS Animations Level 2. URL: https://drafts.csswg.org/css-animations-2/
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-BORDERS-4]
CSS Borders and Box Decorations Module Level 4. Editor's Draft. URL: https://drafts.csswg.org/css-borders-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS Color Module Level 4. URL: https://drafts.csswg.org/css-color/
[CSS-COLOR-5]
Chris Lilley; et al. CSS Color Module Level 5. URL: https://drafts.csswg.org/css-color-5/
[CSS-CONDITIONAL-3]
David Baron; Elika Etemad; Chris Lilley. CSS Conditional Rules Module Level 3. URL: https://drafts.csswg.org/css-conditional-3/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. URL: https://drafts.csswg.org/css-display/
[CSS-DISPLAY-4]
CSS Display Module Level 4. Editor's Draft. URL: https://drafts.csswg.org/css-display-4/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; et al. CSS Flexible Box Layout Module Level 1. URL: https://drafts.csswg.org/css-flexbox-1/
[CSS-IMAGES-4]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Images Module Level 4. URL: https://drafts.csswg.org/css-images-4/
[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. Editor's Draft. URL: https://drafts.csswg.org/css-size-adjust-1/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: https://drafts.csswg.org/css-syntax/
[CSS-TRANSFORMS-1]
Simon Fraser; et al. CSS Transforms Module Level 1. URL: https://drafts.csswg.org/css-transforms/
[CSS-TRANSFORMS-2]
Tab Atkins Jr.; et al. 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-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
[CSS3-IMAGES-20110217]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Images 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/
[FETCH]
Anne van Kesteren. Fetch Standard. Living Standard. URL: https://fetch.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/
[HTTP-SEMANTICS]
R. Fielding; M. Nottingham; J. Reschke. HTTP Semantics. URL: https://httpwg.org/http-core/draft-ietf-httpbis-semantics-latest.html
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[MEDIAQUERIES-4]
Florian Rivoal; Tab Atkins Jr.. Media Queries Level 4. URL: https://drafts.csswg.org/mediaqueries-4/
[MEDIAQUERIES-5]
Dean Jackson; et al. Media Queries Level 5. URL: https://drafts.csswg.org/mediaqueries-5/
[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://datatracker.ietf.org/doc/html/rfc2119
[SCREEN-ORIENTATION]
Marcos Caceres. Screen Orientation. URL: https://w3c.github.io/screen-orientation/
[SVG2]
Amelia Bellamy-Royds; et al. Scalable Vector Graphics (SVG) 2. URL: https://svgwg.org/svg2-draft/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

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 Anim­ation type Canonical order Com­puted value Media
-webkit-text-fill-color <color> currentcolor all elements yes N/A by computed value type 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 by computed value type 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 not animatable per grammar Same as specified value visual

@media Descriptors

Name Value Initial Type
-webkit-device-pixel-ratio <number> range
-webkit-transform-3d <mq-boolean> discrete

IDL Index

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

partial interface HTMLBodyElement {
    attribute EventHandler onorientationchange;
};

MDN

@media/-webkit-device-pixel-ratio

In all current engines.

Firefox63+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+IENone
Firefox for Android?iOS Safari1+Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile?

@media/-webkit-device-pixel-ratio

In all current engines.

Firefox63+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+IENone
Firefox for Android?iOS Safari1+Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile?

@media/-webkit-device-pixel-ratio

In all current engines.

Firefox63+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+IENone
Firefox for Android?iOS Safari1+Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile?
MDN

@media/-webkit-transform-3d

In all current engines.

Firefox49+Safari4+Chrome2+
Opera?Edge79+
Edge (Legacy)12+IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
MDN

-webkit-text-fill-color

In all current engines.

Firefox49+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile15+
MDN

-webkit-text-stroke-color

In all current engines.

Firefox49+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)15+IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile15+
MDN

-webkit-text-stroke-width

In all current engines.

Firefox49+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)15+IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView38+Samsung Internet?Opera Mobile15+
MDN

-webkit-text-stroke

In all current engines.

Firefox49+Safari3+Chrome4+
Opera?Edge79+
Edge (Legacy)15+IENone
Firefox for Android?iOS Safari?Chrome for Android?Android WebView4+Samsung Internet?Opera Mobile?
MDN

touch-action

In all current engines.

Firefox52+Safari13+Chrome36+
Opera?Edge79+
Edge (Legacy)12+IE11
Firefox for Android52+iOS Safari9.3+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?