Le préfixage des règles CSS par la version mobile d’Outlook.com

Contrairement à d’autres webmails, la version classique d’Outlook.com ne se débrouille pas trop mal quand il s’agit de préfixer les règles CSS contenues dans un e-mail. Par défaut, toutes les règles CSS seront préfixées d’une classe .ExternalClass, et tous les noms de classes ou d’identifiants seront préfixés par ecx. Ainsi le code suivant :

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

@media only screen and (max-width:600px) {
	table[class="toto"] { background:white; }
	table[class="tutu"] { background:black; }
}

… sera transformé en…

.ExternalClass .ecxtoto { background:red; }
.ExternalClass .ecxtutu { background:blue; }

@media only screen and (max-width:600px) {
	.ExternalClass table[class="ecxtoto"] { background:white; }
	.ExternalClass table[class="ecxtutu"] { background:black; }
}

La classe .ExternalClass est alors judicieusement apposée sur une <div> contenant l’e-mail, et tout fonctionne comme si rien ne s’était passé. Jusqu’ici tout va bien, et on a presque envie de remercier les développeurs de chez Microsoft d’avoir fait correctement leur travail. Là où ça se gâte, c’est dans la version web mobile d’Outlook.com.

La version web mobile d’Outlook.com procède exactement au même renommage et préfixage des règles CSS que la version classique du webmail. Sauf que les développeurs ont oublié d’ajouter la classe .ExternalClass quelque part dans l’interface. Cela signifie que plus aucune de vos règles CSS n’est applicable. Si vous souhaitez optimiser des e-mails pour mobile pour Outlook.com, il est donc impératif de jouer uniquement avec des styles en ligne.

D’un coup, comme ça, on n’a plus tout à fait la même sympathie pour les développeurs de chez Microsoft.