Sur la version mobile du webmail de La Poste, il y a un bug important dans leur analyse des styles, et plus particulièrement des media queries. Peu importe le contenu de votre balise <style>, la première media query sera toujours supprimée. Et pire, les règles à l’intérieur de cette media query seront conservées, sauf la première qui elle sera totalement ignorée.
Concrètement, cela signifie que le code suivant…
.toto { background:red; }
.tutu { background:blue; }
@media only screen and (max-width:600px) {
.toto { background:white; }
.tutu { background:black; }
}
@media only screen and (min-width:320px) {
.toto { color:white; }
.tutu { color:black; }
}… sera transformé par le webmail mobile de La Poste en :
.wrapper_h8ufTw .toto { background:red; }
.wrapper_h8ufTw .tutu { background:blue; }
.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }
@media only screen and (min-width:320px) {
.toto { color:white; }
.wrapper_h8ufTw .tutu { color:black; }
.wrapper_h8ufTw }Cela peut s’avérer très problématique, car on se retrouve avec des règles appliquées par défaut alors qu’elles devaient l’être uniquement dans une media query. (Vous apprécierez au passage le préfixage buggé évoqué précédemment.)
Pour éviter cela, on peut insérer une première media query, en prenant le soin d’ajouter quand même à l’intérieur une règle (sinon la media query sera ignorée, et le bug quand même présent). Attention, comme ce bug est bien spécifique au webmail de La Poste, cela signifie que cette media query sera interprétée par d’autres applications ou webmails. Il est donc impératif d’ajouter un code bidon qui n’aura pas d’impact sur les autres. On peut par exemple cibler un max-width:0.
En reprenant le code de l’exemple initial, on obtient alors le code suivant :
.toto { background:red; }
.tutu { background:blue; }
@media only screen and (max-width:0) {
body { margin:0; }
}
@media only screen and (max-width:600px) {
.toto { background:white; }
.tutu { background:black; }
}
@media only screen and (min-width:320px) {
.toto { color:white; }
.tutu { color:black; }
}Le code final transformé par La Poste sera alors :
.wrapper_h8ufTw .toto { background:red; }
.wrapper_h8ufTw .tutu { background:blue; }
@media only screen and (max-width:600px) {
.toto { background:white; }
.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }
@media only screen and (min-width:320px) {
.toto { color:white; }
.wrapper_h8ufTw .tutu { color:black; }
.wrapper_h8ufTw }
madeofpixel, le
Très spécifique et détaillé, bien joué :)
Saoryx, le
Merci monsieur chteumeul, cet article m’a permis de gagner un paquet de temps sur la correction d’un e-mail.
Hélas j’ai passé beaucoup de temps à comprendre pourquoi, malgré l’insertion d’une première media-query-poubelle, l’e-mail était toujours défoncé sur ce webmail.
Cela était dû à une mauvaise gestion du caractère « > » en tant que sélecteur d’enfant… de fait, tout ce qui se trouvait AVANT le caractère « > » au sein de la balise était simplement mangé par LaPoste.
Rémi, le
@Saoryx : Merci, je n’avais pas encore rencontré ce problème. Je le note dans un coin pour en parler plus tard.
Unker, le
Merci pour ce petit tuto !
Il est vrai que Laposte fou bien le bordel… Cependant cela ne fonctionne toujours pas chez moi… :/ … une idée ?
Rémi, le
@Unker : Est-ce que tu peux poster un exemple de code sur CodePen ou autre ? Peut-être que c’est l’une des propriétés ou sélecteurs que tu utilises qui n’est pas supporté.
Unker, le
Merci pour ta réponse ,
Je copie colle le CSS concerné ici, j’espère que ça sera suffisamment lisible.
En 1er lieux on trouve le media querie que tu as dis de mettre et en seconde lieux, celui que Laposte prend en compte.
Rémi, le
@Unker : J’ai pu faire un test, et ça rejoint un problème de préfixage du webmail qui avait été remonté dans les commentaires du précédent article mais que je n’avais pas réussi à reproduire.
En fait le code :
… sera transformé en :
Autrement dit un peu n’importe quoi. Le problème vient du commentaire CSS, qu’il vaut mieux supprimer pour l’envoi, et de la requête media double (qui se retrouve préfixée en plein milieu), qu’il est préférable de limiter à une requête par déclaration.
Unker, le
Merci beaucoup !
Effectivement, c’est le commentaire qui faisait bugger… c’est quand même un truc de fou.
La double déclaration ne dérange pas – elle ne sert pas non plus d’ailleurs ( j’avais vu ce fix sur un site mais ne règle rien en réalité … ) .
Merci encore, je pense que ça va en aider plus d’un …. !