Vendor-specific Properties

Vendor-Specific CSS Properties: A Necessary Evil?

Browser developers (vendors) often extend CSS specifications with proprietary properties. These extensions serve various purposes, including adding new features, conducting experiments, and facilitating testing of features slated for W3C standardization before they reach Candidate Recommendation status.

To avoid conflicts with existing or future standard CSS properties, a specific naming convention is used. Vendor-specific properties and keywords must begin with either a hyphen (-) or an underscore (_). The recommended format is:

<code>'-' + vendor specific identifier + '-' + meaningful name

'_' + vendor specific identifier + '-' + meaningful name</code>

This convention ensures compatibility, as standard CSS properties will never start with a hyphen or underscore. However, while this minimizes conflicts, vendor-specific extensions are not part of the official CSS specifications and are subject to change. Therefore, their use should be minimized.

Table 1: Common Vendor Prefixes

Prefix	Organization
-ms-	Microsoft
mso-	Microsoft Office
-moz-	Mozilla Foundation (Gecko-based)
-o-	Opera Software
-atsc-	Advanced Television Standards Committee
-wap-	The WAP Forum
-webkit-	Safari (and other WebKit-based)
-khtml-	Konqueror browser

Caution: While unlikely to cause conflicts, vendor-specific extensions can change without notice. They also won't pass CSS validation. Prioritize standard CSS properties whenever possible. If an extension is necessary, choose one closely mirroring a standard property to facilitate a smooth transition to the standard once available.

Example: The opacity Property

Before widespread CSS3 support, developers used vendor-specific extensions for opacity. This example demonstrates a common approach:

<code>'-' + vendor specific identifier + '-' + meaningful name

'_' + vendor specific identifier + '-' + meaningful name</code>

This technique ensured compatibility across various browsers, with each browser selecting the appropriate property. Even after browsers adopted the standard opacity property, this approach remained functional. Note that the Internet Explorer filter property is a non-standard exception.

Conclusion:

Vendor-specific properties can be helpful for testing and bridging compatibility gaps, but they are not ideal for long-term solutions. Always favor standard CSS properties. Use vendor prefixes sparingly and only when absolutely necessary, remembering that they are not well-documented and may change unexpectedly. Refer to resources like Can I Use for browser compatibility information.

The above is the detailed content of Vendor-specific Properties. For more information, please follow other related articles on the PHP Chinese website!