Quelle est la fonction d' @import ?

En lisant la css d'un site j'ai lu...

@import "general.css";

Dans "general" sont définis les grandes lignes (h1, h2, p... par exemple)
des styles utilisés dans les pages alors que dans la css définie dans les pages par
screnn.css y sont définis les éléments que je dirais plus pointus comme
form#search, div#navigation...

<link rel="stylesheet" type="text/css"
media="screen" href="/styles/screen.css" />

Quel peut être l'intérêt de cette méthode, pourquoi ne pas definir les deux
feuilles de style directement dans la page ?

Question subsidiaire :
Pourquoi ne pas rassembler les deux feuilles en une seule ?

Bonne journée,
Yves
Modifié par yves_web (27 Feb 2008 - 11:25)

Perso, pour plus de clartés dans mes sites développés... Celui sur lequel je travaille pour l'instant est en modules et j'ai un nouveau fichier .js et un nouveau fichier .css pour chaque modules en plus d'un fichier de chaque commun à la base du site... question de s'y retrouver facilement...

La FAQ a la réponse à toutes les questions !

Link ou @import ?

Bonjour,

Tiens, cette feuille de style me dit quelque chose.

yves_web a écrit :
Quel peut être l'intérêt de cette méthode, pourquoi ne pas definir les deux feuilles de style directement dans la page ?

Parce que general.css peut ainsi être exploitée depuis une autre feuille de style. La feuille de style pour l'impression, par exemple. Sur mon site personnel, dans print.css, on peut lire:

@import "basic.css";

body {font-size: 10.5pt; color: black;}
a {color: black; text-decoration: underline;}

/* etc. */

On évite donc de dupliquer du code. De plus, la feuille de style basic.css définit, dans le cas de ce site, des choses très simples qui pourront être réutilisées avec très peu d'adaptations sur un autre projet.

Et pour préciser: on pourrait faire exactement la même chose avec des éléments link uniquement (et donc pas de règle @import). Ça demanderait de faire:

<link rel="stylesheet" type="text/css" media="screen, print" href="/styles/basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/styles/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="/styles/print.css" />

Cygnus a écrit :
La FAQ a la réponse à toutes les questions !

Link ou @import ?

voui, je sais, même que j'ai fait une recherche sur "@import"
Mais ce que je demandais, c'est vaut-il mieux utiliser
@import ou déclarer toutes les feuilles de style dans la page.

Merci,
bonne journée,
Yves

Florent V. a écrit :
Et pour préciser: on pourrait faire exactement la même chose avec des éléments link uniquement (et donc pas de règle @import). Ça demanderait de faire:

<link rel="stylesheet" type="text/css" media="screen, print" href="/styles/basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/styles/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="/styles/print.css" />

Ok merci... Bon ça va vu que je n'en suis pas à avoir un gros niveau de complexité dans mes feuilles de
style, je peut m'en passer, cela dit, c'est tout de même à noter surtout que j'envisage de faire
des feuilles "special_ie.css"
Bonne journée,
Yves

yves_web a écrit :
c'est tout de même à noter surtout que j'envisage de faire
des feuilles "special_ie.css"

Conseil: travailler avec des correctifs pour IE quand c'est nécessaire, et pas une feuille de styles complète séparée (sinon bonjour l'angoisse pour la double maintenance ). On se renseignera sur les commentaires conditionnels (la FAQ en parle) si ce n'est pas déjà fait.

Florent V. a écrit :

Conseil: travailler avec des correctifs pour IE quand c'est nécessaire, et pas une feuille de styles complète séparée (sinon bonjour l'angoisse pour la double maintenance ). On se renseignera sur les commentaires conditionnels (la FAQ en parle) si ce n'est pas déjà fait.

Ok, merci pour le conseil, c'est souvent sur des question de méthode sur lesquelles je bute.
Après en fouinant à droite et à gauche on fini par trouver...
[sérieux=off]
Une autre technique consiste à mater les feuilles de style des copains et à utiliser le copier coller

[sérieux=on]
Je ne me suis pas encore penché sur les pb liés à ie... Pour l'instant je n'en ai pas beaucoup et je ne sais
pas trop quelle philosophie adopter...
1) Je me fiche d'ie, c'est pas de ma faute si il y a des incompatibilité entre ie et w3c;
certains auteurs l'expriment clairement dans leurs livres.
2) A contrario, et comme disent certains autres auteurs, il faut tenir compte de la réalité du "marché",
de là il faut une lisibilité égale dans tous les navigateurs, y compris dans ie vu sa position dominante.

Et je me dis que ce que j'écris aurait plus sa place au bar du forum

Bonne journée,
Yves
Private joke : il n'est pas complètement impossible que tu ai vu @import dans une "screen.css"

yves_web a écrit :
Je ne me suis pas encore penché sur les pb liés à ie... Pour l'instant je n'en ai pas beaucoup et je ne sais
pas trop quelle philosophie adopter...
1) Je me fiche d'ie, c'est pas de ma faute si il y a des incompatibilité entre ie et w3c;
certains auteurs l'expriment clairement dans leurs livres.
2) A contrario, et comme disent certains autres auteurs, il faut tenir compte de la réalité du "marché",
de là il faut une lisibilité égale dans tous les navigateurs, y compris dans ie vu sa position dominante.

Ne trouverais-tu pas dommage de priver les internautes surfant avec IE (et Dieu sait qu'il y a des personnes très bien qui l'utilisent) simplement parce que Microsoft a pondu un moteur de rendu qui fonctionne pas au poil ?!?

Pour ma part je code les deux en parallèle : je vérifie d'abord sur un navigateur gacko, puis sous IE et là si ça bloque j'essaye de trouver un moyen détourné qui convient à tous.
Et puis sinon, vu que ça fonctionne quand même pas à tous les coups, je corrige la chose dans la feuille spéciale IE.
Mais bon, c'est pas non plus la mer à boire...