WebKit CSS extensions - CSS: Cascading Style Sheets 编辑

Applications based on WebKit or Blink, such as Safari and Chrome, support a number of special WebKit extensions to CSS. These extensions are generally prefixed with -webkit-. Most -webkit- prefixed properties also work with an -apple- prefix. A few are prefixed with -epub-.

WebKit-only properties

Note: Avoid using on websites. These properties will only work in WebKit applications.

A

• -webkit-animation-trigger
• -webkit-app-region
• -webkit-appearance*
• -webkit-aspect-ratio

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

• -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-highlight
• -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-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

• -webkit-nbsp-mode

P

• -webkit-padding-after**
• -webkit-padding-before**
• -webkit-padding-end**
• -webkit-padding-start**
• -webkit-perspective-origin-x
• -webkit-perspective-origin-y
• -webkit-print-color-adjust

R-S

• -webkit-rtl-ordering
• -webkit-svg-shadow

T

• -webkit-tap-highlight-color
• -webkit-text-combine
• -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-user-drag
• -webkit-user-modify

* A few are on the standards, unprefixed track
** New syntax has been standardized. Property links to the new synax. Old prefixed syntax is still supported in some browsers.

WebKit-prefixed properties on the standards track

• -webkit-appearance
• -webkit-font-size-delta
• -webkit-mask-composite
• -webkit-mask-position-x
• -webkit-mask-position-y
• -webkit-mask-repeat-x
• -webkit-mask-repeat-y

Formerly proprietary properties that are now standard

Note: To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below.

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

• -webkit-clip-path
• -webkit-column-count
• -webkit-column-fill
• -webkit-column-gap
• -webkit-column-rule
• -webkit-column-rule-color
• -webkit-column-rule-style
• -webkit-column-rule-width
• -webkit-column-span
• -webkit-column-width
• -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
• -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

• -webkit-hyphens
• -webkit-justify-content
• -webkit-justify-items
• -webkit-justify-self
• -webkit-line-break

M

• -webkit-mask
• -webkit-mask-clip
• -webkit-mask-composite
• -webkit-mask-image
• -webkit-mask-origin
• -webkit-mask-position
• -webkit-mask-repeat
• -webkit-mask-size

O-R

• -webkit-opacity
• -webkit-order
• -webkit-perspective
• -webkit-perspective-origin
• -webkit-ruby-position

S

• -webkit-scroll-snap-type
• -webkit-shape-image-threshold
• -webkit-shape-margin
• -webkit-shape-outside

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-user-select
• -epub-word-break
• -epub-writing-mode

Supported in non-webkit browsers without a prefix, but not standard

The following properties are supported in at least one browser without a prefix, but are not on the standards track.

• -webkit-mask-position-x*
• -webkit-mask-position-y*

* Supported unprefixed in Firefox, with prefix in Safari.

Supported in Firefox with -webkit- prefix

The following properties are supported with the -webkit- prefix in Firefox. Many of these are supported with no prefix as well: see Formerly proprietary properties that are now standard above.

Note: Due to the legacy code in a multitude of web sites that used -webkit- prefixed properties, Edge and Firefox redirect many -webkit- prefixed properties to -moz-, -ms-, and unprefixed equivalents.

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

• -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
• -webkit-mask-composite*
• -webkit-mask-image
• -webkit-mask-origin
• -webkit-mask-position
• -webkit-mask-position-x**
• -webkit-mask-position-y**
• -webkit-mask-repeat
• -webkit-mask-size

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

*Supported with -moz- and -webkit- prefix in Firefox, but not supported without a prefix. Microsoft Edge and IE Mobile support this property with the -webkit- prefix, rather than -ms- for interopability reasons as well.
** These values are supported even though they are not standard and are not on track to becoming standard.
*** Use flex-box properties instead.

Deprecated -webkit- properties

The following properties were once supported with the -webkit- prefix but are no longer supported in evergreen browsers, with or without the -webkit- prefix.

• -webkit-alt*
• -webkit-color-correction
• -webkit-flow-from
• -webkit-flow-into
• -webkit-grid-columns (See grid-column)
• -webkit-grid-rows (See grid-row)
• -webkit-hyphenate-charset
• -webkit-image-set (See 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 (See touch-action)
• background-origin-x (unprefixed!)
• background-origin-y (unprefixed!)

* Still supported in the Safari Technology Preview, but not in a generally released browser.

Pseudo-classes

• :-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

* Now standard.

Note: If there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

Pseudo-elements

For web-compatibility reasons, Blink, WebKit, and Gecko browsers treat all pseudo-elements starting with ::-webkit- as valid.

• ::-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

* Now standard.

Note: Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, WebKit and Gecko browsers assume it is valid, not invalidating the selector list.

Media features

• -webkit-animation
• -webkit-device-pixel-ratio
• -webkit-transform-2d
• -webkit-transform-3d
• -webkit-transition

See also

• Styling Form Controls on the WebKit Trac
• Microsoft CSS Extensions
• Mozilla CSS Extensions