Compatibility Standard Compatibility Living Standard — Last Updated 15 March 2026 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. [Issue #87] 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 This definition of -webkit-box is known to not be web compatible. [Issue #87] 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: 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 Compati…