Détection des media queries en JS

Salut à tous,

je cherche une alternative à la fonction matchMedia() qui ne fonctionne hélas pas sur IE9 et ses ancêtres...

J'ai trouvé une solution basée sur la détection du style CSS en JS.

Exemple ici :

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

et une alternative ici :

http://jsbin.com/ehawax/1/

En gros on créé un style unique sur un élément de la page pour chaque media queries, puis en JS on vérifie le style de cet élément pour savoir quelle media queries est appliquée.

J'aimerai avoir votre avis sur cette technique, est ce une bonne pratique ? Moi elle me parait bonne mais n'y aurait t'il pas une faille ?


En vous remerciant par avance
Modifié par Gyzm0 (04 Nov 2013 - 17:30)

salut,
vu que t'es en JS tu peux passer directement par la détection de la largeur d'écran via "screen.width".

Salut,

Et une lib comme enquire.js ?

tm

Hello,

Dew avait donné un polyfill en fin d'article sur matchMedia()

@tm : tu l'aimes bien cet enquire.js, non ?

@Zelalsan: le problème de "screen.width" c'est que ça ne marche que pour les medias queries avec width en px ? J'aimerai une méthode plus universelle, par exemple si j'utilise les media queries width avec l'unité EM...


@tm: j'ai vu cette lib mais pas je ne l'ai pas encore testée, à voir mais ça fait charger un fichier supplémentaire donc je cherche une solution plus légère.


@6l20: Oui je sais, j'ai même créé un sujet à propos de ce polyfill mais il semble poser quelques soucis sur IE > 9


Merci pour vos réponses mais du coup personne n'a donné son avis sur la méthode que je propose ? Quels seraient les inconvénients de cette technique ?

Les avantages que j'y vois :

- compatible tous navigateurs (nécessite qd même une librairie pr supporter les MQ pr IE tel que respond.js)
- léger (pas de librairie ou de polyfill supplémentaire)
- fonctionne pour toutes les media queries

Zelalsan a écrit :

euuuh.... Pas très bien compris et je ne vois pas trop l'utilité. Tu peux par ailleurs convertir des "px" en "em" très aisément.

Si dans ma css j'ai ce genre de media queries :

@media all and (min-width: 41em)

Comment je détecte la même chose en JS ? Il faut que cela fonctionne sur IE >= 7 pour rappel.

Je répète que je ne vois absolument pas pourquoi tu te compliques la vie autant. Comme je l'ai dit précédemment, tu peux aisément convertir des pixels en "em" (1em = 16px).

Zelalsan a écrit :
Je répète que je ne vois absolument pas pourquoi tu te compliques la vie autant. Comme je l'ai dit précédemment, tu peux aisément convertir des pixels en "em" (1em = 16px).

Oui, je me complique peut être un peu la vie

J'ai quand même un doute sur les "em", es tu certain que 1em = 16px partout ?

https://speakerdeck.com/nhoizey/un-petit-pas-pour-lem-un-grand-pas-pour-le-web-paris-web-2013


Aujourd'hui, je parcours le Web principalement sur mon ordinateur portable, très souvent sur mon smartphone, parfois sur ma tablette et ma TV, et plutôt exceptionnellement sur ma liseuse. Ces différents appareils ont bien entendu des formats — paysage ou portrait — et tailles très différents, ce que les adeptes du *Responsive Web Design* ont bien intégré dans leur conception du Web.

Mais ils ont aussi des tailles de base de police de caractère très différents —une échelle de 16 à 24px dans mon cas—, ce que presque tous les intégrateurs Web ignorent, ou choisissent d'ignorer pour se faciliter la tâche.


D'après ce que je comprend, sur une tablette la taille de base de la police peut être de 24px.

Du coup ma conversion de 1em = 16px en JS faussera le rendu ??

Bin les rendus seront forcément différents. Les tailles de police (rendu visuel) ne sont déjà pas les mêmes entre FF, Chrome et IE par exemple.
La relation entre unités est établie (et non par moi ) et c'est
1em = 12pt = 16px
1in = 2,54cm = 25,4mm = 72pt = 6pc

