Il y a maintenant quelques mois nous avons fait la découverte d’une extension Firefox extrêmement utile, surtout pour les accros de l’édition de CSS dans Firebug. Je prends aujourd’hui un peu de temps pour vous la faire découvrir car je pense qu’elle va faire des heureux !

Comme de nombreuses personnes, et je suppose que vous en faîtes partie, nous utilisons très fréquemment Firebug à l’agence, notamment pour modifier « en direct » les feuilles CSS de nos sites internet. Plus aucun doute à ce sujet, c’est une technique vraiment pratique et surtout terriblement rapide.

Le seul point négatif qui venait un peu entacher l’aspect productif de la chose était l’impossibilité de pouvoir sauvegarder les modifications effectuées dans Firebug directement sur les fichiers .css  présents sur le serveur, et bien avec FireFile, c’est désormais possible !

FireFile, qu’est-ce-que c’est ?

Éditée par Tobias Strebitzer, FireFile est une extension Firebug qui va vous permettre d’enregistrer vos fichiers CSS édités avec Firebug directement sur votre serveur. Pour nous, cette extension représente un chouette coup de pouce pour la productivité, je ne comprends d’ailleurs pas pourquoi cette extension n’ai pas réellement percée et soit si difficile à dénicher sur Google (même en tapant directement « FireFile » !), nous sommes tombés dessus totalement par hasard, pour notre plus grand plaisir !

Comment le faire fonctionner ?

1 Installez le plugin FireFile pour FireBug (Je sais, ça commence à faire beaucoup de fire !).

2 Uploadez sur votre serveur le script firefile.php (à télécharger ici) dans le répertoire de votre choix, par exemple /www/firefile/firefile.php.

3 Ouvrez Firefox et rendez vous sur la page du script (ex : http://www.mon-site.com/firefile/firefile.php).

4 Choisissez un nom d’utilisateur et un mot de passe et cliquez sur « Apply ».

5 En ouvrant Firebug, un message de confirmation apparait, vous demandant d’ajouter le site courant dans les sites enregistrés par votre FireFile, acceptez.

Hop, ça y est ! Vous pouvez maintenant essayer de modifier une ligne de CSS dans Firebug et vous verrez apparaître une petite flèche bleue dans le coin supérieur droit, cliquez dessus et votre nouveau CSS sera envoyé sur le serveur, n’est-ce pas magique ?

Vous pouvez maintenant éditer les CSS de votre site internet directement dans Firebug et ce depuis n’importe quelle page. Mais FireFile ne s’arrête pas là, il propose également quelques options assez sympathiques.

Comment configurer FireFile ?

Un petit clic sur la flèche à droite de l’onglet FireFile affichera la liste des options activables de l’extension, elles sont peu nombreuses mais peuvent être assez pratiques.

• Enable notifications affiche les notifications de réussite ou d’échec lors de l’envoi des CSS vers votre serveur.
• Switch to CSS on inspect affiche automatiquement l’onglet d’édition du CSS lorsque vous utilisez la fonction « Inspection » de Firebug.
• Display CSS Comments affiche les commentaires contenus dans vos feuilles de styles directement dans l’onglet CSS de Firebug.
• Remove empty CSS styles supprimera toutes les propriétés CSS vides lors de l’envoi sur le serveur.
• Autocomplete CSS3 active la fonctionnalité d’auto-complétion du CSS3, j’y reviendrai plus précisément ensuite.
• Compress CSS compressera le fichier CSS avant l’envoi. Attention, cette fonctionnalité est utile pour alléger le poids de vos feuilles de style mais rendra la modification de votre CSS extrêmement difficile en dehors de Firebug puisque votre fichier sera compressé en une seule ligne, sans aucun espace. Prévoyez donc d’activer cette fonctionnalité une fois le site terminé et la copie des CSS « propres » effectuée.
• Enable debug mode qui, vous l’aurez compris, active le mode débogage du plugin.
• Activable dans la liste des sites enregistrés dans Firefile, il existe également une option de sauvegarde automatique à chaque changement dans vos CSS mais je vous déconseille de l’activer, elle peut vite semer le chaos.

Compatibilité CSS3

Pour ceux qui ont l’habitude de faire un peu de CSS3, vous savez à quel point il est fastidieux de devoir dupliquer chacune de ses propriétés sur les différents des navigateurs prenant en charge le CSS3. Sachez que FireFile apporte une solution à cette contrainte en se proposant de convertir automatiquement vos lignes de CSS3 grâce à l’option Autocomplete CSS3.

Prenons l’exemple d’un box-shadow, vous ajoutez une ligne de CSS via Firebug semblable à celle-ci :

#test {-moz-box-shadow:10px}

Si l’option Autocomplete CSS3 de FireFile est activée, lors de l’envoi du fichier, la ligne sera automatiquement convertie en la portion de code suivante. Rendez vous compte du temps que cela peut vous faire gagner.

#test {
box-shadow:10px;
-moz-box-shadow:10px;
-webkit-box-shadow:10px;
-khtml-box-shadow:10px;
}

Avertissement : Depuis les versions 4 et 5 de Firefox (et les versions de Firebug qui vont avec) les propriétés CSS3 -moz sont automatiquement converties en propriété CSS3 standards (à savoir, suppression du préfixe -moz) ce qui semble poser problème à FireFile pour la détection des CSS3. J’ai contacté récemment le créateur de l’extension pour lui faire part de ce problème, il m’a affirmé qu’il allait créer un fix corrigeant ce problème avant la fin juillet. En attendant, la fonction d’auto-complétion du CSS3 ne fonctionnera qu’avec les versions de Firefox inférieures ou égales à Firefox 3.6. Vous êtes avertis !

À vous de jouer maintenant !

Voilà, j’en ai fini pour cet article « découverte » ! J’espère que comme nous vous apprécierez ce plugin à sa juste valeur et qu’il vous fera gagner du temps à vous aussi. Si vous avez un avis à donner, n’hésitez pas !