Modern CSS Properties

The CSS properties supported by all three major web browser engines: Blink (Chrome/Edge), Gecko (Firefox), and WebKit (Safari).

const cssProperties = require('modern-css-properties');
console.log(cssProperties); // ["-webkit-appearance","-webkit-backface-visibility", ... "z-index"]

The list is built by using Playwright. Each browser is launched, and the css properties it supports are extracted. The intersection of these sets is written as the final list.

Why doesn't this list match the spec?

This list of properties is generated from the browser engines themselves. It may contain non-standard properties that happen to be implemented in all browsers. It may be missing standard properties that some browsers don't currently support.

Why are there properties that start with -webkit-?

Firefox supports some -webkit-* properties in order to improve thier compatibility with the web. You can technically use these properties in any browser, although you probably shouldn't.

I don't care about your package, I just want the list!

• -webkit-appearance
• -webkit-backface-visibility
• -webkit-background-clip
• -webkit-background-origin
• -webkit-background-size
• -webkit-border-image
• -webkit-border-radius
• -webkit-box-align
• -webkit-box-direction
• -webkit-box-flex
• -webkit-box-ordinal-group
• -webkit-box-orient
• -webkit-box-pack
• -webkit-box-shadow
• -webkit-line-clamp
• -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
• -webkit-text-fill-color
• -webkit-text-stroke
• -webkit-text-stroke-color
• -webkit-text-stroke-width
• -webkit-transform-style
• -webkit-user-select
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-shadow
• box-sizing
• break-after
• break-before
• break-inside
• caption-side
• caret-color
• clear
• clip
• clip-path
• clip-rule
• color
• color-interpolation
• color-interpolation-filters
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• cx
• cy
• direction
• display
• dominant-baseline
• empty-cells
• fill
• fill-opacity
• fill-rule
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• flood-color
• flood-opacity
• font
• font-family
• font-feature-settings
• font-optical-sizing
• font-size
• font-stretch
• font-style
• font-variant
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variation-settings
• font-weight
• gap
• grid
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-start
• grid-row
• grid-row-end
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• height
• image-orientation
• image-rendering
• inline-size
• isolation
• justify-content
• justify-items
• justify-self
• left
• letter-spacing
• lighting-color
• line-break
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-block-end
• margin-block-start
• margin-bottom
• margin-inline-end
• margin-inline-start
• margin-left
• margin-right
• margin-top
• marker
• marker-end
• marker-mid
• marker-start
• mask
• mask-type
• max-block-size
• max-height
• max-inline-size
• max-width
• min-block-size
• min-height
• min-inline-size
• min-width
• mix-blend-mode
• object-fit
• object-position
• opacity
• order
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-wrap
• overflow-x
• overflow-y
• padding
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• paint-order
• perspective
• perspective-origin
• place-content
• place-items
• place-self
• pointer-events
• position
• quotes
• r
• resize
• right
• row-gap
• rx
• ry
• scroll-behavior
• shape-image-threshold
• shape-margin
• shape-outside
• shape-rendering
• stop-color
• stop-opacity
• stroke
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• table-layout
• text-align
• text-anchor
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-indent
• text-overflow
• text-rendering
• text-shadow
• text-transform
• top
• touch-action
• transform
• transform-box
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• vector-effect
• vertical-align
• visibility
• white-space
• width
• will-change
• word-break
• word-spacing
• word-wrap
• writing-mode
• x
• y
• z-index