Trucs et astuces CSS

Ca fait maintenant quelques mois que je bosse sur un gros projet pour le boulot qui utilise beaucoup les technologies Web modernes à savoir CSS et Javascript (AJAX). Je dois avouer qu’au début j’ai beaucoup tâtonné pour avoir quelque chose qui marche bien sur tous les navigateurs du moment à savoir l’infâme Internet Explorer, Firefox et Safari. Oui, il ne me manque qu’Opéra, mais il ne représente pas à mes yeux une cible importante… Les cibles importantes sont pour moi les deux navigateurs par défaut de Windows et Mac OS X et enfin, Firefox pour avoir une vrai image multi plateforme (et oui, lui il tourne quasiment partout !)…

Donc au fil de tous ces mois de travail acharné, j’ai fini par trouver quelques trucs et astuces pour écrire du code vraiment multi plateforme et pour contourner les bugs des navigateurs… J’ai décidé de vous les faire partager…

Premièrement, avant tout il faut avoir les bons outils. Ma méthode de travail consiste avant tout à avoir quelque chose qui tourne sous Firefox, puis de le tester, adapter sur Safari puis Internet Explorer. Le plus gros des bogues de mon code est donc trouvé sous Firefox. Ça tombe bien, car c’est celui qui offrent les meilleur outils de développement Web !

Firefox :

Sous Firefox, j’utilise juste deux extensions :

  • Web Developer : Je connais et j’utilise cette extension depuis déjà pas mal de temps. Il s’agit qu’une barre d’outils qui permet principalement de débugger les problèmes de CSS. Parmi les fonctions pratiques, on retrouve une édition en direct des feuilles de styles (via le menu CSS/Editer), un affichages d’info sur la pages (contours des calques, information de tailles, id et styles, etc.) et enfin, une fonction pour redimensionner la fenêtre automatiquement à la taille que l’on souhaite (et oui, il ne faut pas perdre de vue que beaucoup de gens ont encore des écran en 1024×768, voir 800×600… Les pauvres !). Bref, Web Developer est une extension pas mal du tout… Mais il y a mieux… Bien mieux
  • Firebug : c’est le couteau suisse du développement avec Firefox. Cet outil offre 3 petits onglets en bas de la fenêtre du navigateur. Le premier onglet une console javascript qui permet d’afficher les erreurs et les événements javascript, mais aussi d’évaluer des expressions javascript dans le contexte de la page. Le deuxième onglet est un debuger assez complet qui permet de placer des points d’arrêts, d’inspecter les variables et avancer dans le programme en pas à pas. Le dernier onglet est un inspecteur similaire au DOM inspector de livré par défaut avec Firefox, mais qui possède quelques fonctions pratiques comme la présentation de l’arbre DOM comme du code source, la possibilité de trouver un élément dans l’arbre en le pointant avec la souris, ou encore la possibilité de modifier les attributs des noeud à la volée. Cet outil est indispensable pour débugger vos pages dynamiques !

Safari :

Sous Safari, c’est un peu plus dur de trouver des outils corrects (attention, avant que l’on me tape sur les doigts, par correcte j’entends, je n’ai pas trouvé d’outils que j’ai pu utiliser de façon efficace). Il existe un menu « debug » que l’on peut activer avec la commande suivante :

Source : MacOSXHints
Il n’y a pas grand-chose de phénoménal dans ce menu sur la version actuelle de Safari mais on retiendra quand même un accès au DOM et une console javascript.

Le plus intéressant viens quand l’on installe la dernière version de WebKit (on peut l’installer en parallèle de son installation normale). La nightly build vous fournira en plus un inspecteur et un deboggueur javascript. Le problème, c’est qu’a chaque fois que j’ai eu besoin de trouver la cause d’un dysfonctionnement de mon code sous Safari, dès que j’ai lancé mon programme avec la nightly build de WebKit, mon bug avait disparu… Et oui, ça veut dire que les développeurs qui travaillent sur WebKit (pas forcément chez Apple, car c’est un projet OpenSource dérivé de kHTML) corrige quand même les bugs ! Mais ça ne m’aide pas a faire marcher mon projet sur la version actuelle de Safari… Donc grosso modo, pour trouver un problème sous Safari version actuelle, vous êtes seul !!!

Internet Explorer :

Enfin, il reste Internet Explorer…
Pour lui, il y a deux outils fournis par Microsoft :

Personnellement, je n’utilise que le Developer Toolbar et surtout, j’utilise l’icône qui indique une erreur de script dans la barre de statuts…

Voilà, avec ça vous devriez être paré pour développer vos applications web 😉 Bien sur, si vous aussi vous avez des petits outils pratiques, n’hésitez pas a m’en faire profiter 😉

Laisser un commentaire

Votre adresse ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.