-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
L
M
-webkit-margin-after-webkit-margin-before-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
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-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-endproperty instead. -webkit-border-after-color-
Use the standard
border-block-end-colorproperty instead. -webkit-border-after-style-
Use the standard
border-block-end-styleproperty instead. -webkit-border-after-width-
Use the standard
border-block-end-widthproperty instead. -webkit-border-before-
Use the standard
border-block-startproperty instead. -webkit-border-before-color-
Use the standard
border-block-start-colorproperty instead. -webkit-border-before-style-
Use the standard
border-block-start-styleproperty instead. -webkit-border-before-width-
Use the standard
border-block-start-widthproperty instead. -webkit-border-end-
Use the standard
border-inline-endproperty instead. -webkit-border-end-color-
Use the standard
border-inline-end-colorproperty instead. -webkit-border-end-style-
Use the standard
border-inline-end-styleproperty instead. -webkit-border-end-width-
Use the standard
border-inline-end-widthproperty instead. -webkit-border-start-
Use the standard
border-inline-startproperty instead. -webkit-border-start-color-
Use the standard
border-inline-start-colorproperty instead. -webkit-border-start-style-
Use the standard
border-inline-start-styleproperty instead. -webkit-border-start-width-
Use the standard
border-inline-start-widthproperty instead. -webkit-box-align-
Use the CSS flexible box layout with the standard
align-itemsproperty instead. -webkit-box-direction-
Use the CSS flexible box layout with the standard
flex-directionproperty instead. -webkit-box-flex-group-
Use the CSS flexible box layout with the standard
flex-basis,flex-grow, andflex-shrinkproperties instead. -webkit-box-flex-
Use the CSS flexible box layout with the standard
flex-growproperty instead. -webkit-box-lines-
Use the CSS flexible box layout with the standard
flex-flowproperty instead. -webkit-box-ordinal-group-
Use the CSS flexible box layout with the standard
orderproperty instead. -webkit-box-orient-
Use the CSS flexible box layout with the standard
flex-directionproperty instead. -webkit-box-pack-
Use the CSS flexible box layout with the standard
justify-contentproperty instead.
C-I
-webkit-column-break-after-
Use the CSS multicolumn layout with the standard
break-afterproperty instead. -webkit-column-break-before-
Use the CSS multicolumn layout with the standard
break-beforeproperty instead. -webkit-column-break-inside-
Use the CSS multicolumn layout with the standard
break-insideproperty instead. -webkit-font-feature-settings-
Use the
font-feature-settingsproperty instead. -webkit-hyphenate-character-
Use the standard
hyphenate-characterproperty instead. -webkit-initial-letter-
Use the standard
initial-letterproperty instead.
J-Z
-webkit-margin-end-
Use the standard
margin-block-endproperty instead. -webkit-margin-start-
Use the standard
margin-block-startproperty instead. -webkit-padding-after-
Use the standard
padding-block-endproperty instead. -webkit-padding-before-
Use the standard
padding-block-startproperty instead. -webkit-padding-end-
Use the standard
padding-inline-endproperty instead. -webkit-padding-start-
Use the standard
padding-inline-startproperty instead.
-webkit-prefixed property values
-webkit-fill-available-
Used with sizing properties like
widthandheight, to allow elements to take up all the available space within their parent container. The flexboxstretchvalue (see for examplealign-itemsandjustify-items) provides a standard replacement.
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.