CSS Webkit Properties Reference

Ultimate Reference for CSS WebKit Properties

This CSS tutorial provides a complete and up-to-date reference of WebKit properties and extensions used to style webpages with CSS and CSS3. It covers all categories including standard-track WebKit properties, WebKit-only extensions, and deprecated features — making it a one-stop resource for modern CSS development.

What Are WebKit CSS Properties or Extensions?

• WebKit properties are browser-specific CSS features prefixed with -webkit-.
• They are used to enable advanced styling and experimental features in WebKit-based browsers.
• WebKit is an open-source rendering engine powering browsers like Safari and older versions of Chrome.
• These extensions often enhance visual effects, animations, and interactivity on supported browsers.
• They are used alongside standard CSS declarations for greater design flexibility.
• Ideal for improving the appearance and behavior of HTML elements in WebKit environments.

Key Facts About CSS WebKit Extensions

Here are the essential points to remember when working with WebKit-specific CSS properties and extensions:

• These CSS properties use the -webkit- prefix in their names.
• They are considered proprietary CSS extensions, similar to proprietary HTML tags.
• Many -webkit- properties also support the -apple- prefix for Apple-specific environments.
• Some WebKit properties are also available with the -epub- prefix, used in digital publications.
• They are not part of the standard CSS property list.
• These extensions are often experimental and may not work reliably with standardized CSS properties.
• WebKit properties are typically used to enable vendor-specific features in supported browsers.
• They are commonly applied for CSS animations, transitions, visual effects, and advanced styling.
• These extensions allow developers to enhance user experience with cutting-edge styling techniques.
• Browser support may change over time, so always check for updates, as some WebKit properties may become obsolete.

WebKit-Based Browsers

As browser technologies evolve, some browsers have changed their rendering engines over time. Below is a list of browsers that currently support or were originally based on the WebKit engine and still recognize WebKit CSS properties:

1. Safari - Apple's default browser, built entirely on the WebKit rendering engine.
2. Google Chrome - Originally based on WebKit, now uses the Blink engine (a WebKit fork), and still supports many WebKit properties.
3. Microsoft Edge (Legacy) - The older version had partial WebKit influence, initially built on the EdgeHTML engine.
4. Maxthon - A multi-engine browser from China, with early versions based on WebKit.
5. UC Browser - Popular on mobile devices, this browser is powered by a WebKit-based engine.
6. Epic Browser - A privacy-focused browser that incorporates WebKit engine support.

WebKit-Only CSS Properties Without Standard Equivalents

Some WebKit-specific CSS properties have no official standard equivalent and are only supported in certain browsers:

• Vendor-prefixed and non-standard features exclusive to WebKit.
• Often experimental enhancements not yet included in the official CSS specification.
• Can lead to inconsistent rendering and unexpected behavior across different browsers.
• May eventually be standardized, replaced, or removed as CSS standards evolve.
• Once standardized, these features drop the -webkit- prefix and join the official CSS property list.
• Note: Avoid using non-standard WebKit properties in production to ensure cross-browser compatibility.

WebKit-Only CSS Properties and Extensions

Below is a complete list of non-standard WebKit CSS properties you might encounter in CSS styling. This updated reference is a helpful resource for developers, covering all WebKit-specific extensions that are not part of the official CSS standard. Use the search field to quickly locate any non-standard property in 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

Former Webkit CSS Properties That are Now Standard

Over time, several WebKit-specific features have been integrated into the official CSS specification, making them non-proprietary and fully supported across all major browsers.

• Standard CSS properties are defined and maintained by the World Wide Web Consortium (W3C) and other standards organizations.
• Using these standardized properties ensures consistent design and functionality in all modern browsers.
• Once adopted, you can write these styles without the -webkit- prefix in your CSS.
• They follow a clear, well-defined syntax for better readability and maintenance.
• Fully supported by every current browser, they help deliver a uniform user experience.
• Note: It’s safe to use these standard properties in production without additional vendor prefixes or fallbacks.

Standard WebKit CSS Properties

Standard WebKit properties are CSS features originally introduced with the -webkit- prefix but later adopted into official specifications and now supported without prefixes.

Below is the complete list of standardized WebKit CSS properties that are safe to use in CSS stylesheets. This up-to-date reference includes all officially adopted WebKit extensions, making it a valuable resource for developers.

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

Deprecated WebKit CSS Properties

Some WebKit-specific CSS properties are now deprecated and should be avoided in modern web design. Below is a complete alphabetical list of all deprecated WebKit extensions that are no longer supported in 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!)