Les actualités du Mardi 08 novembre 2011 dans les métiers du web - Marmits.com - Reims

Fuyez les pages Google Plus

Le: 08 11 2011 à 21:58 Consultant référencement : Laurent Bourrelly Auteur: Laurent

J’ai commencé à remplir ma page Google+, attisé par la curiosité, jusqu’au moment où j’ai réalisé l’erreur. Heureusement que je n’ai pas finalisé l’opération, mais d’autres sont tombés dans le panneau et regrettent amèrement. Jaugez bien les conséquences avant de presser le clic fatal. Google + s’entête sur la mauvaise voie Je persiste à dire que [...]

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

Le: 08 11 2011 à 12:38 Alsacreations.com - Apprendre Auteur: jojaba

[![Texte alternatif:!:]!]-prefix-free est un petit fichier JavaScript (2 Ko) développé par Lea Verou, développeur Web passionnée par 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.

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 de vos pages HTML.

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