JavaScript responsive et responsable, l’alternative
L’alternative vient de javascript
Cool, nous avons pu adapter l’usage des media queries au plus juste, seulement voilà, tous les navigateurs n’interprètent pas ces recommandations. En conséquence, ces améliorations ne pourront pas systématiquement être prises en compte. Dans ce sens, il est même possible de directement cacher les requêtes à ces navigateurs trop anciens, en usant du mot clé only devant la requête :
<link rel="stylesheet" media="only handheld and (max-width :321px)" href="style.css" />
Heureusement, là encore, il existe d’autres possibilités qui permettent de pouvoir basculer d’un affichage vers un autre. Ces alternatives impliquent l’activation de Javascript, car la mécanique s’appuie sur un script qui contrôle l’affichage et bascule la feuille de style en fonction des paramètres spécifiés.
Trois familles de solutions, parmi les plus courantes :
L’utilisation de telles librairies est déconcertant de simplicité. Nous préparons diverses feuilles de style en fonction de nos objectifs d’affichage. Les librairies prises en exemple fonctionnent de manière différente. La première nécessite des feuilles CSS distinctes et va répartir leur utilisation au travers des paramètres indiqués dans le script javascript d’entête :
range: [
'0px to 760px = feuilleA.css',
'760px to 980px = feuilleB.css',
…
]
Les deux autres, nous laissent préparer nos CSS sur des fichiers externes, comme pour un usage avec la prise en compte de media queries. Mais ces deux librairies se chargent de palier aux lacunes des navigateurs, quant à la prise en compte des media queries :
<link href="respond.css" rel="stylesheet" type="text/css"> <script src="respond.min.js"></script> ou <script src="css3-mediaqueries.js"></script>
Chuck Kollars à également publier une analyse sur son blog, Alternative to Media Queries.