---
title: Extensions WebKit
slug: Web/CSS/WebKit_Extensions
tags:
- Aperçu
- CSS
- Non-standard
- Reference
- WebKit
translation_of: Web/CSS/WebKit_Extensions
---
{{CSSRef}}
Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prennent en charge plusieurs extensions spécifiques à CSS. Ces extensions sont généralement préfixées par -webkit
. Certaines propriétés préfixées par -webkit
peuvent également fonctionner avec le préfixe -apple
. Quelques unes de ces extensions sont préfixées avec -epub
.
Propriétés spécifiques WebKit (ne pas utiliser sur le Web)
Note : Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.
Propriétés WebKit en voie de standardisation
- {{CSSxRef("appearance", "-webkit-appearance")}}
- {{CSSxRef("-webkit-font-size-delta")}}
- {{CSSxRef("-webkit-mask-composite")}}
- {{CSSxRef("-webkit-mask-position-x")}}
- {{CSSxRef("-webkit-mask-position-y")}}
- {{CSSxRef("-webkit-mask-repeat-x")}}
- {{CSSxRef("-webkit-mask-repeat-y")}}
Note : Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.
A
- {{CSSxRef("align-content","-webkit-align-content")}}
- {{CSSxRef("align-items","-webkit-align-items")}}
- {{CSSxRef("align-self","-webkit-align-self")}}
- {{CSSxRef("animation","-webkit-animation")}}
- {{CSSxRef("animation-delay","-webkit-animation-delay")}}
- {{CSSxRef("animation-direction","-webkit-animation-direction")}}
- {{CSSxRef("animation-duration","-webkit-animation-duration")}}
- {{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}}
- {{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}}
- {{CSSxRef("animation-name","-webkit-animation-name")}}
- {{CSSxRef("animation-play-state","-webkit-animation-play-state")}}
- {{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}}
B
- {{CSSxRef("backface-visibility","-webkit-backface-visibility")}}
- {{CSSxRef("background-clip","-webkit-background-clip")}}
- {{CSSxRef("background-origin","-webkit-background-origin")}}
- {{CSSxRef("background-size","-webkit-background-size")}}
- {{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}}
- {{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}}
- {{CSSxRef("border-image","-webkit-border-image")}}
- {{CSSxRef("border-radius","-webkit-border-radius")}}
- {{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}}
- {{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}}
- {{CSSxRef("box-shadow","-webkit-box-shadow")}}
- {{CSSxRef("box-sizing","-webkit-box-sizing")}}
C
- {{CSSxRef("column-count","-webkit-column-count")}}
- {{CSSxRef("column-gap","-webkit-column-gap")}}
- {{CSSxRef("column-rule","-webkit-column-rule")}}
- {{CSSxRef("column-rule-color","-webkit-column-rule-color")}}
- {{CSSxRef("column-rule-style","-webkit-column-rule-style")}}
- {{CSSxRef("column-rule-width","-webkit-column-rule-width")}}
- {{CSSxRef("column-span","-webkit-column-span")}}
- {{CSSxRef("column-width","-webkit-column-width")}}
- {{CSSxRef("columns","-webkit-columns")}}
F
- {{CSSxRef("filter","-webkit-filter")}}
- {{CSSxRef("flex","-webkit-flex")}}
- {{CSSxRef("flex-basis","-webkit-flex-basis")}}
- {{CSSxRef("flex-direction","-webkit-flex-direction")}}
- {{CSSxRef("flex-flow","-webkit-flex-flow")}}
- {{CSSxRef("flex-grow","-webkit-flex-grow")}}
- {{CSSxRef("flex-shrink","-webkit-flex-shrink")}}
- {{CSSxRef("flex-wrap","-webkit-flex-wrap")}}
- {{CSSxRef("-webkit-font-feature-settings")}}
- {{CSSxRef("-webkit-font-kerning")}}
- {{CSSxRef("-webkit-font-variant-ligatures")}}
G-J
- {{CSSxRef("grid-column","-webkit-grid-column")}}
- {{CSSxRef("grid-row","-webkit-grid-row")}}
- {{CSSxRef("hyphens","-webkit-hyphens")}}
- {{CSSxRef("justify-content","-webkit-justify-content")}}
M
- {{CSSxRef("mask","-webkit-mask")}}
- {{CSSxRef("mask-clip","-webkit-mask-clip")}}
- {{CSSxRef("mask-image","-webkit-mask-image")}}
- {{CSSxRef("mask-origin","-webkit-mask-origin")}}
- {{CSSxRef("mask-position","-webkit-mask-position")}}
- {{CSSxRef("mask-repeat","-webkit-mask-repeat")}}
- {{CSSxRef("mask-size","-webkit-mask-size")}}
O-S
- {{CSSxRef("opacity","-webkit-opacity")}}
- {{CSSxRef("order","-webkit-order")}}
- {{CSSxRef("perspective","-webkit-perspective")}}
- {{CSSxRef("perspective-origin","-webkit-perspective-origin")}}
- {{CSSxRef("shape-outside","-webkit-shape-outside")}}
T
- {{CSSxRef("text-emphasis", "-epub-text-emphasis")}}
- {{CSSxRef("-webkit-text-emphasis")}}
- {{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}}
- {{CSSxRef("-webkit-text-emphasis-color")}}
- {{CSSxRef("-webkit-text-emphasis-position")}}
- {{CSSxRef("-epub-text-emphasis-style")}}
- {{CSSxRef("-webkit-text-emphasis-style")}}
- {{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}}
- {{CSSxRef("transform","-webkit-transform")}}
- {{CSSxRef("transform-origin","-webkit-transform-origin")}}
- {{CSSxRef("transform-style","-webkit-transform-style")}}
- {{CSSxRef("transition","-webkit-transition")}}
- {{CSSxRef("transition-delay","-webkit-transition-delay")}}
- {{CSSxRef("transition-duration","-webkit-transition-duration")}}
- {{CSSxRef("transition-property","-webkit-transition-property")}}
- {{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}}
W
- {{CSSxRef("word-break", "-epub-word-break")}}
- {{CSSxRef("writing-mode", "-epub-writing-mode")}}
Spécificités prises en charge par Firefox
Les propriétés suivantes peuvent être utilisées avec le préfixe -webkit-
sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les propriétés anciennement spécifiques et désormais standard ci-avant).
Note : En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec -webkit-
, Edge et Firefox redirigent de nombreuses propriétés préfixées avec -webkit-
vers les équivalents sans préfixe ou avec -moz-
ou -ms-
.
A
- {{CSSxRef("-webkit-align-content")}}
- {{CSSxRef("-webkit-align-items")}}
- {{CSSxRef("-webkit-align-self")}}
- {{CSSxRef("-webkit-animation")}}
- {{CSSxRef("-webkit-animation-delay")}}
- {{CSSxRef("-webkit-animation-direction")}}
- {{CSSxRef("-webkit-animation-duration")}}
- {{CSSxRef("-webkit-animation-fill-mode")}}
- {{CSSxRef("-webkit-animation-iteration-count")}}
- {{CSSxRef("-webkit-animation-name")}}
- {{CSSxRef("-webkit-animation-play-state")}}
- {{CSSxRef("-webkit-animation-timing-function")}}
- {{CSSxRef("-webkit-appearance")}}*
B
- {{CSSxRef("-webkit-backface-visibility")}}
- {{CSSxRef("-webkit-background-clip")}}
- {{CSSxRef("-webkit-background-origin")}}
- {{CSSxRef("-webkit-background-size")}}
- {{CSSxRef("-webkit-border-bottom-left-radius")}}
- {{CSSxRef("-webkit-border-bottom-right-radius")}}
- {{CSSxRef("-webkit-border-image")}}
- {{CSSxRef("-webkit-border-radius")}}
- {{CSSxRef("-webkit-box-align")}}**, ***
- {{CSSxRef("-webkit-box-direction")}}**, ***
- {{CSSxRef("-webkit-box-flex")}}**, ***
- {{CSSxRef("-webkit-box-orient")}}**, ***
- {{CSSxRef("-webkit-box-pack")}}**, ***
- {{CSSxRef("-webkit-box-shadow")}}
- {{CSSxRef("-webkit-box-sizing")}}
- {{CSSxRef("-webkit-border-top-left-radius")}}
- {{CSSxRef("-webkit-border-top-right-radius")}}
F
- {{CSSxRef("-webkit-filter")}}
- {{CSSxRef("-webkit-flex")}}
- {{CSSxRef("-webkit-flex-basis")}}
- {{CSSxRef("-webkit-flex-direction")}}
- {{CSSxRef("-webkit-flex-flow")}}
- {{CSSxRef("-webkit-flex-grow")}}
- {{CSSxRef("-webkit-flex-shrink")}}
- {{CSSxRef("-webkit-flex-wrap")}}
J
- {{CSSxRef("-webkit-justify-content")}}
M
- {{CSSxRef("-webkit-mask")}}
- {{CSSxRef("-webkit-mask-clip")}}
- {{CSSxRef("-webkit-mask-composite")}}*
- {{CSSxRef("-webkit-mask-image")}}
- {{CSSxRef("-webkit-mask-origin")}}
- {{CSSxRef("-webkit-mask-position")}}
- {{CSSxRef("-webkit-mask-position-x")}}**
- {{CSSxRef("-webkit-mask-position-y")}}**
- {{CSSxRef("-webkit-mask-repeat")}}
- {{CSSxRef("-webkit-mask-size")}}
O-P
- {{CSSxRef("-webkit-order")}}
- {{CSSxRef("-webkit-perspective")}}
- {{CSSxRef("-webkit-perspective-origin")}}
T
- {{CSSxRef("-webkit-text-fill-color")}}**
- {{CSSxRef("-webkit-text-size-adjust")}}
- {{CSSxRef("-webkit-text-stroke")}}**
- {{CSSxRef("-webkit-text-stroke-color")}}**
- {{CSSxRef("-webkit-text-stroke-width")}}**
- {{CSSxRef("-webkit-transform")}}
- {{CSSxRef("-webkit-transform-origin")}}
- {{CSSxRef("-webkit-transition")}}
- {{CSSxRef("-webkit-transition-delay")}}
- {{CSSxRef("-webkit-transition-duration")}}
- {{CSSxRef("-webkit-transition-property")}}
- {{CSSxRef("-webkit-transition-timing-function")}}
U
- {{CSSxRef("-webkit-user-select")}}
* Prise en charge avec les préfixes -moz-
et -webkit-
dans Firefox mais pas pris en charge sans préfixe. Microsoft Edge et IE Mobile prennent en charge cette propriété avec le préfixe -webkit-
plutôt qu'avec -ms-
à des fins d'interopérabilité.
** Ces valeurs sont prises en charges bien qu'elles ne soient pas standard et qu'elles ne soient pas en cours de standardisation.
*** On privliégiera l'utilisation des propriétés flex-box
.
Pseudo-classes
- {{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}
- {{CSSxRef(":any()", ":-webkit-any()")}}
- {{CSSxRef(":any-link", ":-webkit-any-link")}}*
- {{CSSxRef(":autofill",":-webkit-autofill")}}
- {{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}}
- {{CSSxRef(":drag",":-webkit-drag")}}
- {{CSSxRef(":full-page-media",":-webkit-full-page-media")}}
- {{CSSxRef(":full-screen", ":-webkit-full-screen")}}*
- {{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}}
- {{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}
- {{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}
Pseudo-éléments
Pour des raisons de compatibilité web, Blink, WebKit et Gecko considèrent les pseudo-éléments commençant par ::-webkit-
comme valides.
- {{CSSxRef("::-webkit-file-upload-button")}}
- {{CSSxRef("::-webkit-inner-spin-button")}}
- {{CSSxRef("::-webkit-input-placeholder")}}
- {{CSSxRef("::-webkit-meter-bar")}}
- {{CSSxRef("::-webkit-meter-even-less-good-value")}}
- {{CSSxRef("::-webkit-meter-inner-element")}}
- {{CSSxRef("::-webkit-meter-optimum-value")}}
- {{CSSxRef("::-webkit-meter-suboptimum-value")}}
- {{CSSxRef("::-webkit-outer-spin-button")}}
- {{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")}}
Caractéristiques média
- {{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}
- {{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}
- {{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}}
- {{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}
- {{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}
Voir aussi