On peut aussi procéder à des imports par niveaux (ou en cascade) : c'est-à-dire qu'on peut insérer dans un fichier CSS une règle @import qui appelle un second fichier CSS, dans lequel on appelle une troisième feuille de style via la règle @import, etc.
C'est encore Internet Explorer qui est le mauvais élève : il n'autorise qu'une profondeur de quatre niveaux d'imports. Les autres navigateurs ne connaissant pas ces limites et importent les fichiers CSS jusqu'à une profondeur de 146 niveaux au moins. La restriction d'Internet Explorer dans ce domaine risque de vous faire atteindre très rapidement ces limites, d'où l'intérêt de tenir compte de cette information.
Ne suivez surtout pas cet exemple, qui est une aberration du point de vue de l'utilisation d'un code pertinent, rapide et facile à maintenir. De plus la vitesse d'affichage est réduite du fait des nombreux fichiers CSS à télécharger.
Remarque : cet exemple est valide CSS 3 mais pas CSS 2.1 du fait des mots-clé de couleur.
<!
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 12 : Y a t'il une limite au nombre d'@import en cascade utilisables ?<
/
title
>
<
meta
http
-
equiv
=
"
Content-Type
"
content
=
"
text/html;
charset=ISO-8859-1
"
/
>
<
meta
http
-
equiv
=
"
Content-Style-Type
"
content
=
"
text/css
"
/
>
<
link
href
=
"
style-ex12/style001.css
"
type
=
"
text/css
"
rel
=
"
stylesheet
"
/
>
<style
type
=
"
text
/
css
"
>
ul {
margin
:
0
;
padding
:
0
;
}
li {
float
:
left
;
width
:
150px
;
height
:
150px
;
text-align
:
center
;
line-height
:
150px
;
font-weight
:
bold
;
list-style-type
:
none
;
margin
:
2px
;
}
li.fond-fonce {
color
:
white
;
}
</style>
<
/
head
>
<
body
>
<
h1
>
Exemple 12 : Y a t'il une limite au nombre d'@import en cascade utilisables ?
<
/
h1
>
<
ul
>
<
li
id
=
"
nid-aliceblue
"
>
aliceblue<
/
li
>
<
li
id
=
"
nid-antiquewhite
"
>
antiquewhite<
/
li
>
<
li
id
=
"
nid-aqua
"
>
aqua<
/
li
>
<
li
id
=
"
nid-aquamarine
"
>
aquamarine<
/
li
>
<
li
id
=
"
nid-azure
"
>
azure<
/
li
>
<
li
id
=
"
nid-beige
"
>
beige<
/
li
>
<
li
id
=
"
nid-bisque
"
>
bisque<
/
li
>
<
li
id
=
"
nid-black
"
class
=
"
fond-fonce
"
>
black<
/
li
>
<
li
id
=
"
nid-blanchedalmond
"
>
blanchedalmond<
/
li
>
<
li
id
=
"
nid-blue
"
>
blue<
/
li
>
<
li
id
=
"
nid-blueviolet
"
>
blueviolet<
/
li
>
<
li
id
=
"
nid-brown
"
>
brown<
/
li
>
<
li
id
=
"
nid-burlywood
"
>
burlywood<
/
li
>
<
li
id
=
"
nid-cadetblue
"
>
cadetblue<
/
li
>
<
li
id
=
"
nid-chartreuse
"
>
chartreuse<
/
li
>
<
li
id
=
"
nid-chocolate
"
>
chocolate<
/
li
>
<
li
id
=
"
nid-coral
"
>
coral<
/
li
>
<
li
id
=
"
nid-cornflowerblue
"
>
cornflowerblue<
/
li
>
<
li
id
=
"
nid-cornsilk
"
>
cornsilk<
/
li
>
<
li
id
=
"
nid-crimson
"
>
crimson<
/
li
>
<
li
id
=
"
nid-cyan
"
>
cyan<
/
li
>
<
li
id
=
"
nid-darkblue
"
class
=
"
fond-fonce
"
>
darkblue<
/
li
>
<
li
id
=
"
nid-darkcyan
"
>
darkcyan<
/
li
>
<
li
id
=
"
nid-darkgoldenrod
"
>
darkgoldenrod<
/
li
>
<
li
id
=
"
nid-darkgray
"
>
darkgray<
/
li
>
<
li
id
=
"
nid-darkgreen
"
>
darkgreen<
/
li
>
<
li
id
=
"
nid-darkgrey
"
>
darkgrey<
/
li
>
<
li
id
=
"
nid-darkkhaki
"
>
darkkhaki<
/
li
>
<
li
id
=
"
nid-darkmagenta
"
>
darkmagenta<
/
li
>
<
li
id
=
"
nid-darkolivegreen
"
>
darkolivegreen<
/
li
>
<
li
id
=
"
nid-darkorange
"
>
darkorange<
/
li
>
<
li
id
=
"
nid-darkorchid
"
>
darkorchid<
/
li
>
<
li
id
=
"
nid-darkred
"
>
darkred<
/
li
>
<
li
id
=
"
nid-darksalmon
"
>
darksalmon<
/
li
>
<
li
id
=
"
nid-darkseagreen
"
>
darkseagreen<
/
li
>
<
li
id
=
"
nid-darkslateblue
"
class
=
"
fond-fonce
"
>
darkslateblue<
/
li
>
<
li
id
=
"
nid-darkslategray
"
class
=
"
fond-fonce
"
>
darkslategray<
/
li
>
<
li
id
=
"
nid-darkslategrey
"
class
=
"
fond-fonce
"
>
darkslategrey<
/
li
>
<
li
id
=
"
nid-darkturquoise
"
>
darkturquoise<
/
li
>
<
li
id
=
"
nid-darkviolet
"
>
darkviolet<
/
li
>
<
li
id
=
"
nid-deeppink
"
>
deeppink<
/
li
>
<
li
id
=
"
nid-deepskyblue
"
>
deepskyblue<
/
li
>
<
li
id
=
"
nid-dimgray
"
class
=
"
fond-fonce
"
>
dimgray<
/
li
>
<
li
id
=
"
nid-dimgrey
"
class
=
"
fond-fonce
"
>
dimgrey<
/
li
>
<
li
id
=
"
nid-dodgerblue
"
>
dodgerblue<
/
li
>
<
li
id
=
"
nid-firebrick
"
>
firebrick<
/
li
>
<
li
id
=
"
nid-floralwhite
"
>
floralwhite<
/
li
>
<
li
id
=
"
nid-forestgreen
"
>
forestgreen<
/
li
>
<
li
id
=
"
nid-fuchsia
"
>
fuchsia<
/
li
>
<
li
id
=
"
nid-gainsboro
"
>
gainsboro<
/
li
>
<
li
id
=
"
nid-ghostwhite
"
>
ghostwhite<
/
li
>
<
li
id
=
"
nid-gold
"
>
gold<
/
li
>
<
li
id
=
"
nid-goldenrod
"
>
goldenrod<
/
li
>
<
li
id
=
"
nid-gray
"
class
=
"
fond-fonce
"
>
gray<
/
li
>
<
li
id
=
"
nid-green
"
>
green<
/
li
>
<
li
id
=
"
nid-greenyellow
"
>
greenyellow<
/
li
>
<
li
id
=
"
nid-grey
"
class
=
"
fond-fonce
"
>
grey<
/
li
>
<
li
id
=
"
nid-honeydew
"
>
honeydew<
/
li
>
<
li
id
=
"
nid-hotpink
"
>
hotpink<
/
li
>
<
li
id
=
"
nid-indianred
"
>
indianred<
/
li
>
<
li
id
=
"
nid-indigo
"
class
=
"
fond-fonce
"
>
indigo<
/
li
>
<
li
id
=
"
nid-ivory
"
>
ivory<
/
li
>
<
li
id
=
"
nid-khaki
"
>
khaki<
/
li
>
<
li
id
=
"
nid-lavender
"
>
lavender<
/
li
>
<
li
id
=
"
nid-lavenderblush
"
>
lavenderblush<
/
li
>
<
li
id
=
"
nid-lawngreen
"
>
lawngreen<
/
li
>
<
li
id
=
"
nid-lemonchiffon
"
>
lemonchiffon<
/
li
>
<
li
id
=
"
nid-lightblue
"
>
lightblue<
/
li
>
<
li
id
=
"
nid-lightcoral
"
>
lightcoral<
/
li
>
<
li
id
=
"
nid-lightcyan
"
>
lightcyan<
/
li
>
<
li
id
=
"
nid-lightgoldenrodyellow
"
>
lightgoldenrodyellow<
/
li
>
<
li
id
=
"
nid-lightgray
"
>
lightgray<
/
li
>
<
li
id
=
"
nid-lightgreen
"
>
lightgreen<
/
li
>
<
li
id
=
"
nid-lightgrey
"
>
lightgrey<
/
li
>
<
li
id
=
"
nid-lightpink
"
>
lightpink<
/
li
>
<
li
id
=
"
nid-lightsalmon
"
>
lightsalmon<
/
li
>
<
li
id
=
"
nid-lightseagreen
"
>
lightseagreen<
/
li
>
<
li
id
=
"
nid-lightskyblue
"
>
lightskyblue<
/
li
>
<
li
id
=
"
nid-lightslategray
"
>
lightslategray<
/
li
>
<
li
id
=
"
nid-lightslategrey
"
>
lightslategrey<
/
li
>
<
li
id
=
"
nid-lightsteelblue
"
>
lightsteelblue<
/
li
>
<
li
id
=
"
nid-lightyellow
"
>
lightyellow<
/
li
>
<
li
id
=
"
nid-lime
"
>
lime<
/
li
>
<
li
id
=
"
nid-limegreen
"
>
limegreen<
/
li
>
<
li
id
=
"
nid-linen
"
>
linen<
/
li
>
<
li
id
=
"
nid-magenta
"
>
magenta<
/
li
>
<
li
id
=
"
nid-maroon
"
class
=
"
fond-fonce
"
>
maroon<
/
li
>
<
li
id
=
"
nid-mediumaquamarine
"
>
mediumaquamarine<
/
li
>
<
li
id
=
"
nid-mediumblue
"
class
=
"
fond-fonce
"
>
mediumblue<
/
li
>
<
li
id
=
"
nid-mediumorchid
"
>
mediumorchid<
/
li
>
<
li
id
=
"
nid-mediumpurple
"
>
mediumpurple<
/
li
>
<
li
id
=
"
nid-mediumseagreen
"
>
mediumseagreen<
/
li
>
<
li
id
=
"
nid-mediumslateblue
"
>
mediumslateblue<
/
li
>
<
li
id
=
"
nid-mediumspringgreen
"
>
mediumspringgreen<
/
li
>
<
li
id
=
"
nid-mediumturquoise
"
>
mediumturquoise<
/
li
>
<
li
id
=
"
nid-mediumvioletred
"
>
mediumvioletred<
/
li
>
<
li
id
=
"
nid-midnightblue
"
class
=
"
fond-fonce
"
>
midnightblue<
/
li
>
<
li
id
=
"
nid-mintcream
"
>
mintcream<
/
li
>
<
li
id
=
"
nid-mistyrose
"
>
mistyrose<
/
li
>
<
li
id
=
"
nid-moccasin
"
>
moccasin<
/
li
>
<
li
id
=
"
nid-navajowhite
"
>
navajowhite<
/
li
>
<
li
id
=
"
nid-navy
"
class
=
"
fond-fonce
"
>
navy<
/
li
>
<
li
id
=
"
nid-oldlace
"
>
oldlace<
/
li
>
<
li
id
=
"
nid-olive
"
>
olive<
/
li
>
<
li
id
=
"
nid-olivedrab
"
>
olivedrab<
/
li
>
<
li
id
=
"
nid-orange
"
>
orange<
/
li
>
<
li
id
=
"
nid-orangered
"
>
orangered<
/
li
>
<
li
id
=
"
nid-orchid
"
>
orchid<
/
li
>
<
li
id
=
"
nid-palegoldenrod
"
>
palegoldenrod<
/
li
>
<
li
id
=
"
nid-palegreen
"
>
palegreen<
/
li
>
<
li
id
=
"
nid-paleturquoise
"
>
paleturquoise<
/
li
>
<
li
id
=
"
nid-palevioletred
"
>
palevioletred<
/
li
>
<
li
id
=
"
nid-papayawhip
"
>
papayawhip<
/
li
>
<
li
id
=
"
nid-peachpuff
"
>
peachpuff<
/
li
>
<
li
id
=
"
nid-peru
"
>
peru <
/
li
>
<
li
id
=
"
nid-pink
"
>
pink<
/
li
>
<
li
id
=
"
nid-plum
"
>
plum<
/
li
>
<
li
id
=
"
nid-powderblue
"
>
powderblue<
/
li
>
<
li
id
=
"
nid-purple
"
>
purple<
/
li
>
<
li
id
=
"
nid-red
"
>
red<
/
li
>
<
li
id
=
"
nid-rosybrown
"
>
rosybrown<
/
li
>
<
li
id
=
"
nid-royalblue
"
>
royalblue<
/
li
>
<
li
id
=
"
nid-saddlebrown
"
>
saddlebrown<
/
li
>
<
li
id
=
"
nid-salmon
"
>
salmon<
/
li
>
<
li
id
=
"
nid-sandybrown
"
>
sandybrown<
/
li
>
<
li
id
=
"
nid-seagreen
"
>
seagreen<
/
li
>
<
li
id
=
"
nid-seashell
"
>
seashell<
/
li
>
<
li
id
=
"
nid-sienna
"
>
sienna<
/
li
>
<
li
id
=
"
nid-silver
"
>
silver<
/
li
>
<
li
id
=
"
nid-skyblue
"
>
skyblue<
/
li
>
<
li
id
=
"
nid-slateblue
"
>
slateblue<
/
li
>
<
li
id
=
"
nid-slategray
"
>
slategray<
/
li
>
<
li
id
=
"
nid-slategrey
"
>
slategrey<
/
li
>
<
li
id
=
"
nid-snow
"
>
snow<
/
li
>
<
li
id
=
"
nid-springgreen
"
>
springgreen<
/
li
>
<
li
id
=
"
nid-steelblue
"
>
steelblue<
/
li
>
<
li
id
=
"
nid-tan
"
>
tan<
/
li
>
<
li
id
=
"
nid-teal
"
>
teal<
/
li
>
<
li
id
=
"
nid-thistle
"
>
thistle<
/
li
>
<
li
id
=
"
nid-tomato
"
>
tomato<
/
li
>
<
li
id
=
"
nid-turquoise
"
>
turquoise<
/
li
>
<
li
id
=
"
nid-violet
"
>
violet<
/
li
>
<
li
id
=
"
nid-wheat
"
>
wheat<
/
li
>
<
li
id
=
"
nid-white
"
>
white<
/
li
>
<
li
id
=
"
nid-whitesmoke
"
>
whitesmoke<
/
li
>
<
li
id
=
"
nid-yellow
"
>
yellow<
/
li
>
<
li
id
=
"
nid-yellowgreen
"
>
yellowgreen<
/
li
>
<
/
ul
>
<
/
body
>
<
/
html
>
@import
url
("
style002
.
css
"
);
#
nid-aliceblue
{
background-color
:
aliceblue
;
}
@import
url
("
style003
.
css
"
);
#
nid-antiquewhite
{
background-color
:
antiquewhite
;
}
@import
url
("
style004
.
css
"
);
#
nid-aqua
{
background-color
:
aqua
;
}
Etc...
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.