CODEWITHSUNDEEP
cssstandardsvendor-prefix
Stè
Stè

Reputation: 1

Using browser prefixes after properties names

Well, that's a strange question. Anyway what happens if I use browser prefixes after a css property name instead of putting it before? Example:

 box-shadow: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset;
 box-shadow -moz-: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset;
 box-shadow -webkit-: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset;

This is not only a curiosity question, my friend said he wrote this lines of css and that they work. I answered him Chrome and Firefox manage errors of this kind in the right way making them work, but now I'm a bit curious. Am I right to think that this way of using Prefixes (not Suffixed in fact) is not standard and should be avoided although they seem to run?

Upvotes: 0

Views: 99

Answers (3)

user663031
user663031

Reputation:

The browser is ignoring the second and third rules because they are invalid syntax. It "works" because all modern browsers now support box-shadow with no prefix, and are therefore using the first rule.

In Chrome, you can see this by viewing the styles in the devtools; the invalid rules are missing, because they have been thrown away.

Firefox reports the following errors in the "CSS" tab:

Expected ':' but found '-moz-'.  Declaration dropped. box-shadow.html:4:16
Expected ':' but found '-webkit-'.  Declaration dropped. box-shadow.html:5:1

The notion of placing the vendor prefix after the property name is not defined in any standard and is not supported by any browser. It is invalid pure and simple.

In other words, you can remove the invalid second and third rules, and everything will work precisely the same way.

Upvotes: 2

Christopher Perrin
Christopher Perrin

Reputation: 265

The prefixes are no standard. They are proprietary extentions that are not yet full standardized. Only the vendor knows what he programmed in and how it works and unless he has documented the functionality it might as well be a bug.

This is why I wouldnt use anything that is not documented by the browser vendor. Otherwise you might end up losing functionality between browser versions.

Upvotes: 0

sheng
sheng

Reputation: 1372

It shouldn't be a standard. I would avoid using this. The only reason I can think of how it would work would be the way they parse it. Just like you can mix the values of a background style attribute. (Like you can do background: url("pathtoimage") #FFF although it should be background: #FFF url("pathtoimage").)

Upvotes: 0

Related Questions