Inspecter son code (2)

4 Octobre 2012

Que de temps j'ai perdu à chercher comment modifier une couleur ou une police sur son blog ! J'ai présenté il y a peu comment inspecter son code (voir lien en bas de page) et j'ai depuis beaucoup utilisé cet outil offert par les navigateurs pour modifier les thème des blogs que je teste sur la nouvelle plateforme.

Je rappelle le principe sur Chrome ou Firefox : clic droit sur un élément, clic sur examiner ou inspecter l'élément. Voilà ce que ça donne avec le titre de ce blog.

Comment inspecter un élément du code

Dans la partie droite se trouvent les morceaux de code CSS qui correspondent au style du titre. Certaines lignes sont barrées. C'est dû au principe du CSS qu'on peut résumer ainsi.

Le style de l'élément A définit le style de l'élément B si que B est dans A... Mais on peut définir un style pour l'élément B qui annule alors le style de l'élément A pour B.

Ainsi, dans l'exemple ci-dessus, la police du body (tout le blog) - "Helvetica Neue" - n'est pas celle du titre (elle est barrée) car la police 'TeXGyreAdventor' a été choisie pour h1 (élément titre).

Une personne qui n'aurait pas réalisé ce thème et voudrait modifier le titre changerait dans le CSS l'élément h1.

Le style d'un élément n'hérite pas d'une seule balise. Vous remarquerez que les deux premières lettres du titre du blog sont en orange. Grâce à l'inspecteur, on retrouve à droite le code HTML du titre :

<header id="mainheader">
    <h1>OB<span>New Plateform</span></h1>
</header>

Partie "OB"

La couleur orange des deux premières lettres vient de #mainheader h1 ; les deux lettres OB héritent de la police de h1.

Style de OB

Partie "New Plateform"

Pour les autres lettres, comme elles sont comprises dans la balise span, elles ont comme couleur celle de #mainheader h1 span (la couleur de #mainheader h1 est barrée) mais toujours la police de h1 parce qu'aucune police n'a été définie pour #mainheader h1 span. C'est le plus petit qui gagne pour une fois.

style de NewPlatform

En cas de doute sur le style d'un élément, c'est un moyen rapide et pratique de savoir de quoi il en retourne.

Inspecter son code -

Débutant en HTML, je viens de découvrir un outil très intéressant sur les navigateurs Mozilla et Chrome (je n'ai pas testé les autres). Lorsqu'on modifie son code ou même avant de la modifier...

http://photonautesassocies.overblog.com/inspecter-son-code