CSS

Quelles règles syntaxiques adopter en CSS ?

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (30708 lectures)
Tags : css, apprendre, déclarations, propriétés, séparateurs, conventions, débuter

Le langage CSS a été initialement conçu pour demeurer simple et intuitif : des propriétés facilement compréhensibles, associées à des valeurs tout aussi explicites devraient résumer le travail quotidien d'un intégrateur HTML/CSS.

Il n'est pourtant pas rare de rencontrer, au détour d'un clavier, un jeune webdesigner s'arracher les cheveux non pas parce qu'il ne dispose que d'Internet Explorer 6, mais parce qu'il s'embrouille dans la syntaxe employée :

Et après ça, je dois mettre quoi ? Un point ? Une virgule ? Un espace ? Des guillemets ?

Fichtre, ça change tout le temps, c'est compliqué ! Je choisis quoi, moi ? Finalement, les CSS c'est plus compliqué qu'on m'avait dit !

Voici quelques règles générales à adopter ainsi que leurs éventuels pièges.

Accolades, point-virgule, double-point ?

Le principe général d'une règle CSS est d'associer plusieurs éléments : le sélecteur (l'élément HTML sur lequel vont s'appliquer les styles), une propriété, et une valeur associée à la propriété.

Syntaxe CSS

Les règles typographiques sont les suivantes :

  • Un bloc de déclarations (ensemble des couples propriété-valeur) est entouré d'accolades.
  • La propriété est séparée de sa valeur par un double-point,
  • Les déclarations ou règles (couple propriété-valeur) sont terminées par un point-virgule. Celui-ci est optionnel sur la dernière déclaration d'un bloc.

Quelques exemples :

.important {
  color: red
}
input[type="text"] {
  color: red;}

Traits d'union ou collé ?

Lorsque les noms des propriétés ou des valeurs sont complexes ou s'expriment en plusieurs termes accolés, elles s'écrivent généralement à l'aide de traits d'union.

Les règles sont les suivantes :

  • Sauf exception, une propriété s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
  • Sauf exception, une valeur s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
  • Il y a certaines exceptions (ex: lightblue, nowrap,…).

Quelques exemples :

border-radius: 6px 6px 0 0;
padding: 0 10px 6px 1em;
background: #000 url("img/concombre.jpg") left top no-repeat;
font-family: Arial, Verdana, serif;
background-color: rgba(255, 255, 255, .2);

Guillemets ? Simples ? Ou pas ?

Il est de notoriété publique qu'une chaîne de caractère s'écrit entre quotes simples ou doubles. Le langage CSS ne déroge pas à la règle, bien qu'il y ait certaines subtilités.

Les règles sont les suivantes :

  • Pas de guillemets en règle générale pour les valeurs CSS, sauf les chaînes de caractères,
  • Dans le cas des chaînes de caractères, les spécifications CSS2 et CSS3 indiquent que dès lors qu'une valeur contient des caractères non alphanumériques simples (A-Z, 0-9, tiret, underscore), elle doit être entourée de quotes simples ou doubles,
  • Exception : les chaînes de caractères générées avec la propriété content nécessitent toujours des guillemets.

Quelques exemples :

Chemin basé sur la fonction url() :

background: url();
@import: url();
content: url();

Fonctions avec parenthèses :


url()
rgb()
rgba()
attr()
calc()
min()
max()
any()

Sélecteurs avec parenthèses :


:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:not()

Media queries :

@media (max-width: 800px) {...}

Préfixes ?

Depuis CSS2.1 le W3C invite les constructeurs à préfixer leurs propriétés qui sont en cours de développement, non finalisées (-webkit, -moz-, -ms-, -o-, etc.). Dans certains cas, le préfixe se place devant la valeur (lorsque la propriété est finalisée mais pas la valeur). Par exemple : display:-moz-box (et non -moz-display: box).

Commentaires

nfriedli a dit le

Comme on parle typgraphie, on rappellera que, sans le domaine, l'espace est féminine, même dans une feuille de style.

Nico3333fr a dit le

Il me semble que la règle background-image: url("concombre.png") peut s'écrire sans guillemets background-image: url(concombre.png) et ça fonctionne parfaitement partout. Quelqu'un pour confirmer ?

Raphael a dit le

