Annonce

Réduire
Aucune annonce.

Coder plus proprement et plus rapidement

Réduire
X
 
  • Filtre
  • Heure
  • Afficher
Tout nettoyer
nouveaux messages

  • Tutoriel Coder plus proprement et plus rapidement

    Si vous êtes web designer, vous devez toujours faire en sorte de coder rapidement (le temps c’est de l’argent xD), et proprement pour la lisibilité du code. Aujourd’hui, vous apprendrez quelques ficelles en CSS pour écrire moins !

    Les couleurs:


    Les couleurs en informatique, sont formés de 6 chiffres hexadécimaux (de 0 à F) et commencent par une dièse (#).

    Pour les nuances de gris, c’est parfois le même chiffre qui est répété six fois.

    Formule longue

    Code:
    body { color: #333333; }
    Pour ces nuances, je vous montre une petite astuce, c’est de n’écrire que les 3 chiffres.

    Formule courte

    Code:
    body { color: #333; }
    Propriété « background »


    Il y a cinq propriétés pour modifier le fond d’un élément en CSS.

    Formule longue

    Code:
    #logo {
          background-color: #CCCCCC;
          background-image: url(logo.png);
          background-repeat: no-repeat;
          background-position: 10px 10px;
          background-attachment: scroll;
    }
    Formule courte

    Au lieu de passer tout son temps à écrire ces 5 propriétés, pourquoi ne pas tout taper en une seule ligne !

    Code:
    #logo { background: #CCC url(logo.png) no-repeat 0px 0px fixed; }
    Propriété « border »


    Ces propriétés sont faites pour ajouter une bordure à un élément.

    Formule longue

    Code:
    #example {
          border-width: 2px;
          border-style: solid;
          border-color: #333;
    }
    Formule courte

    Code:
    #example { border: 2px solid #333; }
    Propriétés « margin » & « padding »


    La propriété margin sert à ajouter une marge extérieur à un élément.

    Pendant que la propriété padding, elle ajoute une marge intérieur à un élément

    Formule longue

    Code:
    #example {
          margin-top: 5px;
          margin-right: 10px;
          margin-bottom: 10px;
          margin-left: 5px;
     
          padding-top: 5px;
          padding-right: 10px;
          padding-bottom: 10px;
          padding-left: 5px;
    }
    Formule courte

    Code:
    #example {
          margin: 5px 10px 10px 5px;
          padding: 5px 10px 10px 5px;
    sigpic

  • #2
    Juste histoire de tortiller du cul, mais sinon, bon article, merci
    Pendant que la propriété padding, elle ajoute une marge intérieur à un élément
    Il s'agit plutot de gérer la distance à la bordure de l'élément. Enfin, au final, on est d'accord, ca fait une marge intérieure...

    Commentaire


    • #3
      Merci pour l'astuce ....

      Commentaire


      • #4
        Si j'avais su ça plus tôt ! Merci pour ce gain de temps.
        Dernière modification par LawYor, 16 octobre 2011, 13h51.
        sigpic
        Notre Liberté Ne Doit Pas Être Limitée
        Pour Permettre A Une Minorité De S’enrichir

        Commentaire


        • #5
          il ne faut pas écrire merci on a ajouté un bouton pour ça
          sigpic

          Commentaire


          • #6
            C'est sympas, mais bon pour 3 lignes de plus je préfère restez au bonne vielle technique.

            Commentaire


            • #7
              Bon, je vais encore faire mon chiant et mon code nazi en rajoutant quelques petites remarques.

              Un feuille de style est plus propre dans le sens où elle est plus lisible. Certains exemples sont justifiés, typiquement le
              Code:
              margin: 5px 10px 10px 5px;
              Qui simplifie la lecture.

              En revanche, mettre des attributs très différents sur une même ligne, complexifie la lecture et rend le code global moins propre.

              Code:
              styleblock {background: #CCCCCC; font-color: #445444; border: ...}
              est moins lisible que

              Code:
              styleblock {
                        background: #CCCCCC; 
                        font-color: #445444;
                        border: ...
              }
              Qui plus est, il est toujours mieux de sauter une ligne après une acollade.
              Ca permet de mieux visualiser le contenu des accolades. Dans 99.9 % des cas, le
              Code:
              styleblock {...}
              est à proscrire au profis du
              Code:
              styleblock {
                          ...
              }
              Bien entendu, il est préférable d'écrire ses couleurs dès le départ sur un maximum d'octets. En effet, si vous avez commencé à écrire vos couleurs avec 3 lettres et que vous avez besoin d'une variante plus subtile, vous serez obligé de faire cohabiter les deux notations sur une même feuille de style...
              Bien sûr, ca n'est pas dérangeant plus que ca, c'est juste un peu moins propre...

              Dans tous les cas, il est préférable de faire un choix dans la présentation du code ET DE S'Y TENIR !

              Une fois le style écris proprement, on peut le passer dans des moulinettes qui vont condenser le style pour rendre le fichier à envoyer au client pus léger.

              Tortue 974.

              PS: Crotte, je viens de voir que le mec du dessus a fait un déterrage bidon (avec 5 fautes à la ligne).
              Dernière modification par TorTukiTu, 18 octobre 2013, 12h55.
              OxyGen Software
              Sécurité, développement, formations, informatique biomédicale
              [email protected]

              Commentaire


              • #8
                Hello,

                Je viens aussi y mettre mon petit grain de sel.

                Pour vraiment développer plus rapidement en CSS il existe des langages permettant de compilé le CSS.
                Les plus connus sont LESS et SASS.

                Qu'est-ce que du CSS compilé ?
                A vrai dire, vous allez développer vos CSS dans un langage qui ressemble énormément à du CSS, mais qui possède des nouveautés qui vont vous faciliter la vie. Suivant la configuration de votre compilateur, vous pouvez choisir de compilé votre CSS à chaque enregistrement de votre fichier, et vous pouvez choisir en sortie un CSS entièrement compressé et optimisé.

                Les avantages sont par exemple de pouvoir définir des variables ou des fonctions. Si vous voulez avec une bordure un peu plus foncée que la couleur de votre div il vous suffit de développer une fonction qui va recevoir une couleur et qui va la rendre plus foncée de 30%.

                Un compilateur SASS, LESS et COMPASS est sorti dernièrement. Son avantage est qu'il est entièrement gratuit et est multi-plateforme. Il se nomme Prepros.


                Cordialement.

                Commentaire

                Chargement...
                X