Require compatible vendor prefixes

nzakas edited this page Nov 28, 2011 · 3 revisions

Experimental CSS properties are typically implemented using vendor prefixes until the final behavior has been established and agreed upon. Most CSS3 properties have vendor-prefixed equivalents for multiple vendors, including Firefox (-moz), Safari/Chrome (-webkit), Opera (-o), and Internet Explorer (-ms). It's easy to forget to include the vendor prefixed version of a property when there are so many to keep track of.

The following properties have multiple vendor-prefixed versions:

  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • appearance
  • border-end
  • border-end-color
  • border-end-style
  • border-end-width
  • border-image
  • border-radius
  • border-start
  • border-start-color
  • border-start-style
  • border-start-width
  • box-align
  • box-direction
  • box-flex
  • box-lines
  • box-ordinal-group
  • box-orient
  • box-pack
  • box-sizing
  • box-shadow
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-width
  • hyphens
  • line-break
  • margin-end
  • margin-start
  • marquee-speed
  • marquee-style
  • padding-end
  • padding-start
  • tab-size
  • text-size-adjust
  • transform
  • transform-origin
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • user-modify
  • user-select
  • word-break
  • writing-mode

If you want the same CSS effects across all browsers, then it's important to remember the vendor-prefixed properties for all supporting browsers.

Rule Details

Rule ID: compatible-vendor-prefixes

This rule is intended to warn when a vendor-prefixed property is missing. The supported properties are listed in the previous section.

The following patterns are considered warnings:

/* Missing -moz, -ms, and -o */
.mybox {
    -webkit-transform: translate(50px, 100px);
}

/* Missing -webkit */
.mybox {
    -moz-border-radius: 5px;
}
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.