Les media queries en CSS3

Derrière ce nom mystérieux se cache peut-être une révolution dans le fabuleux aspect de la création de page Web : l’affichage !

En effet j’ai découvert cette nouveauté CSS3 lors d’une conférence le week-end dernier portant sur le HTML5/CSS3 et notamment marquée par la présentation de Mathieu Nebra, fondateur du Site du Zéro. C’est d’ailleurs ce dernier qui a remarquablement bien présenté les media queries.

Cas concret : habituellement, pour qu’un site puisse être accessible confortablement depuis un smartphone ou une tablette, on crée un autre site qui sera la version mobile et on lui attribue souvent un sous-domaine pour au final se retrouver avec un http://mobile.mon-site.fr.

Inconvénients

  • Duplication de contenu
  • Maintenance laborieuse
  • Et bien d’autres ?

Media queries

Technique récente qui permet d’appliquer du code CSS selon des conditions spécifiques. Oui oui, des conditions en CSS !

On pourra par exemple dire :

Masque moi tel élément de ma page si l’écran de l’internaute est de largeur inférieure à 800px

@media screen and (max-width: 800px) {
   /* ici le code CSS */
}

Avantages

  • Un seul CSS à maintenir
  • Supporté par tous les navigateurs récents

J’ai donc essayé sur mon blog pour voir ce que ça pouvait donner.
Img

Haut du blog (cliquez pour agrandir)

Img

Bas du blog (cliquez pour agrandir)

Ce qui est bien c’est qu’on peut voir le résultat immédiatement en redimensionnant la fenêtre du navigateur, essayez de réduire la largeur de votre fenêtre sur cet article jusqu’à 800px et vous verrez.
Je lui ai dit de masquer l’en-tête et le pied de page, puis de placer la sidebar (menu de droite) en bas, sous le contenu.

Je vais m’arrêter là, je vous donne quelques ressources si vous souhaitez approfondir le sujet :

One thought on “Les media queries en CSS3

  1. [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } chez-syl.fr – Today, 9:58 [...]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Image CAPTCHA

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>