Clearideaz

jQuery.eventManager, un plugin de gestion d’évènements

Olivier G. — Fri, 16 Jul 2010 08:06:07 +0000

La méthode $.delegate de jQuery fonctionne sur le principe de la délégation d’évènements. La délégation permet notamment de pouvoir ajouter de nouveaux éléments dans le DOM dynamiquement (via Ajax par exemple) sans pour autant leur ré-attacher d’évènements préalablement défini. Elle assure également de meilleures performances.

Sur la plupart des projets, je m’amusais à déléguer des évènements à des objets globaux. C’est ensuite au moment de l’appel à l’évènement que je filtrais le type d’action à effectuer. C’est un exercice plutôt fastidieux…

J’ai donc décidé de créer un plugin jQuery permettant de faciliter la gestion d’évènement via delegate. Il suffit pour cela de créer un objet recensant les objets globaux, les évènements attachés, le filtre, puis l’action a effectuer.

Voici un exemple d’objet :

var eventList = {
 'div' : {
   'mouseover' : {
     '.sidebar' : function (elem) {
       $(elem).addClass('over');
     },
     default : function(elem) {
       $(elem).css('background-color':'red');
     }
   }
   'mouseout' : function() {
      $(elem).css('background-color':'transparent');
   }
 }
}

En clair, je délègue des évènements à un ou plusieurs objets de type div. Je lui attribue un évènement de type mouseover. Par défaut, au passage de la souris sur cette div, le fond de cet objet sera rouge. Si la div possède la classe .sidebar, alors je lui ajoute une classe .over. Enfin, lorsque je quitte un objet de type div, je lui affecte un fond transparent.

Une fois cet objet créé, il ne reste plus qu’à l’insérer dans un appel au plugin eventManager :

$('#wrapper').eventManager(eventList);

Dans cet appel, seules les div placées dans un objet ayant pour ID #wrapper seront affectés par les évènements à déléguer.

Je vous propose d’accèder à la démo pour vous faire une idée des possibilités offertes. Vous pourrez ensuite, si vous le souhaitez, télécharger le plugin sur mon espace Github.

Édité le 19 juillet : Nouveauté sur le plugin, le code a été nettoyé, on peut se passer de ‘default’ lorsqu’il n’y a pas de sélecteur filtre. Autre nouveauté, on peut désormais utiliser « this » au lieu de « elem » dans les fonctions de l’objet contenant les évènements. Merci beaucoup à Sunny pour son aide !

Internet Explorer 9 sur la bonne voie

Olivier G. — Thu, 24 Jun 2010 04:31:18 +0000

Des débuts (très) difficiles

Internet Explorer a (très) souvent été la cible de critiques passionnées. En cause, son moteur de rendu (Trident) non conforme aux standards du web définis par le W3C et ses nombreux bugs.
La version 6 s’imposait de nombreuses années au sein du système Windows XP.

Microsoft décide de publier la version 7 de son navigateur qui sera en série sur le tout nouveau système, Windows Vista. Les améliorations sont nombreuses mais la firme Redmond persiste dans sa volonté d’imposer ses « standards ». Il intègre toutefois de nouveaux pseudo-sélecteurs CSS (IE6 ne supportant que les pseudo-sélecteurs affectés aux liens) et supporte enfin le format PNG alpha.
Problème, la plupart des utilisateurs de Windows XP ne migrent pas vers Vista, le système ayant une mauvaise réputation en terme de stabilité et d’ergonomie. Le passage vers IE7 prendra beaucoup de temps et encore aujourd’hui, IE6 dispose d’une part importante dans le pourcentage des navigateurs utilisés. Cette lente migration s’explique également par le fait qu’Internet Explorer 6 ne dispose d’aucun système de mise à jour automatique (à contrario de Firefox par exemple).

Un semblant de renouveau

