ContextQMD
Back to Content

WebKit (-webkit-) vendor-prefixed CSS extensions

files/en-us/web/css/reference/webkit_extensions/index.md

latest10.3 KB
Original Source

A {{glossary("vendor prefix")}} is used to indicate that a feature is specific to a certain browser. User agents based on WebKit or Blink (such as Safari and Chrome) support several extensions to CSS, which are prefixed with -webkit-.

-webkit-prefixed properties without standard equivalents

[!NOTE] These properties work in WebKit- or Blink-based browsers except where support notes say otherwise. You should avoid using them on production websites.

A-C

  • -webkit-app-region {{deprecated_inline}}: No longer supported in Safari.
  • -webkit-border-horizontal-spacing
  • -webkit-border-vertical-spacing
  • {{CSSxRef("-webkit-box-reflect")}}: Supported with -webkit- by every browser, for compatibility reasons.
  • -webkit-column-axis: Not supported in Chrome.
  • -webkit-column-progression: Not supported in Chrome.
  • -webkit-cursor-visibility: Not supported in Chrome.

D-L

  • -webkit-font-smoothing: See {{CSSxRef("font-smooth")}}.
  • -webkit-hyphenate-limit-after: Not supported in Chrome.
  • -webkit-hyphenate-limit-before: Not supported in Chrome.
  • -webkit-hyphenate-limit-lines: Not supported in Chrome.
  • -webkit-line-align: Not supported in Chrome.
  • -webkit-line-box-contain: Not supported in Chrome.
  • -webkit-line-grid: Not supported in Chrome.
  • -webkit-line-snap: Not supported in Chrome.
  • -webkit-locale
  • -webkit-logical-height
  • -webkit-logical-width

M

  • -webkit-margin-after
  • -webkit-margin-before
  • {{CSSxRef("-webkit-mask-box-image")}}: See {{cssxref("mask-border")}} and {{cssxref("border-image")}}.
  • {{CSSxRef("-webkit-mask-box-image", "-webkit-mask-box-image-outset")}}: See {{cssxref("mask-border")}} and {{cssxref("border-image")}}.
  • {{CSSxRef("-webkit-mask-box-image", "-webkit-mask-box-image-repeat")}}: See {{cssxref("mask-border")}} and {{cssxref("border-image")}}.
  • {{CSSxRef("-webkit-mask-box-image", "-webkit-mask-box-image-slice")}}: See {{cssxref("mask-border")}} and {{cssxref("border-image")}}.
  • {{CSSxRef("-webkit-mask-box-image", "-webkit-mask-box-image-source")}}: See {{cssxref("mask-border")}} and {{cssxref("border-image")}}.
  • {{CSSxRef("-webkit-mask-box-image", "-webkit-mask-box-image-width")}}: See {{cssxref("mask-border")}} and {{cssxref("border-image")}}.
  • {{CSSxRef("-webkit-mask-composite")}}: See {{cssxref("mask-border")}} and {{cssxref("border-image")}}.
  • {{CSSxRef("-webkit-mask-position-x")}}: Supported with -webkit- by every browser for compatibility reasons.
  • {{CSSxRef("-webkit-mask-position-y")}}: Supported with -webkit- by every browser for compatibility reasons.
  • {{CSSxRef("-webkit-mask-repeat-x")}} {{deprecated_inline}}: No longer supported; see {{CSSxRef("mask-repeat")}}.
  • {{CSSxRef("-webkit-mask-repeat-y")}} {{deprecated_inline}}: No longer supported; see {{CSSxRef("mask-repeat")}}.
  • -webkit-mask-source-type: Not supported in Chrome.
  • -webkit-max-logical-height
  • -webkit-max-logical-width
  • -webkit-min-logical-height
  • -webkit-min-logical-width

