Cascata e estensioni CSS dei browser

Non si finisce mai di imparare. Avevo realizzato un test in cui mostravo l’utilizzo congiunto delle proprietà  CSS3 border-radius e box-shadow. Il codice era scritto in quest’ordine:

border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
/* ...*/

Avevo poi postato il mio test su CSS Discuss. La risposta di Philippe Wittemberg è stata illuminante:

Raining on your parade: You really, I mean really, should change the order in which you list the properties, to take the cascade into account. I note ‘border-radius’ here, but the same applies to ‘box-shadow’, of course. You currently have:

border-radius: 8px;
-moz-border-radius: 8px;

You should turn that around, list the -vendor- properties first, and _then_ the css3 property / notation. That way, you’re sure that a UA that currently uses a -vendor-prefixed notation, but in the near future upgrades to use the CSS3 notation will use the ‘real’ thing, rather than fall back on the -vendor prefixed one. The ‘real thing’ might be more powerful or more correct or more… etc.

Here is a quick & dirty example, to be viewed with WebKit (view source…):

http://dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html

Safari 5 and recent Chrome builds support the CSS3 notation, but also support the -vendor-prefixed one. The 2 boxes have the same properties listed. In the second box, the ‘-webkit-‘ one wins because it comes last in the code. That is correct per the CSS cascade (the same will happen when Gecko supports the CSS3 notation in Firefox 4).

In pratica, Philippe consiglia di mettere prima le proprietà /estensioni dei browser e poi la proprietà  standard, in questo modo:

#box {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

In questo modo siamo sicuri che, grazie alla cascata, la proprietà  standard CSS3 è effettivamente quella usata dai browser che la supportano. Gli altri semplicemente useranno quelle precedenti.