Les media queries sur le webmail mobile de La Poste, deuxième

Il y a du nouveau sur le webmail mobile de La Poste et son interprétation des media queries depuis mon précédent article. Mais ce n’est pas mieux pour autant.

Précédemment, je remarquais que le webmail mobile de La Poste supprimait systématiquement la première media query au sein d’une balise <style>, mais tout en conservant quand même les règles à l’intérieur de cette media query. J’ai remarqué cette semaine que ce problème avait été corrigé. La première media query n’est donc plus supprimée.

Mais, parce que forcément il y a un mais, celle-ci est désormais préfixée par le préfixe ajouté automatiquement par La Poste. Ainsi 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 @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; }

Autrement dit, les règles contenues dans la première media query ne fonctionneront pas sur le webmail mobile de La Poste. Pour palier à ça, ma recommandation du précédent article fonctionne toujours : ajoutez systématiquement une media query avec une règle factice avant vos vraies déclarations :

@media only screen and (max-width:0) { 
	body { margin:0; } 
}

Au passage, j’ai remarqué deux autres points sur l’interprétation des styles par le webmail mobile de La Poste :

• Si un bloc de styles se termine par une media query, l’accolade fermante de celle-ci sera supprimée (cf exemple ci-dessus).
• La première règle suivant une media query ne sera pas préfixée.