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-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-after:margin-block-endを使用してください。-webkit-margin-before:margin-block-startを使用してください。-webkit-margin-end:margin-inline-endを使用してください。-webkit-margin-start:margin-inline-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- 接頭辞付きプロパティ値
-webkit-fill-available-
widthやheightといったサイズ指定プロパティと組み合わせて使用し、要素が親コンテナ内の利用できる空間をすべて占めることができるようにします。stretch値は標準の代替手段として提供されますが、下位互換性を確保するため、ブラウザーでは-webkit-fill-availableを別名として対応しています。
擬似クラス
メモ: セレクターのチェーンやグループ内に無効な擬似クラスがある場合、セレクターリスト全体が無効となります。
:-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を使用してください。
擬似要素
ウェブの互換性を確保するため、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
関連情報
- Mozilla (-moz-) ベンダー接頭辞付きの CSS 拡張
- ベンダー接頭辞 - 用語集の項目