[SUJET CLOS] Css adaptées et testées pour différents médias.

Vous avez un soucis dans la création, la retouche graphique ou dans votre feuille de style ? Un problème dans la manipulation de Gimp ou de Photoshop ? Ou encore mieux, des réponses à apporter ? C'est par là.
Répondre
Tilde3
Messages : 466
Enregistré le : 19 octobre 2011 à 13:11

[EDIT: Le sujet a été déplacé sur cette page wiki. Merci d'avance de votre participation !]

Voici une procédure simple pour concevoir et tester des feuilles de styles adaptées à différents types de médias.
NOTA : Merci d'avance de corriger et de témoigner de vos techniques !

[h]A. Définir les cibles de vos css.[/h]
Ici, imaginons une feuille de styles pour les PC portables et de bureau (à partir d'une résolution de 1024 px de large), une pour les tablettes (à partir de 768 px), et une pour les smartphones (à partir de 320 px). Enfin, ajoutons une css pour l'impression des pages.

On va rédiger les liens vers les différentes CSS et on les placera dans le <head> de la page html.
Pour l'impression, le média est print. La syntaxe est donc simplement la suivante :

Code : Tout sélectionner

<link rel="stylesheet" type="text/css" media="print" href="css-print.css" />
Pour les écrans (média screen), on va définir à chaque fois la résolution minimale («Si la largeur est d'au moins X pixels, alors OK. Sinon, passer à la CSS suivante.») :

Code : Tout sélectionner

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="css-pc.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href="css-tab.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="css-smart.css" />
[h]B. Tester vos css.[/h]
L'idéal, c'est d'utiliser un serveur en local (le fameux http://localhost).
NOTA: la technique suivante fonctionne pour les pages HTML. Je ne sais pas le faire avec PHP.

Sous GNU/Linux, c'est extrêmement simple à réaliser avec Python. Dans une console, exécutez :

Code : Tout sélectionner

python -m "SimpleHTTPServer"
Puis avec votre navigateur préféré, rendez-vous à l'adresse http://localhost:8000 (votre dossier personnel) et testez-y vos pages.

Pour simuler une impression, rien de plus simple : faites un "Aperçu avant impression" ou imprimez la page dans un pdf.

Pour tester différents médias génériques, vous pouvez utiliser l'outil Responsive Design de Victor Coulon.
  1. Glissez «RWD bookmarklet» dans votre menu de marque-pages.
  2. Chargez votre page et lancez le marque-pages «RWD bookmarklet».
  3. Testez les différents rendus, et corrigez en conséquence. :)
Répondre