Webkit CSS 扩展
基于 WebKit 或 Blink 的应用,例如 Safari 和 Chrome,支持一些特殊的 CSS WebKit 扩展。这些扩展通常带有 -webkit- 前缀。大多数 -webkit- 前缀的属性通常也能够与 -apple- 前缀使用。少部分是有 -epub- 前缀的。
仅 WebKit 具有的属性
备注: 避免在网站上使用。这些属性仅在 WebKit 应用中可用。
A
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
D-I
L
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-webkit-mask-repeat-x***-webkit-mask-repeat-y***-webkit-mask-source-type-webkit-mask-position-x-webkit-mask-position-y-webkit-max-logical-height-webkit-max-logical-width-webkit-min-logical-height-webkit-min-logical-width
N
P
R-S
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-transform-origin-x-webkit-transform-origin-y-webkit-transform-origin-z
U
* 一些是在标准的、无前缀的轨道上。
** 新语法已经标准化。属性链接到新的语法。旧的带有前缀的语法在一些浏览器中依然支持。
*** WebKit 支持不带 -webkit 前缀,但是不标准或者不在标准轨道上。
标准轨道上的带有 WebKit 前缀的属性
已经成为标准属性的前专有属性
备注: 要尽可能地提高兼容性,你需要使用无前缀的标准属性,而不是下面列出的这些有前缀的。
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-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
F
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-webkit-grid-column-gap-webkit-grid-column-start-webkit-grid-gap-webkit-grid-row-webkit-grid-row-end-webkit-grid-row-gap-webkit-grid-row-start-webkit-grid-template-webkit-grid-template-areas-webkit-grid-template-columns-webkit-grid-template-rows
H-L
M
O-R
S
T
-webkit-text-combine-epub-text-decoration-webkit-text-color-decoration-webkit-text-decoration-line-webkit-text-decoration-style-epub-text-emphasis-webkit-text-emphasis-epub-text-emphasis-color-webkit-text-emphasis-color-webkit-text-emphasis-position-epub-text-emphasis-style-webkit-text-emphasis-style-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 浏览器中不带前缀支持,但是非标准
以下的属性在至少一个浏览器中不带前缀就支持,但是不在标准的轨道上。
* 在 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-webkit-border-image-webkit-border-radius-webkit-box-align**, ***-webkit-box-direction**, ***-webkit-box-flex**, ***-webkit-box-orient**, ***-webkit-box-pack**, ***-webkit-box-shadow-webkit-box-sizing-webkit-border-top-left-radius-webkit-border-top-right-radius
F
J
M
O-P
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
* 在 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)-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-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::-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::-webkit-meter-even-less-good-value::-webkit-meter-inner-element::-webkit-meter-optimum-value::-webkit-meter-suboptimum-value-webkit-media-text-track-container::-webkit-outer-spin-button::-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
* 现为标准
备注: 通常来说,如果在选择器的链或组中有一个无效的伪元素或者伪类,那么整个选择器列表都是无效的。如果伪元素(不是伪类)有 -webkit- 前缀,那么自 Firefox 版本 63 起,Blink、WebKit 和 Gecko 浏览器都假定其为有效的,不会使整个选择器列表无效。