Pages Navigation Menu

(il y a un jeu de mots)

Comment éditer le CSS ?

cssedit

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.

10 Commentaires

  1. 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.

  2. 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?

  3. je n’ose pas essayer,j’ai peur de faire des bétises et de me retrouver avec tout à refaire,en plus je ne sais pas si çà fonctionne avec mon template!

  4. 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.

  5. je suis un peu étonné par les craintes de perdre le site existant. Je teste toujours tout sur un serveur local (apache) installé sur mon PC et avant d’écraser les fichiers chez l’hébergeur je prends une copie de sauvegarde.

  6. oui j’ai une sauvegarde! mais j’ai aussi un ordi qui bug!

  7. Bonjour Marie,
    pour contourner ce genre de pb, tu sauvegardes sur un cd.

  8. @Artepp, quelques suggestions sur le site :
    – je n’avais pas vu qu’on pouvait changer d’ambiance couleur, il faut aller le chercher tout en bas. Pourquoi ne pas mettre des petits carrés couleur en haut dans un coin pour changer d’ambiance ?
    – ce changement de couleur ne marche pas sur la page info
    – il faut désactiver snap preview pour le survol de la photo, qui affiche le lien vers la photo précédente. sur le site, il y a les instructions pour le désactiver pour les liens internes.
    – j’aime bien la page collage, même si le survol n’est pas très précis. Il faudrait un bouton pour raffraichir le collage qui soit plus évident que ‘nouveau collage » dans la barre de menu
    – et bravo pour les pictos photofloue et la vie en gris…

  9. j’oubliais, les photos sont pas mal non plus ;)

  10. 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) :)

Qu'en pensez-vous ?

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>