WebKit の CSS 拡張
Safari や Chrome のような WebKit または blink ベースのアプリケーションは、数多くの特殊な CSS の WebKit 拡張に対応しています。これらの拡張には一般に -webkit- の接頭辞が付きます。 -webkit- の接頭辞が付いたプロパティの多くは -apple- の接頭辞でも動作します。少数ながら -epub- の接頭辞も存在します。
WebKit 独自のプロパティ
メモ: ウェブサイトで使用しないでください。これらのプロパティは WebKit アプリケーションでしか動作しません。
A
B
-webkit-backdrop-filter-webkit-background-composite-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-fit-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-collapse-webkit-margin-after-webkit-margin-before-collapse-webkit-margin-before-webkit-margin-bottom-collapse-webkit-margin-collapse-webkit-margin-end-webkit-margin-start-webkit-margin-top-collapse-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-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-combine-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 の接頭辞のついたプロパティ
以前は独自プロパティであったものが標準化されたもの
メモ: CSS の互換性を最大化するために、以下に挙げた接頭辞付きのプロパティの代わりに接頭辞のない標準のプロパティを使用してください。
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
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
-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 以外のブラウザーで接頭辞なしのものが対応されているが、標準ではないもの
以下のプロパティは 1 つ以上のブラウザーが接頭辞なしで対応していますが、標準化路線には乗っていません。
* Firefox が接頭辞なしで対応、 Safari が接頭辞付きで対応。
-webkit- 接頭辞付きで Firefox が対応しているもの
以下のプロパティは 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
U
-webkit-user-select-
Firefox では
-moz-と-webkit-の接頭辞に対応していますが、 接頭辞のないものには対応していません。 Microsoft Edge と IE Mobile は、同様に相互運用性のためにこのプロパティを-ms-ではなく-webkit-の接頭辞付きで対応しています。 これらの値は、標準ではなく標準化路線にもなっていませんが、対応しています。 代わりにフレックスボックスプロパティを使用してください。
非推奨の -webkit- プロパティ
以下のプロパティはいったん -webkit- 接頭辞付きで対応していましたが、すでに -webkit- 接頭辞のありなしに関わらず、主要なブラウザーで対応されなくなりました。
-webkit-alt*-webkit-color-correction-webkit-flow-from-webkit-flow-into-webkit-grid-columns(grid-columnを参照)-webkit-grid-rows(grid-rowを参照)-webkit-hyphenate-charset-webkit-image-set(`image-setを参照)-webkit-mask-attachment-webkit-match-nearest-mail-blockquote-color-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 Technology Preview ではまだ対応していますが、リリース版のブラウザーでは一般に対応していません。
擬似クラス
:-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(en-US)*::-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(en-US)::-webkit-progress-inner-element(en-US)::-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 のブラウザーはセレクターのリストを妥当とみなし、無効にしないようにします。