-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-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
, andflex-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-font-feature-settings
-
Use the
font-feature-settings
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.