Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage !
CSS3 Media Queries
- Media Queries : W3C Candidate Recommendation — La recommandation du W3C sur les Media Queries
- mediaqueri.es — Collection de site utilisant Media Queries
- Hardboiled CSS3 Media Queries — La boite à outils de Stuff and Nonsense avec de nombreux exemples de Media Queries prêts à l’emploi
- Progressive Enhancement with CSS Media Queries — Stratégies pour utiliser les Media Queries dans une optique d’amélioration progressive
- Les Media Queries CSS — Le but [des Media Queries] est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.
- CSS3 : les Media Queries — Les Media-Queries, permettent de cibler différents cas et ainsi d’adapter la restitution de sa page html à différentes caractéristiques des terminaux.
- Responsive Web Design: What It Is and How To Use It — Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
- Playing with CSS3 Media Queries — Un exemple simple de mise en oeuvre pour voir les Media Queries en action
- Media queries — Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.
- CSS3 Media Queries JS — Javascript library which make CSS3 Media Queries work in all browsers (via JS 4 Design)
- Responsive Design with CSS3 Media Queries — Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher.
Grilles adaptatives
- Skeleton — A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
- columnal — A responsive CSS grid system helping desktop and mobile browsers play nicely together.
- Responsive Grid Systems — A Conceptual Framework for Extending Upon the Functionality of 960.gs
Polyfills
- css3-mediaqueries-js
- Respond — A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more), by Scott Jehl.
- mediatizr — Responsive-oriented CSS3 media queries polyfill, by Aurélien Delogu.
- matchMedia — A standardized way to check media query matching in script, by Scott Jehl, Paul Irish, Nicholas Zakas.
- jQuery Media Helpers — Some media query and cross-browser responsive design helpers, abstracted from jQuery Mobile, by Scott Jehl.
Les commentaires sont fermés.