[Résolu] CSS modulaire

Bonjour,

Je viens de lire cet article (désolé, je n'ai pas trouvé de traduction française), et je trouve l'idée plutôt intéressante.

Je me demandais si parmi vous certains avaient déjà utilisé cette technique, et ce qu'ils en pensent.

A priori ça m'a l'air pas mal, mais je me demande si ça fonctionne aussi sur des navigateurs un peu ancien. Il en parle dans son article, mais je n'ai pas bien saisi ce passage :

a écrit :

I use a file called screen.css but it can be whatever you like. All you're doing here is @importing your CSS modules to make up a complete site. The @imports cover N4 degredation so you can just <link> to shell.css from your HTML.

Merci !
Modifié par goetzilla (25 May 2005 - 15:40)

A ce propos :
http://elyste.exomel.com/2005/05/24/polices-relatives-css-modulaire/

Voir mon premier commentaire sur ce billet pour mon avis et les explications succintes.

mÔa a écrit :



Ne pas oublier qu’utiliser des tailles de polices “fixes” est une pure utopie de contrôle, en effet les navigateurs permettent le redimenssionement des polices même en pixel, sauf Internet Explorer, mais nul doute que les futures versions corrigent ce bug (oui, en fait c’est un bug ).

Personnelement, je n’utilise pas de feuille de style en import de cette façon, quand je fais une version alternative des styles, ça change trop radicalement (oui, une grande force la mise en page CSS ^^), par contre, pour faire des mises en forme par type de contenu, ou par zone, là j’utilise plus. Par exemple pour les styles habituels tels les formulaires ou autres balises mises en forme à peu près de la même façon quelque soit la mise en page et en forme.

A noter aussi que cette syntaxe permet d’empêcher l’interpretation des styles CSS par les vieux navigateurs.

@+

Merci beaucoup pour le lien et pour tes remarques.

Par contre une question bête, mais je débute.

a écrit :
A noter aussi que cette syntaxe permet d’empêcher l’interpretation des styles CSS par les vieux navigateurs.

C'est ce qui est fait habituellement ? Je veux dire qu'on ne doit pas essayer de donner un minimum de style pour les anciens navigateurs, on laisse le contenu brut tel quel ?

D'ailleurs, c'est quoi "vieux navigateurs", c'est quelles versions ?

Je pense que ce billet devrait t'apporter pas mal de réponses

Raphael a écrit :
Je pense que ce billet devrait t'apporter pas mal de réponses

Merci. Effectivement, je comprends un peu mieux maintenant.

Finalement est-ce que la méthode suivante vous semble correct :
- faire un link vers toto.css dans la page
- dans toto.css, faire un (ou plusieurs) @import vers une autre feuille de style

Ainsi on combine les avantages des deux méthodes : pouvoir utiliser des styles alternatifs et cacher le style aux navigateurs anciens.

Par contre j'ai quelques interrogations encore :
- est-ce le navigateur va garder les feuilles de style en cache ou devra-t-il les recharger à chaque fois ?
- dans la cas où on fait plusieurs @import vers différentes css (une pour la typo, une pour les couleurs, etc.), le seul point qui me gène est la répétion des sélecteurs, qui du coup alourdit la quantité de données à télécharger. Mais bon, je ne suis pas sûr que ça ait un réel impact.

Vieux navigateurs, c'est navigateurs de version inférieure à 4
Netscape 4 et Internet Explorer 4 (entre autre).

Et mieux vaut offrir le contenu brut de décofrage à ces navigateurs, ça sera tout à fait lisible si contenu et mise en forme ont bien été séparés.
En tout cas, offrir une mise en page complexe est à proscrire !
D'où l'interet d'utiliser ce type de syntaxe.

Par ailleurs, on peut appliquer des styles très sommaire pour ces vieux navigateurs, mais ne pas compter sur une mise en page structurée.

Pour ce qui est de la mise en cache, elle est bien effectuée.

Pour ce qui est de la répétition des sélecteurs, oui, c'est un peu vrai.
Mais tout dépend de l'usage que l'ont fait de cette modularité.

Si on veut faire des versions qui changent simplement les couleurs, c'est pratique malgré la répétition des sélecteurs, on économise tout de même tout le reste de la mise en page.

Perso, j'utilise ce type de chose pour les différentes type de choses à mettre en forme, genre les form d'un côté, la mise en page du contenu d'un autre et enfin le titre, le menu et le pied elements annexes au contenu.
Et là pas de répétition.

Encore une fois, tout dépend l'usage final.
Par ailleurs, on peut très bien utiliser un seul @import pour l'ensemble de la feuille de style directement dans le <style type="text/css"> plutôt que d'utiliser un <link> qui appel via @import la feuille de style.

Olivier a écrit :
Par ailleurs, on peut très bien utiliser un seul @import pour l'ensemble de la feuille de style directement dans le <style type="text/css"> plutôt que d'utiliser un <link> qui appel via @import la feuille de style.

Oui mais à ce moment là on ne pourra pas proposer de styles alternatifs, d'où l'intérêt de passer par plusieurs link.

Bah tu peux faire

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

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

Je préfère (perso) cette façon de faire plutôt qu'un link avec un @import dedans. je trouve que ça sépare mieux. Enfin, pour le cas d'une feuille alternative pour vieux navigateurs

Et bien merci à tous les deux pour vos réponses et toutes ces précisions. Je vais un peu réfléchir à tout ça.

Mais je crois que je peux mettre un [Résolu] à ce sujet.

Si tu as des questions par rapport à un cas précis qui te concerne, n'hésite pas à les poser