@Nico3333fr : oui ça fonctionne partout, mais si l'on s'en tient strictement aux spécifications, il faudrait des guillemets.
Le pire étant que certains exemples de codes des specs sont dépourvus de guillemets dans ce cas précis ;)

smilz a dit le

Le terme "propriétaire" me semble mal choisi. Je dirai plutôt non-standard, ça me semble plus proche de la réalité

Raphael a dit le

@nfriedli : Oui, mais...
"Le mot espace est féminin pour désigner le caractère, c'est-à-dire l'élément physique, caractère en plomb ou électronique et masculin dans les autres cas. Au masculin, le terme espace peut désigner précisément la surface vide autour du dessin d'une lettre.
Source : http://fr.wikipedia.org/wiki/Espace_typograph...

y@nn a dit le

Ah ! on me le retire de la bouche ! En effet, "espace" est féminin. C'est pour ça qu'on parle d'espace fine et non fin !
Cela dit, l'article est intéressant. Merci.

Raphael a dit le

@y@nn : Oui enfin pas si sûr : voir ma réponse et la source :)

alecsy a dit le

Merci pour ce petit rappel très utile :)

Artemus24 a dit le

@Raphael : à moins d'être imprimeur, pourquoi parles-tu de règles typographique ?
Le CSS est un langage ! Donc, je parlerai plutôt de règles syntaxiques.

Informations extraites du dictionnaire "le petit larousse" :

Espace nom, masculin : (latin spatium). Etendue indéfinie qui contient et entoure tous les objets.

Espace nom, féminin : IMPRIMERIE. Blanc servant à séparer les mots.

@+

sumbobyboys a dit le

Même remarque que @Artemus24 la typographie concerne la forme des lettres, tandis que la syntaxe désigne l'ensemble des règles organisationnelles d'un langage :

cf Wikipedia :
"La typographie (souvent abrégé en typo) désigne les différents procédés de composition et d’impression utilisant des caractères et des formes en relief."

"La syntaxe est à l'origine la branche de la linguistique qui étudie la façon dont les mots se combinent pour former des phrases ou des énoncés dans une langue."

Bon article sinon :)

Raphael a dit le

C'est vrai que le terme de typographie est assez mal choisi, en effet.

y@nn a dit le

Ah ! on me le retire de la bouche ! En effet, "espace" est féminin. C'est pour ça qu'on parle d'espace fine et non fin !
Cela dit, l'article est intéressant. Merci.

y@nn a dit le

Désolé pour le double post. Je ne sais pas ce que j'ai fait. C'est pas ma faute. C'est Mac OS Lion. :) Je parlais évidemment d'espace au sens typographique. Et c'est bien de cela qu'il s'agit, non ? D'un blanc entre deux lettres. Évidemment, on peut jouer sur les mots (les articles). :)

titeuf a dit le

une coquille : "sépare une propriété de sa valeur valeur" (2x valeur)

répétition (copier/coller?) :
" Sauf exception, une propriété s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
Sauf exception, une valeur s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,"

Raphael a dit le

@titeuf : merci pour la coquille, je corrige.
Pour la répétition, il s'agit bien de deux règles différentes : la première concerne la propriété, la seconde la valeur.

rimousky a dit le

syntaxe (d'après le dictionnaire officiel du québec)
Partie de la grammaire définissant les règles qui régissent la formation correcte des énoncés d'une langue.
la typographie se rapporte au choix des caractères et à la mise en page (d'après le même dico.)
Effectivement le titre de l'article est explicite = il traite de la syntaxe d'une langue (CSS), qui fait appel à l'orthographe des noms utilisés et l'organisation des phrases (séparation des termes employés pour les rendre compréhensible par le compilateur...)
Faisons quand même grâce à l'auteur de l'article de ces subtilités d'ordre sémantique, l'article est excellent...clair, simple et utile.

Quentinzone a dit le

Pour le point virgule c'est comme en PHP

Akhilleus a dit le

Bonjour à tous,

J'ajoute que pour éviter de tels questionnements métaphysiques, le néophyte trouvera une aide précieuse dans les logiciels de développement embarquant un correcteur syntaxique et une fonction d'auto-complétion. Je pense par exemple à Komodo Edit (qui est cross-platform et gratuit) http://activestate.com/komodo-edit .

Nota : les préfixes ou propriétés css3 sont gérées de manière lacunaire.