CSS

-prefix-free, préfixes CSS3 ajoutés automatiquement

Article par (Traduction Open-source, développeur Web, France - Alsace)
Créé le , mis à jour le (31505 lectures)
Tags : css, javascript, explorer, css3, prefixes

-prefix-free est un petit fichier JavaScript (2 Ko) développé par Lea Verou, développeuse Web impliquée dans les standards Open Source, CSS3 et JavaScript. Le rôle de ce script est d'ajouter automatiquement des préfixes propriétaires nécessaires à la reconnaissance de certaines propriétés de la spécification CSS3 par les différents navigateurs modernes.

Prefix Free

Mais quel est le problème ?

Les propriétés CSS3 avancées sont intégrées dans les différents navigateurs de manière non concertée et selon le bon vouloir des développeurs de ces butineurs ! Pour ne pas entraver la prise en compte de ces propriétés non validées par le W3C on a autorisé une syntaxe personnalisée afin de permettre leur intégration progressive. Le choix a été fait d'utiliser un préfixe propriétaire pour identifier les propriétés CSS3 prises en compte par chaque type de navigateur (selon leur moteur de rendu). Les préfixes principaux :

  • -webkit- (pour Chrome, Safari,…)
  • -moz- (pour Firefox, Flock,…)
  • -o- (pour Opera)
  • -ms- (pour Internet Explorer)

Les développeurs Web souhaitant d'ores et déjà utiliser ces propriétés CSS sont donc contraints à écrire plusieurs lignes pour que la prise en compte de leur feuille de style se fasse le plus largement possible. Un exemple pour illustrer cela. Ci-dessous la fonction de zoom d'élément (ici doublement de la taille de l'élément ayant pour id zoom) si on ne tient compte que de la spécification officielle :

#zoom {
  transform: scale(2);
}

Pour être certain que cette transformation s'opère dans un maximum de navigateurs, il va falloir ajouter plusieurs lignes supplémentaires :

#zoom {
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

Utilité de -prefix-free ?

-prefix-free est un petit fichier JavaScript qui ajoute à la volée le bon préfixe propriétaire selon le navigateur affichant la page. Plus besoin, donc, d'ajouter dans la feuille de style les différentes propriétés propriétaires ! -prefix-free adapte la propriété CSS3 au navigateur. Un exemple, voici la propriété définissant un fond en dégradé :

#degrade {
    background: linear-gradient(#96C7CC, #FFF);
}

Cette ligne de la feuille de style sera remplacée de la manière suivante pour les utilisateurs de Firefox :

#degrade {
    background: -moz-linear-gradient(#96C7CC, #FFF);
}

Et ainsi pour les utilisateurs d'Opera :

#degrade {
    background: -o-linear-gradient(#96C7CC, #FFF);
}

