En ce beau 20 décembre, je taponne joyeusement dans Typo3 pour venir à bout de mettre en ligne un site extranet au début janvier et j'ai eu des petits problèmes de styles.
En développement, nous utilisions une instance de Typo3 4.1.1, mais sur le serveur de production, nous sommes passé à la vesion 4.1.5. Bien que ce ne soit pas des changements majeurs, il y a eu suffisemment de changements pour que ce soit des désagréments.
[précision]Peut-être quelques lecteurs avertis se demanderont pourquoi ne pas passer à la version 4.2? Eh bien, c'est notre serveur qui est en Novell Suse Linux, ce faisant, nous sommes dépendants des mises à jour de Novell pour l'ensemble des composants Linux. Typo3 4.2 nécessite des versions de composants qui ne sont pas encore intégrés dans la Suse Linux... d'où le retard de versions... [/précision]
Or donc, entre la version 4.1.1 et la 4.1.5, il y a un changement d'importanceentre une instance de Typo3 et une autre, sur nos serveurs, il y a une difféence, sans lien avec la version du logiciel. Les CSS des extensions (car chaque extension possède son propre lot de CSS) étaient regroupées dans un seul fichier, qui lui était lié par la page HTML via une balise LINK. Le fichier était stocké dans un répertoire temporaire, soit typo3temp.
La nouvelle moutureL'instance 4.1.3 de Typo3 que nous utilisons gère différemment ces CSS, il les intègre directement dans le HEAD de la page, donc, ça devient des styles inclus (embedded). Ainsi, ceux qui connaissent un tant soit peu la hiérarchie des CSS seront, comme moi, choqués!
Effectivement, selon la hiérarchie structurelle des styles (que de grands mots!), plus la définition de style est près de l'élément, plus elle est a de «poids» et a préséance sur les styles en amont. Ainsi, un style en ligne écrase un style inclus qui lui écrase le style lié (LINK) ou importé (@import) (là, je ne me souviens plus trop... entre LINK et @import lequel a plus de poids?).
Finalement, mon problème était que je ne pouvais plus jouer sur certains styles, étant donné qu'ils avaient préséance sur mes styles liés! Il y avait donc plein d'artéfacts (pour ne pas dire du bruit) dans mon visuel... La solution? un petit bout de TypoScript tout simple à mettre dans le «page template» du site:
plugin.[nom de l'extension]._CSS_DEFAULT_STYLE =
# répeter pour chaque extension qui cause problème...
[nom de l'extension] correspond à l'extension qui place ses styles dans la page. L'avantage est double: on enlève les styles problématiques, ce qui allège [considérablement] la page et, étant donné que nous sommes dans le page template de la racine du site, une mise à jour de l'extension n'aura pas d'effet sur le code et on aura pas à refaire l'opération à chaque fois!
Bon, ok, j'en vois venir, comme Yannick ;-) qui vont me dire que ce n'est pas correct, qu'il faut garder une portion des styles de base de l'extension... on réinvente la roue ou autre... j'en conviens, c'est plus de travail au final, mais je peux ainsi avoir un contrôle total sur l'apparence de mon site! je gère mon visuel, mes styles et rien n'entre en conflit avec ce que j'ai défini.
Au final, c'est très malléable Typo3, il suffit juste de trouver comment l'ajuster!
Mise à jour: Yannick m'a effectivement contacté pendant le temps des fêtes, mais c'est aujourd'hui, le 7 janvier que je peux indiquer la précision. La différence majeure est liée à l'instance de Typo3 et non de la version. Effectivement, il faut ajouter un simple petit TS qui va s'assurer que les styles sont liés et non pas inclus. Ce TS est config.inlineStyle2TempFile = 1 qui envoit les styles dans un fichier externe. Malgré tout, j'ai joyeusement flushé les styles par extensions!
Libellés : css, typo3, web design
