Mises en forme diverses
Qu'assurer comme compatibilité navigateur ? Vaste question...
La compatibilité c'est avant tout la version de IE minimale supportée ! Sur ce
site, j'ai décidé d'être compatible avec IE 8+. En effet, la plus ancienne version
de Microsoft Windows encore maintenue à ce jour (octobre 2014) est Windows Vista,
qui était livré avec IE7, mais cet OS est assez peu répandu, et la version suivante
était livrée avec IE 8.
A noter ce billet de blog de août 2014 annonçant les futures échéances de support
pour les différentes versions : Stay up-to-date with Internet Explorer - IEBlog - Site Home - MSDN Blogs.
Les titres H1 de ce site sont sous forme d'image. Les h2 ont longtemps été
sous forme d'images également, comme ci-dessous :
Evidemment, ça n'était pas idéal ni pour le visiteur, ni pour le référencement, ni
pour les évolutions...
J'ais donc remplacé ces images par du texte, mais mis en forme avec des Web Fonts ! Le support est assez large (cf CanIUse).
C'est une police de la librairie Google Fonts
qui est utilisée : Satisfy.
Cette collection est très vaste, les polices sont en général au format le plus
approprié (Woff), les fichiers sont très légers, et Google propose un CDN !
Quelques images profitent de nouvelles propriétés CSS : box-shadow et transform rotate.
Exemple :
Avec ce code :
img#piR_tromb1
{
border: 4px solid white;
border-radius: 5px;
box-shadow: 1px 1px 8px rgba(0,0,0,0.8);
transform: rotate(6deg);
}
A noter : sur la GepapiR les images concernées sont dans la rubrique Musiques et sont intégrées en float à côté de paragraphes de texte : celà pose problème car le texte et l'image se chevauchent... En effet la recommandation précise bien (dans le chapitre 6) :
For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. (...)
For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block.
La solution pour contrer ce problème serait d'utiliser les CSS Shapes, mais leur support est encore (août 2014) bien trop limité ! En conséquence, c'est simplement une marge qui est appliquée !
Plus de détails :
J'ai choisit d'utiliser highlight.js, en intégrant les dépendances depuis le CDN officiel. Cette librairie est populaire, et par ailleurs propose de nombreux thèmes - ici c'est sunburst qui est appliqué !
L'inconvénient de cette méthode est de nécessiter d'échapper le HTML en transformant
les < en <.
Sur ce sujet, voir ce billet intéressant qui conclut que l'insertion de HTML dans
un textarea stylé en CSS est le plus souple : How to code sample code.
Ca n'est pas une solution applicable simplement avec highlight.js.
A noter cette solution PHP utilisée sur OpenClassRoom et qui est assez élégante : [GeSHi] Colorer son code.
Conjuguée avec les chaines PHP au format Heredoc,
plus besoin d'échappement du HTML !
Ca m'a paru cependant un peu lourd...
Adopté la bonne méthode définie dans ce document du W3C : 4.12 Common idioms without dedicated elements — HTML5
Création le 13/08/2014
Dernière mise à jour le 12/10/2014
Un oubli, une erreur, une suggestion ? N'hésitez pas à me contacter sur pgoiffon -at- free.fr