Règle et déclarations

Les déclarations

Les déclarations sont une série de paires propriétés / valeurs séparées par deux points et terminées par un point-virgule. Attention à ne pas utiliser d’espace entre la valeur et son unité. De même, le séparateur décimal est le point et non la virgule. Attention aux valeurs de pourcentage en responsive design du style 68.236791245% qui doivent donc être écrites d’un trait et avec un point.

propriété : valeur unité;

Certaines déclarations existent sous forme courtes… par exemple, il est possible de décliner la propriété font, sous sa forme longue (incluant toutes les propriétés en une ligne) ou sous sa forme courte (à savoir une déclaration par propriété) ;

font: italic bold small-caps 1.3%/105% Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
-----
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.3%;font-style: italic;
line-height: 105%;
font-weight: bold;
font-variant: small-caps;

et certaines possèdent plusieurs formes courtes. Par exemple, la propriété margin, peut comme pour la propriété font, se décliner en mode courte (une déclaration par propriété), ou longue (sur quatre paramètres). Dans ce cas, les valeurs vont alors s’égrainer, comme les aiguilles d’une montre, pour Haut, Droite, Bas, Gauche. Mais on peut également raccourcir sur deux paramètres, si les valeurs verticales haut et bas sont équivalentes et de même pour les valeurs horizontales. On rencontre ainsi souvent le 0 margin, qui positionne l’élément au centre de son bloc parent. On peut encore réduire sur un seul paramètre, dans le cas ou toutes les valeurs sont identiques :

margin-top : 10px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 5px;
margin: 10px 20px 10px 5px;
-----
margin: 10px 20px 10px 20px;
margin: 0 auto;
margin: 10px;

Il est important de prendre en compte que dans certains cas, l’usage d’une déclaration sous sa forme longue risque de causer problème. Prenons par exemple la déclaration ci-dessous qui définit l’arrière plan sous sa forme longue. Si lors de la déclaration du survol, nous utilisons encore une forme longue mais en déclarons pas l’intégralité des propriétés, tout les propriétés non définis prendront alors leur valeurs par défaut et cela peut parfois causer soucis.

h1 {
	background: #999 url(Images-New/CSS-Bases/fond.png) repeat-x 3px 3px; 
}
h1:hover {
	/* background: url(Images-New/CSS-Bases/fond-hover.png); 
	   ne fonctionne pas car supprime le décalage et la couleur de fond */
	/* background-image: url(Images-New/CSS-Bases/fond-hover.png); 
	   fonctionne */
}

Le préfixage

Du côté des propriétés, et afin de garantir une compatibilité inter-navigateurs, un principe de pré-fixage a été mis en place, ce qui laisse libre manœuvre d’implémentation pour chaque éditeur, jusqu’à l’accord sur la recommandation finale par le w3c. De ce fait, certaines propriétés vont être déclinées pour chaque navigateur (ou du moins moteur de rendu) selon les modèles -webkit-, -khtml-, -moz-, -ms-, -o- ;

Bien que ce procédé est permis à HTML5 / CSS3 de se développer, se démocratiser, se mettre en place de manière confortable, bref… de s’employer, on trouve à ce sujet, les pour, les contre, et ceux qui vont encore plus loin. Afin de vous faire votre propre opinion, rapprochez-vous de l’article Prefix or Posthack de Eric Meyer paru en Juillet 2010, et de sa suite The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik paru en Février 2012.

Les unités et valeurs des propriétés

