Mises en forme diverses

Création le 13/08/2014
Dernière mise à jour le 07/07/2026

Introduction

Lors de la dernière refonte de ce site en 2014, la question de la compatibilité navigateur se posait encore de manière aigue avec la présence large d'Internet Explorer sur les postes de travail...

Aujourd'hui (février 2026), enfin (!!), les navigateurs répandus supportent bien les standards du web basique qui sont utilisés sur ce site.

Titres H2 et H3

Les titres H1 de ce site sont sous forme d'image. Les h2 ont longtemps été sous forme d'images également, comme ci-dessous :

Du texte sous forme d'image évidemment, ça n'est 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 !

Le CDN de Google est évidemment un moyen pour eux de récupérer des données... Dans le cadre de ce site à très faible traffic je considère que c'est acceptable ?

Mise en forme contenu

Raccourcis clavier

La balise kbd est dédiée à celà !

Plus d'informations sur cette balise : <kbd> : l'élément de saisie au clavier - HTML | MDN

Exemple :

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Qui va rendre ainsi : Ctrl + C

Citations

Pour les citations j'ai utilisé naturellement la balise blockquote qui est prévue à cet effet, contenant un p et des balises q^[1] et cite^[2].
Du CSS va ajouter un effet de relief grace à border-style: outset^[3] et du box-shadow^[4].
Exemple de contenu :

De deux choses Lune, l'autre, c'est le Soleil.
Jacques Prevert

Extrait de code CSS :

blockquote
{
    border: 1px outset white;
    border-left: 1px dashed black;
    border-radius: 0 5px 5px 0;
    background-color: #DDDDDD;
    opacity: 0.75;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
}

Un site regroupant beaucoup d'exemples inspirants de box-shadow : 95 Beautiful CSS box-shadow examples - CSS Scan

Callouts

Les callouts ou alertes permettent d'avoir une étiquette de texte caractérisée par une icone et une couleur, pour représenter facilement une info, alerte, warning, tip, ...

J'ai donc rajouté un système similaire pour agrémenter mes pages ! J'ai très largement récupéré un contenu figurant sur la page MDN pour l'attribut data..

J'ai repris le principe d'avoir une seule classe pour la mise en forme par défaut, et un attribut data pour les variantes : ainsi on peut facilement avoir un sélecteur CSS ciblant les callout sans variante !

Et pour faciliter la définition des règles, j'ai utilisé :

• Des variables CSS^[1]
• Egalement le pseudo élément :where^[2] permet de gérer une surcharge de la mise en forme par défaut de certains blocs (p, ul, li)
• La mise en forme reprend le border-style et box-shadow utilisé sur les citations^[3].

Voir cet extrait de code :

.callout:before {
  content: var(--callout-icon);
}
.callout {
  --callout-icon: "";
  --callout-bg: #222222;
  --callout-fg: #9e9e9e;
  
  background-color: var(--callout-bg);
  color: var(--callout-fg);
  
  border : 1px outset black;
  border-radius: 5px;
  box-shadow: 1px 1px 8px rgba(0,0,0,0.8);
}

.callout :where(ul, li) {
  background-color: transparent;
  color: inherit;
}
.callout :where(p, ul) {
  margin: 1rem;
}

.callout[data-variant="note"] {
  --callout-icon: "✏️";
  --callout-bg: #151e2c;
  --callout-fg: #157aff;
}

// ...

Mise en forme des images

CSS Transform

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);
}

Problèmes de débordements

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 au moment de l'ajout (août 2014) leur support était bien trop limité ! En conséquence, c'est simplement une marge qui est appliquée.

Plus de détails :

• Une page pour reproduire le problème
• Un article parlant des CSS Shapes : Creating Non-Rectangular Layouts With CSS Shapes

Coloration du code CSh2HTML/JS/...

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.

Pour ma part, vu que le site utilise déjà PHP, j'ai simplement utilisé la fonction htmlspecialchars couplée à la syntaxe de chaine NowDoc :

<?php
echo htmlspecialchars(<<<'HTML'
//...
HTML
);
?>

Notes de pied de page (footnotes)

Adopté la bonne méthode définie dans ce document du W3C : 4.12 Common idioms without dedicated elements — HTML5

Un oubli, une erreur, une suggestion ? Rendez-vous sur le dépôt GitHub !