Le W3C valide le standard CSS Media Queries
Pour l'affichage dynamique des pages Web en fonction des tailles d'écran
Le 2012-06-21 13:03:21, 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
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
-
kdmbellaExpert éminent
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.le 21/06/2012 à 14:13 -
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.le 21/06/2012 à 14:15
-
leomaradanMembre du ClubMoi 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.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.
Et avec un cache correctement géré, le problème de taille n'en est pas un ^^le 25/06/2012 à 14:47 -
FreemMembre émériteJe 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 21/06/2012 à 13:54 -
Gordon FowlerExpert éminent séniorUne 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,le 21/06/2012 à 14:22 -
UtherExpert éminent séniorLe 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.le 21/06/2012 à 16:24 -
FreemMembre émériteEffectivement, 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.le 22/06/2012 à 9:48 -
BPieroMembre actif+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.
@+
Pierole 28/06/2012 à 10:44 -
MuchosMembre expertC'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.
Envoyé par Uther
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.le 21/06/2012 à 20:21