Sass Mixin préfixe des navigateurs

Une bordure, un simple transform et zou, vous voilà obligé d'écrire 6 lignes de codes à chaque fois pour s'assurer de la prise en charge par tous les navigateurs. Pourtant, des solutions existent, comme la création de mixin pour les pré-processeurs CSS

Un petit rappel s'impose : Chaque navigateur à une prise en charge des propriétés CSS3 qui lui est propre, selon son moteur de rendu. Chrome et Safari par exemple utilise Webkit, il est donc souvent nécessaire d'ajouter une ligne -webkit- pour beaucoup de propriété css3

.zoomcontent{
 transform: scale(2);
}
.zoomcontent{
-moz-transform: scale(2);
 -webkit-transform: scale(2);
etc......
 transform: scale(2);
}

Cela peut rapidement s'avérer chronophage, redondant, et surcharger vos feuilles de style. Certains IDE prennent en charge cette problématique, comme SublimeText 2 et son plugin AutoPrefix CSS. Les utilisateurs de Node.js apprécieront aussi autoprefixer. Mais en mode sass, l'idéal reste de créer des mixins pour pallier à cette problématique.

Heureusement, SASS permet d'ajouter automatiquement les préfixes de navigateurs avec quelques lignes de code.

@mixin prefix($map, $vendors: webkit khtml moz ms o) {
 @each $prop, $value in $map {
 @if $vendors {
 @each $vendor in $vendors {
 #{"-" + $vendor + "-" + $prop}: #{$value};
 }
 }
#{$prop}: #{$value};
 }
}

Ensuite, il suffit d'inclure votre mixin lorsque vous en avez besoin. Pour reprendre notre exemple ci-dessus :

.zoomcontent{
  @include prefix((transform: scale(2)), webkit ms o);
}

Ce qui transcrira en CSS de cette façon :

.zoomcontent{
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}

Et voilà, vous venez de gagner quelques précieuses secondes et 3 lignes. Multipliez par le nombre de fois où cela s'avère nécessaire, vous pouvez gagner plusieurs centaines de lignes de code dans vos fichiers scss.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Vous pourriez aussi être intéressés par

Facebook : Lister les pages que vous administrez

Pour publier sur une fan page, il faut obtenir un access_token valide avec l'autorisation de gérer les pages. Ce petit bout de code, à adapter selon vos besoins, liste les pages pour lesquelles vous êtes admin.

Déc 10 2012