Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

17.02.2009

Ne manquez pas de styles, affichez-les tous !

Je vous avais déjà incité à ne pas manquer de caractères, ce qui ne saurait vous arriver, aussi continué-je dans mes conseils superflus pour qu'il ne vous arrive pas de manquer de style.

L'essentiel de la mise en forme de votre blog Hautetfort est commandé par la feuille de styles, document de référence qui contient toutes les zones de chaque page méritant des attributs de style différents. Dans le code de la page HTML on indique « ceci est un titre de niveau 1 », et dans la feuille de styles on indique les paramètres applicables aux titres de niveau 1. Ce qui a pour énorme avantage de n'avoir qu'à intervenir sur la feuille de styles pour modifier l'apparence de toutes les pages d'un site.

Pour en savoir plus à propos des feuilles de styles, vous pouvez vous lancer dans l'exploration du site SelfHTML. Ce n'est peut-être pas le meilleur, même si je m'y réfère souvent.


Comment voir les styles ?


S'agissant de votre feuille de styles, une fois passé en « configuration avancée », il suffit d'aller visualiser le fichier du même nom. Mais pour les sites dont vous n'avez pas la clé ?

C'est le moment de vous présenter deux modules additionnels (add-on) de Firefox. Je n'ai rien contre les utilisateurs de Microsoft Internet Explorer, mais j'ai une nette préférence.


JS View

Ce module permet d'accéder à toutes les instrucions en javascript et à toutes les feuilles de styles appelées par la page courante. Il vous est donc loisible de visualiser le code et de vous en inspirer pour vos propres développements.

Attention, il ne suffit pas de copier la feuille de styles de ce blog pour que le votre ait la même apparence. J'ai une colonne de chaque côté de la zone centrale, peut-être pas vous. Et puis, il vous manquera des éléments comme des images qui sont stockées dans mes répertoires. Vous pourrez toujours bidouiller pour aller les récupérer, il n'y a pas de sécurisation particulière.

Plus d'information sur JSView sur le site des modules de Firefox.


CSS viewer

Ce module permet de voir quelle partie de la feuille de styles (quelle « classe ») est concernée par la zone que vous survolez avec la souris, et quels sont les paramètres.

L'imbrication des différentes classes rend parfois les choses un peu compliquées, et ce module vous aidera à vous y retrouver.

Plus d'informations sur CSS Viewer sur le site des modules de Firefox.


Pour un bricoleur comme moi, ces deux modules me sont vite devenus indispensables. Et si cela doit vous faire passer à Firefox, vous pourriez doublement tirer profit de cette note.

 

Commentaires

Je n'ose même pas imaginer que tu n'utilises pas "Firebug".
Vraiment LA extension à avoir (au point de me faire oublier que j'avais installé CSS Viewer, d'ailleurs).

Accessoirement, je recommande aussi HTML Validator, qui permet de vérifier qu'on a fait du bon boulot de codage.

Écrit par : Comme une image | 20.02.2009

Répondre à ce commentaire

Les commentaires sont fermés.