IE8 succède à la version 7. Les effets d’annonce de cette version n’attenueront pas les critiques de la communauté web. Microsoft fait encore une fois cavalier seul. Son navigateur, en dépit de quelques améliorations ergonomiques, ne parvient pas à séduire le public de connaisseurs.
Ce navigateur met en place un nouveau principe : la définition du mode de rendu. Il est possible en effet de choisir entre le mode de rendu IE7 et celui d’IE8 via une balise meta. Ce principe va à l’encontre du concept d’amélioration progressive. On ne devrait pas choisir de développer pour un ancien navigateur.
Autre problème, le support du PNG pourtant bien géré sur IE7 est défaillant sur cette version.

Une lueur d’espoir

Intervient le projet IE9 mené par une équipe renouvelée et des consultants plus jeunes ! À l’heure où je publie cet article, cette version est encore à l’état de développement.
Première nouveauté : Microsoft communique largement sur le projet et encourage fortement la communauté à effectuer des retours.
Seconde nouveauté : IE9 se veut respectueux des standards du web. Microsoft se retrouve désormais contributeur actif du W3C. Ils insistent sur l’obligation de rendu unique sur l’ensemble des navigateurs.
Troisième et dernière nouveauté : L’équipe d’IE9 a fait beaucoup d’efforts pour améliorer les performances de son navigateur. Il dispose aujourd’hui d’un des plus puissants moteur Javascript (en comparaison avec les moteurs en version définitive et publiés avec des navigateurs stable, hein !).

Mais ce qui est surtout le plus excitant, c’est le support de nouvelles technologies web. La liste est longue : support de CSS3 (on peut enfin utiliser border-radius, ouais !), moteur de rendu capable d’interpréter HTML5 ainsi que son API (balise video, audio, geolocalisation, webworkers…), implémentation de font-face, mise en conformité de l’interpréteur javascript avec les standards, support de SVG…
Et dernièrement, le blog du navigateur Microsoft a annoncé le support de canvas ainsi que la prise en charge du format libre WOFF, on y croyait vraiment plus !

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

C’est donc une grande avancée et on s’imagine déjà développer des sites internet sans avoir à le tester sur 36 navigateurs ! Mais malgré tout, ne fantasmons pas trop vite, le chemin sera encore long et il faudra je pense attendre encore 10 ans avant de pouvoir utiliser pleinement les nouvelles possibilités offertes par HTML5 et CSS3.

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Un semblant de renouveau

Une lueur d’espoir

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Un semblant de renouveau

Une lueur d’espoir

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Créer une galerie photo grâce à CSS3

Olivier G. — Mon, 31 May 2010 13:20:38 +0000

Avec l’arrivée des nouvelles propriétés CSS3 (dont la spécification n’est toujours pas finalisée…), il est devenu assez facile de créer des sites internet attrayants sans pour autant avoir recours à Flash ou à JavaScript.

Dans la démonstration associée à cet article, vous aller pouvoir visualiser quelques possibilités offertes par CSS3, voici celles que j’ai utilisées :

Le pseudo-selecteur :target

:target est un pseudo-sélecteur permettant d’accéder à un élément du DOM possédant l’id du lien référent.
En clair, si je clique sur un lien dont l’attribut href est égal à #test, la propriété de style a:target { background-color:red; } affectera un fond de couleur rouge à l’élément ayant pour ID #test.

C’est de cette manière que j’obtiens la méthode de sélection des images agrandie dans la démo. Pour IE qui ne supporte par cette propriété, j’ai bidouillé grâce à l’overflow. En clair, le cadre conteneur des images agrandies a pour attribut overflow, la valeur hidden. Il dispose en outre des dimensions exactes d’une de ces images. Au clic sur le lien de la miniature, l’image cible est directement appelée par le hash du lien.

Les ombres

Pour la démo, j’ai utilisé la propriété box-shadow afin de mettre en valeur l’image miniature survolée. La syntaxe est simple :

-moz-box-shadow:0 0 0 rgba(255,255,255,0.5);
-webkit-box-shadow:0 0 0 rgba(255,255,255,0.5);

