mercredi 19 mars 2014

Le préfixage des règles CSS par les webmails de La Poste, Orange, SFR et Voila

La Poste, Orange, SFR et Voila ont la particularité d’être basé sur une même plate-forme de webmail, développée par Atos Wordline. C’est plutôt pratique, sauf que ça signifie qu’ils partagent aussi les mêmes bugs de cette plate-forme. Et en l’occurrence certains plutôt rigolos.

La plupart des webmails qui ne suppriment pas les balises <style> préfixent les règles CSS afin d’éviter tout conflit avec le reste de la page. C’est le cas de ces quatre webmails, qui préfixeront systématiquement les règles CSS par #message. Donc si vous écrivez une règle .toto, elle sera transformée en #message .toto.

Jusque là, c’est plutôt simple. Mais ça se complique quand on commence à utiliser des media queries. Dans une media query, le préfixe #message est toujours appliqué, sauf pour la première règle contenue à l’intérieur de cette media query. Ainsi l’exemple suivant…

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white; }
	.tutu { background:black; }
}

… sera transformé en…

#message .toto { background:red; }
#message .tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white; }
	#message .tutu { background:black; }
}

Cela signifie que la première règle .toto à l’intérieure de cette media query ne sera jamais interprétée, car elle est moins spécifique que la règle préfixée par #message au dessus. Pour palier à ça, il est alors impératif d’utiliser une règle !important à la fin de la première règle surchargée dans une media query. Dans l’exemple précédent, ça donnerait :

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white !important; }
	.tutu { background:black; }
}

Là où ça devient rigolo, c’est quand on teste ça sur mobile. Parmi ces quatre webmails, La Poste est le seul à bénéficier d’une version optimisée pour mobile. Le comportement décrit précédemment est sensiblement le même, sauf que c’est une classe comportant un identifiant dynamique qui est utilisée, par exemple .wrapper_h8ufTw, au lieu de l’identifiant #message. Mais la particularité qui prête à sourire, c’est qu’à l’intérieure d’une media query, la dernière ligne correspondant à l’accolade de fermeture de cette media query est également préfixée. Dans des navigateurs modernes, ça n’a pas d’incidence sur le bon fonctionnement des règles. Mais ça donne le joli code transformé par le webmail suivant :

.wrapper_h8ufTw .toto { background:red; }
.wrapper_h8ufTw .tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white !important; }
	.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }

cahnory, le mercredi 19 mars 2014 à 14:07
Concernant l’ajout de !important, il ne serait pas possible d’ajouter plutôt une règle inutile du genre :
```
.foo {}
```
ce qui me parait plus simple à réutiliser et plus difficile à oublier (même si ajouter un !important n’est pas une difficulté énorme ;)).
Peut-être en y ajoutant une propriété si les règles vides sont supprimées.
saajuck, le mercredi 19 mars 2014 à 14:13
« le préfixe #message est toujours appliqué, sauf pour la première règle »

Je suppose que le préfixage sert a ce qu’il ne s’applique pas en dehors du mail.
Mais du coup, là, tu peux ?
avec un truc du genre :
```
@media only screen and (max-width:600px) {
	.body{ display:none !important; }
	.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }
```
Rémi, le mercredi 19 mars 2014 à 14:53

@cahnory : En effet, ça peut être une solution plus facile pour éviter d’oublier (et mettre en évidence qu’il y a bien un bug à ce niveau là si quelqu’un est amené à relire le code). J’ai d’ailleurs utilisé une technique similaire pour un autre bug liés à ces webmails dont je parlerais prochainement.
Remi Grumeau, le mercredi 19 mars 2014 à 14:59
En fait c’est encore bien plus idiot que ça. Il ajoute #message ou son prefix à chaque début de saut de ligne si cette ligne n’est pas vide. Donc si une tabulation ou un espace ou un commentaire est là, paf prefix !

Ce qui transforme:
```
.classname {
  color: red;
  border: 1px solid red;
  /* on enlève la marge du haut */
  margin-top: 0px;
  
  background: #fff;
}
```
en
```
#message .classname {
  color: red;
  border: 1px solid red;
#message  /* on enlève la marge du haut */
  margin-top: 0px;
#message  
  background: #fff;
}
```
Ce qui peut aussi rendre une propriété non applicable
```
/* texte en rouge */
.rouge {
  color: red;
}
```
devenant
```
#message /* texte en rouge */
#message .rouge {
  color: red;
}
```
soit #message #message .rouge, ce qui n’existe pas.

Et donc pour éviter ça, on dé-indente tout son code CSS et on vire tout les sauts de ligne et les commentaires avant envoi.
Rémi, le dimanche 23 mars 2014 à 10:00
@Rémi : J’avais mis à jour l’article suite à ton commentaire. Mais en retestant, je me rends compte que je n’arrive pas à reproduire le problème.

Par exemple :
```
/* Commentaire d'une règle */
.toto
{
	/* Commentaire d'une propriété */
	background:red;
}
```
Sera transformé en :
```
#message 
.toto
{
	
	background:red;
}
```
Peut-être que ce bug a été corrigé depuis la première fois où tu l’as repéré ?

@saajuck : On peut imaginer faire ce genre de choses. Par contre en l’occurrence, le webmail mobile de La Poste supprimera toute règle touchant la balise <body>.
Emmanuel, le samedi 21 mars 2015 à 01:27

Merci pour cette article assez éclairant sur le comportement de ces webmails (je ne sais pas si c’est encore d’actualité). Par ailleurs je cherche à savoir comment tester mes rendus dans le Webmail de SFR (je ne suis pas client chez eux) sans passer par des outils de tests de rendus payants (email on acid ou get in box). Est ce qu’en testant sur le webmail de la poste cela me garantit que j’aurais un rendu identique sur celui de SFR ou Orange ?
Rémi, le samedi 21 mars 2015 à 10:38

@Emmanuel : il y a en effet eu du changement depuis cet article. Le webmail desktop de La Poste est passé depuis sur Zimbra (comme Free). La meilleure solution reste donc d’être client chez SFR ou Orange pour créer une adresse chez eux. Peut-être que quelqu’un autour de toi peut créer une adresse pour toi ? J’étais client chez SFR et j’avais pu me créer une adresse un compte chez eux. Curieusement, même après avoir résilié mon abonnement chez eux, mon adresse mail est toujours fonctionnelle.