Les avantages de cette technique :

  • Les feuilles de styles feront une cure d'amaigrissement non négligeable (une seule ligne pour une même propriété de style).
  • Les développeurs web expérimentés apprécieront le gain de temps (pas besoin d'ajouter les lignes avec propriétés préfixées).
  • Les débutants en codage CSS3 ne seront pas déboussolés par les pléthores de préfixes.

Comment faire fonctionner -prefix-free ?

La procédure d'installation de -prefix-free est relativement simple. Placer le fichier à un endroit de votre hébergement, puis insérer la ligne suivante dans la partie <head> de vos pages HTML.

<script type="text/javascript" src="chemin/vers/prefixfree.min.js"></script>

Ou alors plus simplement (sans héberger le fichier chez vous) en appelant le fichier directement à partir de Github :

<script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>

Pour minimiser l'effet FOUC - c'est un phénomène décrit par bluerobot.com qui se traduit par l'affichage de la page brute avant celui de la page stylée - il est recommandé de placer la ligne d'appel du fichier JS juste après la déclaration de la CSS.

Conditions d'utilisation

Comme tout script "patchant", l'utilisation de ce genre d'outil est soumise à certaines conditions…

Les points positifs
  • Traite les styles CSS appelés par une balise <link> ou contenus dans une balise <style>, mais également ceux des attributs style à l'intérieur des balises.
  • Prend en compte les nouveaux éléments <link> et <style> et les modifications des attributs style (nécessite un plugin).
  • Est compatible avec jQuery (nécessite un plugin).
  • Est compatible avec CSS3 Pie (de manière générale d'ailleurs, ne traite pas les propriétés déjà préfixées).
  • Les navigateurs cibles compatibles sont : IE9 et supérieur, Opera 10 et supérieur, Firefox 3.5 et supérieur, Safari 4 et supérieur, Chrome pour Windows et Mac-OS et Arora, Midori, Chromium, Epiphany, Rekonq pour Linux (testés sur Ubuntu 11.10). En règle générale, tout navigateur prenant en charge les propriétés avancées CSS3 devrait être compatible.
  • Pour les navigateurs non compatibles avec ce genre de propriétés (IE8 par exemple) et pour les propriétés étant déjà préfixées manuellement, aucun préfixe ne sera ajouté.
Les limitations
  • Ajoute une couche JavaScript, donc une requête de fichier et des traitements de données du côté client.
  • Ne traite pas les styles CSS incorporés par l'intermédiaire de la règle @import
  • Ne traite pas non plus les CSS provenant d'un autre domaine.
  • Pas de traitement des styles incorporés dans les balises (attribut style) pour Internet Explorer et Firefox < 3.6.

Pour terminer ce petit tutoriel, une page de démonstration de -prefix-free

Resssources Web

Commentaires

seufer a dit le

Salut,
J'avais lu l'article de Léa Verou, mais je trouve que le SCSS est plus pratique pour les préfixes CSS en utilisant les Mixin :

- dans un fichier déclarant toutes les variables SCSS

@mixin rounded ($size) {
-moz-border-radius: $size;
-webkit-border-radius: $size;
border-radius: $size;
}

- dans le fichier SCSS
#monDiv{
@include rounded(10px);
}

Clawfire a dit le

ET sinon quid des propriété dont mozilla implémente de manière plutot ... personnelle ?

Je pense a min-device-pixel-ratio qui devient min--moz-pixel-ratio chez mozilla ...

Ysurian a dit le

Intéressant. Par contre, ma préférence reste quand même la solution Less CSS (script PHP) :

.transition(@type; @ms:150ms; @style:linear) {
-webkit-transition: @type @ms @style;
-moz-transition: @type @ms @style;
-o-transition: @type @ms @style;
transition: @type @ms @style;
}

C'est un peu comme le cas du SCSS de @seufer.

Je ne pense pas que ce script JS soit lourd, mais bon, si on peut éviter de surcharger l'utilisateur en fichiers JS, c'est pas plus mal.
Autre problème, c'est qu'on reste dépendant des fix du développeur dans ce cas, si une modification des attributs CSS préfixés s'opère (cas certainement peu probable).

jojaba a dit le

Ah ben je ne connaissais ni SCSS (pour ceux que ça intéresse, un lien : http://nex-3.com/posts/96-scss-sass-is-a-css-..., ni Less CSS (lien: http://lesscss.org/). Merci pour ces informat... intéressantes. Personnellement, j'aime les choses simples, surtout parce que je ne suis pas un pro en la matière et donc je porte un oeil plutôt de débutant sur ce genre d'outils. Ceci dit, vos solutions ne vont pas permettre de réduire le nombre de lignes des feuilles de style, semblerait-il, à moins que j'aie mal compris leur fonctionnement... et demande un apprentissage supplémentaire (une syntaxe spécifique), alors que -prefix-free ne demande aucune connaissance supplémentaire.

seufer a dit le

@jojoba : en effet, ça ne réduit pas le nombre de lignes totales de ton ficher CSS, par contre tu écrit beaucoup moins de lignes dans ton fichier SCSS ou LESS.

jojaba a dit le

@Clawfire : je ne saurais te dire. J'ai posé la question à Léa, j'attends sa réponse. Sinon, il faudrait voir comment le js fonctionne. Pour cela, je te propose d'aller voir sur github : https://github.com/LeaVerou/prefixfree/blob/master/prefixfree.js (moi je ne suis pas assez calé en la matière :p)

Frederic_B a dit le

@Clawfire : Et quid des variations de chacun dans la syntaxe à adopter (oui, je regarde clairement radial-gradient) ?

De mon point de vue, ce genre d'outil est pratique pour mettre rapidement un site internet debout, mais ne remplace pas une version définitive d'un fichier CSS. Ce qui comme je l'ai dit, ça ne retire pas la praticité pour les conceptions rapides.

jojaba a dit le

Bon, j'ai eu la réponse de Lea concernant la demande de Clawfire :
« -prefix-free shouldn't prefix those things, since they are proprietary. My goal with prefix-free is to only add prefixes to standard stuff, proprietary things should be prefixed.
That said, do you have a demo of this failing use case? Like, some code that doesn't get prefixed correctly? Even just an empty rule would suffice. »
Donc, non, les propriétés "exotiques" ne sont pas traitées.
Pour radial-gradient, je sais que Chrome définissait ça différemment avant l'actuelle propriété, mais comme la procédure de mise à jour de Chrome est faite de manière totalement transparente et automatique (je veux dire par là qu'on ne se rend même pas compte de l'update), ça ne devrait pas trop poser de problèmes... Même raisonnement pour Firefox dont la mise à jour ne devrais pas trop être un souci... ;)