Discussion :

[Kanapesh]

Bonjour.
J'aimerais séparer mes fiches css afin de les attribuer à différentes parties de mon code (exemple: un css pour un tableau , un css pour un paragraphe etc..) de sorte à avoir plus de facilité par la suite à les modifier.

J'ai lu une grosse quantité d'explication de la fonction @import qui pourrait me permettre de faire ça mais malgré tout je n'arrive pas à la faire fonctionner correctement.

Explications:

J'ai créé un fichier .css général qui appelle mes autres pages .css spécifiques, j'ai appellé ce fichier design.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
@import url(tableau.css) screen;
@import url(cadre.css) screen;

Dans ma page html j'appelle donc le fichier design.css qui devrait, lui, me permettre de récupérer les autres fichiers css répertoriés dedans:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link language="text/css" rel="stylesheet" href="/styles/design.css"/>

Finalement après tout ça , je n'ai absolument aucune propriété css renvoyée sur ma page.

Merci à tous.

[Macmillenium]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
@import url(tableau.css) screen;
@import url(cadre.css) screen;

[/code]

C'est normal que sa ne fonctionne pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<style type="text/css" media="screen"> @import url(/tableau.css);</style>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link language="text/css" rel="stylesheet" href="/styles/design.css"/>

Finalement après tout ça , je n'ai absolument aucune propriété css renvoyée sur ma page.

Pas d'attribut language sur le tag link

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Kanapesh]

Merci pour ta réponse rapide.

Si j'ai bien compris tes explications , mon design.css doit maintenant contenir ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<style type="text/css" media="screen"> @import url(/tableau.css);</style>
<style type="text/css" media="screen"> @import url(/cadre.css);</style>

Et ma page HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Si effectivement c'est bien ce que tu me conseillais de faire , alors le problème persiste malgré tout. ^^

Une précision à ajouter, ma page .html est en fait une page .php , j'ai menti , je me sers de la fonction include plusieurs fois dans ma page.
Est ce que la fonction @import de n'aurait pas un soucis de compatibilité avec le php ou que sais-je? ^^

[Bisûnûrs]

Tu ne dois pas mettre la balise style dans ton fichier CSS.

[Macmillenium]

Tu ne dois pas mettre la balise style dans ton fichier CSS.

Oui justement ! Je n'ai pas fait attention à l'importation au niveau de la css.

KanapeshAu niveau de ta css il faut garder

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
@import url(tableau.css) screen;
@import url(cadre.css) screen;

et html comme je l'avais dit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Erwan31]

Bonjour,
pour info la directive @import n'est pas ce qu'il y a de plus recommandable en terme de performance d'affichage: http://performance.survol.fr/2008/04/css-et-import/

[Kanapesh]

Je la met où du coup? :/

edit:
@ Erwann : Effectivement en faisant mes recherches je suis tombé sur cette page , malgré tout j'ai quand même envi d'essayer de comprendre comment fonctionne cette commande pour me faire une idée de la façon dont elle agit. ^^

[Erwan31]

@ Erwann : Effectivement en faisant mes recherches je suis tombé sur cette page , malgré tout j'ai quand même envi d'essayer de comprendre comment fonctionne cette commande pour me faire une idée de la façon dont elle agit. ^^

ok rien de t'y empêche, c'est juste à titre d'info
Tout dépendra en fait de la taille de ton document et du nombre d'éléments à charger. Plus celui-ci est important et plus le recherche de performance a de l'importance, plus il faudra penser à te tourner vers des links ou alors passer par les méthodes décrites sur la page citée.