mozilla
Vos résultats de recherche

    Propriétés raccourcies

    Définition

    Les propriétés raccourcies sont des propriétés CSS qui permettent de définir les valeurs de plusieurs propriétés CSS simultanément. En utilisant une propriété raccourcie, un développeur Web peut écrire des feuilles de styles plus conscices et souvent plus lisibles, économisant temps et énergie.

    La spécification CSS définit des propriétés raccourcies pour grouper la définition des propriétés agissant dans un même thème. P. ex. la propriété CSS background est une propriété raccourcie qui permet de définir les valeurs des propriétés background-color, background-image, background-repeat, et background-position. De manière similaire, les propriétés les plus courantes relatives aux polices peuvent être définies en utilisant la propriété raccourcie font, et les différentes marges autour d'une boîte peuvent être définies en utilisant la propriété raccourcie margin.

    Cas limites complexes

    Bien qu'elles soient très pratiques à utiliser, il existe quelques cas limites qu'il faut garder à l'esprit lors de leur utilisation :

    1. Une valeur qui n'est pas spécifiée est définie à sa valeur initiale. Ceci peut sembler anecdotique, mais cela signifie que les valeurs précédemment définies sont annulées. Ainsi :
      background-color: red;
      background: url(images/bg.gif) no-repeat top right;
      
      Ne définit pas la couleur d'arrière-plan à red mais à la valeur par défaut de background-color, transparent, puisque la seconde règle est prioritaire.
    2. Seules les propriétés individuelles peuvent hériter. Puisque les valeurs manquantes sont remplacées par leurs valeurs initiales, il est impossible de permettre l'héritage depuis des propriétés individuelles en les omettant. Le mot-clé inherit ne peut être appliqué qu'à une propriété, mais seulement comme un tout, pas en tant que mot-clé pour une valeur ou une autre. Ceci signifie que la seule manière de faire hériter une valeur particulière est d'utiliser la propriété longue et le mot-clé inherit.
    3. Les propriétés raccourcies tentent de ne pas forcer un ordre particulier sur les valeurs de la propriété qu'elles remplacent. Si ceci fonctionne bien lorsque les valeurs sont de types différents, puisque l'ordre n'a pas d'importance, cela ne fonctionne pas aussi facilement lorsque plusieurs propriétés ont des valeurs identiques. La gestion de ces cas peut être regroupée dans plusieurs catégories :
      1. Les propriétés raccourcies en relation avec les bords d'une boîtes, telles que border-style, margin ou padding, utilisent toujours une syntaxe de 1 à 4 valeurs représentant ces bords :
        border1.png La syntaxe à 1 valeur : border-width: 1em — L'unique valeur représente tous les bords
        border2.png Le syntaxe à 2 valeurs : border-width: 1em 2em — La première valeur représente la verticale, c'est-à-dire les bords supérieurs et inférieurs, tandis que la seconde valeur représente l'horizontale, c'est à dire les bords droit et gauche.
        border3.png La syntaxe à 3 valeurs : border-width: 1em 2em 3em — La première valeur représente le bord supérieur, la seconde, les bords gauche et droit, et la troisième valeur le bord inférieur.
        border4.png

        La syntaxe à 4 valeurs : border-width: 1em 2em 3em 4em — Les quatres valeurs représentent respectivement les bords supérieur, droit, inférieur et gauche, toujours dans cet ordre, c'est à dire le sens horaire débutant en haut.

      2. De manière similaire, les propriétés raccourcies gérant les coins d'une boîte, telles que border-radius, utilisent toujours une syntaxe de 1 à 4 valeurs représentant ces coins :
        corner1.png La syntaxe à 1 valeurs : border-radius: 1em — L'unique valeur représente tous les coins.
        corner2.png La syntaxe à 2 valeurs : border-radius: 1em 2em — La première valeur représente les coins supérieur gauche et inférieur droit, la seconde les coins supérieur droit et inférieur gauche.
        corner3.png La syntaxe à 3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin supérieur gauche, la seconde les coins supérieur droit et inférieur gauche, la troisième valeur représente le coin inférieur droit.
        corner4.png

        La syntaxe à 4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement les coin supérieur gauche, supérieur droit, inférieur droit et inférieur gauche. Toujours dans cet ordre, c'est-à-dire le sens horaire débutant par le coin supérieur gauche.

    Propriétés d'arrière-plan

    Un arrière-plan avec les propriétés suivantes :

    background-color: #000;
    background-image: url(images/bg.gif);
    background-repeat: no-repeat;
    background-position: top right;

    Peut être raccourci à seulement une déclaration :

    background: #000 url(images/bg.gif) no-repeat top right;

    (la forme raccourcie est en réalité équivalente aux propriétés longues ci-dessus plus background-attachment: scroll et, en CSS3, certaines propriétés additionnelles.)

    Propriétés des polices

    Les déclarations suivantes :

    font-style: italic;
    font-weight: bold;
    font-size: .8em;
    line-height: 1.2;
    font-family: Arial, sans-serif;

    Peuvent être raccourcies à la déclaration suivante :

    font: italic bold .8em/1.2 Arial, sans-serif;

    Cette déclaration raccourcie est en réalité équivalente aux propriétés longues ci-dessus plus font-variant: normal et font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

    Propriétés des bordures

    Avec les bordures, la largeur, la couleur et le style peuvent être simplifiés à une déclaration. Par exemple :

    border-width: 1px;
    border-style: solid;
    border-color: #000;

    Peut être écrit comme :

    border: 1px solid #000;

    Propriétés de marges extérieures et intérieures

    Les versions raccourcies des valeurs de marge intérieure (padding) et extérieures (margin) fonctionnent de la même manière. Les déclarations CSS suivantes :

    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;

    sont équivalents à la déclaration suivante (à noter que les valeurs sont dans le sens horaire depuis le haut : haut, droite, bas puis gauche)

    margin: 10px 5px 10px 5px;

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale