Webkit CSS 扩展
=============

基于 WebKit 或 Blink 的应用，例如 Safari 和 Chrome，支持一些特殊的 **CSS WebKit 扩展**。这些扩展通常带有 `-webkit-` 前缀。大多数 `-webkit-` 前缀的属性通常也能够与 `-apple-` 前缀使用。少部分是有 `-epub-` 前缀的。

仅 WebKit 具有的属性
--------------

**备注：** 避免在网站上使用。这些属性仅在 WebKit 应用中可用。

### A

* `-webkit-animation-trigger`
* `-webkit-app-region`
* `-webkit-aspect-ratio`
### B

* `-webkit-backdrop-filter`
* `-webkit-border-after`\*\*
* `-webkit-border-after-color`\*\*
* `-webkit-border-after-style`\*\*
* `-webkit-border-after-width`\*\*
* `-webkit-border-before`\*\*
* `-webkit-border-before-color`\*\*
* `-webkit-border-before-style`\*\*
* `-webkit-border-before-width`\*\*
* `-webkit-border-end`\*\*
* `-webkit-border-end-color`\*\*
* `-webkit-border-end-style`\*\*
* `-webkit-border-end-width`\*\*
* `-webkit-border-horizontal-spacing`
* `-webkit-border-start`\*\*
* `-webkit-border-start-color`\*\*
* `-webkit-border-start-style`\*\*
* `-webkit-border-start-width`\*\*
* `-webkit-border-vertical-spacing`
* `-webkit-box-align`\*\*
* `-webkit-box-direction`\*\*
* `-webkit-box-flex-group`\*\*
* `-webkit-box-flex`\*\*
* `-webkit-box-lines`\*\*
* `-webkit-box-ordinal-group`\*\*
* `-webkit-box-orient`\*\*
* `-webkit-box-pack`\*\*
* `-webkit-box-reflect`\*\*
### C

* `-webkit-column-axis`
* `-webkit-column-break-after`
* `-webkit-column-break-before`
* `-webkit-column-break-inside`
* `-webkit-column-progression`
* `-webkit-cursor-visibility`
### D-I

* `-webkit-dashboard-region`
* `-webkit-font-size-delta`
* `-webkit-font-smoothing`
* `-webkit-hyphenate-character`
* `-webkit-hyphenate-limit-after`
* `-webkit-hyphenate-limit-before`
* `-webkit-hyphenate-limit-lines`
* `-webkit-initial-letter`
### L

* `-webkit-line-align`
* `-webkit-line-box-contain`
* `-webkit-line-clamp`
* `-webkit-line-grid`
* `-webkit-line-snap`
* `-webkit-locale`
* `-webkit-logical-height`
* `-webkit-logical-width`
### M

* `-webkit-margin-after`
* `-webkit-margin-before`
* `-webkit-margin-end`\*\*
* `-webkit-margin-start`\*\*
* `-webkit-marquee-direction`
* `-webkit-marquee-increment`
* `-webkit-marquee-repetition`
* `-webkit-marquee-speed`
* `-webkit-marquee-style`
* `-webkit-marquee`
* `-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` (en-US)
* `-webkit-mask-repeat-x` (en-US)\*\*\*
* `-webkit-mask-repeat-y` (en-US)\*\*\*
* `-webkit-mask-source-type`
* `-webkit-mask-position-x` (en-US)
* `-webkit-mask-position-y` (en-US)
* `-webkit-max-logical-height`
* `-webkit-max-logical-width`
* `-webkit-min-logical-height`
* `-webkit-min-logical-width`
### N

* `-webkit-nbsp-mode`
### P

* `-webkit-padding-after`\*\*
* `-webkit-padding-before`\*\*
* `-webkit-padding-end`\*\*
* `-webkit-padding-start`\*\*
* `-webkit-perspective-origin-x`
* `-webkit-perspective-origin-y`
### R-S

* `-webkit-rtl-ordering`
* `-webkit-svg-shadow`
### T

* `-webkit-tap-highlight-color`
* `-webkit-text-decoration-skip`
* `-webkit-text-decorations-in-effect`
* `-webkit-text-fill-color`
* `-webkit-text-security` (en-US)
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
* `-webkit-text-zoom`
* `-webkit-transform-origin-x`
* `-webkit-transform-origin-y`
* `-webkit-transform-origin-z`
### U

