CSS Webkit Properties Reference - Updated 2024

1. Ultimate Reference For CSS Webkit Properties

This CSS tutorial enlists an updated and complete reference of WebKit properties or extensions that we use to style webpages in CSS or CSS3 language. This comprehensive CSS tutorial focuses on the WebKit extensions, WebKit-only properties and those on the standard track, and lastly the deprecated ones.

1.1. What are Webkit CSS Properties or Extensions?

While defining CSS styles for Webkit-based browsers, we have to deal with certain specific properties prefixed with -WebKit- that unlock additional features or experimental functionalities. Webkit is an open-source engine that empowers browsers to enhance their functionalities. These extensions are often used to enhance the visual appeal and interactivity of websites on Webkit-based browsers in conjunction with the standard declarations, providing developers to design HTML elements with flexibility.

Below are the key points that we need to remember about the CSS Webkit extensions.

• These CSS properties add the -webkit- prefix to the property name.
• We also call these proprietary CSS extensions just like there are proprietary tags in HTML language.
• Most of these -webkit- prefixed properties also work with the -apple- prefix as well.
• Some of these extensions are prefixed with -epub- also.
• These are different from the standard list of CSS properties.
• Often these extensions are experimental and we may not use them with standardized ones.
• Moreover, the webkit properties are often utilized to implement vendor-specific features to webpages.
• Common uses of webkit extensions include the implementation of CSS animations, transitions, or other similar features.
• Further, these webkit extensions empower developers to create extraordinary user experiences.
• Always keep track of browsers' updates as some of these extensions become obsolete with time.

1.2. Webkit-Based Browsers

As the landscape of browsers varies with time, some of them may switch their rendering engines. Here is a list of some Webkit-based browser that currently supports Webkit CSS properties.

1. Safari Browser : Webkit-based browser for Apple devices.
2. Google Chrome : It is a browser that works on Blink rendering engine, although originally started with Webkit engine.
3. Microsoft Edge : The legacy version has an influence of the Webkit engine, though it initially started with the EdgeHTML engine.
4. Maxthon Browser : It was developed in China based on Webkit.
5. UCBrowser : This browser also uses a Webkit rendering engine.
6. Epic Browser : This browser also incorporates the Webkit engine features.

2. Webkit Only CSS Properties Without Standard Equivalent

Certain Webkit properties in CSS language do not have any standard equivalent and are only available for certain browsers.

• These are non-standard or vendor-prefixed properties.
• These imply experimental or browser-specific features introduced by the browser vendors.
• Mostly used to implement cutting-edge features that are not yet part of the standard CSS reference.
• Further, the use of these extensions can be risky and cause inconsistent behavior across browsers.
• As standards evolve, some non-standard webkit extensions may eventually be standardized or replaced by a standard alternative.
• After the standards evolve for any webkit property, it appears unprefixed and becomes a part of the standard list.
• NOTE: Avoid Using non-standard CSS webkit properties or extensions for production purposes.

2.1. Webkit Only CSS Properties or Extensions

Below is a list of all the non-standard webkit properties that we may witness in CSS styling. This list is an ultimate and updated CSS reference for the developers as it contains all webkit-only extensions. Use the search field to find any non-standard CSS property from the list.

1. • -webkit-animation-trigger
   • -webkit-app-region
   • -webkit-appearance
   • -webkit-aspect-ratio
2. • -webkit-backdrop-filter
   • -webkit-background-composite
   • -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
3. • -webkit-column-axis
   • -webkit-column-progression
   • -webkit-cursor-visibility
4. • -webkit-dashboard-region
   • -webkit-font-size-delta
   • -webkit-font-smoothing
   • -webkit-highlight
   • -webkit-hyphenate-limit-after
   • -webkit-hyphenate-limit-before
   • -webkit-hyphenate-limit-lines
5. • -webkit-line-align
   • -webkit-line-box-contain
   • -webkit-line-clamp
   • -webkit-line-grid
   • -webkit-line-snap
   • -webkit-locale
   • -webkit-logical-height
   • -webkit-logical-width
6. • -webkit-margin-after-collapse
   • -webkit-margin-after
   • -webkit-margin-before-collapse
   • -webkit-margin-before
   • -webkit-margin-bottom-collapse
   • -webkit-margin-collapse
   • -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-coposite
   • -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
