Les trois précédents billets l'annonçaient imminente, et c'est désormais chose faite : la nouvelle CSS est en ligne, c'est la 25ème CSS alternative du site.

Et pour la peine, elle est même mise par défaut. Si vous ne la voyez pas, vous pouvez aller sur la page des CSS alternatives pour l'activer.

Les améliorations sont relativement discrètes, mais pourtant très présentes, voyons un peu ce qu'il se cache sous le capot.

Design

La disposition est somme toute classique, je reviens à un texte foncé sur fond clair, le bandeau et le pied de page prennent une petite touche de fraicheur avec du vert et quelques images. Une police de caractère bien plus douce nommée "Century Gothic" vient embellir le tout pour ceux l'ayant sur leur ordinateur, sinon un classique Verdana prend le relai.

"Nouvelles" technologies

CSS3 a été utilisé pour plusieurs aspects :

• transitions permet le petit effet de fondu quand on survole un lien et le petit effet de zoom sur les images des galeries de photographies ou de mes réalisations web (par exemple),
• box-shadow permet d'avoir les ombrages sur les images,
• text-shadow permet d'avoir les ombrages sur les liens survolés,
• border-radius est utilisé pour arrondir les coins des champs des formulaires et les cellules de l'unique tableau du site (devinez où !),

Jquery a été utilisé pour mettre un peu en valeur les infobulles des balises abbr, et sera probablement utilisé pour continuer d'enrichir le site après coup.

XHTML5 était déjà utilisé pour certaines balises comme nav, etc., désormais les formulaires l'utilisent via des input de type email, number, url, l'attribut required quant à lui permet d'afficher nativement un message d'erreur sur les navigateurs le supportant, pour aider l'utilisateur distrait.

Smartphones & print

Une seule CSS est utilisée pour la version imprimable, et une media-query permet d'adapter le site aux petits écrans des smartphones. Vous pouvez voir cette adaptation en redimensionnant votre fenêtre.

Cette version utilise les mêmes images pour le bandeau et le pied de page, l'affichage en est toutefois adapté via des dispositions légèrement différentes.

La version imprimable utilise la règle @media, qui permet d'avoir tout dans un seul fichier CSS.

Performances web

Plusieurs points ont été travaillés pour obtenir de bonnes performances :

• comme indiqué ci-dessus, exit les 3 CSS, tout se fait dans un seul fichier,
• des data-URL remplacent certaines images non critiques pour le design du site et permettent d'économiser quelques requêtes HTTP,
• beaucoup de propriétés ont été factorisées et les notations ont été les plus compactes possibles pour alléger la CSS,
• cette dernière a été minifiée au passage, afin d'économiser encore 1 ou 2 Ko,
• bien sûr, la mise en cache et la compression sont toujours d'actualité,
• le fichier javascript est chargé en pied de page,
• moins d'images ont été utilisées, les fichiers sont moins nombreux, au final, le site utilise moins de requêtes HTTP et pèse moitié moins lourd que l'ancien design, que j'avais pourtant bien optimisé !

Mise en valeur d'autres aspects

De nouveaux (et d'anciens) aspects sont mieux mis en valeur :

• la balise code a un style qui la rend beaucoup plus reconnaissable parmi le texte,
• les liens externes sont enfin signalés par une petite image, le tout est fait via CSS,
• la mise en gras ressort beaucoup mieux qu'avant,
• la balise pre obtient un vrai style digne de ce nom, histoire de mieux la mettre en valeur.

Dégradation élégante ou amélioration progressive ?

Et bien, cela dépend du point de vue !

En toute franchise, je n'ai pas trop limité ce redesign en le regardant IE… le but est quand même de se faire plaisir.

Néanmoins les améliorations qui échappent à ce dernier ne sont pas critiques. J'ai bien essayé d'utiliser divers patchs pour afficher les nouvelles propriétés CSS3, mais ces derniers sont parfois extrêmement lents (j'y reviendrai dans un autre billet expliquant les écueils de conception), et quoi qu'on en dise, même si c'est agréable, ce n'est pas indispensable pour naviguer sur le site. Cette nouvelle CSS s'affiche bien sous IE, et c'est quand même l'essentiel.

Comme je le dis parfois sur Twitter, vous voulez des effets modernes ? Et bien utilisez un navigateur moderne.