Yahoo supporte les media queries

C’est la nouvelle de la semaine rapportée par FreshInbox : Yahoo supporte désormais officiellement les media queries. Précédemment, Yahoo filtrait les media queries, et les filtrait mal. Ainsi le code suivant…

@media only screen and (max-width:600px) {
	.box { width:auto; } 
	.box-title { font-size:1.25em; }
}

… était transformé en :

_filtered #yiv6851014585 {
}
	#yiv6851014585 .yiv6851014585box-title { font-size:1.25em; }
}

Yahoo prenait le contenu entre la première accolade ouvrante d’une media query et la première accolade fermante (correspondant à la première règle), et filtrait le tout. Les autres règles contenues dans la media query se trouvait alors appliquée quelque soit le medium. On utilisait alors des sélecteurs d’attributs dans les media queries pour éviter que les règles ne s’appliquent. Tout ça, c’est désormais terminé.

Et cette correction ne vient pas de nulle part. Il y a tout juste un mois, Justin Khoo a remonté le bug sur la plate-forme dédiée de Yahoo. Et en un mois seulement, Yahoo a fait la correction. C’est très encourageant de voir que Yahoo est prêt à faire ce genre de corrections.

L’autre bonne nouvelle, c’est que cette modification s’applique pour toutes les versions de Yahoo, soit le webmail desktop, mais aussi les applications iOS ou Android.

Tout n’est cependant pas tout rose. Yahoo ne supporte que les media queries basées sur min-width, max-width, min-height ou max-height. Les media queries basées sur min-device-width, min-device-height, max-device-width, max-device-height, -webkit-min-device-pixel-ratio ou même print seront filtrées.

Ainsi le code suivant…

@media only screen and (max-device-width:600px) {
	.box { width:auto; } 
}

… est transformé en :

@media screen and ( _filtered_a ) {
	#yiv6851014585 .yiv6851014585box { width:auto; } 
}

Un autre bug survient dès que l’on imbrique des media queries les unes dans les autres. Ainsi le code suivant…

@media only screen and (min-width:320px) {
	@media only screen and (max-width:480px) {
		.box { background:#001F3F; }
	}

	.box { background:#FF851B; }
}

… est transformé en :

@media screen and (min-width:320px) {
	@media screen and (max-width:480px)
	#yiv6851014585 .yiv6851014585box { background:#001F3F; }
}

#yiv6851014585 .yiv6851014585box { background:#FF851B; }
#yiv6851014585

Alors très clairement, je n’écris jamais de media queries comme cela (et j’ai du mal à imaginer des cas où ce serait indispensable de l’écrire comme ça). Mais cela pourrait devenir courant avec l’arrivée future de la spécification des Media Queries niveau 4.

Bravo quand même à Yahoo d’avancer dans la bonne direction. J’espère que ceci est le premier pas d’une longue marche.