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

Le: 11 11 2011 à 14:37 Alsacreations.com - Apprendre Auteur: Raphael

Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté.

La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations (que du beau monde :)), est d’utiliser les commentaires conditionnels.

Nous allons voir dans cette article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles.

Le problème des commentaires conditionnels

Les commentaires conditionnels se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document (X)HTML.

Il s’agit d’un mécanisme propre à Internet Explorer Windows, né avec la version IE5, et qui permet d’inclure dans une page HTML, de manière valide, une portion de code qui ne sera lue et interprétée que par IE, ou par l’une ou l’autre de ses versions.

Pour information, Internet Explorer 10 ne reconnaît plus les commentaires conditionnels, il ne peut donc plus être ciblé de cette manière.

Dans notre quête de compatibilité maximale sur le navigateur de Microsoft, nous allons principalement nous servir de ce mécanisme pour faire un lien vers une feuille de styles corrective dédiée. Cette seconde feuille CSS, chargée à la suite du fichier de styles principal, aura pour but d’écraser et de rectifier au cas par cas les règles générales mal reconnues par IE, comme le montre l'illustration ci-dessous :

Cependant, dans la pratique, une feuille de style corrective pour Internet Explorer ne suffira pas. Vous serez souvent amenés à produire une feuille CSS spécifique à IE6 et 7, ainsi qu'une autre pour IE8. Ou pire : une feuille différente pour chacune des trois versions !

Au final, vous jonglerez avec au minimum trois feuilles de styles CSS :

Non seulement, nous avons à gérer plusieurs fichiers différents, mais nous ne pourrions toujours pas cibler les trois versions IE6 et IE7 et IE8 à la fois sans ajouter une nouvelle condition et feuille CSS supplémentaire.

En 2008, le développeur américain Paul Irish s’est penché sur le mécanisme des commentaires conditionnels et en a listé ces quelques désagréments :

• Les navigateurs anciens tels que IE6, IE7 et IE8 doivent charger plusieurs fichiers CSS au lieu d’un. Ces requêtes HTTP supplémentaires, ont un impact sur la vitesse d’affichage des pages.
• Certains correctifs CSS s’appliquent à toutes les versions des navigateurs (IE6, IE7, IE8). Il faudra les écrire une fois dans chaque fichier de correctifs.
• A chaque modification opérée sur styles.css, il faudra vérifier dans chacune des feuilles de correctifs CSS s’il n’y a pas également des changements à répercuter. La maintenance et l’évolution des styles CSS deviennent difficiles.
• L'emploi de commentaires conditionnels peut causer des problèmes pour les téléchargements parallèles.

L’argument des baisses de performances est non négligeable sur les versions IE6 et IE7, car il s’agit justement de navigateurs vieillots nécessitant des optimisations constantes et nombreuses en vue de ne pas handicaper leurs temps de calcul et d’affichage.

Une alternative ? Les classes conditionnelles

La solution proposée par Paul Irish a été initialement de créer un nom de classe spécifique à l’élément , via un commentaire conditionnel et sans nécessiter d’appel vers une feuille de styles. Je préfère néanmoins l’appliquer directement à l’élément , plus logique et plus souple à manipuler.

Voici une version optimisée de classe conditionnelle :

Vous pouvez voir cette classe conditionnelle en action sur le site www.goetter.fr/livres/css-avancees/

Le principe et les explications sont simples :

• sur les versions inférieures ou égales à Internet Explorer 7, le corps du document s’écrira  ;
• sur IE8, ce sera  ;
• sur tous les autres navigateurs (IE9+ et le reste du monde), il s’agira simplement de .

Il devient alors aisé d’appliquer une règle spécifique à IE6 et IE7 :

#kiwi { /* Pour tout le monde */  
  display: inline-block;  
}
.ie7 #kiwi { /* Pour IE6 et IE7 */  
  display: inline;
  zoom: 1;
}

Et pour appliquer des styles à la fois sur IE6, IE7 et IE8 :

#kiwi { /* Pour tout le monde */  
  font-size: 1.2rem;  
}
.oldie #kiwi { /* Pour IE6, IE7 et IE8 */  
  font-size: 20px; 
}

