Compatibility

1. Introduction

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.

2. Conformance

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:

3.2. CSS Media Queries

3.2.1. -webkit-device-pixel-ratio

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

3.2.2. -webkit-transform-3d

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:

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.

3.4.3. Non-aliased vendor prefixed properties

The -webkit-appearance property must be supported. It is not yet defined how this property works. See w3c/csswg-drafts issue #3024.

The initial value must be none. The user agent style sheet may set the value to something else on specific elements.

These values must be supported. More values may be supported, but implementers are encouraged to only support values that are necessary for web compatibility.

• none
• button
• button-bevel
• caret
• checkbox
• listbox
• listitem
• menulist
• menulist-button
• menulist-text
• menulist-textfield
• radio
• searchfield
• textfield

The appearance property must not be supported, since it is not web-compatible as currently defined. See w3c/csswg-drafts issue #1250.

3.4.4. Property mappings

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

3.4.5. Keyword mappings

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

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

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.

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

p {
  background: linear-gradient(90deg, red, blue);
  color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3.4.7. Text Fill and Stroking

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

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

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

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

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

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

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

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

<p class="stroked-text-longhand">Serious typography</p>

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.

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

manipulation is an alias for "pan-x pan-y pinch-zoom".

4. DOM Compatibility

4.1. The WebKitCSSMatrix interface

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.

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:

Acknowledgements

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 © 2018 WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a Creative Commons Attribution 4.0 International License.