--- 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](/fr/docs/Web/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. ### A - {{CSSxRef("-webkit-aspect-ratio")}} ### B - {{CSSxRef("-webkit-background-composite")}} - {{CSSxRef("background-origin-x")}} (unprefixed!) - {{CSSxRef("background-origin-y")}} (unprefixed!) - {{CSSxRef("-webkit-border-after")}} - {{CSSxRef("-webkit-border-after-color")}} - {{CSSxRef("-webkit-border-after-style")}} - {{CSSxRef("-webkit-border-after-width")}} - {{CSSxRef("-webkit-border-before")}} - {{CSSxRef("-webkit-border-before-color")}} - {{CSSxRef("-webkit-border-before-style")}} - {{CSSxRef("-webkit-border-before-width")}} - {{CSSxRef("-webkit-border-end")}} - {{CSSxRef("-webkit-border-end-color")}} - {{CSSxRef("-webkit-border-end-style")}} - {{CSSxRef("-webkit-border-end-width")}} - {{CSSxRef("-webkit-border-fit")}} - {{CSSxRef("-webkit-border-horizontal-spacing")}} - {{CSSxRef("-webkit-border-start")}} - {{CSSxRef("-webkit-border-start-color")}} - {{CSSxRef("-webkit-border-start-style")}} - {{CSSxRef("-webkit-border-start-width")}} - {{CSSxRef("-webkit-border-vertical-spacing")}} - {{CSSxRef("-webkit-box-align")}} - {{CSSxRef("-webkit-box-direction")}} - {{CSSxRef("-webkit-box-flex")}} - {{CSSxRef("-webkit-box-flex-group")}} - {{CSSxRef("-webkit-box-lines")}} - {{CSSxRef("-webkit-box-ordinal-group")}} - {{CSSxRef("-webkit-box-orient")}} - {{CSSxRef("-webkit-box-pack")}} - {{CSSxRef("-webkit-box-reflect")}} - {{CSSxRef("-webkit-box-shadow")}} ### C – G - {{CSSxRef("-webkit-column-axis")}} - {{CSSxRef("-webkit-column-break-after")}} - {{CSSxRef("-webkit-column-break-before")}} - {{CSSxRef("-webkit-column-break-inside")}} - {{CSSxRef("-webkit-dashboard-region")}} - {{CSSxRef("-webkit-font-smoothing")}} - {{CSSxRef("-webkit-grid-columns")}} - {{CSSxRef("-webkit-grid-rows")}} ### H – I - {{CSSxRef("-webkit-highlight")}} - {{CSSxRef("-webkit-hyphenate-charset")}} - {{CSSxRef("-webkit-hyphenate-limit-after")}} - {{CSSxRef("-webkit-hyphenate-limit-before")}} - {{CSSxRef("-webkit-hyphenate-limit-lines")}} - {{CSSxRef("-webkit-image-set")}} ### L - {{CSSxRef("-webkit-line-align")}} - {{CSSxRef("-webkit-line-box-contain")}} - {{CSSxRef("-webkit-line-break")}} - {{CSSxRef("-webkit-line-clamp")}} - {{CSSxRef("-webkit-line-grid")}} - {{CSSxRef("-webkit-line-snap")}} - {{CSSxRef("-webkit-locale")}} - {{CSSxRef("-webkit-logical-height")}} - {{CSSxRef("-webkit-logical-width")}} ### M - {{CSSxRef("-webkit-margin-after")}} - {{CSSxRef("-webkit-margin-after-collapse")}} - {{CSSxRef("-webkit-margin-before")}} - {{CSSxRef("-webkit-margin-before-collapse")}} - {{CSSxRef("-webkit-margin-bottom-collapse")}} - {{CSSxRef("-webkit-margin-collapse")}} - {{CSSxRef("-webkit-margin-end")}} - {{CSSxRef("-webkit-margin-start")}} - {{CSSxRef("-webkit-margin-top-collapse")}} - {{CSSxRef("-webkit-marquee")}} - {{CSSxRef("-webkit-marquee-direction")}} - {{CSSxRef("-webkit-marquee-increment")}} - {{CSSxRef("-webkit-marquee-repetition")}} - {{CSSxRef("-webkit-marquee-speed")}} - {{CSSxRef("-webkit-marquee-style")}} - {{CSSxRef("-webkit-mask-attachment")}} - {{CSSxRef("-webkit-mask-box-image")}} - {{CSSxRef("-webkit-mask-box-image-outset")}} - {{CSSxRef("-webkit-mask-box-image-repeat")}} - {{CSSxRef("-webkit-mask-box-image-slice")}} - {{CSSxRef("-webkit-mask-box-image-source")}} - {{CSSxRef("-webkit-mask-box-image-width")}} - {{CSSxRef("-webkit-mask-position-x")}} - {{CSSxRef("-webkit-mask-position-y")}} - {{CSSxRef("-webkit-mask-repeat-x")}} - {{CSSxRef("-webkit-mask-repeat-y")}} - {{CSSxRef("-webkit-match-nearest-mail-blockquote-color")}} - {{CSSxRef("-webkit-max-logical-height")}} - {{CSSxRef("-webkit-max-logical-width")}} - {{CSSxRef("-webkit-min-logical-height")}} - {{CSSxRef("-webkit-min-logical-width")}} ### N – O - {{CSSxRef("-webkit-nbsp-mode")}} - {{CSSxRef("-webkit-overflow-scrolling")}} ### P - {{CSSxRef("-webkit-padding-after")}} - {{CSSxRef("-webkit-padding-before")}} - {{CSSxRef("-webkit-padding-end")}} - {{CSSxRef("-webkit-padding-start")}} - {{CSSxRef("-webkit-perspective-origin-x")}} - {{CSSxRef("-webkit-perspective-origin-y")}} - {{CSSxRef("-webkit-print-color-adjust")}} ### R – S - {{CSSxRef("-webkit-region-break-after")}} - {{CSSxRef("-webkit-region-break-before")}} - {{CSSxRef("-webkit-region-break-inside")}} - {{CSSxRef("-webkit-region-fragment")}} - {{CSSxRef("-webkit-resizer")}} - {{CSSxRef("-webkit-rtl-ordering")}} - {{CSSxRef(" -webkit-scrollbar")}} - {{CSSxRef(" -webkit-scrollbar-button")}} - {{CSSxRef(" -webkit-scrollbar-corner")}} - {{CSSxRef("-webkit-scrollbar-thumb")}} - {{CSSxRef("-webkit-scrollbar-track")}} - {{CSSxRef("-webkit-scrollbar-track-piece")}} - {{CSSxRef("-webkit-shape-inside")}} - {{CSSxRef("-webkit-svg-shadow")}} ### T - {{CSSxRef("-webkit-tap-highlight-color")}} - {{CSSxRef("-webkit-text-combine")}} - {{CSSxRef("-epub-text-combine")}} - {{CSSxRef("-webkit-text-decorations-in-effect")}} - {{CSSxRef("-webkit-text-fill-color")}} - {{CSSxRef("-epub-text-orientation")}} - {{CSSxRef("-webkit-text-security")}} - {{CSSxRef("-webkit-text-size-adjust")}} - {{CSSxRef("-webkit-text-stroke")}} - {{CSSxRef("-webkit-text-stroke-color")}} - {{CSSxRef("-webkit-text-stroke-width")}} - {{CSSxRef("-webkit-touch-callout")}} ## 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")}} ## Anciennes propriétés spécifiques désormais standardisées > **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 ](#spe_std)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 - [La mise en forme des contrôles de formulaires sur le Trac WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls) - Une liste complémentaire d'extensions WebKit - [Les extensions CSS relatives à Microsoft](/fr/docs/Web/CSS/Microsoft_CSS_extensions) - [Les extensions CSS relatives à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions)