1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: Propriétés raccourcies
slug: Web/CSS/Shorthand_properties
tags:
- CSS
- Guide
- Reference
translation_of: Web/CSS/Shorthand_properties
original_slug: Web/CSS/Propriétés_raccourcies
---
<div>{{CSSRef}}</div>
<p><dfn>Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité</dfn>.</p>
<p>La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (<em>font</em>) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.</p>
<h2 id="Quelques_cas_aux_limites_épineux">Quelques cas aux limites épineux</h2>
<p>Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :</p>
<ol>
<li>Une valeur qui n'est pas définie pour la propriété raccourcie <strong>sera réinitialisée avec sa valeur initiale</strong>. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi :
<pre class="brush:css notranslate">background-color: red;
background: url(images/bg.gif) no-repeat top right;
</pre>
ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} <code>transparent</code> car la deuxième déclaration prend le pas sur la première.</li>
<li>L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé <code>inherit.</code></li>
<li>Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes :
<ol>
<li>Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :
<table>
<tbody>
<tr>
<td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
<td><em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique s'adresse à tous les côtés.</td>
</tr>
<tr>
<td><img alt="border2.png" src="/files/3647/border2.png"></td>
<td><em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.</td>
</tr>
<tr>
<td><img alt="border3.png" src="/files/3648/border3.png"></td>
<td><em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.</td>
</tr>
<tr>
<td><img alt="border4.png" src="/files/3649/border4.png"></td>
<td>
<p><em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).</p>
</td>
</tr>
</tbody>
</table>
</li>
<li>De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :
<table>
<tbody>
<tr>
<td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
<td><em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur s'applique à tous les coins.</td>
</tr>
<tr>
<td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
<td><em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.</td>
</tr>
<tr>
<td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
<td><em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.</td>
</tr>
<tr>
<td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
<td>
<p><em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).</p>
</td>
</tr>
</tbody>
</table>
</li>
</ol>
</li>
</ol>
<h2 id="Les_propriétés_concernant_larrière-plan">Les propriétés concernant l'arrière-plan</h2>
<p>Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :</p>
<pre class="brush:css notranslate">background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;</pre>
<p>On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :</p>
<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre>
<div class="note">
<p><strong>Note :</strong> Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute <code>background-attachment: scroll</code> et d'autres propriétés avec CSS3).</p>
</div>
<p>Pour plus d'informations, voir {{cssxref("background")}}.</p>
<h2 id="Les_propriétés_liées_à_la_police_font">Les propriétés liées à la police (<em>font</em>)</h2>
<p>Les déclarations suivantes :</p>
<pre class="brush:css notranslate">font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;</pre>
<p>Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :</p>
<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
<div class="note">
<p><strong>Note :</strong> Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera <code>font-variant: normal</code> et <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
</div>
<h2 id="Les_propriétés_liées_aux_bordures">Les propriétés liées aux bordures</h2>
<p>Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,</p>
<pre class="brush:css notranslate">border-width: 1px;
border-style: solid;
border-color: #000;</pre>
<p>peut être écrit ainsi :</p>
<pre class="brush:css notranslate">border: 1px solid #000;</pre>
<h2 id="Les_propriétés_liées_à_la_marge_et_au_remplissage_padding">Les propriétés liées à la marge et au remplissage (<em>padding</em>)</h2>
<p>Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (<em>padding</em>) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :</p>
<pre class="brush:css notranslate">margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;</pre>
<p>sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à <em>trouble</em>) :</p>
<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
<h2 id="La_propriété_raccourcie_universelle">La propriété raccourcie universelle</h2>
<p>CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.</p>
<p>Voir l'article sur <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
<li>Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
</ul>
|
