Carnet Wiki

facteur_css_inline

Version 6 — Avril 2011 JLuc

Facteur utilise un vieux script pour transformer les css en css inline.

Tout n’est pas possible, les syntaxes officiellement supportées sont les suivantes :

 TAG { ... }
TAG1, TAG2, ... { ... }
TAG.class { ... }
.class { ... }
TAG:pseudo { ... }

Les éléments dans le html peuvent être stylés avec l’attribut style=« ... » à condition que la valeur utilise les doubles quotes et pas les simples quotes, pour une bonne combinaison avec les styles mis inlines.

Ne sont pas supportés les styles suivants :

- chaînes P UL LI { .... } or P UL LI.class { .... } ( 3 ou plus noms enchainements)
-  #divname p { ... } and <tag id="...">
- a:hover, a:visited {...} multiple class:pseudo

(JLuc) Je remarque que n’est pas supporté non plus :

.uneclasse, .uneclasse atag { ...} (3 noms enchainés encore une fois)

Précisions de l’auteur :
-  style info should be placed in head section.
-  pseudo-classes like a:hover {...} can’t be inserted inline
in the html tags : they are moved to a <style> declaration in
the <body> instead. This is a limitation from html, not this script.
-  CSS definitions may be freely formatted (spaces, tabs, linefeeds...), they are converted to oneliners before inserting them inline in the html tags.
-  class definitions are processed AFTER tag definitions, thus appended inline after any existing tag styling to
preserve the normal css priority behavior.

et of course :
-  It is still up to you to check if target email clients render
your css styled templates correctly, especially webmail services
like Hotmail, in which the email becomes a sub-part of an html page,
with styles already in place.

Par ailleurs, les gestionnaires de mails suppriment (mystérieusement) le . devant un nom de classe dans un bloc de définition de CSS, mais pas devant un nom de tag. Il faut donc ruser. Pour contourner : au lieu de .maclasse, s’arranger pour définir plus précisément : div.maclasse

Références


-  http://www.campaignmonitor.com/css : quelle css est supportées par quels visionneurs de mails
-  http://www.pompage.net/pompe/cssemail : on y découvre que c’est habituel de supprimer le . dans la définition du style d’une classe, qui perd ainsi tout son sens.Pour contourner : au lieu de .maclasse, s’arranger pour définir plus précisément : div.maclasse

Discussion

La détection se fait par une regexp :
-  

		preg_match_all ( "/^[ \t]*([.]?)([\w, #]+)([.:])?(\S*)\s+{([^}]+)}/mi", $this->Body , $styles);

(JLuc) L’algorythme est un peu lourdingue, il faudrait définir ce qu’il fait et ne fait pas de manière plus claire, et éventuellement améliorer. Vérifier la regexp et son traitement détaillé dans les recoins des ifs, ç’a pas l’air parfaitement au point mais là j’arrive pas à débuguer là car aucun match ne se fait, je sais pas pourquoi !