-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

D-I

L

M

N-R

T

U-Z

-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

Pseudo-elements

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

* 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

See also