CSS Transcoder: Render Vendor Propriétés spécifiques

Question

Je me demandais si un type de "transcodeur" existe, qui ajoute automatiquement des propriétés spécifiques au vendeur à une feuille de style? Par exemple, si je crée une feuille de style comme ceci:

div.rounded { 
    border-radius: 5px; 
    opacity: 0.8; 
} 

je peux exécuter le fichier à travers le transcodeur, qui sort ceci:

div.rounded { 
    border-radius: 5px; 
    -mox-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    opacity: 0.8; 
    filter:Alpha(Opacity=80); 
} 

J'ai trouvé un Javascript solution, mais je préfère " précompiler "les feuilles de style au lieu de dépendre de JS.

Answer 1

Il existe des outils qui existent pour ce genre de chose, un très populaire est le Compass CSS Framework, en ligne au http://compass-style.com. C'est à CSS que jQuery est à JavaScript - remplir et normaliser tous les détails.

avec boussole (et SASS), vous pouvez faire ce que vous demandez assez facilement:

div.rounded { 
    @include border-radius; /* by default the radius is 5px */ 
} 

La sortie sera alors quelque chose le long des lignes de

div.rounded { 
    -webkit-border-radius: 5px 5px; 
    -moz-border-radius: 5px/5px; 
    -o-border-radius: 5px/5px; 
    -ms-border-radius: 5px/5px; 
    -khtml-border-radius: 5px/5px; 
    border-radius: 5px/5px; 
} 

Si un cadre semble trop vous pouvez considérer une solution plus simple SASS comme un custom mixin with arguments:

@mixin my-border-radius($radius) { 
    -webkit-border-radius: $radius; 
    -moz-border-radius: $radius; 
    -o-border-radius: $radius; 
    -ms-border-radius: $radius; 
    -khtml-border-radius: $radius; 
    border-radius: $radius; 
} 

div.rounded { 
    @include my-border-radius(5px); 
}