-prefix-free est un petit fichier JavaScript (2 Ko) développé par Lea Verou qui 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.
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 ! 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- : Chrome, Safari,…
- -moz- : Firefox, Flock,…
- -o- : Opera
- -ms- : Internet Explorer
Les intégrateurs Web souhaitant 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. Par exemple :
#borderradius { border-radius: 5px; }Pour être certain que la bordure arrondie s’opère dans un maximum de navigateurs, il va falloir ajouter plusieurs lignes supplémentaires :
#borderradius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}Utilité de -prefix-free ?
Le script -prefix-free 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 une ombre portée :
#boxshadow{ box-shadow : 2px 2px 2px #000; }Cette ligne de la feuille de style sera remplacée de la manière suivante pour les utilisateurs de Firefox :
<pre>#boxshadow{ -moz-box-shadow : 2px 2px 2px #000; }</pre>Et ainsi pour les utilisateurs d’Opera :
#boxshadow{ -o-box-shadow : 2px 2px 2px #000; }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 intégrateurs 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 de vos pages HTML.
Ou alors en appelant le fichier directement à partir de Github :
Il est recommandé de placer la ligne d’appel du fichier JS juste après la déclaration de la CSS.