Ordre de la propriété en raccourci CSS

Question

Comme vous le savez, nous pouvons utiliser des propriétés abrégées en css. Mais je trouve que l'ordre des valeurs des propriétés est important.

"border:1px red solid ;" est égal à "border : 1px solid red ;".

---

mais 'font:italic bold 12px/20px' est no égal à " font:italic 12px/20px bold ; ".

J'ai lu attentivement le manuel mais je ne trouve aucun cotent concernant l'ordre des valeurs de propriété ;

Answer 1

La pertinence de l'ordre est définie sur une base par propriété. Par exemple, l description de la font sténographie utilise la syntaxe suivante :

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'>
[ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box |
 small-caption | status-bar | inherit

Cela semble un peu désordonné, mais la clé des métanotations utilisées se trouve dans la section 1.4.2 Définitions des propriétés CSS . Il dit, entre autres choses :

1. Plusieurs mots juxtaposés signifient qu'ils doivent tous apparaître, dans l'ordre donné.
2. Une barre (|) sépare deux ou plusieurs alternatives : une seule d'entre elles doit se produire.
3. Une double barre (||) sépare deux ou plusieurs options : une ou plusieurs d'entre elles doivent se présenter, dans n'importe quel ordre.

On peut donc lire que le style de police, la variante de police et le poids de la police peuvent apparaître dans n'importe quel ordre, et qu'ils sont tous facultatifs, mais que s'ils sont présents, ils doivent précéder la taille de la police et la famille de polices, qui sont toutes deux obligatoires et doivent apparaître dans cet ordre.

Heureusement, la plupart des propriétés sont plus simples. La plupart du temps, l'ordre des éléments dans une valeur n'est pas significatif, grâce à une conception qui permet de déduire le rôle d'un élément à partir de son format. Et vous n'avez jamais besoin de la propriété font raccourci : vous pouvez toujours écrire les propriétés individuelles de la police à la place.

Answer 2

Voici un aide-mémoire pour vous aider à vous en souvenir : http://www.land-of-web.com/freebies/css-shorthand-property-cheat-sheet.html

Answer 3

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

le sera :

font: bold italic small-caps 1em/1.5em verdana,sans-serif

Voici l'ordre.

Answer 4

Voici une bonne référence pour la sténographie des polices : https://www.sitepoint.com/introduction-css-shorthand/ - la référence au sitepoint est en fait assez bonne.