« retourner à la page principale du blog
Hooba fait dans les bonnes oeuvres
Je me suis fait demander récemment de commanditer un concours de vidéo qui est organisé par les bibliothèques de Lévis. Comme la demande venait d’une personne proche et qu’ils avaient besoin d’un site web, j’ai donc mis la main à la pâte.
Le concours s’appelle À l’affiche dans une bibliothèque près de chez vous. Les jeunes doivent faire un vidéo « bande-annonce » d’un livre parmi les livres sélectionnés.
Comme c’était du bénévolat et que les visiteurs allaient être des jeunes (donc plus enclins à utiliser un navigateur récent), je me suis permis d’expérimenter un peu avec le CSS3.
Box Shadow
Si vous avez un navigateur récent qui n’est pas Internet Explorer, vous pouvez voir qu’il y a un une ombre autour du contenu principal. Il s’agit de la propriété CSS box-shadow. Elle n’est actuellement implémenté que dans Webkit (Safara, Chrome) et Firefox 3.5+. Comme le CSS3 n’est pas encore ratifié, il faut ajouter l’extension des navigateurs à l’avant de la règle. C’est à dire -moz pour Firefox et -webkit pour Webkit. Par exemple, sur le site du concours, voici la règle que j’ai utilisée:
-moz-box-shadow:0 0 20px 3px black;
-webkit-box-shadow:0 0 20px 2px black;
box-shadow:0 0 20px 2px black;La version sans préfixe sert pour le jour où cette règle CSS deviendra standard. En gros, j’ai utilisé cinq paramètres:
- Offset horizontal, au cas où on voudrait décaller.
- Offset vertical, même chose.
- Flou (blur), détermine l’intensité du flou, un peu comme dans Photoshop.
- Étendue (spread), sans avoir trop expérimenté, ça ressemble un peu à
padding, mais appliqué à l’ombre. Peut être négatif si on veut la rapetisser. - Couleur. Je crois que la spécification permettra aussi d’utiliser
rgba(avec de la transparence).
IE6 n’est pas mort
Après avoir fait le site web, comme tout bon intégrateur, j’ai fait le tour dans tous les navigateurs majeurs (IE6/7/8, Chrome, Firefox, Safari, Opera) afin d’y arranger les petits problèmes. Comme à l’habitude, IE6 est toujours un peu plus tannant, alors dans la même perspective qui m’avait poussé à expérimenter avec CSS3, j’ai décidé de rendre le site regardable dans ce navigateur, sans faire pieds et main pour le rendre pixel perfect. À ma grande surprise, lors des premiers jours après la mise en ligne, Google Analytics me disait qu’environ 90% du trafic était fait avec IE6! J’ai donc compris que les TI de la ville de Lévis n’avaient pas encore pris la peine de mettre à jour les navigateurs de certains employés! Par chance, après la vague de curieux à l’interne, la tendance est plutôt redevenue normale (c’est à dire, je n’ai pas revu d’IE6 depuis).
CSS3 va rocker
Dans ce projet, je n’ai utilisé qu’une seule règle de CSS3. Elle ajoute un petit quelque chose au site, sans pour autant avoir un effet dévastateur lorsqu’elle n’est pas rendue par le navigateur.
Il y a plusieurs autres règles qui, en réduisant l’utilisation d’images, vont vraiment accélérer l’intégration web et réduire la taille des pages.
Les navigateurs utilisés sont de plus en plus à jour: IE6 disparait et IE7 disparait encore plus vite maintenant qu’IE8 est sorti! On pourra donc très bientôt utiliser les derniers ajouts au fur et à mesure qu’ils arrivent.
