J'ai passé ce samedi pluvieux et venté à faire des coins ronds, des fonds dégradés, à embarquer des polices @font-face, à renverser des chaînes de caractères, à créer des effets de relief sans résultats identiques dans les navigateurs.

Le plus décourageant c'est Opera 10.01, navigateur que j'apprécie tant qu'il est mon navigateur quand je suis simple internaute (Firefox c'est pour le dev) : rien n'y fait son moteur de rendu n'interprète rien des commandes CSS3.
J'ai cherché en vain des hacks et c'est sur le site d'Opera que j'ai appris la bonne nouvelle. La V 10 actuelle fonctionne avec le moteur Presto 2.2 Celle-ci va être incessament sous peu, mais pas plus tard, être mis à jour (2.3) et reconnaître une kyrielle de règles CSS3.
Les specs de Presto 2.3 pour les CSS.

De nouvelles propriétés CSS3 permettent de réaliser des arrière-plans en teintes dégradées.

Elles s'appliquent aux navigateurs modernes, dont est exclue la version 3.5 de Firefox (décidément !).

Du coup j'ai viré mon image en teintes dégradées du footer et j'ai mis un fallback pour les anciens browsers.
En bas ça donne donc :

#bott {
background: #C12100 url(css-ss/footer-fallback.png) repeat-x left top;/* le fallback */
background-size: 100% 100%; /* w3c spec */
-moz-background-size: 100% 100%; /* firefox css*/
-webkit-background-size: 100% 100%; /* safari/chrome */
-o-background-size: 100% 100%; /* opera css */ 
clear:both;
color:#fff;
min-height:158px;
padding:2em 5em 10em;
background-image: -moz-linear-gradient(left, right,
                          from(#BD2001),
                          to(#CC3300));
background-image: -webkit-gradient(linear, left top, left bottom,
                   	 	  color-stop(0.00, #BD2001),   
                  		  color-stop(1.00, #CC3300));
/* IE le vieux code - GradientType=1 pour horizontal, 0 pour vertical */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#BD2001, 
                endColorstr=#CC3300, 
               GradientType=0); 
}

Un bon article sur le sujet des dégradés en CSS3 : CSS3: To Infinity And Beyond!

Il était un temps où les ressources typographiques du HTML étaient limitées.

Très limitées. Les pages HTML d'antan ne pouvaient embarquer des polices comme de vulgaires fichiers média. De ce fait, les webmestres devaient se contenter de ce qu’il y avait à bord de la machine de l’internaute —ces fameuses « web safe fonts »—, celles intégrées aux différents OS (à moins d'acrobaties telles que SiFR ou Flir).
Mais ces temps sont révolus grâce à CSS et la règle @font-face.

CSS et sa règle @font-face permettant d'afficher n'importe quelle police on se met à rêver.
Vous avez l'âme d'un copiste (souvenez-vous de cette scène du film « Le Nom de la rose » où des moines dans le scriptorium écrivaient, debout devant leur écritoire, sur les parchemins) ? Alors enfilez votre robe de bure, rasez-vous le sommet du crâne pour obtenir une tonsure monacale, enfilez des sandales et suivez-moi : nous allons faire une enluminure gothique pour enrichir la typo de vos pages Web...

Poursuivre la lecture

Par typographie riche, on entend un usage intense de différentes polices de caractères qui nuisent toujours à la lisibilité quand celle-ci est mal maîtrisée.

Avec les CSS et la règle @font-face qui permet de spécifier une police de caractères indépendante des OS, les designers typographes vont pouvoir se régaler.
Les autres, bien bousiller leurs mises en pages.

Polices embarquées : en garde à vue ?