Il est à noter que cette propriété à été retiré pour le moment de la spécification CSS3.

La propriété transform

Cette propriété permet d’agir sur la forme d’un élément, qu’il s’agisse d’une image ou de toute autre balise standard.

Il est par exemple possible d’effectuer une rotation sur un objet via cette syntaxe :

img {
  transform:rotate(20deg);
}

Il vous sera également possible de mettre à l’échelle certains élements. Voici un exemple :

div#button {
  transform:scale(0.8); /* réduira la div de 20% */
}

Sur la démonstration, je m’en suis servi pour agrandir les miniatures au survol de la souris.

Les transitions

J’ai également utilisé les transitions (qui ne fonctionnent qu’avec la version 3.7 de Firefox et avec les dernières versions de Safari). Les transitions CSS permettent de modifier les valeurs de propriétés CSS progressivement, sur une durée déterminée. On construit la valeur en spécifiant d’abord la ou les propriétés sur lesquelles on souhaite agir (background-color par exemple ou all pour toute les propriétés liées au sélecteur), on indique ensuite une durée d’animation (en secondes ou millisecondes), puis le type d’effet de transition (default, linear, ease-in, ease-out, ease-in-out ou cubic-bezier).
Voici un exemple de propriété :

transition: all 1s ease-in-out;

Les animations de la galerie CSS3 utilisent pleinement les possibilités offertes par les transitions.

Dernière astuce liées à cette propriétés : pour donner cette impression d’image tournoyante lorsqu’une miniature est sélectionnée, j’ai juste initialisée la rotation de l’image à -360 degrés. Une fois l’image sélectionnée, l’image cible (:target) subit une rotation de 0 degré.

La démonstration

Voici donc la démonstration d’une galerie full-CSS. Pour le fun, visualisez cette galerie sur différents navigateurs (IE 6, Firefox 3.6, Safari). Vous verrez ainsi que la galerie utilise le concept d’amélioration progressive.

Astuce pour HTML5

Olivier G. — Wed, 26 May 2010 12:37:37 +0000

Comme vous avez surement pu le constater, il est possible en HTML5 d’encadrer des balises de type bloc par une balise de type lien inline de cette manière :

<a href="http://www.smashingmagazine.com">
  <h1>Smashing Magazine</h1>
  <h2>online magazine dedicated to designers and developers.</h2>
</a>

Le lien devient ainsi actif sur l’ensemble des balises bloc. Ceci évite d’insérer plusieurs fois le même lien.

Ce balisage marche sur la plupart des navigateurs dont IE6 seulement voilà, sur ce dernier, le curseur n’est pas correct au survol des balises de type bloc. A la place du pointeur, on à le curseur de type de texte.

Voici ce que l’on peut ajouter dans la feuille de style pour corriger celà :

a * { cursor:pointer; }

Et miracle, le curseur par défaut des liens fonctionne également sur les balises type bloc.

Détecter le support HTML5 du navigateur via Jquery

Olivier G. — Thu, 20 May 2010 18:05:35 +0000

Le site Dive into HTML5 a publié récemment un article détaillant les différentes méthodes de détection de fonctionnalités HTML5 sur les navigateurs via Javascript.

Utilisateur régulier de jQuery, j’ai décidé de porter ces scripts au sein de la fonction $.support.

Voici la liste des tests possibles : audio, audioMp3, audioVorbis, audioWav, audioAAC, canvas, canvasTxt, command, datalist, details, device, formConstraints, iframeSandbox, iframeSrcDoc, autofocus, placeholder, color, email, number, range, search, tel, url, date, time, datetime, datetime-local, month, week, meter, output, progress, time, video, videoCaptions, videoPoster, videoWebM, videoH264, videoTheora, contentEditable, dragAndDrop, fileAPI, geoLocation, history, localStorage, microdata, applicationCache, eventSource, sessionStorage, svg, svgInHtml, webSimpleDb, webSocket, openDatabase, webWorkers, undo.

