Home >Web Front-end >CSS Tutorial >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!