Vendor prefixes on the Web
A CSS vendor prefix — such as '-o-' for the Opera browser — indicates a CSS property, value or other feature that has been implemented in the browser but is not considered stable yet. The feature is declared stable by the implementers participating to the W3C CSS WG.
Web developers are using CSS features that are not yet stable in their web design work. It results in valuable feedback for implementers but it also creates a lot of secondary issues when these web sites are not updated as browsers evolve. Because of the economic infrastructure of web design agencies, web sites that have been put in production are often not "fixed" for the release of new or changed CSS properties. Some Web developers also completely ignore the need for including multiple prefixed properties for supporting different browsers, or a prefixless property that would kick in once the property has been declared stable.
It has led to a situation where some end users have a broken experience on some web sites. Unfortunately, it is very hard to get these web sites fixed even if the agencies/developers are asked by the users and/or the browser companies themselves. Opera has released experimental builds aliasing (not implementing) certain webkit properties to see if that would improve the experience for users.
To assess this situation, I (on my Opera Developer Relations time) created this web survey script. There are a lot of issues with the script itself and its interaction with the web. It is a first step. It deserves a lot more care, and I will open some issues to fix. Pull requests are welcome! At least it could provide a common code base for everyone to work on. Read the report of August 2012 if you want to make more sense of some of the issues.
Code for Analyzing CSS properties from a list of URIs.
Given a list of URIs: sitelist = [uri1, uri2, …, urin]
- HTTP GET the URI (with a specific user agent)
- Parse it and find the CSS related URIs and the properties in the style sheets
- HTTP GET each URI (with the same user agent)
- Compile all the CSS Properties into a single object
- Analyze this object with different rules
for selectorGroup in cssRules: score = 0 // separate in if -vendorA-rule in declarationNameList: score =+ 1 if -vendorB-rule in declarationNameList: score =+ 2 if rule in declarationNameList: score =+ 4
- if score = 1, -vendorA- rule only in the file
- if score = 3, -vendorA- + -vendorB-
- if score = 5, -vendorA- + unprefixed
- if score = 7, -vendorA- + -vendorB- + unprefixed
This software is released under the MIT licence.