Un débloque-notes en html5

Un ami m'a demandé de jeter un coup d'œil au code qu'il envisageait pour faire une boîboîte en CSS pur avec des onglets pour ses articles.

Je suis pas vraiment costaud en code —HTML ça va, CSS bonjour les dégats— mais le lien vers la source qu'il m'avait donné m'a plu : le gars a fait un très beau boulot qu'on va regarder de près.
Cette boîte à onglets en CSS3 n'utilise aucun Javascript ni aucune image grâce à certaines propriétés des CSS3 que nous allons voir dans ce billet.

Poursuivre la lecture

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.

La mise en oeuvre est simple :
Dans une feuille de style séparée (pour bien ranger ses affaires), désigner la police que vous voulez :

@font-face {  
font-family: yourFontName ;  
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype") /* non-IE */    
}
/* Indiquer ici la police que vous souhaitez utiliser */  
.yourFontName { font-family: yourFontName, verdana, helvetica, sans-serif}  

Cette police est bien sûr disponible sur votre espace Web.
Le visiteur va l'importer dans le cache de son navigateur qui va l'afficher.
Vous noterez que dans la ligne .yourFontName, il y a d'autres polices.
C'est ce qu'on appelle un « fallback », que l'on peut traduire par... euh... fallback ?
Pourquoi ce fallback ? Parce que tous les navigateurs ne sont pas modernes et qu'il faut, pour ceux qui sont trop anciens, leur dire qu'il faut utiliser une autre police parmi celles présentes dans son système d'exploitation.

Microsoft se distingue encore. IE, dans ces dernières versions (7 et 8) ne sait pas lire ses propres polices.
Ça c'est dingo ! True Type, ils ont commencé à bosser dessus en 1989 (j'étais à l'annonce -September 20-23, 1989, Moscone Center, San Francisco) pour contrer Adobe et ses Type 1.
Et là il faut leur indiquer un autre format pour nous rendre la vie plus facile : ce sont les polices EOT.
Du coup il faut rajouter une ligne pour IE :

@font-face {  
font-family: yourFontName ;  
src: url( /location/of/font/FontFileName.eot ) /* IE */  
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype") /* non-IE */    
}
/* Indiquer ici la police que vous souhaitez utiliser */  
.yourFontName { font-family: yourFontName, verdana, helvetica, sans-serif}  

Des polices @font-face, il y en a plein partout, mais chez Fontsquirrel il y a les packages avec les EOT, les TTF... Prenez le soin de lire les conditions d'utilisation dans la licence pour respecter l'auteur et ses droits.
Pour ma titraille ce sera DroidSerif-Regular.