SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 259 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Base CSS pour SPIP > Ordre d’appel des feuilles de style

Ordre d’appel des feuilles de style

21 mai 2011 – par tetue

10 votes

En adoptant un ordre d’appel qui donne successivement la main à la base CSS, aux plugins, puis au webmestre, la méthode Daisy permet de limiter les risques de conflit de style liés aux apports des différents plugins, pour une meilleure modularité dans SPIP.

Ordre d’appel des feuilles de style

Les déclarations CSS sont regroupées par fonctionnalité (et non par média, navigateur ou autre). L’on procède ensuite par surcharges successives, chacun son tour.

  1. Base CSS
    Aussitôt activée, cette base CSS insère les fichiers présents qui portent ces noms (d’après la nomenclature de la méthode Daisy), en première position, avant toute autre feuille de style et dans l’ordre suivant :
    1. reset.css : correction des styles par défaut (mise à zéro multinavigateurs)
    2. typo.css [*] : base typographique
    3. form.css : base pour les formulaires
    4. spip.css [*] : styles associés au code généré par SPIP
    5. clear.css [*] : trucs pour faciliter la mise en page
    6. grid.css (si vous la fournissez)
    7. layout.css (à remplacer par le vôtre)
  2. Plugins
    Les plugins insèrent leurs feuilles de style ensuite (via #INSERT_HEAD_CSS). Ils bénéficient donc de cette base CSS. On aura par exemple :
    • colorbox.css
    • skiplink.css
    • comments.css
    • links.css
    • ...
  3. Styles perso
    Personnalisez en ajoutant vos styles en dernier pour avoir le dernier mot, comme ceci (en autant de feuilles que bon vous semble) :
    [<link rel="stylesheet" href="(#CHEMIN{css/style.css}|direction_css)" type="text/css" />]

Remarques et avantages

Plus besoin de spip_style.css !

Les feuilles de style historiques de SPIP (spip_style.css, spip_formulaire.css, etc.) ne doivent pas être utilisées, puisque cette base CSS les remplace. Celles-ci disparaissent d’ailleurs de SPIP 3, qui adopte cette base CSS pour l’espace privé, depuis la révision 17937.

Pas besoin de feuilles par navigateur

Mieux vaut utiliser les classes conditionnelles pour Internet Explorer (« .ie », « .ie6 », « .ie7 », etc.) selon la méthode expliquée à cet article (en troisième partie) : « Cibler Internet Explorer dans une CSS ? Oui, et sans hack. » — plus précisément appliquées sur la balise <html>, plutôt que <body>, si si, comme dans HTML5 Boilerplate.

Pas besoin de feuilles par média

Sauf cas particulier, les surcharges pour l’impression et autres medias s’effectuent au fil de l’eau, dans la même feuille, grâce à la règle CSS @media suivie directement du type. De cette façon, on conserve groupées toutes les déclarations qui concernent un même élément, ce qui améliore la modularité fonctionnelle et facilite la maintenance.

Pas besoin de feuilles par langue

Il n’est pas nécessaire de fournir de feuille pour chaque version linguistique d’un site, même au sens de lecture inversé comme l’arabe ou l’hébreu, puisque SPIP génère les feuilles nécessaires (grâce au filtre |direction_css), en inversant les valeurs right et left. Kiffant !
Si besoin, utiliser les sélecteurs de langue .fr, .en, .de, etc.

Pas besoin de script de compression

On le sait, démultiplier ainsi les fichiers n’est pas très performant. SPIP se charge de concaténer et minifier tous les fichiers CSS (et JS) en un seul [*], de façon très appréciable.

Notes

[*Ces feuilles de style, générées par SPIP, portent au final un autre nom, méconnaissable et barbare, comme par exemple : « 0876b42b41ad9570126df542945dc174.css ».

Dernière modification de cette page le 21 janvier 2012

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Compositions 2 et 3

    25 mars 2011 – 176 commentaires

    Ce plugin vous permet de définir plusieurs variantes de squelettes (nommées compositions) pour un même type d’objet SPIP. Dans l’espace privé, il est alors possible de choisir, dans un menu déroulant, la composition qu’on veut attribuer à chaque (...)

  • Configurer Sparkpost

    25 avril – 18 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

Ça spipe par là