WebKit (-webkit-) 瀏覽器引擎字首 CSS 擴充套件
一個瀏覽器引擎字首(又稱廠商字首)用於表明某個特性是特定於某個瀏覽器的。基於 WebKit 或 Blink 的使用者代理(如 Safari 和 Chrome)支援對 CSS 的一些擴充套件,這些擴充套件都以 -webkit- 為字首。
沒有標準等價寫法的 -webkit- 字首屬性
備註:除非支援說明中另有說明,否則這些屬性在基於 WebKit 或 Blink 的瀏覽器中均有效。你應該避免在生產網站上使用它們。
A-C
-webkit-app-region已棄用 :Safari 不再支援。-webkit-border-horizontal-spacing-webkit-border-vertical-spacing-webkit-box-reflect:出於相容性原因,所有瀏覽器都以-webkit-字首支援此屬性。-webkit-column-axis:Chrome 不支援。-webkit-column-progression:Chrome 不支援。-webkit-cursor-visibility:Chrome 不支援。
D-L
-webkit-font-smoothing:參見font-smooth。-webkit-hyphenate-limit-after:Chrome 不支援。-webkit-hyphenate-limit-before:Chrome 不支援。-webkit-hyphenate-limit-lines:Chrome 不支援。-webkit-line-align:Chrome 不支援。-webkit-line-box-contain:Chrome 不支援。-webkit-line-grid:Chrome 不支援。-webkit-line-snap:Chrome 不支援。-webkit-locale-webkit-logical-height-webkit-logical-width
M
-webkit-margin-after-webkit-margin-before-webkit-mask-box-image:參見mask-border和border-image。-webkit-mask-box-image-outset:參見mask-border和border-image。-webkit-mask-box-image-repeat:參見mask-border和border-image。-webkit-mask-box-image-slice:參見mask-border和border-image。-webkit-mask-box-image-source:參見mask-border和border-image。-webkit-mask-box-image-width:參見mask-border和border-image。-webkit-mask-composite:參見mask-border和border-image。-webkit-mask-position-x:出於相容性原因,所有瀏覽器都以-webkit-字首支援此屬性。-webkit-mask-position-y:出於相容性原因,所有瀏覽器都以-webkit-字首支援此屬性。-webkit-mask-repeat-x已棄用 :不再支援;參見mask-repeat。-webkit-mask-repeat-y已棄用 :不再支援;參見mask-repeat。-webkit-mask-source-type:Chrome 不支援。-webkit-max-logical-height-webkit-max-logical-width-webkit-min-logical-height-webkit-min-logical-width
N-Z
-webkit-nbsp-mode:Chrome 不支援。-webkit-perspective-origin-x-webkit-perspective-origin-y-webkit-rtl-ordering-webkit-tap-highlight-color:僅 iOS 上的 Safari 支援。-webkit-text-decoration-skip:Chrome 不支援。-webkit-text-decorations-in-effect-webkit-text-fill-color-webkit-text-security-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-text-zoom:Chrome 不支援。-webkit-touch-callout已棄用 :僅 iOS 上的 Safari 支援。-webkit-transform-origin-x-webkit-transform-origin-y-webkit-transform-origin-z-webkit-user-drag-webkit-user-modify
有標準等價寫法的 -webkit- 字首屬性
有幾個以 -webkit- 為字首的屬性有對應的標準寫法。即使名稱和語法可能不同,它們也不應再被使用。對於下面的每個屬性,都應使用其標準等價寫法。
A-B
-webkit-border-after:使用border-block-end。-webkit-border-after-color:使用border-block-end-color。-webkit-border-after-style:使用border-block-end-style。-webkit-border-after-width:使用border-block-end-width。-webkit-border-before:使用border-block-start。-webkit-border-before-color:使用border-block-start-color。-webkit-border-before-style:使用border-block-start-style。-webkit-border-before-width:使用border-block-start-width。-webkit-border-end:使用border-inline-end。-webkit-border-end-color:使用border-inline-end-color。-webkit-border-end-style:使用border-inline-end-style。-webkit-border-end-width:使用border-inline-end-width。-webkit-border-start:使用border-inline-start。-webkit-border-start-color:使用border-inline-start-color-webkit-border-start-style:使用border-inline-start-style。-webkit-border-start-width:使用border-inline-start-width。-webkit-box-align:使用 CSS 彈性盒和align-items。-webkit-box-direction:使用 CSS 彈性盒和flex-direction。-webkit-box-flex-group:使用 CSS 彈性盒和flex-basis、flex-grow以及flex-shrink。-webkit-box-flex:使用 CSS 彈性盒和flex-grow。-webkit-box-lines:使用 CSS 彈性盒和flex-flow。-webkit-box-ordinal-group:使用 CSS 彈性盒和order。-webkit-box-orient:使用 CSS 彈性盒和flex-direction。-webkit-box-pack:使用 CSS 彈性盒和justify-content。-webkit-box-reflect:使用 CSSelement()函式。
C-I
-webkit-column-break-after:使用 CSS 多列布局和break-after。-webkit-column-break-before:使用 CSS 多列布局和break-before。-webkit-column-break-inside:使用 CSS 多列布局和break-inside。-webkit-font-feature-settings:使用font-feature-settings(Safari 不支援帶字首的版本)。-webkit-hyphenate-character:使用hyphenate-character。-webkit-initial-letter:使用initial-letter。
J-Z
-webkit-line-clamp:使用line-clamp。-webkit-margin-end:使用margin-block-end。-webkit-margin-start:使用margin-block-start。-webkit-padding-after:使用padding-block-end。-webkit-padding-before:使用padding-block-start。-webkit-padding-end:使用padding-inline-end。-webkit-padding-start:使用padding-inline-start。
偽類
注意:如果一個選擇器鏈或選擇器組中包含無效的偽類,則整個選擇器列表都將無效。
:-webkit-any():使用:is:-webkit-any-link:使用:any-link:-webkit-autofill:使用:autofill:-webkit-autofill-strong-password:使用:autofill:-webkit-drag:-webkit-full-page-media:使用:fullscreen:-webkit-full-screen:使用:fullscreen:-webkit-full-screen-ancestor:使用:fullscreen:-webkit-full-screen-document:使用:fullscreen:-webkit-full-screen-controls-hidden:使用:fullscreen
偽元素
出於 Web 相容性的原因,Blink、WebKit 和 Gecko 瀏覽器會將所有以 ::-webkit- 開頭的偽元素視為有效。如果選擇器鏈或選擇器組中存在無效的偽元素或偽類,整個選擇器列表都將無效。如果一個偽元素(而非偽類)帶有 -webkit- 字首,Blink、WebKit 和 Gecko 瀏覽器會假定它是有效的,而不會使選擇器列表無效。
::-webkit-file-upload-button:使用::file-selector-button::-webkit-inner-spin-button::-webkit-input-placeholder:使用::placeholder::-webkit-meter-bar已棄用::-webkit-meter-even-less-good-value::-webkit-meter-inner-element::-webkit-meter-optimum-value::-webkit-meter-suboptimum-value::-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-animation已棄用-webkit-device-pixel-ratio:跨瀏覽器支援-webkit-transform-2d已棄用-webkit-transform-3d:跨瀏覽器支援-webkit-transition已棄用