Le CSS facile avec Firebug Firebug est un module complémentaire Firefox qui vous simplifiera la vie pour toutes vos modifications de feuilles de style CSS.
|
Qu'est-ce que Firebug ?
Une brève présentation
Firebug est une extension pour navigateurs web. Il est optimisé pour fonctionner sur Mozilla Firefox et Google Chrome, mais une ersion plus légère existe pour les autres navigateurs.
Ce tutoriel doit vous aider à utiliser Firebug, et non à l'installer, et encore moins à vous apprendre ce qu'est le CSS. Pour télécharger Firebug, rendez vous ici pour Firefox, ici pour Chrome et là pour les autres navigateurs. La dernière version est différente des autres mais possède les fonctionnalités exposées dans ce tutoriel, donc vous ne devriez pas avoir de souci particulier.
Fonctionnement
A présent que Firebug est installé, il ne vous reste plus qu'à accéder à la page que vous voulez styler.
Prenons comme exemple la page d'accueil de l'Enae. Il va sans dire que vous comme moi n'avons pas accès à la structure de l'Enae, et c'est ce qui rend Firebug si intéressant : les modifications que nous allons faire ne sont que provisoires et subjectives.
Pour expliquer le fonctionnement en un mot : Firebug modifie la façon dont votre Firefox voit la page et non la page en elle-même. Le gros avantage : vous pouvez bidouiller votre site ou votre forum pendant des heures, quitte à faire complètement n'importe quoi, sans que vos utilisateurs se retrouvent à devoir supporter un site ou forum chaotique, voire inaccessible.
Au cœur de l'action
Bon, moins de parlotte, plus d'action ! Voyons comment ce module fonctionne.
Voir tout le code d'une page
Ouvrons ensemble la page d'accueil de l'Enae. Maintenant, jetez un œil dans le coin inférieur droit de votre navigateur : vous y verrez un insecte (eh oui, Firebug !). Cliquez dessus : un menu s'ouvre, qui devrait ressembler à ceci :
A gauche : le code HTML. A droite, le CSS (pour être sûr d'accéder à ces deux fenêtres, vérifiez que vous avez bien choisi les onglets HTML pour la partie de gauche et Style pour celle de droite).
Voir le code d'un élément en particulier
Vous pouvez inspecter le style associé au code que vous voulez en cliquant sur les petites croix à gauche des balises dans la partie HTML, puis en cliquant sur la balise. Le style s'affichera à droite.
Éditer le code d'un élément particulier
Vous pouvez également vouloir éditer le style d'un élément en particulier : un lien, une bannière, ou encore un cadre. Pour ce faire, cliquez sur "Inspecter" (ou "Inspect" si votre Firebug est en anglais) et promenez votre curseur sur la page. Vous remarquerez que Firebug encadre les éléments présents dans la page, vous pouvez ainsi choisir très facilement l'élément que vous voulez styler.
Prenons le mot "Érudits". Appliquez la méthode sus-citée, et lorsque la ligne est encadrée, cliquez dessus. Regardez dans la fenêtre de Firebug : voici le code HTML et le code CSS qui correspondent à cette ligne. Regardez le code CSS en particulier, et repérez le code couleur. Cliquez sur le code hexadécimal : il est éditable. Remplacez-le, par exemple, par #FF0080.
Miracle ! Les Érudits sont à présent rose bonbon !
Et l'astuce, c'est que si vous fermez la fenêtre de Firebug et que vous réactualisez votre page... Tout redevient normal !
Créer une ligne de code
Pour créer une ligne (par exemple si on n'a pas déclaré de couleur pour un élément), il vous suffit de faire un clic droit puis sélectionner "New property". Vous n'avez plus qu'à entrer votre code dans les cases correspondantes, par exemple, "color" dans celle qui s'ouvre en premier, puis, après avoir tapé le signe ":" qui vous fera passer dans la case suivante, le code de votre couleur, comme "#FF0022" par exemple.
Le mot de la fin
A présent, si vous avez besoin de changer du CSS (ou du HTML, car Firebug le permet également) facilement et rapidement sur votre forum ou site, il vous suffit de faire tous les changements en "direct", en voyant les changements s'opérer au fur et à mesure, et quand votre site ressemblera à ce que vous voulez, vous n'aurez qu'à sélectionner vos changements, et les copier-coller dans votre feuille de style.
Simple comme bonjour ! =)
