How to Order Vendor-Specific and W3C CSS Declarations?

Vendor-Specific CSS Declaration Ordering

When using vendor-specific CSS declarations, it becomes necessary to consider their ordering. While it's known that the -webkit- and -moz- prefixes don't affect the order of application, questions arise about the best practices for ordering W3C standard and vendor-specific versions.

The recommended approach is to place the unprefixed, W3C standard property last in the declaration block:

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

This helps ensure that the browser will prioritize the use of the W3C standard implementation.

Why is this preferred? Firstly, the -webkit-border-radius prefix indicates an experimental property that may deviate from the specification. In comparison, border-radius should adhere to the specifications strictly.

By placing the W3C implementation last, browsers that support it will use it, promoting consistency among browsers. This approach provides a future-proof solution as CSS evolves and browser support for the standard increases.

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