En fonction des propriétés, nous avons accès à toute sorte d’unité pour les définir. En faire la liste serait une perte de temps inutile. Il est juste bon de savoir que dans certains cas, et pour certains types de réglages, nous avons accès à diverses alternatives. Ainsi, les unités peuvent être composées d’éléments numériques (10, 12.5…), de valeurs alphanumériques (#ff0036, rgba(212,15,64,0.4…), de constantes (center, inherit, x-small…), …

Les valeurs peuvent être exprimées soit de manière fixe et absolue, (12px, 23pt, 3s, 30deg, center, #ff0036…), soit de manière relative et proportionnelle, (1.2em, inherit, 3rem, 35.9865998%…). Voir à ce sujet l’article Responsive Web Design, mais encore ?.

Lors de l’utilisation d’unités proportionnelles, il est important de faire attention aux imbrications et à l’effet cascade ou à l’héritage. En effet, la proportionnalité se calcule toujours en rapport à l’élément parent, et non à une référence fixe. Par exemple, avec les fragments HTML et CSS ci-dessous, avec une valeur du em par défaut de 16px, nous obtiendrons un bloc <p> à 25.6px et un bloc <em> à 46.08px… . Pour obtenir un résultat basé sur une référence, il aurait fallu utiliser l’unité rem au lieu de em :

<p>Un texte et un mot en <em>emphase</em></p>
p {
	font-size:1.6em;
}
em {
	font-size:1.8em;
}

Quelles que soient les valeurs, dès que celles-ci, sont composées d’une valeur et d’une unité, il ne doit pas y avoir d’espace entre les deux 12px et non 12 px. De même, au niveau des valeurs décimales, celles-ci doivent utiliser un point comme séparateur et non la virgule, 92.678547% et non 92,678547%. La virgule est réservée comme séparateur entre les valeurs, par exemple, rgba(238,243,49,0.68);.

En fonction des besoins et des propriétés, voici quelques types de valeurs ou d’unités, que l’on oublie parfois, et qui sont pleinement utilisable en CSS ;

• des valeurs utiles lors de la mise en place des feuilles de styles pour l’impression ; cm (centimètres), mm (millimètres), in (inch), pt (point), pc (pica)
• lors de rotation, animation ou transformation d’élément de manière circulaire, nous n’avons pas accès qu’à l’unité deg (degré, 1 cercle = 360°), nous avons aussi l’usage de
  • rad (radian, 1 cercle = 2π radians),
  • grad (gradian, 1 cercle = 400 gradians)
  • ou turn (tour, 1 cercle = 1 turn)
• pour les tailles de typo, nous pouvons accéder à des constantes … (voir font-size – CSS).
  • constantes absolues telles que xx-small, x-small, small, medium, large, x-large, xx-large,
  • ou relatives comme larger, smaller
• des dimensions proportionnelles comme
  • % (pourcentage),
  • em (basée sur la taille de police de l’élément parent, équivalent au cadratin de l’imprimerie),
  • rem (basée sur la taille de police de l’élément racine),
  • ex (correspond généralement à la hauteur du caractère x minuscule, même si celui-ci n’est pas présent dans la typo)
• des dimensions relatives au viewport
  • vw (1% de la largeur du conteneur initial),
  • vh (1% de la hauteur du conteneur initial),
  • vmin (équivalent à la plus petite valeur de vw ou vh),
  • vmax (équivalent à la plus grande valeur de vw ou vh)
• des résolutions avec dpi (points par pouce), dpcm (point par centimètre), dppx (points par pixel). Attention, contrairement aux reliquats de l’imprimerie, et les classiques 72dpi de l’écran (Mac), en web, 1dppx=96dpi.
• de manière pêle-mêle, des unités de valeurs littérales, comme auto, transparent, relative, absolute, fixed, static, center, right, left, top, bottom, nowrap, baseline, bolder, lighter, normal … bref la liste est longue, et se présente en fonction de certaines propriétés
• l’instruction inherit qui permet de rattacher une valeur en fonction de l’élément hérité, ou par cascade,
• des fonctions de calcul ou d’instruction comme
  • calc() (qui permet les principales opérations algébriques, addition, soustraction, multiplication et division, et autorise l’emploi d’unités croisées…),
  • counter() (ajoute la possibilité de compter de manière fine certaines itérations, voir l’exemple avec le pseudo before plus haut dans cet article),
  • toggle() (permet d’attribuer une valseur alternative à un élément afin de ne pas être identique à celle du parent),
  • attr() (qui retourne la valeur de l’attribut ciblé, de l’élément, ou du pseudo élément)…
• des valeurs préfixées, comme pour les dégradés, qui ne produisent pas les même valeurs avec -moz-linear-gradient(), -webkit-gradient() et -webkit-linear-gradient(); (voir CSS gradients please!)