* `-webkit-user-drag`
* `-webkit-user-modify`

 \* 一些是在标准的、无前缀的轨道上。
 \*\* 新语法已经标准化。属性链接到新的语法。旧的带有前缀的语法在一些浏览器中依然支持。
 \*\*\* WebKit 支持不带 `-webkit` 前缀，但是不标准或者不在标准轨道上。

标准轨道上的带有 WebKit 前缀的属性
---------------------

* `-webkit-appearance`
* `-webkit-font-size-delta`
已经成为标准属性的前专有属性
--------------

**备注：** 要尽可能地提高兼容性，你需要使用无前缀的标准属性，而不是下面列出的这些有前缀的。

### A

* `-webkit-align-content`
* `-webkit-align-items`
* `-webkit-align-self`
* `-webkit-animation`
* `-webkit-animation-delay`
* `-webkit-animation-direction`
* `-webkit-animation-duration`
* `-webkit-animation-fill-mode`
* `-webkit-animation-iteration-count`
* `-webkit-animation-name`
* `-webkit-animation-play-state`
* `-webkit-animation-timing-function`
* `-webkit-appearance`
### B

* `-webkit-backface-visibility`
* `-webkit-background-clip`
* `-webkit-background-origin`
* `-webkit-background-size`
* `-webkit-border-bottom-left-radius`
* `-webkit-border-bottom-right-radius` (en-US)
* `-webkit-border-image`
* `-webkit-border-radius`
* `-webkit-border-top-left-radius`
* `-webkit-border-top-right-radius`
* `-webkit-box-decoration-break`
* `-webkit-box-shadow`
* `-webkit-box-sizing`
### C

* `-webkit-clip-path`
* `-webkit-column-count`
* `-webkit-column-fill` (en-US)
* `-webkit-column-gap`
* `-webkit-column-rule`
* `-webkit-column-rule-color`
* `-webkit-column-rule-style`
* `-webkit-column-rule-width`
* `-webkit-column-span`
* `-webkit-column-width` (en-US)
* `-webkit-columns`
### F

* `-webkit-filter`
* `-webkit-flex`
* `-webkit-flex-basis`
* `-webkit-flex-direction`
* `-webkit-flex-flow`
* `-webkit-flex-grow`
* `-webkit-flex-shrink`
* `-webkit-flex-wrap`
* `-webkit-font-feature-settings`
* `-webkit-font-kerning`
* `-webkit-font-variant-ligatures`
### G-J

* `-webkit-grid`
* `-webkit-grid-area`
* `-webkit-grid-auto-columns`
* `-webkit-grid-auto-flow`
* `-webkit-grid-auto-rows`
* `-webkit-grid-column`
* `-webkit-grid-column-end` (en-US)
* `-webkit-grid-column-gap`
* `-webkit-grid-column-start` (en-US)
* `-webkit-grid-gap`
* `-webkit-grid-row`
* `-webkit-grid-row-end` (en-US)
* `-webkit-grid-row-gap`
* `-webkit-grid-row-start` (en-US)
* `-webkit-grid-template`
* `-webkit-grid-template-areas`
* `-webkit-grid-template-columns`
* `-webkit-grid-template-rows`
### H-L

* `-webkit-hyphens`
* `-webkit-justify-content`
* `-webkit-justify-items`
* `-webkit-justify-self`
* `-webkit-line-break`
### M

* `-webkit-mask`
* `-webkit-mask-clip` (en-US)
* `-webkit-mask-composite` (en-US)
* `-webkit-mask-image`
* `-webkit-mask-origin` (en-US)
* `-webkit-mask-position` (en-US)
* `-webkit-mask-repeat`
* `-webkit-mask-size` (en-US)
### O-R

* `-webkit-opacity`
* `-webkit-order`
* `-webkit-perspective`
* `-webkit-perspective-origin`
* `-webkit-print-color-adjust` (en-US)
* `-webkit-ruby-position` (en-US)
### S

* `-webkit-scroll-snap-type`
* `-webkit-shape-image-threshold`
* `-webkit-shape-margin`
* `-webkit-shape-outside`
### T

