[SUJET CLOS] Css adaptées et testées pour différents médias.
Publié : 16 juin 2012 à 06:17
[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 :
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.») :
[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 :
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.
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" />
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" />
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"
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.
- Glissez «RWD bookmarklet» dans votre menu de marque-pages.
- Chargez votre page et lancez le marque-pages «RWD bookmarklet».
- Testez les différents rendus, et corrigez en conséquence.