Vous trouverez une démonstration des possibilités offertes par le script sur cette page de test du support HTML5 de votre navigateur.

Si vous souhaitez par exemple tester le support du SVG, insérez la ligne suivante au sein de votre fichier Javascript :

$.support.svg // retourne false sur IE et true sur les versions récentes de Firefox

Le script est léger : 8ko en version source et 3ko en version minifiée.

Vous pouvez télécharger l’extend jQuery sur mon espace Github

N’hésitez pas à me signaler le moindre bug.

Édit : correction d’un lien

Analyse de la nouvelle version de Duoh.com

Olivier G. — Sun, 16 Nov 2008 17:48:00 +0000

Après un petit congé billet, je me redécide à écrire un billet à l’occasion de la publication récente de la nouvelle version du site Duoh. Pourquoi ce site ? Parce qu’il est un exemple d’innovation en matière de webdesign.

Trop de sites sont réalisés par des designers qui n’ont pas de réelle vision web et il ne faut en aucun cas les blâmer mais il serait grand temps d’avancer et de laisser le webdesign à des gens qui ont été formés pour ça et de ce fait, proposer enfin, de vrai formation dans ce domaine. Le webdesign répond à des contraintes d’ergonomie, d’accessibilité, de sémantique et d’intégration. L’art est secondaire (troll ?). La maquette web est au service du contenu et non pas l’inverse.

Revenons donc à Duoh.com. Définissons d’abord ce qu’ils font. C’est une agence de design web et print qui existe depuis 1992 et composée de deux personnes : Geert Leyseele, le directeur de projet et Veerle Pieters au secteur de l’illustration et ’intégration. Duoh produit essentiellement de l’interface web mais également des logos, des illustrations, des icones et enfin du print.

Nous allons étudier dans un premier temps l’aspect graphique puis nous nous concentrerons sur l’aspect technique.

Une grille peu conventionnelle

Réalisée sous Illustrator, la maquette du site Duoh.com a pris un certain nombre de liberté graphique. Il ne s’agissait pas ici de s’enfermer dans les contraintes d’une grille.

Pourtant la tentation aurait été grande. On sait à quel point le design suisse (design que voulais évoque le nouveau Duoh) est très cubique et il aurait été évident de se caler précisément sur une grille régulière. Mais ici, il fallait du mouvement, de la vie. Comme on peut le voir sur l’image ci-dessous, certains éléments sont délibérement décalés par rapport à la grille de base.

Cela créé une certaine dynamique dans la mise en page. L’idée est également d’avoir un aspect différent à chaque scroll dans la page.

