Newsletter Developpez.com

Inscrivez-vous gratuitement au Club pour recevoir
la newsletter hebdomadaire des développeurs et IT pro

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, Responsable .NET
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


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Freem 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?
Avatar de kdmbella 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.
Avatar de MorganGeek 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.
Avatar de Gordon Fowler 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,
Avatar de Uther Uther - Expert éminent 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.
Avatar de Muchos 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 ? 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.
Avatar de Freem 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.
Avatar de leomaradan leomaradan - Membre du Club https://www.developpez.com
le 25/06/2012 à 14:47
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 ^^
Avatar de BPiero 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
Offres d'emploi IT
Consultant sap finance/controlling H/F
Safran - Ile de France - Vélizy-Villacoublay (78140)
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)
Ingénieur intégration, validation, qualification du système de drone H/F
Safran - Ile de France - Éragny (95610)

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil