Comment éditer le CSS ?
Quelques logiciels dédiés à l’écriture des fichers CSS montent en puissance et atteignent aujourd’hui la maturité. Ils permettent d’éditer en wysiwyg les feuilles de style des sites et visualiser immédiatement l’effet de leur modification. Ce n’est néanmoins pas toujours aussi simple que cela, surtout si le site est basé sur le php comme la plupart des blogs et photoblogs.
Le système que j’ai retenu est le suivant (je travaille sur Mac), après diverses expérimentations :
- J’installe le système de publication (pixelpost, wordpress,…) en ligne là où il doit être.
- J’utilise Cyberduck (gratuit) pour voir les fichiers qui sont en ligne, et CSSEdit ($30) pour l’édition des CSS (copie d’écran plus haut).
- Je sélectionne le fichier css (style.css) dans Cyberduck et je fais “ouvrir avec” , et je choisis CSSEdit. Chaque modif dans CSS Edit est sauvegardée dans le fichier en ligne directement, je peux donc voir les modifs en rechargeant la page dans mon navigateur, ou visualisant la page dans le navigateur intégré à CSSEdit.
- Je procède de la même manière avec les fichiers php et TextWrangler (gratuit).
Il est possible de faire cela en local directement sur le serveur web intégré au mac avec mamp, mais je ne l’ai pas expérimenté.
CCSEdit aide beaucoup à l’écriture des feuilles de style — ou plus souvent à la modification de modèles. Au-delà de la visualisation, il propose un système de cases à cocher qui produit le script écrit.
Je fais également appel à une extension de Firefox vraiment indispensable quand on développe des sites web : Webdeveloper. Elle permet de visualiser et tester les modifications de la feuille de style de tout site web affiché dans Firefox.
N’oublions pas non plus les éditeurs web classiques comme Dreamweaver ou Golive, qui gèrent les CSS en wysiwyg.
Pas d’expérience personnelle sur PC (mais les commentaires sont là pour recueillir votre expérience). J’ai testé le logiciel CSS Stylemaster (mac/pc, assez proche de CSSEdit qui l’a emporté car deux fois moins cher).
CSSEdit et Stylemaster sont téléchargeables en versions d’essai.
Commentaires
D'accord, pas d'accord ? Une suggestion, une idée ?
N'hésitez pas à laisser un commentaire et participer à la discussion.
10 réactions à propos de Comment éditer le CSS ?.
Décidément, les outils que tu nous propose sont vraiment excellent. Car grâce à Webdeveloper, à Stylemaster et à Kuler, j’ai (non sans mal) pu modifier mon template et le personnaliser comme je le souhaitais. Merci à toi pour toutes ces précieuses ressources. J’ai encore deux ou trois modifs à faire, mais déjà, je trouve que cela commance à “tenir la route”. Qu’en penses-tu? Et qu’en pense les photoflooters?
En réalité, je pense que cela fonctionne avec tous les templates. Car, ce n’est pas le fichier “image_template.html” que tu vas modifier, mais le fichier “. css” qui ce trouve dans le cas de somethingblue2 aux côtés de ton fichier image_template. C’est lui qui gère l’affichage de l’ensemble de ton site, à savoir toutes les pages html que tu pourrais avoir à afficher.
Bonjour Philippe
Et merci pour tes remarques et suggestions!!!
Les petits carrés de couleur, j’y avais pensé et cela va être la prochaine étape. Pour la page info, j’l'avais po vu.
En fait, au risque d’en choquer quelque-uns, mon blog est devenu une sorte de labo sur lequel j’expérimente tout un tas de trucs et gadgets. Cela me permet d’apprendre pour permettre à ceux qui le souhaitent de bénéficier de mon expérience en éliminant pas mal d’inconvénients…
(Sympa, le petit com sur les photos) 
9 février 2007
9:45
J’utilise Webdeveloper aussi, c’est vraiment indispensable pour comprendre ce qui ne va pas sur une page.
Pour utiliser les éditeurs avec sa page dynamique, il suffit d’utiliser la fonction “Enregistrer sous” de son navigateur pour l’obtenir en HTML. On peut ainsi facilement travailler la CSS.