09 juin 2006

Firefox et l'extension Web Developer : CSS (1)

Je fais du développement PHP et je dois quelque fois modifier du CSS existant. Je ne sais pas du tout quels sont les fichiers et styles utilisés et je n'ai pas vraiment envie de faire un grep sur tous les fichiers CSS.
Une amie m'a conseillé d'utiliser une extension très pratique présente sur le navigateur Firefox : Web Developer

Comment faire pour savoir dans quel fichier et dans quel partie se situe tel div ou tel td ou tel form?

Mode d'emploi:

- Une fois l'outil téléchargé et installé, vous cliquez sur CSS --> View Style Information.
- Votre souris se transforme en une petite croix qu'il va falloir placer sur le style recherché,
- Au niveau de la barre d'état toute l'arborescence apparaît
- Puis cliquez une fois sur la zone en question,
- Une nouvelle fenêtre s'ouvre avec le fichier où se situe le style et la partie précise où il est défini.

Exemple :
Je vais sur ce site : http://www.spreadfirefox.com/

Je clique au niveau du menu sur Intro (cf.image 1),  et voilà ce que j'obtiens au niveau de la barre d'état (cf. image 2) et au niveau de la nouvelle fenêtre :
http://www.spreadfirefox.com/themes/spreadfirefox/style.css

a, .content a, *:link    (line 1082)
{
    color: rgb(0, 51, 153);
    text-decoration: underline;
}

a, .content a, *:link    (line 1082)
{
    color: rgb(0, 51, 153);
    text-decoration: underline;
}

a:hover, .content a:hover    (line 1089)
{
    color: rgb(51, 51, 51);
    text-decoration: underline;
}

#site-name, #site-name a, #header a    (line 189)
{
    color: rgb(255, 255, 255);
    text-decoration: none;
}

#header ul a    (line 220)
{
    float: left;
    display: block;
    padding-top: 4px;
    padding-right-value: 4px;
    padding-bottom: 4px;
    padding-left-value: 10px;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
    background-color: transparent;
    background-image: url(header_tab.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    -x-background-x-position: 0%;
    -x-background-y-position: -600px;
    -moz-background-clip: -moz-initial;
    -moz-background-origin: -moz-initial;
    -moz-background-inline-policy: -moz-initial;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

#header ul li:hover a    (line 229)
{
    -x-background-x-position: 0%;
    -x-background-y-position: -400px;
}


Copies d'écran
Image 1

firefox2
Image 2 : html>body>div #wrapper1>div #wrapper2>div #header .header>
div .headpadding>ul #primary>li>a


barreetat1

Posté par fatihaelh à 15:11 - CSS - Commentaires [0] - Permalien [#]

Commentaires

Poster un commentaire