EDIT: en plus je viens d'y penser. Il faut garder en tête que les "em" sont des unités relatives à la taille de police donc tout ça reste relatif. Si tu définies une police de l'élément égale à "20px" alors 1em sera égal à 20px. Ce qui est dit plus haut est en rapport avec la taille standard des navigateurs.
Modifié par Zelalsan (06 Nov 2013 - 18:08)

Zelalsan a écrit :
en plus je viens d'y penser. Il faut garder en tête que les "em" sont des unités relatives à la taille de police donc tout ça reste relatif. Si tu définies une police de l'élément égale à "20px" alors 1em sera égal à 20px. Ce qui est dit plus haut est en rapport avec la taille standard des navigateurs.

On est d'accord ! Mais du coup ya un truc que j'ai du mal à comprendre avec le "screen.width" en JS.

Imaginons dans ma CSS, j'ai une media queries pour le design "smartphone" :

@media (max-width: 30em) {

// correspond a du 480px max pour une base de police en 16px.
// correspond a du 600px max pour une base de police en 20px.

}

Dans mon JS, je veux détecter cette media queries pour y ajouter par exemple une fonctionnalité spécifique pour le design "smarphone", comment dois je procéder ? Si je fais :

if ( (screen.width / 16) <= 30 ) {

  // Je lance ma fonctionnalité JS

}

Pour moi ce n'est pas la bonne solution, car ça fonctionnera correctement que pour une base de police de 16px, et il y aura une "désynchronisation" par rapport au CSS si la valeur de base est différente de 16px...

Ou alors il faut calculer en JS la taille de base de la typo pour rendre la valeur dynamique, mais je ne sais pas comment faire ?
Modifié par Gyzm0 (07 Nov 2013 - 10:18)

Tu peux encore une fois récupérer la valeur actuelle de la taille de police. Dans ce cas tu te réfèreras à celle de l'élément "root". Tu donneras ensuite une class à ton "body" pour pouvoir appliquer les styles selon la résolution.
Un exemple simple :

function getStyle(x){return (x.currentStyle) ? x.currentStyle : getComputedStyle(x, null);}

var curFontSize = getStyle(document.documentElement).fontSize;

if (screen.width / curFontSize <= 30){
	document.body.className = "max-30em";
}

À noter qu'ici cela suppose que ton body n'ai aucune class déjà définie car elle est écrasé à chaque fois. Si non la syntaxe changera s'il contiendra d'autres noms de class.

Au passage et encore une fois, tu te compliques vraiment la vie.

Merci pour ta réponse.

Zelalsan a écrit :
Au passage et encore une fois, tu te compliques vraiment la vie.

J'ai l'impression qu'on ne se comprend pas bien... Pourquoi dis-tu que je me complique la vie ?? Je ne demande "qu'à" avoir une solution simple et efficace... Quelle solution me proposes-tu alors ? Et je ne comprend pas pourquoi tu rajoutes une classe au body ?

Les media queries avec l'unité "em" sont une nécessité pour avoir un site responsive qui s'adapte parfaitement à tous les devices.


EDIT:

En te relisant, je crois que tu n'as pas bien compris ma demande... Je ne cherche pas à détecter une media queries en JS pour faire du CSS... mais simplement pouvoir executer certains scripts JS en fonction de mes medias queries déjà écrites en CSS ! Par exemple je veux pouvoir lancer un slider spécifique que pour le design "tablette"...
Modifié par Gyzm0 (07 Nov 2013 - 16:14)

Gyzm0 a écrit :

J'ai l'impression qu'on ne se comprend pas bien... Pourquoi dis-tu que je me complique la vie ??

Bin pour la simple raison que tu pourrais passer par des "px". Pour quelle raison tu le fais en "em" ?

Gyzm0 a écrit :