Concernant le choix des couleurs, là aussi, l’originalité était de mise. La maquette est un vrai arc-en-ciel. Une dizaine de couleurs ont été utilisées (rien que ça !). Mais c’est surtout leur utilisation qui est intéressante. On peut observer en fond de page, une gris très foncé (#3e373c) et dans la zone principale de contenu du blanc. En termes de contraste, on ne peut pas faire mieux. Et sur cette structure monochrome, viennent s’ajouter des couleurs « flashy » qui donnent force et vivacité.

Chaque maquette de page se présente comme une surprise pour le visiteur. Le fond de page change en permanence. En voici quelques exemples ci-dessous :

Il en est de même pour la sidebar…

L’innovation dans l’intégration

Si l’on met de côté un instant l’aspect graphique, on pourra remarquer un certain nombre de techniques d’intégration assez intéressantes et qui peuvent être aussi contestables.

Pour ce qui est des remplacements de texte par des images dans le menu principal, il y a un choix d’utiliser des balises span vides. A première vue, ça peut faire enrager les adeptes de la validité stricte ! Mais là, il est question d’accessibilité. En effet, contrairement aux techniques de remplacements d’image utilisées largement (text-indent :-9999px ou top :-9999px), il n’y aura aucun de souci lors de la lecture de la page si la CSS est activée et si les images ne sont pas chargées. L’astuce est de placer les span avec pour fond l’image au dessus (en position absolue) du texte.

Il peut paraitre également surprenant de trouver parfois des remplacements de texte par des images qui n’ont pas du tout le même contenu. Il y a par exemple sur la page Contact us, un titre de niveau 2 qui contient le texte « Contact us for an estimate? » et qui sous forme d’image est remplacé par « Want a site that beautiful and brainy too ? » ou le texte sur la homepage « Who we are » qui est tout bonnement remplacé par une image de séparation. J’argumenterais qu’ici on différencie l’aspect que le site aura lorsqu’il sera chargé avec tous les éléments graphique et son aspect dans aucune illustration. Aucun aspect n’est handicapé par ces pratiques et l’utilisateur ne manque aucune informations d’un coté comme de l’autre.

Ce qui a le plus perturbé les utilisateurs au premier coup d’œil sur ce site est l’utilisation de l’espace par la mise en page. Le site a été pensé de manière à ce qu’il soit agréable à lire autant sur des petites résolutions que sur des énormes résolutions (type iMac).Ce qui a rebuté plus d’un utilisateur est le fait qu’on ne puisse pas avoir accès sur les résolutions 1024*768 aux citations. D’autres qui avaient des résolutions intermédiaires se lamentaient d’avoir des citations coupées.

Ce genre de commentaires sont anti-productifs et ne feront jamais avancer le web. Il faut replacer le projet dans un contexte. Ici on parle de la vitrine d’un site de création web et print et pas d’un site destiné à un client. Ici, l’aspect novateur est qu’aucune résolution ne souffre de la mise en page. Le site s’adapte très bien à tout type d’écran. Il est enfin plaisant pour des personnes ayant des résolutions de type 1900*1200 de naviguer sur des sites web.

On notera également l’utilisation de la police de caractère Corbel (police distribuée avec Vista) et qui est remplacée par l’Helvetica au cas où cette dernière n’est pas disponible.

Au rang de la technique

Le site utilise le CMS Expression Engine et est hébergé chez Engine Hosting qui met à disposition ce CMS de base. Je ne connais pas encore totalement cet outil, je suis dans la découverte mais il semble qu’il soit très souple et offre grand nombre de fonctionnalités.

Les pages pèse en moyenne 200 ko, les fichiers les plus lourds étant les images de fonds bien évidemment mais on a rien sans rien

Coté javascript, Duoh a fait le choix « tendance » de la librairie Mootools. Ce qui est dommage, c’est d’avoir utilisé une librairie javascript uniquement pour les effets d’images sur la homepage et pour les tooltips de la sidebar. Là encore, ça se discute…

Le site est strictement valide W3C sur le code XHTML. Seule la CSS ne valide pas mais est-ce bien grave ?

Conclusion

Veerle qui a réalisé la maquette et l’intégration html de Duoh propose sans cesse ses idées en matière d’illustrations ou de réalisations web et Duoh.com constitue, une fois de plus, une nouvelle source d’inspiration.

Je vous invite à consulter ces liens pour plus d’informations :

Du Parallax avec jQuery et CSS

Olivier G. — Fri, 06 Jun 2008 09:12:00 +0000

Le scrolling parallax est une technique qui consiste a créer un pseudo-effet de 3D sur un environnement en 2D. Si vous avez déjà pu jouer aux premières versions de Sonic The Hedgehog, vous comprendrez de quoi je parle. Je me suis amusé, encore une fois avec JQuery, a créer un effet parallax sur une page d’accueil d’un site existant.

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

On obtiendra avec jQuery ce type de code pour la div #frontvines

$("body").mousemove(function(event){
   $("#frontvines").css({ 
      backgroundPosition: (event.clientX * 1.1) + 'px 0px'
   });
});

Sur la première ligne, on cherche l’évènement qui indique que l’utilisateur bouge sa souris sur la page. Dans la partie fonction, on place en paramètre la position du curseur pour la réutiliser ensuite pour modifier les propriétés de styles associées à la balise comportant l’id #frontvines. Pour observer le résultat, rendez-vous sur la page dédié à cette démonstration disponible ici.

Pour aller plus loin, je me suis amusé, dans une seconde démonstration, à réutiliser une photo de paysage pour y introduire du parallax. Le principe reste le même, je vous laisse le soin de télécharger le script sur la page de la seconde démonstration, vous y trouverez la manière de procéder dans les commentaires du fichier Javascript.

Quelques liens en rapport avec Parallax :

Effet parallax à l’aide de CSS ou de Javascript

Utilisation de parallax sous Flash

Tutorial

Un tutos sur Sitepoint.com sur les effet parallax en CSS

Une carte Vélib grâce à l’API Google

Olivier G. — Fri, 02 May 2008 15:55:00 +0000

Si vous habitez Paris ou si vous ne faites qu’y travailler (comme moi), vous avez surement déjà eu l’occasion d’utiliser le service Vélib. Le site officiel ou d’autres sites indépendants comme Roulib.fr proposent des cartes permettant d’afficher le nombre de vélos disponibles ou encore le nombre d’emplacements restants. Je vous propose de faire la même chose grâce à l’API de Google Map.

Le principe est simple. On génère en local un fichier XML à partir du fichier distant présent sur le site officiel Vélib via PHP. Une fois cette étape effectuée, on a plus qu’à charger le fichier xml à l’aide de Javascript.

La page de démonstration du script utilise le framework jQuery mais vous pourrez trouver dans l’archive une version en javascript pur et une autre version associée à l’autre framework Prototype (Merci d’ailleurs à Sunny pour son aide )

Vous trouverez toutes les informations nécessaires dans les commentaires des différents fichiers javascript. N’oubliez pas d’aller générer une clé API Google Map sur le site dédié.

Pour pouvoir accéder à la carte et télécharger le script associé, rendez-vous sur la page de démo du script de carte Vélib. L’archive contient le script php pour générer les fichiers xml de la carte Vélib et des informations associées à chaque borne, les fichiers Javascript correspondants, la feuille de style CSS et les images requises.

Les hacks c’est pas bien !

Olivier G. — Thu, 24 Apr 2008 13:35:00 +0000

La tentation de recourir à des hacks est grande lorsque l’on commence à se lancer dans l’intégration d’un site web. Lorsque l’on s’aperçoit que la page développée s’affiche différemment d’un navigateur à l’autre, on se dit très souvent que c’est le navigateur (Internet Explorer pour ne pas le citer) qui interprète le code ou la feuille de style n’importe comment.

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n’est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l’épreuve du validateur W3C. Ce n’est pas en insérant des « _width: » ou encore de « %margin: » dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J’irais même jusqu’à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j’avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l’intérêt sans ces soucis de compatibilité. Même si j’affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d’un navigateur à l’autre et surtout, comment y remédier.

Les hacks que l’on pourrait éviter

Les images PNG

Prenons l’exemple du PNG. Beaucoup de webmasters s’extasient devant les possibilités de ce format d’image. L’utilisation des différentes couches alpha de transparence offre effectivement de nombreuses possibilités. Seulement voilà, ce format n’est pas pris en charge par les anciennes versions d’IE. Le hacker en herbe viendra me faire remarquer que l’on peut remédier à ce problème en utilisant la propriété CSS DX.Transform dans la feuille CSS ou dans un fichier .htc. Cette utilisation pose plusieurs soucis :

La feuille de style n’est pas valide W3C.
La feuille CSS n’est pas censée intégrer ce genre de propriétés ou faire appel à des fichiers chargeant du JavaScript.
Ce hack fait appel au moteur Direct X et selon la version, une simple image peut faire bugger le système d’exploitation, ce qui est, vous en conviendrez, un peu gênant…

Si vous souhaitez vraiment utilisez le PNG sur Internet Explorer, appelez plutôt un fichier JavaScript pur pour arriver à vos fins.

Parfois, un simple découpage de l’illustration au format GIF ou même une image JPEG placée intelligemment peut offrir au visiteur le même effet. Le PNG n’est pas une fin en soit.

Les pseudo-classes

Concernant les pseudo-classes, évitez également de passer par un fichier .htc dans votre feuille de style pour intégrer le :hover sur une balise div ou un :target sur une tout autre balise. Encore une fois, si cette utilisation est requise, passez par de pures fonctions JavaScripts.

Un problème de taille !

Arrêtons de nous prendre le chou avec les débats philosophiques sur le model box ou autre double-margin. Ces problèmes peuvent être aisément contournés. De plus, vous le verrez par vous même, quand on commence avec des hacks de placement ou d’ajustement de dimension, on en finit plus. Les hacks attirent les hacks

Comme vous pourrez le constater sur l’exemple suivant, les soucis de padding ou de margin peuvent parfois être causés par une simple propriété qui n’a pas lieu d’être. Pour être certain de contrôler pleinement votre mise en page, efforcez-vous de tester plusieurs méthodes de positionnement sans passer par les hacks et testez le résultat sur différents navigateurs. Il y aura toujours une méthode qui fasse plaisir à tout le monde

Pour résumer

Avant de se décider à utiliser un hack, il faut d’abord se questionner sur les autres alternatives valables. Dénigrer IE sans chercher plus loin n’amènera rien de bon. N’intégrez pas de fonctions JavaScripts dans votre feuille de style par le biais de fichiers .htc mais préférez un fichier JavaScript pur. N’abusez pas du format PNG et ne l’utilisez qu’en dernier recours. Privilégiez l’utilisation de « !important » aux notations bidons telles que « _width: » ou encore « %padding: ». Les hacks CSS c’est taboo, on en viendra tous à bout.

Quelques précisions s’imposent

Au regard de cet article, on peut se demander ce qui est à ranger dans la catégorie des hacks ou non. Si je voulais résumer, j’engloberais les éléments qui ne valident pas la feuille CSS mais voici une petite liste détaillées :

Dans un premier temps, j’inclus l’ensemble des propriétés mal orthographiées : « _width: », « %padding: » par exemple.
Les inclusions de fichiers .htc pour faire appel à du javascript par exemple.
Les propriétés CSS non reconnues par le W3C tel que « opacity ».
Les propriétés en double pour une même classe ou ID (deux propriétés de taille pour un même bloc).
Les appels à Direct X dans la feuille de style.

Et voici ce que je ne considère pas comme des hacks :

Les sélecteurs non reconnus par tous les navigateurs mais valides W3C tel que « div > p » (logique non?).
Les propriétés non reconnues par tous les navigateurs mais valides W3C. « min-height » en est un exemple.
Les feuilles de style appelées par des commentaires conditionnels (même si on s’en passerait bien…)

Récit d’une création de site internet (2ème partie)

Olivier G. — Mon, 24 Mar 2008 21:15:00 +0000

Après avoir achevé la maquette définitive du site, je suis ensuite passé au travail le plus intéressant, celui de l’intégration. J’ai commencé par comprendre mon document. Qu’est-ce que ma page raconte ? Qu’est-ce qu’elle laisse transparaitre. Je peux ainsi mettre des noms sur les différents éléments présents dans la page : menu général du haut, titre de niveau 1, menu latéral des rubriques… Cette étape va me permettre de visualiser les différentes balises les plus adaptées aux différentes parties du document et délimiter les différentes zones (header, footer…).

On peut avoir plusieurs interprétations d’une mise en page et toutes sont contestables. Chacun peut avoir son idée sur la question mais la démarche de conception du document XHTML de manière sémantique est déjà une grande étape. Le travail d’intégration n’est pas un simple collage du travail graphique mais une interprétation sémantique de la maquette graphique.

Comme le dit si bien Molly E. Holzschlag :

Dans le balisage, la sémantique traite du sens d’un élément et de la manière dont celui-ci est décrit dans son contenu.

Une fois cette réflexion effectuée, je me suis mis à la première mise en application de mon schéma de balises. J’ai construis mon document sans penser une seule fois à l’apparence qu’il pourra avoir ensuite. Je me suis contenté de reprendre les balises et de les organiser de manière logique. Cette méthode permettra à votre document d’avoir du sens avec ou sans style. La mise en forme graphique sera l’affaire des feuilles de style.

Voici un extrait du schéma adopté :

<h1>Ecole primaire et maternelle Notre Dame</h1>
<h2>Faches-Thumesnil</h2>
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">A propos</a></li>
	<li><a href="#">Contact</a></li>
</ul>
 
<h3>Vivre ensemble</h3>
<p>A l’école Notre-Dame située à Faches-Thumesnil, <strong>l’épanouissement de votre enfant est pour nous un devoir.</strong><br />
Au cours de sa scolarité, l’enfant aura accès à de nombreuses activités favorisant ainsi son bien-être au sein de l’école.</p>

Vous aurez sans-doute remarqué l’ajout d’une balise H2 qui n’était pas présente sur la maquette. Elle servira uniquement de balise utile au référencement et qui sera masquée sur le document visible par l’utilisateur.

Il est important d’éviter de surcharger le document en balisage superflu uniquement pour satisfaire ses besoins graphiques. On peut souvent se passer de calques (div). La balise UL peut être également utilisable pour créer un fond autour des différentes puces. L’objectif est d’avoir un document HTML qui se charge rapidement. Sur cette maquette, j’ai pu obtenir une mise en page comptant 124 lignes de balises XHTML là où j’aurais pu en faire le double si j’avais multiplié les DIV. En clair, il faut éviter tout balisage superflu.

Pendant l’étape de mise en code, j’ai régulièrement passé mon code au validateur W3C, on est jamais à l’abri d’une petite erreur.

Une fois mon code XHTML établi, j’ai pu me lancer dans la création de la feuille de style. Je me suis efforcé de bien organiser les différentes parties du document. Ainsi les propriétés relatives au header, corps de page, footer sont regroupées afin d’améliorer la lecture de la feuille CSS. Je n’utilise jamais de hacks dans mes feuilles de style. Au pire des cas (et vraiment en dernier recours), j’insère une feuille supplémentaire avec un commentaire conditionnel dans la page. Je pars du principe que toute mise en page peut être réalisée sans bidouilles. Cette démarche pose toutefois quelques limitations : L’absence de pseudo-classe :focus, la mise à disposition de la pseudo-classe :hover avec des possibilités réduites, l’utilisation d’images au format PNG transparentes.

Ces limitations, je les dépasse souvent à l’aide de JavaScript. On me reprochera de ce fait d’alourdir la page en scripts supplémentaires pour palier aux limitations de certains navigateurs et je répondrais que l’utilisation de fichier *.htc pour ajouter le :hover ou le :focus est aussi du JavaScript injecté différemment. Je profiterais même de cette évocation du fichier .*htc pour préciser que l’utilisation de cette méthode dans les feuilles de style pour intégrer des PNG lisibles sous Internet Explorer est une aberration. Cette pratique non-valide W3C va à l’encontre du principe même de la feuille CSS qui est sensée appliquer un style au document et non pas destinée à lancer des fonctions JavaScripts.

Vers la fin de l’intégration de ma maquette, je me suis permis quelques petites « folies » JavaScript sur la page afin de la rendre plus animée. Il faut toutefois éviter de devenir gadget !

Au final, je suis parvenu à réaliser une mise en page lisible sur l’ensemble des navigateurs couramment utilisés tout en ayant un code propre et une feuille de style dépourvue de hacks en tout genre.

Vous pouvez visualiser l’intégration de la maquette en vous rendant sur cette page.