Exemple 04 : Utilisation de la méthode at-rule @import et ses différentes syntaxes

Explications :

La règle @import commence toujours par le mot-clé "@import", suivi par le mot-clé "url" qui permet d'indiquer entre parenthèses et guillemets le chemin vers le fichier CSS. Il est aussi possible de faire abstraction du mot-clé "url" et des parenthèses en indiquant directement le chemin vers le fichier entre guillemets.

Si vous n'indiquez pas le mot-clé "url", alors le chemin doit se trouver entre guillemets (seul Internet Explorer, dans ses versions 6 et 7, reconnaît le chemin sans guillemets). Dans le cas où vous indiquez le mot-clé "url" il ne faudra pas non plus oublier les parenthèses.

Le non respect de ces règles va aboutir à ce que la feuille de style ne sera pas reconnue et le style ne sera donc pas appliqué, comme vous pouvez le constater ci dessus :

dans le premier exemple le fichier CSS est appelé via le mot-clé "url" avec le chemin entre parenthèses et guillements : @import url("style1-ex04.css");. Le style s'applique avec tous les navigateurs ;
dans le second exemple le fichier CSS est appelé via le mot-clé "url" avec le chemin uniquement entre parenthèses et sans guillements : @import url(style2-ex04.css);. Le style s'applique avec tous les navigateurs ;
dans le troisième exemple le fichier CSS est appelé uniquement entre guillemets sans le mot-clé "url" ni les parenthèses : @import "style3-ex04.css";. Le style s'applique avec tous les navigateurs ;
dans le quatrième exemple le fichier CSS est appelé sans guillemets et sans mot-clé "url" mais entre parenthèses : @import (style4-ex04.css);. Le style ne s'applique sur aucun navigateur, cette méthode est donc à proscrire ;
dans le cinquième exemple le fichier CSS est appelé sans le mot-clé "url", sans parenthèses et sans guillemets : @import style5-ex04.css;. Seul Internet Explorer 6 et 7 interprètent cette écriture qui est donc à proscrire.

La règle @import peut être insérée directement dans tout fichier (X)HTML, entre les balises <style> </style>.

Code XHTML :

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 04 : Utilisation de la méthode at-rule @import et ses différentes syntaxes</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">
  @import url("style1-exII-A-2-c-02.css");
  @import url(style2-exII-A-2-c-02.css);
  @import "style3-ex04.css";
  @import (style4-exII-A-2-c-02.css);
  @import style5-ex04.css;
</style>
</head>

<body>

<h1>
Exemple 04 : Utilisation de la méthode at-rule @import et ses différentes syntaxes
</h1>

  <p id="un">
Le fichier CSS est appelé via le mot-clé "url" avec le chemin entre parenthèses et guillements. Si 
la syntaxe est correcte l'arrière plan sera de couleur turquoise.
  </p>
  <p id="deux">
Le fichier CSS est appelé via le mot-clé "url" avec le chemin uniquement entre parenthèses et sans 
guillements. Si la syntaxe est correcte l'arrière plan sera de couleur orange.
  </p>
  <p id="trois">
Le fichier CSS est appelé uniquement entre guillemets sans le mot-clé "url" ni les parenthèses. Si la 
syntaxe est correcte l'arrière plan sera de couleur jaune.
  </p>
  <p id="quatre">
Le fichier CSS est appelé sans guillemets et sans mot-clé "url" mais entre parenthèses. Si la syntaxe 
est correcte l'arrière plan sera de couleur violet.
  </p>
  <p id="cinq">
Le fichier CSS est appelé sans le mot-clé "url", sans parenthèses et sans guillemets. Si la syntaxe 
est correcte l'arrière plan sera de couleur verte.
  </p>

</body>
</html>

Code CSS fichier 1 :

1
2
3

p#un {
	background-color : #00ced1;/* darkturquoise */
}

Code CSS fichier 2 :

1
2
3

p#deux {
	background-color : #ffa500;/* orange */
}

Code CSS fichier 3 :

1
2
3

p#trois {
	background-color : yellow;
}

Code CSS fichier 4 :

1
2
3

p#quatre {
	background-color : purple;
}

Code CSS fichier 5 :

1
2
3

p#cinq {
	background-color : lime;
}

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.