Web mobile et responsive design : retour rapide sur l’utilisation des medias queries. Techniques CSS 3 pour les navigateurs mobiles.
Le sujet de la navigation nomade mériterait un ouvrage à lui seul, inutile donc de réinventer la roue ni de développer un article en long en large et en diagonale sur tout ce qu’il est possible de mettre en place pour faire en sorte qu’un site s’affiche correctement, quel que soit l’agent utilisateur. D’autant que le sujet est, en ce moment même, en évolution constante.
Principe des Medias Queries
Très simple : proposer des règles CSS alternatives lorsque certaines conditions (une largeur d’écran par exemple) sont remplies par l’agent utilisateur.
Quel est l’intérêt des Medias Queries ?
Bien évidemment, dans un premier temps, simplement de permettre un affichage correct sur tous les agents utilisateurs, quel que soient leurs dimensions.
Là où c’est intéressant, c’est qu’avec les Medias Queries, cela peut se faire sans l’apport d’un langage de programmation comme Javascript ou PHP. Souplesse donc, et respect de la logique de séparation forme / mise en forme.
Un autre avantage de cette méthode réside dans le fait que quasiment tous les moteurs de rendu pour terminaux nomades reconnaissent cette syntaxe.
Syntaxe
Concrètement et par l’exemple, si nous voulons appliquer une règle ou un ensemble de règles uniquement aux terminaux qui ont une largeur d’écran maximale de 320px, cela donne quelque chose du genre:
@media screen and (max-width: 320px) {
body {
background: blue;
}
}Facile, non ? La seule différence avec une règle css classique est l’encapsulation des règles. Dans la pratique, la démarche est similaire à celle utilisée lorsqu’on se décide à mettre en place une feuille de style d’impression : certaines boites jugées inutiles disparaissent, d’autres prennent une autre forme, la logique est simplement de tenir compte de ce qui est utile ou pas au média auquel sont destinées les règles. Généralement, tout ce qui est superflu en terme fonctionnel passe à la trappe.
Cela dit, pour un affichage parfait ce n\’est pas aussi simple et d’autres paramètres peuvent entrer en compte, comme l’orientation d\’un téléphone mobile qui peut être en mode paysage, et la taille du viewport qui peut différer de la largeur d’écran. Et qui diffère bien évidemment d’un téléphone à l’autre, l’iPhone 3 ayant par exemple un viewport différent de l’iPhone4.
Avec un peu d\’organisation il est possible d’établir une hiérarchie stratégique à mettre en place qui permettra un affichage adapté à tous les terminaux, stratégie au sein de laquelle le recours aux Medias Queries trouve une place importante.
