-webkit-prefixed CSS extensions
===============================

User agents based on WebKit or Blink, such as Safari and Chrome, support several special extensions to CSS. These extensions are prefixed with `-webkit-`.

-webkit-prefixed properties without standard equivalents
--------------------------------------------------------

**Note:** Avoid using on websites. These properties will only work in WebKit- or Blink-based browsers except where specified.

### A-C

* `-webkit-app-region`
* `-webkit-border-horizontal-spacing`
* `-webkit-border-vertical-spacing`
* `-webkit-box-reflect` (supported with `-webkit-` by every browser, for compatibility reasons)
* `-webkit-column-axis`
* `-webkit-column-progression`
* `-webkit-cursor-visibility`
### D-I

* `-webkit-font-smoothing`
* `-webkit-hyphenate-limit-after`
* `-webkit-hyphenate-limit-before`
* `-webkit-hyphenate-limit-lines`
### L

* `-webkit-line-align`
* `-webkit-line-box-contain`
* `-webkit-line-clamp`
* `-webkit-line-grid`
* `-webkit-line-snap`
* `-webkit-locale`
* `-webkit-logical-height`
* `-webkit-logical-width`
### M

* `-webkit-margin-after`
* `-webkit-margin-before`
* `-webkit-mask-attachment`
* `-webkit-mask-box-image-outset`
* `-webkit-mask-box-image-repeat`
* `-webkit-mask-box-image-slice`
* `-webkit-mask-box-image-source`
* `-webkit-mask-box-image-width`
* `-webkit-mask-box-image`
* `-webkit-mask-composite`
* `-webkit-mask-position-x` (supported with `-webkit-` by every browser, for compatibility reasons)
* `-webkit-mask-position-y` (supported with `-webkit-` by every browser, for compatibility reasons)
* `-webkit-mask-repeat-x` (also supported without prefix)
* `-webkit-mask-repeat-y` (also supported without prefix)
* `-webkit-mask-source-type`
* `-webkit-max-logical-height`
* `-webkit-max-logical-width`
* `-webkit-min-logical-height`
* `-webkit-min-logical-width`
### N-R

* `-webkit-nbsp-mode`
* `-webkit-perspective-origin-x`
* `-webkit-perspective-origin-y`
* `-webkit-rtl-ordering`
### T

* `-webkit-tap-highlight-color`
* `-webkit-text-decoration-skip`
* `-webkit-text-decorations-in-effect`
* `-webkit-text-fill-color`
* `-webkit-text-security`
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
* `-webkit-text-zoom`
* `-webkit-touch-callout`
* `-webkit-transform-origin-x`
* `-webkit-transform-origin-y`
* `-webkit-transform-origin-z`
### U-Z

* `-webkit-user-drag`
* `-webkit-user-modify`
-webkit-prefixed properties with standard equivalents
-----------------------------------------------------

Several old `-webkit-`prefixed properties have standard equivalents. Even if the name and syntax may be different, they shouldn't be used anymore at all.

For each of them, use the standard equivalent provided.

### A-B

`-webkit-border-after`

Use the standard `border-block-end` property instead.

`-webkit-border-after-color`

Use the standard `border-block-end-color` property instead.

`-webkit-border-after-style`

Use the standard `border-block-end-style` property instead.

`-webkit-border-after-width`

Use the standard `border-block-end-width` property instead.

`-webkit-border-before`

Use the standard `border-block-start` property instead.

`-webkit-border-before-color`

Use the standard `border-block-start-color` property instead.

`-webkit-border-before-style`

Use the standard `border-block-start-style` property instead.

`-webkit-border-before-width`

Use the standard `border-block-start-width` property instead.

`-webkit-border-end`

Use the standard `border-inline-end` property instead.

`-webkit-border-end-color`

Use the standard `border-inline-end-color` property instead.

`-webkit-border-end-style`

Use the standard `border-inline-end-style` property instead.

`-webkit-border-end-width`

Use the standard `border-inline-end-width` property instead.

`-webkit-border-start`

Use the standard `border-inline-start` property instead.

`-webkit-border-start-color`

Use the standard `border-inline-start-color` property instead.

`-webkit-border-start-style`

Use the standard `border-inline-start-style` property instead.

`-webkit-border-start-width`

Use the standard `border-inline-start-width` property instead.

`-webkit-box-align`

Use the CSS flexible box layout with the standard `align-items` property instead.

`-webkit-box-direction`

Use the CSS flexible box layout with the standard `flex-direction` property instead.

`-webkit-box-flex-group`

Use the CSS flexible box layout with the standard `flex-basis`, `flex-grow`, and `flex-shrink` properties instead.

`-webkit-box-flex`

Use the CSS flexible box layout with the standard `flex-grow` property instead.

`-webkit-box-lines`

Use the CSS flexible box layout with the standard `flex-flow` property instead.

`-webkit-box-ordinal-group`

Use the CSS flexible box layout with the standard `order` property instead.

`-webkit-box-orient`

Use the CSS flexible box layout with the standard `flex-direction` property instead.

`-webkit-box-pack`

Use the CSS flexible box layout with the standard `justify-content` property instead.

### C-I

`-webkit-column-break-after`

Use the CSS multicolumn layout with the standard `break-after` property instead.

`-webkit-column-break-before`

Use the CSS multicolumn layout with the standard `break-before` property instead.

`-webkit-column-break-inside`

Use the CSS multicolumn layout with the standard `break-inside` property instead.

`-webkit-hyphenate-character`

Use the standard `hyphenate-character` property instead.

`-webkit-initial-letter`

Use the standard `initial-letter` property instead.

### J-Z

`webkit-margin-end`

Use the standard `margin-block-end` property instead.

`-webkit-margin-start`

Use the standard `margin-block-start` property instead.

`-webkit-padding-after`

Use the standard `padding-block-end` property instead.

`-webkit-padding-before`

Use the standard `padding-block-start` property instead.

`-webkit-padding-end`

Use the standard `padding-inline-end` property instead.

`-webkit-padding-start`

Use the standard `padding-inline-start` property instead.

Pseudo-classes
--------------

* `:-webkit-animating-full-screen-transition`
* `:-webkit-any()`
* `:-webkit-any-link`\*
* `:-webkit-autofill`
* `:-webkit-autofill-strong-password`
* `:-webkit-drag`
* `:-webkit-full-page-media`
* `:-webkit-full-screen`\*
* `:-webkit-full-screen-ancestor`
* `:-webkit-full-screen-document`
* `:-webkit-full-screen-controls-hidden`

\* Now standard.

**Note:** If there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

Pseudo-elements
---------------

For web-compatibility reasons, Blink, WebKit, and Gecko browsers treat all pseudo-elements starting with `::-webkit-` as valid.

* `::-webkit-file-upload-button`\*
* `::-webkit-inner-spin-button`
* `::-webkit-input-placeholder`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-inner-element`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
* `::-webkit-progress-bar`
* `::-webkit-progress-inner-element`
* `::-webkit-progress-value`
* `::-webkit-search-cancel-button`
* `::-webkit-search-results-button`
* `::-webkit-slider-runnable-track`
* `::-webkit-slider-thumb`

\* Now standard.

**Note:** Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, WebKit and Gecko browsers assume it is valid, not invalidating the selector list.

Media features
--------------

* `-webkit-animation`
* `-webkit-device-pixel-ratio`
* `-webkit-transform-2d`
* `-webkit-transform-3d`
* `-webkit-transition`
See also
--------

* Vendor Prefix glossary entry
* Mozilla vendor-prefixed CSS extensions
* Styling Form Controls on the WebKit Trac