* `-webkit-text-combine` (en-US)
* `-epub-text-decoration`
* `-webkit-text-color-decoration`
* `-webkit-text-decoration-line`
* `-webkit-text-decoration-style`
* `-epub-text-emphasis` (en-US)
* `-webkit-text-emphasis` (en-US)
* `-epub-text-emphasis-color` (en-US)
* `-webkit-text-emphasis-color` (en-US)
* `-webkit-text-emphasis-position` (en-US)
* `-epub-text-emphasis-style` (en-US)
* `-webkit-text-emphasis-style` (en-US)
* `-webkit-text-justify`
* `-webkit-text-orientation`
* `-webkit-text-size-adjust`
* `-webkit-text-underline-position`
* `-webkit-transform`
* `-webkit-transform-origin`
* `-webkit-transform-style`
* `-webkit-transition`
* `-webkit-transition-delay`
* `-webkit-transition-duration`
* `-webkit-transition-property`
* `-webkit-transition-timing-function`
### U-W

* `-webkit-user-select`
* `-epub-word-break`
* `-epub-writing-mode`
在非 webkit 浏览器中不带前缀支持，但是非标准
--------------------------

以下的属性在至少一个浏览器中不带前缀就支持，但是不在标准的轨道上。

* `-webkit-mask-position-x`\*
* `-webkit-mask-position-y`\*

\* 在 Firefox 中不带前缀支持，在 Safari 中带前缀。

在 Firefox 中带 `-webkit-` 前缀支持
----------------------------

以下属性在 Firefox 中带 `-webkit-` 前缀支持，其中许多也支持无前缀版本。参见上面的已经成为标准属性的前专有属性。

**备注：** 由于许多网站的旧版代码使用了以 -webkit- 为前缀的属性，Edge 和 Firefox 会将许多 -webkit- 为前缀的属性重定向到 -moz-、-ms- 和相应的没有前缀的等价属性上。

### A

* `-webkit-align-content`
* `-webkit-align-items`
* `-webkit-align-self`
* `-webkit-animation`
* `-webkit-animation-delay`
* `-webkit-animation-direction`
* `-webkit-animation-duration`
* `-webkit-animation-fill-mode`
* `-webkit-animation-iteration-count`
* `-webkit-animation-name`
* `-webkit-animation-play-state`
* `-webkit-animation-timing-function`
* `-webkit-appearance`\*
### B

* `-webkit-backface-visibility`
* `-webkit-background-clip`
* `-webkit-background-origin`
* `-webkit-background-size`
* `-webkit-border-bottom-left-radius`
* `-webkit-border-bottom-right-radius` (en-US)
* `-webkit-border-image`
* `-webkit-border-radius`
* `-webkit-box-align` (en-US)\*\*, \*\*\*
* `-webkit-box-direction` (en-US)\*\*, \*\*\*
* `-webkit-box-flex` (en-US)\*\*, \*\*\*
* `-webkit-box-orient`\*\*, \*\*\*
* `-webkit-box-pack` (en-US)\*\*, \*\*\*
* `-webkit-box-shadow`
* `-webkit-box-sizing`
* `-webkit-border-top-left-radius`
* `-webkit-border-top-right-radius`
### F

* `-webkit-filter`
* `-webkit-flex`
* `-webkit-flex-basis`
* `-webkit-flex-direction`
* `-webkit-flex-flow`
* `-webkit-flex-grow`
* `-webkit-flex-shrink`
* `-webkit-flex-wrap`
### J

* `-webkit-justify-content`
### M

* `-webkit-mask`
* `-webkit-mask-clip` (en-US)
* `-webkit-mask-composite` (en-US)\*
* `-webkit-mask-image`
* `-webkit-mask-origin` (en-US)
* `-webkit-mask-position` (en-US)
* `-webkit-mask-position-x` (en-US)\*\*
* `-webkit-mask-position-y` (en-US)\*\*
* `-webkit-mask-repeat`
* `-webkit-mask-size` (en-US)
### O-P

* `-webkit-order`
* `-webkit-perspective`
* `-webkit-perspective-origin`
### T

* `-webkit-text-fill-color`\*\*
* `-webkit-text-size-adjust`
* `-webkit-text-stroke`\*\*
* `-webkit-text-stroke-color`\*\*
* `-webkit-text-stroke-width`\*\*
* `-webkit-transform`
* `-webkit-transform-origin`
* `-webkit-transition`
* `-webkit-transition-delay`
* `-webkit-transition-duration`
* `-webkit-transition-property`
* `-webkit-transition-timing-function`
### U

