Le W3C valide le standard CSS Media Queries

Version imprimable

21/06/2012, 13h03
Hinault Romaric

Le W3C valide le standard CSS Media Queries

Le W3C valide le standard CSS Media Queries
permettant d’adapter dynamiquement des pages Web en fonction des tailles d’écran

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
21/06/2012, 13h54
Freem

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?
21/06/2012, 14h13
kdmbella

Citation:

Envoyé par Freem

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. :ccool:
21/06/2012, 14h15
Invité

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.
21/06/2012, 14h22
Gordon Fowler

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,
21/06/2012, 16h24
Uther

Citation:

Envoyé par Freem

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.
21/06/2012, 20h21
Muchos

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 ? En css3 avec @media, ou dans le <head> avec des feuilles différentes ?
Perso, j'ai opté pour le <head> afin de ne pas avoir de css trop grosses.
22/06/2012, 09h48
Freem

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.
25/06/2012, 14h47
leomaradan

Citation:

Sinon, comment insérez-vous vos requêtes médias ? En css3 avec @media, ou dans le <head> avec des feuilles différentes ?
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 ^^
28/06/2012, 10h44
BPiero

Citation:

Envoyé par leomaradan

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