Bien que la syntaxe demeure un tantinet rebutante et qu'un ajout de codes HTML soit nécessaire, cette méthode commence à faire son chemin parmi les développeurs web aguerris (elle figure même dans le gabarit par défaut proposé par HTML5boilerplate) car ses avantages sont séduisants :

• Contrairement à ce que l’on pourrait croire, elle est parfaitement valide W3C / HTML et reconnue par tous les navigateurs,
• On cible en toute simplicité les versions d'Internet Explorer souhaitées avec .ie7, .ie8, .oldie par exemple,
• Pas de multiplication des requêtes, et des fichiers externes à vérifier et maintenir.

Et vous, que pensez-vous de cette technique ? L'utilisez-vous déjà en production ?

Le: 11 11 2011 à 01:00 Zend Press Releases

Depuis le 1er novembre, VA Consulting est Solution Partner de Zend Technologies sur les territoires du Luxembourg, de la Belgique, de la France, des Pays-Bas, et de l’Allemagne.

Ce partenariat formalise une collaboration rapprochée entre l’éditeur et le spécialiste PHP du Grand-Duché.

« Cette signature de partenariat est le fruit d’une collaboration pré-existante et active entre VA Consulting et Zend Technologies. L’expertise et les bonnes pratiques que VA Consulting apporte à ses clients sous forme de formation et de coaching d’équipes PHP, sont mises en oeuvre plus efficacement grâce à des outils professionnels comme Zend Server et Zend Studio. Parallèlement, Zend Technologies bénéficie de partenaires expérimentés pour accompagner ses propres clients et leur permettre d’exploiter au mieux ses solutions. Notre adage “knowledge is nothing without know-how” prend ainsi toute sa valeur. Zend fait régulièrement appel à nos experts pour des missions de formation ou de conseil. Finalement, ne devient pas partenaire Zend qui veut. Cette signature représente pour nous la reconnaissance de nos compétences et de notre professionnalisme par l’éditeur qui est à l’origine du langage PHP. Ce partenariat assure aux différents acteurs PHP luxembourgeois la proximité d’un expert avec des offres de services et de solutions complètes et pertinentes. ”

– Alain Fontaine, General Manager de VA Consulting

“La force et le succès garanti de ce partenariat tiennent à l’antériorité de notre coopération et la convergence totale de nos stratégies respectives. Nous éditons des outils PHP de productivité et de performance, supportés, évolutifs et pérennes que les experts certifiés de VA Consulting utilisent pour réaliser de façon réactive des applications critiques, performantes et elles aussi évolutives avec un haut niveau de service (SLA). Comme aime à le dire son Directeur Technique, Gauthier Delamarre, qui délivre régulièrement des cours sur PHP, ZF et Zend Server aux clients Zend « le temps que les développeurs et experts PHP consacrent au développement d’applications et donc à la création de valeur pour le métier, plutôt qu’à la maintenance corrective, doit être le plus proche possible de 100%». Plusieurs clients de VA Consulting peuvent d’ores et déjà témoigner de l’efficacité de cette stratégie.”

– Christian Durel, General Manager de Zend Europe

A propos de VA Consulting :

Lancée en novembre 2010, VA Consulting se positionne comme référence dans les domaines de la formation, de l’audit, du coaching et de l’accompagnement de projets PHP et technologies annexes. Basé à Remich et à Wiltz, VA Consulting est un département stratégique de VAlain SA et occupe aujourd’hui une dizaine d’experts dans les domaines du PHP, de Zend Framework, des solutions Zend, et des technologies web en général.

Site web : www.vaconsulting.lu
Contact: Clément Venet (+352 621 31 19 23)

A propos de Zend Technologies :

Zend Technologies a été fondée par les deux co-architectes historiques de PHP. La société édite PDT, Zend Framework, Zend Studio, Zend Server et contribue au langage. Ses solutions commerciales sont déployées par plus de 40 000 entreprises à travers le monde. Ses produits apportent une solution complète couvrant l’ensemble du cycle de vie des applications PHP et aident les développeurs à délivrer rapidement des applications pour mobiles ou dans le Cloud.

En savoir plus sur www.zend.com.
Contact: Christophe Chervy (+33 1 48 55 02 02)