N-Z

  • -webkit-nbsp-mode: Not supported in Chrome.
  • -webkit-perspective-origin-x
  • -webkit-perspective-origin-y
  • -webkit-rtl-ordering
  • {{CSSxRef("-webkit-tap-highlight-color")}}: Only supported in Safari on iOS.
  • -webkit-text-decoration-skip: Not supported in Chrome.
  • -webkit-text-decorations-in-effect
  • {{CSSxRef("-webkit-text-fill-color")}}
  • {{CSSxRef("-webkit-text-security")}}
  • {{CSSxRef("-webkit-text-stroke")}}
  • {{CSSxRef("-webkit-text-stroke-color")}}
  • {{CSSxRef("-webkit-text-stroke-width")}}
  • -webkit-text-zoom: Not supported in Chrome.
  • {{CSSxRef("-webkit-touch-callout")}} {{deprecated_inline}}: Only supported in Safari on iOS.
  • -webkit-transform-origin-x
  • -webkit-transform-origin-y
  • -webkit-transform-origin-z
  • -webkit-user-drag
  • -webkit-user-modify

-webkit-prefixed properties with standard equivalents

Several -webkit- prefixed properties have standard equivalents. Even if the name and syntax may be different, they shouldn't be used any more. For each of the properties below, use the standard equivalents.

A-B

  • -webkit-border-after: Use {{CSSxRef("border-block-end")}}.
  • -webkit-border-after-color: Use {{CSSxRef("border-block-end-color")}}.
  • -webkit-border-after-style: Use {{CSSxRef("border-block-end-style")}}.
  • -webkit-border-after-width: Use {{CSSxRef("border-block-end-width")}}.
  • {{CSSxRef("-webkit-border-before")}}: Use {{CSSxRef("border-block-start")}}.
  • -webkit-border-before-color: Use {{CSSxRef("border-block-start-color")}}.
  • -webkit-border-before-style: Use {{CSSxRef("border-block-start-style")}}.
  • -webkit-border-before-width: Use {{CSSxRef("border-block-start-width")}}.
  • -webkit-border-end: Use {{CSSxRef("border-inline-end")}}.
  • -webkit-border-end-color: Use {{CSSxRef("border-inline-end-color")}}.
  • -webkit-border-end-style: Use {{CSSxRef("border-inline-end-style")}}.
  • -webkit-border-end-width: Use {{CSSxRef("border-inline-end-width")}}.
  • -webkit-border-start: Use {{CSSxRef("border-inline-start")}}.
  • -webkit-border-start-color: Use {{CSSxRef("border-inline-start-color")}}
  • -webkit-border-start-style: Use {{CSSxRef("border-inline-start-style")}}.
  • -webkit-border-start-width: Use {{CSSxRef("border-inline-start-width")}}.
  • -webkit-box-align: Use CSS flexbox with {{CSSxRef("align-items")}}.
  • -webkit-box-direction: Use CSS flexbox with {{CSSxRef("flex-direction")}}.
  • {{CSSxRef("box-flex-group", "-webkit-box-flex-group")}}: Use CSS flexbox with {{CSSxRef("flex-basis")}}, {{CSSxRef("flex-grow")}}, and {{CSSxRef("flex-shrink")}}.
  • -webkit-box-flex: Use CSS flexbox with {{CSSxRef("flex-grow")}}.
  • -webkit-box-lines: Use CSS flexbox with {{CSSxRef("flex-flow")}}.
  • -webkit-box-ordinal-group: Use CSS flexbox with {{CSSxRef("order")}}.
  • -webkit-box-orient: Use CSS flexbox with {{CSSxRef("flex-direction")}}.
  • -webkit-box-pack: Use CSS flexbox with {{CSSxRef("justify-content")}}.
  • {{CSSxRef("-webkit-box-reflect")}}: Use the CSS {{cssxref("element()")}} function.

C-I

  • -webkit-column-break-after: Use CSS multicolumn layout with {{CSSxRef("break-after")}}.
  • -webkit-column-break-before: Use CSS multicolumn layout with {{CSSxRef("break-before")}}.
  • -webkit-column-break-inside: Use CSS multicolumn layout with {{CSSxRef("break-inside")}}.
  • -webkit-font-feature-settings: Use {{CSSxRef("font-feature-settings")}} (the prefixed version not supported in Safari).
  • -webkit-hyphenate-character: Use {{CSSxRef("hyphenate-character")}}.
  • -webkit-initial-letter: Use {{CSSxRef("initial-letter")}}.

