Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Le W3C valide le standard CSS Media Queries
Pour l'affichage dynamique des pages Web en fonction des tailles d'écran

Le , par Hinault Romaric

0PARTAGES

12  0 
Avec la prolifération des terminaux de différentes tailles d’écran (tablettes, téléphones mobiles, etc.), les développeurs Web faisaient face à un problème d’adaptation de l’affichage de leur site en fonction de la taille de l’écran du dispositif d’exécution.

Les CSS Medias Queries introduits par CSS 3, ont permis de résoudre ce problème en définissant des techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés.

Cette fonctionnalité offre aux développeurs des moyens permettant de définir des règles d’affichage personnalisées en fonction du type de média, de la taille de la fenêtre, de la résolution de l’écran, etc.

Bien que très utilisées pour les versions mobiles des sites Web, les spécifications du CSS Medias Queries n’avaient pas encore été cependant validées par le W3C.

L’organisme en charge de la normalisation des standards du Web vient d’approuver officiellement les CSS Medias Queries comme une recommandation du W3C.

Désormais, tout navigateur qui ne soutient pas ce nouveau standard pourra être considéré comme un navigateur hors-norme.

Source : W3C

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de kdmbella
Expert éminent https://www.developpez.com
Le 21/06/2012 à 14:13
Citation Envoyé par Freem Voir le message
Je ne suis pas développeur web... mais il me semblait qu'il est possible de dimensionner les affichages en terme de % de la taille de la vue du browser?

Si c'est le cas, j'ai un peu de mal à comprendre ce que sont exactement ces media queries. Quelqu'un pourrait m'expliquer?

Les pourcentages étaient pratiquent lorsqu'on était emmené à développer des sites destinés uniquement aux écrans d'ordinateur aujourd'hui on doit faire des sites aussi bien pour ordinateur classique que pour les SmartPhones et les Tablettes qui eux aussi ont des spécificité de taille d'écran et c'est en cela que ce standard est un plus : tenir compte en même temps du type de terminal et de la taille de l'écran.
3  0 
Avatar de MorganGeek
Membre du Club https://www.developpez.com
Le 21/06/2012 à 14:15
Avec les media queries, tous les éléments affichés pour une grande résolution ne le seront pas forcément sur une plus petite. Il ne s'agit plus de redimensionner une présentation en fonction de l'espace disponible à l'écran, mais carrément de présenter plus ou moins de contenu en fonction de l'espace disponible, et les présenter différemment.
2  0 
Avatar de leomaradan
Membre du Club https://www.developpez.com
Le 25/06/2012 à 14:47
Sinon, comment insérez-vous vos requêtes médias&#8239;? En css3 avec @media, ou dans le <head> avec des feuilles différentes&#8239;?
Perso, j'ai opté pour le <head> afin de ne pas avoir de css trop grosses.
Moi au contraire c'est avec @media, je privilégie le chargement d'une seule feuille de style (certe un peu plus grosse, mais minifiée) au chargement de plusieurs feuilles.

Et avec un cache correctement géré, le problème de taille n'en est pas un ^^
1  0 
Avatar de Freem
Membre émérite https://www.developpez.com
Le 21/06/2012 à 13:54
Je ne suis pas développeur web... mais il me semblait qu'il est possible de dimensionner les affichages en terme de % de la taille de la vue du browser?

Si c'est le cas, j'ai un peu de mal à comprendre ce que sont exactement ces media queries. Quelqu'un pourrait m'expliquer?
0  0 
Avatar de Gordon Fowler
Expert éminent sénior https://www.developpez.com
Le 21/06/2012 à 14:22
Une bonne illustration de la différence entre pourcentages et "Responsive Design" se trouve dans cet article sur Dreamweaver CS6 : http://www.developpez.com/actu/43624

Cordialement,
0  0 
Avatar de Uther
Expert éminent sénior https://www.developpez.com
Le 21/06/2012 à 16:24
Citation Envoyé par Freem Voir le message
Je ne suis pas développeur web... mais il me semblait qu'il est possible de dimensionner les affichages en terme de % de la taille de la vue du browser?

Si c'est le cas, j'ai un peu de mal à comprendre ce que sont exactement ces media queries. Quelqu'un pourrait m'expliquer?
Le dimensionnement en pourcentage n'est pas forcément suffisant pour faire une interface bien adaptée a tous les cas. Souvent, on veut pouvoir changer l'ergonomie générale.

Pour un smartphone, il peut-être utile d'enlever certains éléments, en déplacer d'autres, remplacer de grosses images par des petites, rendre certains éléments répliables, ...

Pour une impression, enlever les menus de navigation est généralement une bonne idée.
0  0 
Avatar de Freem
Membre émérite https://www.developpez.com
Le 22/06/2012 à 9:48
Effectivement, vu du fait que tout n'est pas toujours pertinent selon le type de média de sortie, je comprend l'intérêt de cette norme.

Merci pour ces éclaircissements.
0  0 
Avatar de BPiero
Membre actif https://www.developpez.com
Le 28/06/2012 à 10:44
Citation Envoyé par leomaradan Voir le message

Et avec un cache correctement géré, le problème de taille n'en est pas un ^^
+1, c'est aussi ma méthode, ça sert à rien de pinailler pour quelques lignes de css, au contraire, il vaut mieux éviter de multiplier les requêtes et tout regrouper dans un gros css bien mis en cache et bien minifié. Bien sûr si le css devient énorme, on peut y réfléchir.
@+
Piero
0  0 
Avatar de Muchos
Membre expert https://www.developpez.com
Le 21/06/2012 à 20:21
Citation Envoyé par Uther
Pour une impression, enlever les menus de navigation est généralement une bonne idée.
C'est même considéré comme une bonne pratique ^^ J'ai aussi appris récemment qu'il fallait avoir une css print pour son site.

Sinon, comment insérez-vous vos requêtes médias&#8239;? En css3 avec @media, ou dans le <head> avec des feuilles différentes&#8239;?
Perso, j'ai opté pour le <head> afin de ne pas avoir de css trop grosses.
0  1