1476 sujets

Web Mobile et responsive web design

Bonjour

J'ai une petite question : il y a t'il une autre solution que matchMedia pour afficher un slider (ou autre bloc) qu'à partir d'une certaine résolution ?

Merci
Administrateur
Bonjour,

en CSS les Media Queries bien entendu mais je suppose qu'il me manque une info si tu poses la question de matchMedia directement Smiley smile

Pour lier des MQ à du JavaScript sans avoir recours à matchMedia (coucou IE9), je me servais de l'astuce suivante : https://davidwalsh.name/device-state-detection-css-media-queries-javascript
En CSS, on fixe des valeurs récupérables en JS en prenant soin que ces valeurs n'aient aucune influence sur les styles visibles et perçus des pages.
En JS, on regarde quelle est la valeur actuelle et on agit en conséquence.

Sinon polyfill.
Edit : veux-tu te passer de JS parce qu'amélioration progressive ou bien est-ce un souci de compatibilité ?
Modifié par Felipe (17 Oct 2016 - 17:46)
Administrateur
Non c'est bien la méthode à utiliser actuellement Smiley smile
En 2013, le problème était l'absence de support sur IE9 et moins ; en 2016 c'est réglé.

Pour ne pas charger inutilement les images, un display: none (dans une MQ) sur un conteneur devrait suffire mais tu peux aussi choisir de les lazyloader en JS (sauf peut-être la 1ère pour éviter un trop long temps sans rien devant les yeux de l'utilisateur). Idem pour le script du slider s'il fait quelques dizaines de ko (y a peu de chances, mieux vaut charger quelques lignes même si elles sont inutiles dans cette résolution). À toi de voir à quel point et comment optimiser cette différente entre mobile et desktop Smiley cligne
Je suis allée regarder hier soir quelques références d'alsacreations.fr et effectivement, j'ai bien vu que vous utilisiez encore matchMedia... je vais donc réfléchir à son utilité ou pas dans mon cas Smiley cligne

Merci encore pour tout tes conseils.