Exemple 09 : Utilisation de la règle @import associée à la règle @charset dans la balise style

Règles valides : le style s'applique sauf dans Safari, Google Chrome et Opera 8.

Explications :

La règle @import peut être insérée soit directement dans tout fichier (X)HTML, entre les balises <style> </style>, soit dans tout fichier CSS. Dans les deux cas la règle @import doit être la première règle déclarée, seule la règle @charset ou une autre règle @import peut être déclarée avant.

Vous pouvez constater que l'ensemble du style est appliqué : la règle se trouvant dans le fichier CSS externe s'applique malgré le fait que la règle @import ne soit pas la première règle dans le code CSS, en effet la règle @charset est la seule à pouvoir valablement se trouver avant la règle @import.

Cet exemple peut cependant poser problème. En effet une règle @charset incluse dans l'en tête d'un document (X)HTML est inutile et déconseillée. Les règles qui suivent peuvent alors ne pas s'appliquer dans Safari jusqu'à sa version 4, Google Chrome jusqu'à sa version 3 ainsi qu'Opéra 8 (pas les versions ultérieures).

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 
<!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 09 : Utilisation de la règle @import associée à la règle @charset dans la balise 
style</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">
@charset "ISO-8859-15";
@import url("style-ex09.css");

ul li {
        list-style-type :  circle;
        background-color : #ffe4e1;/* mistyrose */
}
</style>
</head>

<body>

<h1>
Exemple 09 : Utilisation de la règle @import associée à la règle @charset dans la balise style
</h1>

  <h2>
Règles valides : le style s'applique sauf dans Safari et Google Chrome.
  </h2>
  <ul>
    <li>
Voici une liste non ordonnée : ses éléments sont gérés par deux règles différentes. La première est 
introduite par une règle @import déclarée après une règle @charset mais avant la seconde règle ; la 
seconde est introduite directement dans la balise style après la règle @import.
    </li>
    <li>
La première règle attribut le type de puce 'circle' (cercle évidé) et la couleur d'arrière plan mistyrose.
    </li>
    <li>
La seconde règle attribut des marges de 50px entre chaque élément de liste ainsi qu'une couleur de police 
indigo. Le titre h2 se voit aussi attribuer le style souligné.
    </li>
  </ul>

</body>
</html>

Code CSS :

1 
2
3
4
5
6
7 
h2 {
        text-decoration :  underline;
}
ul li {
        margin :           50px 0;
        color :            #4b0082;/* indigo */
}

Valid XHTML 1.0 Strict CSS Valide !

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.