On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Voici une petite astuce intéressante pour les débutants.
    Comme j’ai commencé il n’y a pas très longtemps avec MODx et même le XHTML et le CSS, ceci est ma première contribution pour la communauté. smiley

    Lorsqu’on édite le CSS pour travailler la mise en forme du site, ça devient vite assez fastidieux de faire sans arrêt un aller et retour entre l’éditeur de texte, le soft pour FTP et le navigateur pour vérifier tout ça. Vous ne trouvez pas ? Enfin moi j’aime pas trop.

    J’ai trouvé une petite astuce qui me simplifie considérablement l’existence:
    Je ne met dans le fichier CSS externe que les balises dont je suis vraiment satisfait.
    Tout le reste, je le garde temporairement dans le header du template. Entre des balises comme celles-ci:

    <style type="text/css">
    /* ici vos balises temporaires */
    </style>


    C’est fou le temps que je gagne avec cette astuce. Au lieu de passer par trois étapes, je reste toujours dans le navigateur!
    Il me suffit de sauver le template avec le manager et hop le CSS est mis à jour en même temps.
    En plus tout se passe dans le même fichier: CSS et le XHTML sont réunis ce qui s’avère pratique au moment du développement.
    A la fin quand vous êtes satisfait de la présentation, il ne vous reste plus qu’à remettre tout ça dans le fichier CSS externe et voilà !

    En fait rien d’extraordinaire là dessous: il existe deux moyens de mettre du CSS dans un fichier XHTML: soit avec une reference à un fichier externe, soit directement dans le header. Là où ça devient intéressant, c’est que les deux se complètent. On peut donc avoir une partie du CSS dans le fichier et le reste qui est encore en développement dans le header...

    Bon courage pour votre site grin
    • Bonjour arketipbe,

      merci pour ce retour. C’est toujours utile de savoir comment les autres travaillent... smiley

      Le seul souci de cette technique est que tu ne bénéficie pas de la coloration syntaxique d’un véritable éditeur de texte.

      Pour simplifier le travail d’intégration html/css, on peut également travailler en local. Cela évite les transferts de fichiers par FTP.

      Un autre technique est d’utiliser l’extension Firebug pour éditer en live le CSS. Une fois les modifications faites, il suffit de récupérer le CSS et de l’insérer dans la feuille de style. Très pratique quand il s’agit de tester rapidement différents codes... wink
        Intégrateur web freelance
      • Salut,

        on peut tout aussi bien éditer directement le fichier css sur le serveur, ce qui évite les uploads incessants.
        Sur Mac CssEdit par exemple gère très bien la chose.

        :-)
          Made with MODx : [url=http://www.copadel.com]copadel, fruits et l
        • Effectivement, c’est le plus simple. wink

          D’ailleurs, je travaille en ce moment avec la beta d’Espresso (sorte de Coda-like lancé par les créateurs de CSS Edit).
          L’édition des fichiers sur serveur va être intégrée dans la prochaine mise à jour (dans qq jours tout au plus). smiley
            Intégrateur web freelance
          • Incroyable firebug... pourquoi je n’ai pas installé cette extention plus tôt ?!
            Tout est interractif...quelle facilité phénoménale.
            Ca m’aurait fait gagné des heures et des heures depuis un mois.
            Merci smiley
            • Firebug est un add-on indispensable pour le développement web, autant que Webdevelopper et YSlow... wink
                Intégrateur web freelance
              • Il y a une chose que j’ai oublié de signaler:

                Il y a encore un petit avantage à mettre une partie du CSS dans le header du template:
                Ca permet aussi de se servir des TV (template variables) avec du CSS.
                C’est vrai que ça ne sert pas tout le temps mais c’est quand même pratique de pouvoir l’utiliser à l’occasion.
                Je m’en suis servi une fois sur mon site ce qui m’a permis de simplifier le CSS et les templates.

                Voilà juste au cas où vous n’y auriez pas pensé smiley
                • pour accélérer le développement css, il est aussi possible d’utiliser un framework css comme par exemple Tripoli mais il en existe plein d’autres...

                  Sinon pour l’édition, Aptana permet aussi de travailler sur le serveur, ce qui est bien pratique.. et gratuit smiley
                    CTRL+SHIFT+U - Clear Cache
                    CTRL+SHIFT+H - Hiding Heft Panel
                    CTRL+SHIFT+N - Fast Create Resource
                    CTRL+ALT+P - Preview Recource (in edit resorce window)
                    CTRL+ALT+S - Save