Mediaqueries : appliquer les styles CSS de façon optimale ?

Bonjour tout le monde,

Dans la quête de l'adaptation intelligente de design pour tailles d'écran différentes (CSS responsive web design), les contraintes sont généralement nombreuses si l'on veut que tous les navigateurs soient pris en compte.

J'en arrive à la technique suivante :

<link rel="stylesheet" href="styles.css" media="screen and (min-device-width:481px)">
<!--[if lt IE 9]> <link rel="stylesheet" href="styles.css" media="screen"> <![endif]-->

<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-device-width:480px)">
<!--[if IEMobile 7]> <link rel="stylesheet" href="mobile.css" media="screen"> <![endif]-->

Puis, à l'intérieur de la feuille styles.css j'opère éventuellement les distinctions de largeurs différentes à l'aide de @media.

Le principe et les contraintes sont nombreux :
- Le maximum de navigateurs / périphériques doivent être ciblés
- Les alternatives JavaScript telles que Respond.js doivent être évitées.
- Deux feuilles de styles séparées = performances optimisées (pas de chargements inutiles d'éléments pour les cacher ensuite)
- Eviter @import pour des raisons de performance
- Choix de device-width et non de width pour application selon taille des écrans et non des fenêtres de navigateurs
- media="screen and (min-device-width:481px)" -> styles.css pour desktop (sauf IE < 9)
- if lt IE 9 -> styles.css pour IE desktop
- media="handheld, screen and (max-device-width:480px)" -> mobile.css pour petits écrans et bonus pour les préhistoriques (handheld)
- if IEmobile -> mobile.css spécifique pour IE mobile sur Windows Mobile

A tester au maximum, mais cela me semble assez stable et "universel" (?)

Tout retour, commentaire, sera vivement apprécié

EDIT : modification du commentaire conditionnel pour IE mobile
Modifié par Raphael (29 Oct 2011 - 17:48)

Deux choses sur mon blog :

l'inflation dans la HEAD , le très grand péché de Microsoft, qu'ils comptent d'ailleurs faire bannir après MSIE 9.
L'inconvénient de cette technique, c'est que t'auras beau être large dans la gestion des exceptions, tu oublieras forcément quelqu'un et cela alourdira monstrueusement le code HTML. Qui plus est, j'ai souvent vu des erreurs d'interprétations avec ces putains de comm conditionnels. Qu'ils brûlent en enfer.

mon site pro où je me suis amusé sur les media-queries, mais finalement, cela entraîne des cascades de media-queries (3 rendus possibles de layout suivant les largeurs). Ce qui peut entraîner sur des projets sérieux de très gros soucis. Pratiquement pas de Javascript, une définition standard, une pour les écrans étroits, une autre pour les larges. J'ai pas été spécialement bon, but as usual, the cordonniers are the plus worst chaussed...

C'est quelqu'un qui n'est pas spécialement un intégrateur qui le dit, donc ça vaut ce que ça vaut...

Donc finalement, je me demande si le mieux ne reste pas la dégradation élégante, ce qui permet de supporter tout le monde en une seule fois, et pour les sites complexes (backoffice), un design liquide plutôt qu'élastique.

Da Scritch a écrit :
Qui plus est, j'ai souvent vu des erreurs d'interprétations avec ces putains de comm conditionnels.

Sur des environnements de test mal foutus, oué, c'est courant et c'est connu.
Tu as vu des erreurs d'interprétation des commentaires conditionnels dans des environnements de tests sains et/ou chez des utilisateurs réels? C'est documenté quelque part?

Da Scritch a écrit :
l'inflation dans la HEAD , le très grand péché de Microsoft

Tandis qu'Apple avec la meta viewport, les favicon haute résolution et autres machins pour Safari Mobile, c'est des enfants de chœur? Il y en a un qui a mangé un vendredÿste ce matin.
Plus sérieusement, rajouter du code de ce genre dans le HEAD c'est moins bien que si c'était mieux, mais c'est pas la mort non plus, surtout quand ça s'écrit une fois dans un template.

Par contre faut éviter de balancer des trucs qu'on ne maitrise pas, qui sont mal testés ou documentés, dans le HEAD ou ailleurs. Toute inflation de code est suspecte par nature.

Personnellement ça me semble optimum ! Une unique feuille de style chargée dans chaque cas avec fallback pour les navigateurs ne prenant pas en compte les media-queries (en tout cas les majeurs que sont IE… IE mobile non plus ? bah merde alors).

Si je devais trouver un cas de figure où il peut y avoir "gène" ça serait sur la feuille style.css. À l'intérieure de celle-ci tu utilises des @media afin de cibler des largeurs différentes (par exemple les tablettes).
Tu auras donc des styles "généraux" hors de tout @media et des styles plus "spécifiques" à un @media. Sachant que les spécifiques ne seront pas pris en compte par IE lt 9, tout style "générique" non "spécifique" devra être défini hors de @media puis restauré dans les @media concernés.
On peut donc imaginer une solution où IE lt 9 a une feuille style-ie.css ; style.css aurait les @media "spécifiques" plus, le contenu de style-ie9.css dont les parties ne concernant pas les @media "spécifiques" serait dans un @media ciblant le "reste".
La contrepartie et d'avoir deux feuilles de styles à maintenir.

J'espère que tout ça reste lisible ^^

Sinon, quid des navigateurs autre qu'IE qui ne tiennent pas compte des media-queries ? il pourrait être intéressant (ou pas, dépend de la question précédente) d'ajouter en dernier recours une solution javascript qui vérifierait que des feuilles de style aient été chargées et dans le cas contraire en chargerait une par défaut. J'ai de vague souvenir de code permettant de parcourir les styles en js sous firefox, à voir mais là il s'agit plus d'une réflexion à voix haute

Raphaël, la technique que tu proposes me semble bien sur le papier. Je n'ai pas l'équipement pour la tester ou même l'expérience du développement mobile (au delà de la théorie) pour en juger.

Deux questions techniques:

1. Quid des navigateurs qui ne gèrent pas les Media Queries et qui ne font pas partie des deux cas spécifiques ciblés (IE sur Windows Phone 7 + Internet Explorer 6-7-8)? Si je lis bien ton code ils ne recevront aucun style. Bon ok, vu caniuse.com/mediaqueries ça ne concerne que Firefox 3.0 côté desktop.

2. Il me semble que le commentaire conditionnel IEMobile est pris en compte à partir de Windows Phone 7 (pas les anciens Windows Mobile 6, 6.5). Notamment par la version dérivée d'IE7 utilisée sur Windows Phone 7.0. La question est: est-ce que la version dérivée d'IE9 sur Windows Phone 7.5 (Mango) lit toujours ce commentaire conditionnel? Si elle le lit, vu qu'elle lit aussi les Media Queries, il y a un risque de chargement en double de mobile.css (avec un peu de chance c'est pas le cas, mais le bug «je déclare deux fois et donc deux requêtes HTTP sont faites» est assez courant dans divers navigateurs donc je serais prudent). Peut-être utiliser <!--[if IEMobile 7]> ou même <!--[if IEMobile 7.0]> ou encore <!--[if lt IEMobile 7.5]>?