J-Z

  • -webkit-line-clamp: Use {{CSSxRef("line-clamp")}}.
  • -webkit-margin-end: Use {{CSSxRef("margin-block-end")}}.
  • -webkit-margin-start: Use {{CSSxRef("margin-block-start")}}.
  • -webkit-padding-after: Use {{CSSxRef("padding-block-end")}}.
  • -webkit-padding-before: Use {{CSSxRef("padding-block-start")}}.
  • -webkit-padding-end: Use {{CSSxRef("padding-inline-end")}}.
  • -webkit-padding-start: Use {{CSSxRef("padding-inline-start")}}.

-webkit-prefixed property values

  • -webkit-fill-available
    • : Used with sizing properties like {{CSSxRef("width")}} and {{CSSxRef("height")}}, to allow elements to take up all available space within their parent container. The stretch value provides a standard replacement, but -webkit-fill-available is supported as an alias by browsers for backwards-compatibility reasons.

Pseudo-classes

[!NOTE] If there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

  • :-webkit-any(): Use {{CSSxRef(":is")}}
  • :-webkit-any-link: Use {{CSSxRef(":any-link")}}
  • :-webkit-autofill: Use {{CSSxRef(":autofill")}}
  • :-webkit-autofill-strong-password: Use {{CSSxRef(":autofill")}}
  • :-webkit-drag
  • :-webkit-full-page-media: Use {{CSSxRef(":fullscreen")}}
  • :-webkit-full-screen: Use {{CSSxRef(":fullscreen")}}
  • :-webkit-full-screen-ancestor: Use {{CSSxRef(":fullscreen")}}
  • :-webkit-full-screen-document: Use {{CSSxRef(":fullscreen")}}
  • :-webkit-full-screen-controls-hidden: Use {{CSSxRef(":fullscreen")}}

Pseudo-elements

For web-compatibility reasons, Blink, WebKit, and Gecko browsers treat all pseudo-elements starting with ::-webkit- as valid. 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, Blink, WebKit and Gecko browsers assume it is valid, not invalidating the selector list.

  • ::-webkit-file-upload-button: Use {{CSSxRef("::file-selector-button")}}
  • {{CSSxRef("::-webkit-inner-spin-button")}}
  • ::-webkit-input-placeholder: Use {{CSSxRef("::placeholder")}}
  • {{CSSxRef("::-webkit-meter-bar")}} {{deprecated_inline}}
  • {{CSSxRef("::-webkit-meter-even-less-good-value")}}
  • {{CSSxRef("::-webkit-meter-inner-element")}}
  • {{CSSxRef("::-webkit-meter-optimum-value")}}
  • {{CSSxRef("::-webkit-meter-suboptimum-value")}}
  • {{CSSxRef("::-webkit-progress-bar")}}
  • {{CSSxRef("::-webkit-progress-inner-element")}}
  • {{CSSxRef("::-webkit-progress-value")}}
  • {{CSSxRef("::-webkit-search-cancel-button")}}
  • {{CSSxRef("::-webkit-search-results-button")}}
  • {{CSSxRef("::-webkit-slider-runnable-track")}}
  • {{CSSxRef("::-webkit-slider-thumb")}}

Media features

  • {{CSSxRef("@media/-webkit-animation")}} {{deprecated_inline}}
  • {{CSSxRef("@media/-webkit-device-pixel-ratio")}}: Supported cross-browser
  • {{CSSxRef("@media/-webkit-transform-2d")}} {{deprecated_inline}}
  • {{CSSxRef("@media/-webkit-transform-3d")}}: Supported cross-browser
  • {{CSSxRef("@media/-webkit-transition")}} {{deprecated_inline}}

See also