7. • -webkit-nbsp-mode
   • -webkit-perspective-origin-x
   • -webkit-perspective-origin-y
   • -webkit-print-color-adjust
   • -webkit-rtl-ordering
   • -webkit-svg-shadow
8. • -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
   • -webkit-user-drag
   • -webkit-user-modify

3. Former Webkit CSS Properties That are Now Standard

After careful testing and evolution, some of the webkit properties attain a standardized CSS equivalent, and therefore after becoming a standard, such properties remain not proprietary.

• Standard CSS properties are defined and maintained by the Worldwide Web Consortium and other standard bodies.
• We can use standard CSS properties across all browsers and for consistent development.
• After a standard is evolved, we can use an unprefixed version of the webkit properties i.e. without -webkit-.
• Consistent user experience is of prior importance as these CSS properties follow a defined syntax and behavior.
• All modern browsers support the standard CSS specifications consistently.
• NOTE: You can employ these standard webkit equivalents for production purposes without any caution.

3.1. Standardized Webkit CSS Properties

Following is the list of all the standard webkit properties that we can use in CSS stylesheets. This list is an ultimate and updated CSS reference for the developers as it contains all standard Webkit extensions and is now an adopted standard. Use the search field to find out any property from the list.

1. • -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
2. • -webkit-backface-visibility
   • -webkit-background-clip
   • -webkit-background-origin
   • -webkit-background-size
   • -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-bottom-left-radius
   • -webkit-border-bottom-right-radius
   • -webkit-border-end
   • -webkit-border-end-color
   • -webkit-border-end-style
   • -webkit-border-end-width
   • -webkit-border-image
   • -webkit-border-start
   • -webkit-border-start-color
   • -webkit-border-start-style
   • -webkit-border-start-width
   • -webkit-border-radius
   • -webkit-border-top-left-radius
   • -webkit-border-top-right-radius
   • -webkit-box-align
   • -webkit-box-decoration-break
   • -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-shadow
   • -webkit-box-sizing
3. • -webkit-clip-path
   • -webkit-column-break-after
   • -webkit-column-break-before
   • -webkit-column-break-inside
   • -webkit-column-count
   • -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
4. • -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
   • -webkit-full-screen
5. • -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
6. • -webkit-hyphenate-character
   • -webkit-hyphens
   • -webkit-initial-letter
   • -webkit-justify-content
   • -webkit-justify-items
   • -webkit-justify-self
   • -webkit-line-break
7. • -webkit-margin-end
   • -webkit-margin-start
   • -webkit-padding-after
   • -webkit-padding-before
   • -webkit-padding-end
   • -webkit-padding-start
   • -webkit-mask
   • -webkit-mask-clip
   • -webkit-mask-composite
   • -webkit-mask-image
   • -webkit-mask-origin
   • -webkit-mask-position
   • -webkit-mask-repeat
   • -webkit-mask-size
8. • -webkit-opacity
   • -webkit-order
   • -webkit-perspective
   • -webkit-perspective-origin
   • -webkit-ruby-position
9. • -webkit-scroll-snap-type
   • -webkit-shape-image-threshold
   • -webkit-shape-margin
   • -webkit-shape-outside
10. • -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
11. • -webkit-user-select
    • -epub-word-break
    • -epub-writing-mode

4. Deprecated CSS Webkit Properties

Certain WebKit properties are deprecated and are now avoided to style webpages. This list contains all the deprecated webkit extensions in alphabetical order and is not supported by any browser with or without the -webkit- prefix.

• -webkit-alt
• -webkit-color-correction
• -webkit-flow-from
• -webkit-flow-into
• -webkit-grid-columns
• -webkit-grid-rows
• -webkit-hyphenate-charset
• -webkit-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
• background-origin-x (unprefixed!)
• background-origin-y (unprefixed!)

5. Reference Links

This comprehensive CSS resource or reference of WebKit properties or extensions is compiled by taking the following websites or docs into consideration.

• We got help from the resources on MDN, which has a wonderful and updated resources directory.
• The CSS properties reference on Realityripple was also helpful in writing up this updated webkit extensions list.