Mon site adapté à (presque) tous les périphériques
Introduction
Le PC n'est plus l'unique support pour consulter une page web. Tablettes et smartphones sont aujourd'hui de la partie. Or, la multitude de périphériques et configurations, sans compter ce que nous réserve l'avenir, rend impossible la réalisation d'un site pour chaque possibilité.
Les feuilles de style (css) forment ainsi une voie royale pour proposer facilement un bon support aux différents périphériques.
CSS adaptées aux divers périphériques (media queries)
Les requêtes média (media queries) permettent de charger différentes feuilles de style en fonction du périphérique de consultation utilisé.
Ici, imaginons une feuille de styles pour les écrans d'au moins 1024px de large, une pour les écrans de moins de 1024px, et une pour les périphériques mobiles. Enfin, ajoutons une css pour l'impression des pages.
Dans le html
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 :
<link rel="stylesheet" type="text/css" media="print" href="css-print.css" /> <!-- Imprimantes -->
Pour les écrans (média screen), on va définir à chaque fois la résolution minimale («Si la largeur est d'au moins (min-width) X pixels, alors OK. Sinon, passer à la CSS suivante.») :
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="css-large.css" /> <!-- Écran d'au moins 1024px de large --> <link rel="stylesheet" type="text/css" media="screen and (max-width: 1023px)" href="css-small.css" /> <!-- Écran de moins de 1024px de large -->
Pour les navigateurs mobiles (tablettes, smartphones…), le média est handheld, c'est-à-dire tenu à la main. La syntaxe pour les tailles est la même que pour le média screen :
<link rel="stylesheet" type="text/css" media="handheld" href="css-mobile.css" /> <!-- Tablettes, smartphones, etc. -->
Dans une seule css
CSS 3 permet de regrouper toutes les variations dans une seule css. Il faut pour cela utiliser la requête @media.
En reprenant l'exemple précédant, cela donnerait :
@media screen and (min-width: 1024px) {
/* Code css pour écran >1024px */
}
@media screen and (max-width: 1023px) {
/* Code css pour écran <1024px */
}
@media handheld {
/* Code css pour navigateurs mobiles */
}
@media print {
/* Code css pour impression */
}
Tester vos différentes CSS en local
Comme les serveurs Franceserv Hébergement utilisent Apache, vous pouvez installer un serveur local sous Apache sur votre machine. Pour cela, Apache propose les kits xampp (Windows, Mac OS, GNU/Linux), gratuits et très simples à installer et à utiliser.