Bienvenue à Mammouthland,

Mardi
04/08/10

Clichés d'été

Et de nouveau il va falloir attendre une année pour retourner sur la terre de mes ancêtres...

Le temps a été bon (ni trop chaud, ni trop froid), le soleil au rendez-vous et la mer excellente (si !).
Et comme je ne vais tout de même pas vous raconter comment j'ai réussi à me couvrir de bleus et à prendre 3 kg, je comble le vide avec quelques photos...

Lundi
16/08/10

CSS3 : Adapter une page html à l'aide des Media Queries

Il y a presque 4 ans, j'indiquais à la face du Monde à la première édition de Paris-Web, l'apparition d'une propriété CSS3 révolutionnaire qui allait permettre d'adapter finement l'apparence des pages web en fonction (entre autre) de la résolution de l'écran du visiteur : les Medias Queries.

Les années ont passé, la taille des écrans s'est diversifiée et surtout l'utilisation des smartphones est en pleine expansion.

Le problème de faire des pages web "adaptables" en fonction de la résolution est donc de plus en plus prégnante.

Les Media Queries permettent donc de cibler :

• Le type de média
• La taille de l'écran
• La taille de la fenêtre
• La résolution
• Le nombre de couleurs
• L'orientation
• ...

Pour aujourd'hui, je vais m'intéresser uniquement à la taille de la fenêtre du navigateur. C'est d'une simplicité et d'une efficacité diabolique sur tous les navigateurs récents (... sauf 1)

L'exercice du jour consiste donc à changer la couleur de fond (du blanc au noir) lorsque la taille de la fenêtre descend en dessous de 800 pixels de large. Tin tin tin, roulement de tambours :

Code CSS

body {
background-color:white;	
color:black;
}
 
@media only screen and (max-width:800px) {
 body {
 background-color:black;
 color:white
 }
}

Consternant de simplicité, non ?

Quelques petites précisions cependant :

1. only n'est pas obligatoire, il permet de masquer le style aux navigateurs les plus anciens ;
2. screen est bien sûr pour un écran, mais on peut cibler bien d'autres terminaux ;
3. Attention à ne pas oublier les accolades !
4. On peut aussi déclarer ceci dans une feuille de style supplémentaire, mais la multiplicité des feuilles de style n'est pas recommandée côté performances ;
5. Ah, oui... dernier détail : évidement Internet Explorer est à la traîne, va falloir attendre la version 9 pour que ça marche

Tester le résultat

Mardi
17/08/10

CSS3 - Adapter une page html à l'aide des Media Queries [2] : device-width

Après width, qui permet de contrôler l'apparence de la page web en fonction de la largeur de la fenêtre du navigateur, voyons device-width qui concerne cette la fois la largeur de terminal.

Code CSS

body {
background-color:white;	
color:black;
}
 
@media only screen and (max-device-width:800px) {
 body {
 background-color:black;
 color:white
 }
}

Que va t-il se passer dans ce cas ?

Si vous êtes actuellement devant un écran d'ordinateur "normal", il y a peu de chances que cette propriété vous concerne. Contrairement à max-width, même en réduisant la fenêtre du navigateur à 800 pixels de large, rien ne se passera. Il faudrait descendre la résolution à 800*600, par exemple, pour que le fond de page soit noir.

Par contre, si vous utilisez un smartphone dont la taille de l'écran est 800 pixels de large en orientation paysage, le fond sera bien noir.

Tester le résultat

Jouons un peu...

Fixons maintenant la largeur maximum à 480 pixels (max-device-width:480px). Avec un smartphone dont la résolution de l'écran est de 480*800, quelle va être la couleur de fond ?

• Réponse A : noire
• Réponse B : blanche
• Réponse C : ça dépend...

Faites vos jeux ! (Et on ne triche pas en faisant des tests ! Solution demain.)

Mercredi
18/08/10

CSS3 - Adapter une page html à l'aide des Media Queries [3] : orientation

And the winners are...

À la question d'hier sur le comportement d'un smartphone avec un max-device-width fixé sur la largeur de l'écran (largeur du rectangle au sens mathématique du terme), la réponse est bien la C : "ça dépend" (ça dépasse ).

On est content avec ça... Mais ça dépend de quoi ?

Et bien contrairement à ce que pense Emmanuel, ce n'est pas une simple rotation de l'appareil qui va changer la donne, c'est plus subtil.

En effet, si on charge la page en mode portrait, la page sera bien noire puisque nous sommes dans la configuration où la largeur est de 480 pixels. Le fait de tourner le smartphone en mode paysage (donc avec une "largeur" devenant de 800px) ne change rien. Sauf... si on recharge la page en restant dans la même orientation paysage.
Le fond de page passera au blanc, et le restera tant qu'il n'y aura pas de rechargement de la page en mode portrait.

Un <meta name="viewport" content="width=device-width" /> ne change rien à ce comportement.

Tester le résultat max-device-width:480px

Orientation

Pour avoir un véritable changement de comportement entre le mode portrait et le mode paysage, il faudra passer par la propriété orientation.

Code CSS

body {
background-color:white;	
color:black;
}
 
@media only screen and (orientation:landscape) {
 body {
 background-color:black;
 color:white
 }
}

Dans ce cas, il y aura vraiment un changement de couleur de fond lors de la rotation de l'écran. Il passera du blanc, en mode portrait, au noir en mode paysage, et ce bien entendu quelque soit la taille et la résolution de l'écran.

Tester le résultat orientation:lanscape

Et voilà, trois petits jours pour passer en revue trois petites propriétés des media queries. Comme je le disais sur le premier tutoriel, il y a bien d'autres possibilités d'exploitation. Pour cela, n'hésitez pas à consulter les specs du W3C !