Télécharger le PDF du cours
Définition d’une notation CSS raccourcie ou notation « short hand »
Une notation raccourcie ou notation « short hand » ou encore « propriété raccourcie / short hand » correspond à une propriété à laquelle on va pouvoir passer les valeurs d’un ensemble d’autres propriétés et qui va donc nous permettre de définir de valeur de plusieurs propriétés d’un coup.
Nous avons déjà été amené à en rencontrer certaines dans ce cours comme par exemple la propriété border qui correspond en fait à la notation raccourcie des propriétés border-width, border-style et border-color et qui nous permet ainsi de définir d’un coup les valeurs pour ces trois propriétés pour un élément.
De manière générale, il va souvent être équivalent de préciser le comportement d’un aspect d’un élément HTML en utilisant une notation raccourcie ou en utilisant les propriétés long hand.
See the Pen Cours HTML CSS 3.9.1 by Pierre (@pierregiraud) on CodePen.
Cependant, les notations short hand possèdent certains avantages sur les notations long hand mais également certaines limites dans certaines situations que nous allons voir dans la suite de cette leçon.
L’ordre de déclaration des valeurs des propriétés short hand
Une propriété short-hand est une propriété à laquelle on va pouvoir passer les valeurs de plusieurs autres propriétés.
L’ordre de déclaration des valeurs ne va compter que dans le cas où la notation raccourcie va accepter plusieurs valeurs d’un type similaire et donc dans le cas où il peut y avoir ambiguïté sur ce à quoi doit s’appliquer une valeur.
Dans ce cas-là, il faudra respecter un ordre précis. J’indiquerai l’ordre de déclaration pour chaque notation raccourcie que nous allons étudier dans ce cours dans la leçon qui lui est relative.
Par exemple, la propriété raccourcie padding va permettre de définir le comportement des marges internes d’un élément HTML. Cette propriété est la version short hand des propriétés suivantes :
padding-top: définition de la marge interne supérieure ;padding-right: définition de la marge interne droite ;padding-bottom: définition de la marge interne inférieure ;padding-left: définition de la marge interne gauche.
Chacune de ces quatre propriétés va accepter le même type de valeur et notamment des valeurs de type « longueur » en px par exemple. Lors de la définition de padding, il faudra donc faire attention à l’ordre des valeurs pour définir la bonne taille pour chacune des marges internes.
Que se passe-t-il en cas d’oubli de déclaration de certaines valeurs dans les notations raccourcies ?
Avant tout, vous devez bien comprendre que nous ne sommes jamais obligés de définir le comportement de chacune des propriétés long hand dans la propriété short hand associée.
En d’autres termes, on va tout à fait pouvoir omettre de déclarer certaines valeurs dans nos propriétés raccourcies.
Ici, il va y avoir principalement deux cas à distinguer : le cas où il peut y avoir ambiguïté sur les valeurs et le cas où il n’y en a pas.
Dans le cas où il peut y avoir ambiguïté, la définition de la propriété raccourcie va nous indiquer son comportement. Prenons l’exemple de notre propriété padding par exemple. Si on omet une valeur, la propriété ne peut pas savoir à première vue si c’est la valeur de la marge haute, droite, basse ou gauche que l’on ne souhaite pas définir.
Pour gérer ce genre de situations, des règles ont donc été définies lors de la création de la version raccourcie. Dans le cas de padding, par exemple, si on ne passe que trois valeurs alors la deuxième va s’appliquer à la fois à la marge droite et à la marge gauche.
See the Pen Cours HTML CSS 3.9.2 by Pierre (@pierregiraud) on CodePen.
Dans le cas où il n’y a pas d’ambiguïté, ce sont les valeurs par défaut des propriétés relatives qui vont être utilisées. Cela signifie que les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale.
Faites bien attention donc ici car omettre des valeurs dans une propriété raccourcie va tout de même définir le comportement des propriétés relatives avec leur valeur initiale.
En particulier, dans le cas où la propriété en question avait déjà été définie auparavant avec sa notation long hand, la valeur sera surchargée par la propriété raccourcie ce qui signifie que c’est la valeur par défaut transmise par la version raccourcie qui sera utilisée. Faites donc bien attention aux comportements inattendus !
See the Pen Cours HTML CSS 3.9.3 by Pierre (@pierregiraud) on CodePen.
Dans l’exemple ci-dessus, par exemple, on définit des comportements pour chacune des propriétés qui peuvent être définies avec la notation raccourcie font pour nos éléments p.
Ensuite, on utilise la notation raccourcie font en ciblant un paragraphe en particulier. Dans font, on ne définit que les valeurs relatives à la taille de la police et à la famille de polices utilisée.
Pour toutes les autres valeurs, ce sont les valeurs par défaut qui vont être utilisées. Ainsi, par exemple, le style (font-style) et le poids (font-weight) vont être normal, ce qui est la valeur par défaut de ces deux propriétés et non pas italic et bold comme on l’a défini au-dessus.
Les limites des propriétés short hand par rapport aux notations long hand
La première limite des propriétés short hand par rapport à leurs équivalentes long hand est qu’on ne va pas pouvoir utiliser les valeurs globales inherit, initial et unset dans la déclaration des valeurs de nos propriétés raccourcies.
En effet, si on les utilisait, il serait impossible pour les navigateurs de savoir à quelle propriété correspond quelle valeur dans le cas de l’oubli de certaines valeurs.
Une deuxième limite évidente est que l’héritage des propriétés de va pas être possible avec les propriétés raccourcies puisque les valeurs oubliées dans les propriétés raccourcies vont être remplacées par leurs valeurs initiales. Il ne va donc pas être possible de pouvoir faire hériter les valeurs de certaines propriétés en les omettant dans la déclaration short hand puisque le CSS va tout de même automatiquement les définir en utilisant les valeurs initiales des propriétés « non définies ».
Quelques notations short hand courantes et les propriétés long hand associées
Avant tout, notez que chacune des propriétés long hand ne va pas forcément avoir de propriété short hand associée.
Les propriétés short hand ont été créées pour simplifier et raccourcir l’écriture du CSS tout en gardant une cohérence et une bonne lisibilité du code. C’est la raison pour laquelle les propriétés short hand regroupent toujours des ensembles de propriétés qui agissent sur un même aspect d’un élément HTML.
Vous pourrez trouver dans le tableau ci-dessous les propriétés short hand les plus courantes et qu’il vous faut connaitre avec l’ensemble des propriétés long hand qu’elles permettent de définir.
Nous n’avons pour le moment pas étudié la majorité de ces propriétés. Pas d’inquiétude, nous allons le faire au cours de ce cours.
| Short Hand | Equivalent Long Hand |
|---|---|
font |
font-style, font-variant, font-weight, font-size, line-height, font-family |
border |
border-width, border-style, border-color |
margin |
margin-top, margin-right, margin-bottom, margin-left |
padding |
padding-top, padding-right, padding-bottom, padding-left |
background |
background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, background-color |
transition |
transition-property, transition-duration, transition-timing-function, transition-delay |
animation |
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state |
flex |
flex-shrink, flex-grow, flex-basis |