* `-webkit-user-select`

 \* 在 Firefox 中支持有 `-moz-` 和 `-webkit-` 前缀的版本，但是不支持无前缀版本。
 \*\* 这些值是支持的，尽管不是标准的且也不在成为标准的轨道上。
 \*\*\* 应该使用 flex-box 属性。

弃用的 `-webkit-` 属性
-----------------

以下属性曾经带 -webkit- 前缀支持，但是在常新浏览器（evergreen browser）中不再支持，无论有无 `-webkit-` 前缀。

* `-webkit-alt*`
* `-webkit-background-composite`
* `-webkit-border-fit`
* `-webkit-color-correction`
* `-webkit-flow-from`
* `-webkit-flow-into`
* `-webkit-grid-columns`（参见 `grid-column`）
* `-webkit-grid-rows`（参见 `grid-row`）
* `-webkit-highlight`
* `-webkit-hyphenate-charset`
* `-webkit-image-set`（参见 `image-set` (en-US)）
* `-webkit-mask-attachment`
* `-webkit-match-nearest-mail-blockquote-color`
* `-webkit-margin-collapse`
* `-webkit-margin-after-collapse`
* `-webkit-margin-before-collapse`
* `-webkit-margin-bottom-collapse`
* `-webkit-margin-top-collapse`
* `-webkit-overflow-scrolling`
* `-webkit-region-break-after`
* `-webkit-region-break-before`
* `-webkit-region-break-inside`
* `-webkit-region-fragment`
* `-webkit-shape-inside`
* -webkit-touch-callout（参见 `touch-action`）
* `background-origin-x`（无前缀！）
* `background-origin-y`（无前缀！）

\* 仍在 Safari 技术预览版中支持，但是通常在正式发布的浏览器中不支持。

伪类
--

* `:-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`

\* 现为标准。

**备注：** 如果在选择器的链或组中有一个无效的伪类，那么整个选择器列表都是无效的。

伪元素
---

由于网页兼容性的原因，Blink、WebKit 和 Gecko 浏览器将所有以 `::-webkit-` 开头的伪类都视为有效的。

* `::-webkit-file-upload-button`\*
* `::-webkit-inner-spin-button` (en-US)
* `::-webkit-input-placeholder`
* `::-webkit-media-controls`
* `::-webkit-media-controls-current-time-display`
* `::-webkit-media-controls-enclosure`
* `::-webkit-media-controls-fullscreen-button`
* `::-webkit-media-controls-mute-button`
* `::-webkit-media-controls-overlay-enclosure`
* `::-webkit-media-controls-panel`
* `::-webkit-media-controls-play-button`
* `::-webkit-media-controls-timeline`
* `::-webkit-media-controls-time-remaining-display`
* `::-webkit-media-controls-toggle-closed-captions-button`
* `::-webkit-media-controls-volume-control-container`
* `::-webkit-media-controls-volume-control-hover-background`
* `::-webkit-media-controls-volume-slider`
* `::-webkit-meter-bar` (en-US)
* `::-webkit-meter-even-less-good-value` (en-US)
* `::-webkit-meter-inner-element` (en-US)
* `::-webkit-meter-optimum-value` (en-US)
* `::-webkit-meter-suboptimum-value` (en-US)
* `-webkit-media-text-track-container`
* `::-webkit-outer-spin-button` (en-US)
* `::-webkit-progress-bar`
* `::-webkit-progress-inner-element`
* `::-webkit-progress-value`
* `::-webkit-search-cancel-button` (en-US)
* `::-webkit-search-results-button` (en-US)
* `::-webkit-slider-runnable-track`
* `::-webkit-slider-thumb`

\* 现为标准

**备注：** 通常来说，如果在选择器的链或组中有一个无效的伪元素或者伪类，那么整个选择器列表都是无效的。如果伪元素（不是伪类）有 -webkit- 前缀，那么自 Firefox 版本 63 起，Blink、WebKit 和 Gecko 浏览器都假定其为有效的，不会使整个选择器列表无效。

媒体特性
----

* `-webkit-animation` (en-US)
* `-webkit-device-pixel-ratio`
* `-webkit-transform-2d` (en-US)
* `-webkit-transform-3d` (en-US)
* `-webkit-transition` (en-US)
参见
--

* 在 WebKit Trac 上设计表单控件的样式
* Mozilla CSS 扩展 (en-US)