Does the Order of Vendor-Specific CSS Declarations Matter?

The Significance of Ordering Vendor-Specific CSS Declarations

Question:

When writing CSS declarations with vendor-specific prefixes, does the order of these declarations matter? Specifically, should the W3C standard declaration be placed first or last?

Answer:

Best practices dictate that the unprefixed W3C standard declaration should be placed last in the list:

.foo {
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;         /* W3C */
}

Rationale:

The order of vendor-specific declarations is crucial because browsers apply CSS rules in the order they're listed. For example, if the W3C declaration was placed first, it would be overridden by the browser-specific declarations.

The -webkit-border-radius property is considered experimental, allowing for deviations from the specification. On the other hand, the border-radius property should adhere strictly to the specification.

By placing the unprefixed W3C declaration last, you ensure that:

• It takes precedence over the vendor-specific declarations when possible.
• Browser consistency is maintained, ensuring that the property behaves uniformly across browsers that support it.

The above is the detailed content of Does the Order of Vendor-Specific CSS Declarations Matter?. For more information, please follow other related articles on the PHP Chinese website!