Exemple 04 : Le code CSS est, sauf exception, insensible à la casse

Explications :

Le CSS est, sauf exception, insensible à la casse. Vous pouvez écrire vos règles en majuscules ou en minuscules, même si la convention est d'écrire en minuscules.

Dans la première règle le code CSS est en majuscule mais le style s'applique tout de même. Le sélecteur de type est lui aussi insensible à la casse : les sélecteurs P et p renvoient aux mêmes balises (X)HTML. A noter que l'id 'maj' est en minuscules comme dans le code (X)HTML.

Par contre sont sensibles à la casse les éléments qui ne sont pas régis par CSS : cela concerne les noms de classe et d'identifiant, les noms des polices et les adresses URI. Par exemple la classe 'header' n'est pas la même que la classe 'HeaDer' ou encore la classe 'HEADER'.

Dans le second exemple on démontre que le code qui est issu de la page (X)HTML, c'est-à-dire les noms de classe et d'id sont, eux, sensibles à la casse. L'id 'EXCEPTION' est différent de l'id 'exception'. Aucun style n'est appliqué au premier paragraphe parce que l'id du code CSS n'as pas la même casse que celui du code XHTML.
D'ailleurs vous pouvez constater que le code XHTML est valide, démontrant par là même que l'id 'EXCEPTION' est considéré comme différent de l'id 'exception', sinon nous aurions eu l'erreur de validation "ID 'exception' déjà définie".

Code XHTML et CSS :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 04 : Le code CSS est, sauf exception, insensible à la casse</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
P#maj {
        COLOR :            BLUE;
        FONT-SIZE :        1.4EM;
        BACKGROUND :       FUCHSIA;
        FONT-FAMILY :      'COURIER NEW', MONOSPACE;
}
#EXCEPTION {
        color :            blue;
        font-size :        1.4em;
        background :       fuchsia;
        font-family :      'Courier New', Monospace;
}
</style>
</head>

<body>

<h1>
Exemple 04 : Le code CSS est, sauf exception, insensible à la casse
</h1>

  <h2>
Le CSS est insensible à la casse :
  </h2>
  <p id="maj">
Exemple de texte où la casse n'a pas d'importance. Le style s'applique.
  </p>

  <h2>
Sauf les exceptions relatives au code (X)HTML :
  </h2>
  <p id="exception">
Quand les id et class du code (X)HTML sont en jeu alors la casse à une importance. C'est pour cette 
raison que le style ne s'applique pas ici.
  </p>

  <p id="EXCEPTION">
Ici l'id du code (X)HTML est également en majuscule, le code s'applique.
  </p>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.