Introduit en Juin dernier, cette catégorie intitulé « La parole aux experts » avait été légèrement abandonnée… Non par un manque d’envie mais plutôt par un travail important, d’une part pour réunir les réponses de nos experts, et d’autre part pour en synthétiser le contenu.
Le premier article avec nos experts Matthieu Bué, Raphaël Goetter, Bruno Bichet et Aurelien Garroux, nous avait permis d’aborder le thème suivant : HTML5, est-ce le moment de l’adopter ? Au final, on pouvait répondre unanimement de manière positive.
Afin de rester dans la thématique, je vous propose aujourd’hui ce nouvel article qui permet au Web français de s’exprimer ! Le second thème abordé est : Que sont les CSS3 Media Queries ? Comment mettre en œuvre les propriétés permettant d’adapter une page HTML à différents types d’écrans et résolutions ?
Pour répondre à cette question voici nos quatre trois experts du jour : Daniel Glazman, Karl Dubost et Raphaël Goetter.
Note : J’avais également contacté Paul Rouget mais par manque de temps il ne peut pas participer… Dommage !
Au sommaire
CSS3 Media Queries c’est quoi ? Où en est-on aujourd’hui ?
Qu’est ce que le CSS3 ? Que peut-on en faire exactement ?
Très brièvement, CSS signifie « Cascading Style Sheets ». Il s’agit d’un langage de balisage permettant de modifier et de donner du style à un site ou des éléments au sein d’un site Web. Le « 3 » représente la nouvelle version du langage de feuille de style.
Alors que le langage HTML5 est dans tous les esprits ces derniers temps, l’utilisation de technologies connexes telles que les CSS3 Media Queries sont de plus en plus importants. Les visiteurs ont une certaine attente lorsqu’il visite votre site que ce soit d’un ordinateur de bureau, un ordinateur portable, un netbook, une tablette ou encore un smartphone.
Ils attendent que votre site ait une expérience utilisatrice très confortable, peu importe comment et où ils voient votre site.
Dans cet article nous allons nous plonger dans les méthodologies et les techniques d’utilisation des CSS3 Media Queries par nos experts.
Le langage CSS 2.1 supporte plusieurs types de médias, qui sont également pris en charge par CSS3 : screen, print et handheld. Le CSS3 va un peu plus loin puisqu’il inclut des « requêtes de médias » telles que : max-width, device-width, orientation et color.
Les nouveaux dispositifs tels que les derniers iPad et Android profitent de ces avantages.
Comment puis-je en profiter dès aujourd’hui ?
Il est très important de savoir que même s’il est amusant d’apprendre et de jouer avec le CSS3, il n’est pas encore entièrement pris en charge dans les navigateurs actuels. Cela signifie que si vous êtes prêt à intégrer le CSS3 dans un site Web, ce serait une bonne idée de s’assurer qu’il y ait le code de repli pour les navigateurs qui ont du mal à le soutenir. Je vous propose cet article pour évaluer la compatibilité des navigateurs avec la norme.
Alors, pourquoi écrire en CSS3 s’il n’est pas encore totalement pris en charge ? Tout simplement parce que c’est bien d’apprendre de nouvelles choses, et car il est nécessaire de se tourner vers les nouvelles technologies et standards afin de faire évoluer au mieux votre site Web, ou votre application Web.
De plus, afficher un site avec un rendu parfait sur tous les dispositifs est indispensable en 2011…
Nos professionnels du Web
Pour nous parler du sujet j’ai décidé de faire appel à trois experts : Daniel Glazman, Karl Dubost et Raphaël Goetter. Leur expertise dans le domaine du langage CSS3 est plus que reconnu… Mais, qui sont-ils ?
Le premier de la liste est Daniel Glazman. Comment parler CSS, et plus particulièrement CSS3 sans avoir l’avis d’un véritable expert dans le domaine. En effet, en mars 2008, Daniel a été nommé co-chairman du groupe de travail CSS du W3C ! Pour la petite histoire et renforcer le poids de son interview ci-dessous, Daniel a été embauché par Netscape en 2000 dans leur équipe technique pour implémenter les CSS dans l’éditeur de Mozilla et il a intégré de nouvelles fonctionnalités (sélecteurs CSS3 par exemple) dans le CSS Style Engine… Rien que ça ! Aujourd’hui, il travaille sur BlueGriffon, un éditeur Web de nouvelle génération, doté des technologies HTML5, CSS3, jQuery, etc… « Un truc très prometteur », selon lui !
Ensuite, Karl Dubost a également accepté de répondre à mes questions. Il s’agit d’une autre figure emblématique du Web. Karl est un hédoniste, rêveur en permanente exploration d’un Web ouvert et créatif. Son principal défi dans sa vie professionnelle est de mettre en relation les humains et la technologie. De 2000 à 2008, il a été Web Community Liaison, HTML WG staff contact, QA Activity Lead et Conformance Manager pour le W3C.
Tout comme pour l’article sur l’HTML5, il me semblait indispensable et évident d’interviewer Raphaël Goetter. Pour faire rapide, Raphaël est un webdesigner et gérant d’une agence web strasbourgeoise, partageant ses connaissances via son site Alsacreations.com. C’est un passionné d’accessibilité numérique, de bonnes pratiques et de standards Web. Il est également expert et formateur en langages Web HTML et CSS auprès de groupes nationaux et internationaux. Il a d’ailleurs publié des livres techniques dans ces domaines : CSS avancées – vers HTML5 et CSS3, CSS2 – Pratique du design web, Memento CSS3…
Ça fait rêver un parcours tel que le leur non ? En tout cas, il est évident que nous allons avoir des points de vue très précis sur le sujet, sur lesquels nous pourrons s’appuyer dans nos futurs développements. Je ne vous fais pas plus attendre, allons voir les réponses.
CSS3
Que sont les CSS3 Media Queries ?
Un mécanisme très simple pour les feuilles de styles
Les CSS Media Queries sont des expressions logiques dans une feuille de style. Elles permettent de sélectionner des propriétés CSS en fonction de paramètres liés à la nature physique de l’outil utiliser pour effectuer le rendu du contenu, souligne Karl. Elles sont un mécanisme très simple de filtrage des règles stylistiques selon des caractéristiques du périphérique de restitution, surenchère Daniel.
Idéal pour gérer la largeur d’un site
Que ce soit Raphaël, Daniel ou encore Karl, ils sont unanimes pour indiquer qu’appliquer des règles CSS est très utile pour « dégrader » correctement la restitution d’un site en fonction de la largeur de l’écran… Ainsi, il devient possible de cibler différents terminaux nomades selon leur taille, par exemple moins de 1024px de large, moins de 480px de large, et d’adapter entièrement le design de son site aux smartphones et tablettes, comme on le ferait classiquement pour un écran de bureau ou une imprimante, indique Raphaël.
On peut également filtrer par mode paysage ou portrait et de nombreuses autres caractéristiques, souligne Daniel.
Comment mettre en œuvre les propriétés permettant d’adapter une page HTML à différents types d’écrans et résolutions ?
Gérer des feuilles de styles pour chaque dispositif
Pour mettre en œuvre ces règles, Daniel dit qu’il suffit d’architecturer son contenu proprement, en général en partant de la restitution pour petits écrans et en augmentant jusqu’aux grands écrans, et de rédiger une feuille de styles pour chaque type de restitution.
Karl nous apporte une vision très technique de sa mise en œuvre. En effet, dans une feuille de style, les Media Queries sont initialisées par l’instruction @media suivie de règles logiques et finalement des propriétés à appliquer.
@media <ensemble de règles> {
<ensemble de propriétés>
}
[/sourcecode]
Il poursuit en indiquant que le site mediaqueri.es offre une galerie de sites utilisant les media queries. Voici un exemple pratique :
/* Placer tout d’abord les règles
pour tout le monde en pensant
au plus petit dénominateur commun. */
html, body {}
/* définir les règles pour les petits écrans
exemple: plus petit que 350px et écran */
@media screen and (max-width:350px) {
/* règles CSS */
}
/* définir les règles pour les écrans intermédiaires
exemple: de 351px à 500px et écran */
@media screen and (min-width:351px) and (max-width:500px) {
/* règles CSS */
}
/* définir les règles pour les grands écrans
exemple: au dela de 501px et écran */
@media screen and (min-width:501px) {
/* règles CSS */
}
[/sourcecode]
Couplés à la balise méta HTML viewport (bientôt remplacée par la règle CSS @viewport), les media queries sont un moyen redoutablement efficace pour adapter l’affichage d’un site au Web mobile sans avoir à toucher à la structure HTML et donc sans avoir à créer une version parallèle de son site Web, évitant ainsi des mises à jour et maintenances complexes, souligne Raphaël.
Sur Alsacréations, ils ont publié il y a quelques temps une feuille de style de base pour le Web mobile. Celle-ci prend en compte la plupart des adaptations pertinentes à opérer sur terminaux mobiles.
Pensez-vous que les intégrer dès maintenant dans nos sites/applications est une bonne idée ?
Est-ce intéressant de miser sur les CSS3 Media Queries aujourd’hui ?
Oui définitivement dès aujourd’hui, surtout en pensant au plus petit dénominateur commun, indique Karl. Votre site sera lisible partout et sera amélioré pour les navigateurs modernes et/ou grands écrans. Ainsi on obtient un site minimal utile pour tous.
Pour Daniel, on peut d’ores et déjà se servir des Media Queries en production, puisque toutes les versions modernes des navigateurs les implémentent.
Enfin, en plus d’être possible, il est judicieux d’employer les Media Queries en production aujourd’hui, pour la bonne et simple raison que le parc des navigateurs mobiles est bien plus conforme aux standards récents que celui des navigateurs de bureau : la plupart des smartphones actuels reconnaissent les Media Queries, CSS3, HTML5 et peuvent en bénéficier, affirme Raphaël. Nous le prouvons au quotidien avec le site de l’agence par exemple, indique t-il.
Tout n’est pas si rose, à part si vous misez sur des applications mobiles
Tout comme on avait pu le souligner avec la mise en œuvre d’HTML5, tout n’est pas si rose, à part si vous misez sur des applications mobiles. En effet, pour un usage spécifique aux navigateurs de bureau, la réponse serait plus mitigée puisque certains vénérables ancêtres tels que IE6/IE7 et IE8 ne supportent pas les Media Queries. Une alternative telle que Respond pourrait alors être envisagée.
Des mises en production déjà effectives
Karl vous propose de lire tous les articles ces derniers mois sur les Responsive Web Design. Un cas concret commercial récent : le Boston Globe.
Conclusion
Les interviews de nos experts s’achèvent. J’espère sincèrement que cet article vous a intéressé et permis de comprendre le principe et la mise en œuvre des CSS3 Media Queries.
L’œil de nos experts nous a permis de savoir si c’était le moment de l’adopter. Au final, on peut répondre unanimement de manière positive. Une requête de média est un simple morceau de code, placé dans l’en-tête du site Web ou dans une feuille de style dont le but est de détecter les différentes informations sur un utilisateur, et de livrer une feuille de style spécifique basée sur cette information. Il y a plusieurs critères mais le plus important étant de récupérer la largeur du navigateur et ainsi afficher au mieux le site Web ou l’application Web.
En revanche, il faut être prudent avec cette technique. Il est facile de tomber dans le piège en supposant que les utilisateurs de smartphone ne sont pas intéressés par telle ou telle fonction. Votre site web doit offrir des fonctionnalités identiques à travers les dispositifs, les « requêtes de » média » nous permettent simplement d’optimiser la manière dont cette fonctionnalité est livrée.
Concernant les limitations, devinez quoi ? Internet Explorer (sauf la nouvelle version, IE9) ne sait rien au sujet de la propriété CSS @media. Ce qui signifie que même sur un grand écran, les utilisateurs d’IE verront la mise en page par défaut.
Le but de cet article est basé sur l’échange mutuel d’informations entre vous lecteurs en vous appuyant sur les avis de nos experts. Je vous demanderais donc de venir poser vos questions, interrogations sur le sujet nos experts y répondront.
Quel est votre avis sur la question ? Pensez-vous que les CSS3 Media Queries doivent-être adoptées sur vos sites ? Venez en débattre dans la partie commentaires…
