28221 sujets

CSS et mise en forme, CSS3

Salut, mon premier post sur ce forum...

Est-ce que ça tient la route de créer une feuille de style externe pour chaque "utilité" : une pour le texte, une pour les liens, une pour la mise en page, d'autres pour les pages spéciales, etc ?

Parce qu'une seule feuille pour tout le site, elle doit être chargée, non ?

Merci !
Bienvenu sur le forum!

Tu peux absolument créer plusieurs feuilles de style. Par exemple pour les différents médias : écran, wap, imprimante... ou encore pour différent navigateurs, par exemple ceux qui posent problèmes : IE, Netscape4...

Tu peux aussi en créer plusieurs selon les rubriques, par exemple une feuille de style commune à toutes les pages et des feuilles supplémentaires pour les rubriques spécifiques.

Séparer les feuilles pour la mise en forme, comme tu le décris, pourquoi pas mais personellement j'éviterai. C'est plus difficile de gérer plusieurs feuilles qu'une seule. Et si tu organise ta CSS correctement (classement, noms appropriés et explicites, commentaires, etc...) tu n'aura pas de problème de gestion ni de lourdeur. Et même si ta CSS est assez imposante elle n'est de toute façon chargée qu'une seule fois pour toute la visite donc en terme de rapidité de chargement ça ne change pas grand chose.

Concrètement les fois ou je fais des CSS séparés : une pour l'impression en plus de la feuille par défaut. Quand j'utilise du Flash pouvant contenir du html ou du xml je fais une CSS spécifique à ce média. Si je dois bidouiller pour NS4 ou IE4 (pas souvent car j'évite de developper pour ces navigateurs).
Modifié le 09 Nov 2004 - 01:36
Merci jb_gfx !

Ok, j'y vois plus clair, et c'est vrai que la feuille principale n'est chargée qu'une seule fois...

Par contre, je ne te suis pas quand tu parles d'impression, est-ce qu'une feuille de style peut venir en aide d'un internaute qui souhaiterais imprimer une de mes pages, c'est ça ? Si c'est ça c'est la classe !
Modifié le 09 Nov 2004 - 02:45
Bonjour,

a écrit :
C'est plus difficile de gérer plusieurs feuilles qu'une seule. Et si tu organise ta CSS correctement (classement, noms appropriés et explicites, commentaires, etc...) tu n'aura pas de problème de gestion ni de lourdeur.


Ça se discute. J'utilise plusieurs feuilles de style (texte.css, titres.css, tableaux.css, menus.css, etc.) C'est vraiment beaucoup plus facile de s'y retrouver dans le panneau "Styles CSS" de Dreamweaver avec 5-6 listes distinctes et relativement courtes qu'avec une seule longue liste (même si les noms sont explicites), d'autant que les CSS y sont affichées par ordre de création et pas par nom (en tout cas dans la version MX 6.1, mode "Modifier les styles"), ou pour modifier les CSS manuellement.

La gestion des CSS est encore facilitée du fait que certaines feuilles sont stables/évoluent peu une fois le site finalisé, tandis que d'autres sont fréquemment modifiées (chez moi, principalement texte.css).
Tu peux trés bien avoir une feuille de style pour l'affichage à l'écran (dans le navigateur) et une autre pour l'impression.

Comme ceci :


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


Quand l'internaute voudra imprimer (ou sauver en pdf, etc...) ta page, c'est la feuille print.css qui sera utilisé pour la mise en page. Tu peux donc facilement changer de police, masquer des parties, réorganiser ta mise en page pour l'impression.

Il existe d'autres type de medias, si tu comprend l'anglais :

http://www.w3.org/TR/REC-CSS2/media.html#media-types
thierry a écrit :

C'est vraiment beaucoup plus facile de s'y retrouver dans le panneau "Styles CSS" de Dreamweaver avec 5-6 listes distinctes et relativement courtes qu'avec une seule longue liste (même si les noms sont explicites), d'autant que les CSS y sont affichées par ordre de création et pas par nom (en tout cas dans la version MX 6.1, mode "Modifier les styles"), ou pour modifier les CSS manuellement.


Ah c'est possible, mais j'utilise tellement peu DreamWeaver il faut dire. :P
a écrit :
Quand l'internaute voudra imprimer (ou sauver en pdf, etc...) ta page, c'est la feuille print.css qui sera utilisé pour la mise en page. Tu peux donc facilement changer de police, masquer des parties, réorganiser ta mise en page pour l'impression.


C'est génial ! Smiley eek
Merci du tuyau !
A propos des CSS print, voir:
Une feuille de style pour l'impression
Un exemple de feuille de style d'impression

Mais attention:
- certaines fonctionalités avancées des CSS print ne sont pas supportées par les navigateurs actuels, et en particulier le changement d'orientation de la page par @page { size: landscape; } (celui-ci disparaît d'ailleurs de CSS2.1)
- les réglages de la configuration utilisateur l'emportent systématiquement sur les CSS print, en particulier pour tout ce qui touche aux arrières-plans, aux marges, etc.

Bref, les CSS print sont à utiliser en étant conscient de leurs limites : elles ne sont pas là pour donner l'équivalent d'un PDF au rendu totalement déterminé. Voir ce billet de Clément Hardoüin: Mauvaise impression

Enfin, il est possible de proposer plusieurs CSS print alternatives,tout comme on propose plusieurs CSS screen alternatives. Voir Plusieurs styles alternatifs pour imprimer