Une question méthodologique: comment gères-tu les styles communs? Sur un site qui utilise un DOM unique et des adaptations CSS en fonction du viewport (plutôt qu'une version mobile dédiée), une grande partie des styles va être commune aux différents modes d'affichage. La partie réservée à un type d'écran donné va contenir uniquement des dimensions, du positionnement, et ponctuellement des adaptations de tailles de fonte, background ou autre décorations. Mais au moins la moitié des styles est commune, non?

Est-ce que tu proposes d'appeler une feuille de styles commune pour tous les navigateurs / écrans, puis ensuite d'utiliser le code que tu proposes, ou bien tu envisageais plutôt un build côté serveur avec un code de base copié aussi bien au début de style.css et au début de mobile.css?

Salut,

Raphaël, ne serait-il pas pertinent de mieux cibler les versions d'IE Mobile dans le commentaire conditionnel qui le concerne ? IE Mobile 9 utilise le moteur de rendu d'IE 9 et est donc censé prendre en charge les media queries, d'où le risque pour cette version de charger deux fois la même feuille de style pour rien. Autrement dit :

<!--[if lt IEMobile 9]><link rel="stylesheet" href="mobile.css" media="screen"><![endif]-->

Merci pour la remarque pertinente sur IE mobile.
Il me semble également que :
- lE commentaire conditionnel est reconnu à partir de IE 7 (donc inutile de cibler les précédents)
- IE 9 reconnaît les MQ donc inutile de le cibler également

Pour les anciens navigateurs qui ne rentrent dans aucune catégorie ciblée, j'ai considéré qu'ils étaient vraiment négligeables.

fvsch a écrit :

Une question méthodologique: comment gères-tu les styles communs?... Mais au moins la moitié des styles est commune, non?

Effectivement, il y a généralement de nombreux styles communs. Ou plutôt : ça dépend des cas de figure.
S'il y en a vraiment beaucoup, l'idéal est effectivement une moulinette côté serveur. Sinon, oui, dupliquer les styles.
C'est une solution qui en vaut la peine si l'on tient vraiment compte des performances navigateurs.
Modifié par Raphael (29 Oct 2011 - 17:49)