En te relisant, je crois que tu n'as pas bien compris ma demande... Je ne cherche pas à détecter une media queries en JS pour faire du CSS... mais simplement pouvoir executer certains scripts JS

Autant pour moi, je ne m'étais pas très bien concentré sur le sujet. Le script par contre reste le même sans le "document.body.className...". Ton script serait donc dans le bloc de condition.

Zelalsan a écrit :

Bin pour la simple raison que tu pourrais passer par des "px". Pour quelle raison tu le fais en "em" ?

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

ou

http://www.stephanmuller.nl/ems-relative-media-queries/


Le pixel est une valeurs trop figée, à l'heure des tablettes et smartphones il est temps de passer à une unité qui s'adapte partout

Franchement sans être méchant c'est limite n'importe quoi cette argumentation. Ton premier lien n'a pas trop l'air sérieux car à ce que je sache 16px = 12pt et ce qui est avancé frise parfois le ridicule. Tu peux très bien faire du responsif avec des pixels et il y a d'autres choses qui entrent en considération (notamment le viewport). Il existe des unités relatives même si elle ne sont pas encore intégrées à 100%, il s'agit en occurrence des viewport units.
À noter aussi que même si tu spécifies des unités de police en pixels tu pourras toujours les grossir ou les réduire comme tu le souhaites.

Salut, j'ai pas épluché tout le post en détail, mais pour ma part j'ai trouvé un équivalent des media queries en Js et qui fonctionne sur tous les navigateurs avec la formule décrite dans ce post.

ça fonctionne très bien, ensuite il suffit de tester la valeur retournée par la fonction et d'agir en conséquence dans le code.

Zelalsan a écrit :
Franchement sans être méchant c'est limite n'importe quoi cette argumentation. Ton premier lien n'a pas trop l'air sérieux car à ce que je sache 16px = 12pt et ce qui est avancé frise parfois le ridicule. Tu peux très bien faire du responsif avec des pixels et il y a d'autres choses qui entrent en considération (notamment le viewport). Il existe des unités relatives même si elle ne sont pas encore intégrées à 100%, il s'agit en occurrence des viewport units.
À noter aussi que même si tu spécifies des unités de police en pixels tu pourras toujours les grossir ou les réduire comme tu le souhaites.

En attendant, mon article pas très sérieux vient d'être cité dans un article de N. Hoizey...

http://www.24joursdeweb.fr/2013/lachez-prise-sans-perdre-le-controle-grace-a-l-unite-css-em/

Et je tiens à te dire que je n'aime pas le ton sur lequel tu parles, tu as l'air très arrogant et sûr de toi mais je ne suis pas certain que ce que tu avances est pertinent et juste...

Un autre article sur l'utilisation des EM en milieu responsive :

http://marieguillaumet.com/refonte-mon-portfolio-du-responsive-en-em-seconde-partie/
Modifié par Gyzm0 (09 Dec 2013 - 10:29)

Hello,

Zelalsan, tu devrais faire attention avant d'avancer aussi abruptement des choses telles que "1em = 16px = 12pt". Avec des unités relatives comme em, ça n'a tout simplement aucun sens.

Pour le choix em VS px, et bien la question porte là-dessus il me semble, non ? Il est tout à fait sain de souhaiter bosser avec une unité relative pour l'ensemble de son site, media queries comprises… Au final, tu n'as rien démontré et l'article cité reste tout à fait valable, jusqu'à preuve du contraire..
Modifié par audrasjb (09 Dec 2013 - 12:04)

Nonseulement je plussoie Audrasjb, mais aussi la technique évoquée par Gyzm0. Je l'ai déjà utilisée et elle apporte un autre avantage très important: la maintenabilité.
En effet, la media-query n'est ainsi définie que dans la CSS. Si on doit la changer, on n'a pas besoin d'aller traquer tous les tests barbares faits en js en plus. Les multiples déclarations de constantes parallèles, ça finit toujours par causer des bugs.

Après je n'utilise pas de solution générique et j'adapte aux besoins, aux media-queries que je souhaite exposer etc.