Masquer les points dans la numérotation d'une liste ordonnée sur IE 7

Si vous souhaitez masquer les points qui suivent les numéros dans une liste ordonnée (et pourquoi pas les remplacer par d'autres signes de ponctuations), la meilleure solution consiste à désactiver l'affichage de ces numéros, et à prendre en charge vous-même la numérotation grâce à CSS et au pseudo-élément :before :

ol { list-style-type: none; }
ol li { counter-increment: mycounter; }
ol li:before { content: counter(mycounter) ' '; }
ol.custom:first-child { counter-reset: mycounter; }

C'est bien beau, mais Internet Explorer 7 vient une nouvelle fois gâcher la fête en ne supportant pas :before.

Heureusement, en trichant un peu, il est possible de masquer "physiquement" les points en utilisant un positionnement similaire à celui-ci (qui nécessite tout de même d'insérer une balise supplémentaire, afin de pouvoir contrôler le contenu des li comme des éléments de type bloc) :

ol {
list-style-position: inside;
width: 72px;
}

ol li span {
float: right; /* les noeuds de texte se comportent comme des blocs flottant à droite */
margin-left: -7px; /* on vient superposer ces derniers avec les points */
padding-left: 7px; /* on rétablit un peu d'espace */
position: relative;
z-index: 1; /* on les fait passer au-dessus des points */
background-color: white; /* on leur donne la même couleur de fond que le conteneur */
}

Les valeurs en pixels devront évidemment être adaptées à vos propres styles ! Cette astuce est plus pratique dans le cas d'une liste de liens : les li contenant alors déjà des a, il est inutile de passer par des span superflus d'un point de vue sémantique.

Gérer les variantes d'une police avec Cufón

Cufón est une librairie JavaScript ayant pour objet la gestion de polices non-websafe, en les redessinant de manière vectorielle sur des canvas. Elle se présente comme une alternative intéressante aux règles CSS3 @font-face pour les polices vraiment exotiques, dont le rendu natif par les navigateurs n'est pas optimal. En revanche, sa lourdeur ainsi que le fait que le texte ainsi rendu ne soit pas correctement sélectionnable font qu'il vaut mieux réserver son usage aux titres et autres éléments spécifiques.

Le générateur en ligne permet d'obtenir facilement un fichier JS embarquant une ou plusieurs variantes d'une police, réparties entre les classiques normal, gras, italique et gras-italique. Malheureusement, ce dernier gère plutôt mal la correspondance entre lesdites variantes et leurs équivalents CSS, il vaut donc mieux s'occuper nous-même de cet aspect.

Voici un exemple de déclaration de police dans un fichier généré par Cufón :

Cufon.registerFont({"w":187,"face":{"font-family":"Avenir","font-weight":600,"font-style":"oblique", // ...

Il suffit de modifier à la main ces déclarations, en spécifiant une valeur de graisse (pour information, 400 correspond à normal, et 700 à bold), et en ajoutant la règle font-style pour les déclinaisons en italique. Cela vous permettra également d'outrepasser la limite intrinsèque de 4 déclarations par fichier si nécessaire, en regroupant plusieurs fichiers en un seul, d'où économie de nombre de requêtes HTTP et donc de temps de chargement de votre page !

Adapter la hauteur d'une Shadowbox à son contenu

Tout utilisateur de Shadowbox a eu un jour, j'imagine, besoin de pouvoir faire en sorte que ce dernier adapte sa hauteur à celle de son contenu, qu'il s'agisse simplement d'obtenir un réglage aux petits oignons sans peine ni contrainte, ou de faire en sorte que sa "fenêtre" soit plus grande que le viewport du navigateur, rendant à ce dernier la responsabilité du scroll.

Mes propres recherches à ce sujet étant restées vaines, j'ai mis au point la solution qui va suivre, certes un peu bourrin mais ayant le mérite de fonctionner ! Elle implique d'exécuter du JavaScript dans la page appelante à partir de la Shadowbox elle-même (qui doit donc être une iframe au contenu de laquelle vous avez accès). Démonstration !

Dans la Shadowbox :

<script>
window.parent.sb_resize(jQuery(document).height());
</script>

Dans la page parente :

function sb_resize(h)
{
$('#sb-wrapper-inner').height(h);
$('#sb-container').css('position', 'absolute').width($(document).width()).height($(document).height());
$(window).on('resize', function() { setTimeout('sb_compute()', 50); }); // petit délai pour s'assurer que notre code sera exécuté après celui de Shadowbox
}

function sb_compute() {
var new_h = 0;
$('#sb-player').contents().children().children('body').children().each(function()
{
new_h += $(this).height(); // On récupère la hauteur cumulée des enfants du body de l'iframe
});
sb_resize(new_h);
}

Se débarrasser du pixel blanc autour des boutons customisés sur IE 7

Lorsqu'en CSS, vous stylez un bouton (qu'il s'agisse d'un élément button, input ou a) en lui appliquant une image de fond répétée horizontalement et une bordure, ça a de la gueule. À part peut-être sur Internet Explorer 7 qui, ne nous demandons même plus pourquoi, vient ajouter une bordure supplémentaire d'un pixel blanc (dans la majorité des cas, cf. supra) entre le bouton en lui-même et sa bordure normale, définie par nos soins. Le plus fort, c'est que si l'on enlève cette dernière, ce maudit pixel en trop disparaît !

Plutôt que de chercher midi à quatorze heures, commençons par styler normalement notre bouton, pour les navigateurs capables de comprendre le CSS correctement :

.button {
background: url("img/button.jpg") repeat-x;
border: 1px solid #3B3B3B;
}

Si nous laissons les choses en l'état, IE 7 va en réalité appliquer une bordure supplémentaire d'un pixel de large, de la couleur de fond de l'élément (le bouton), qui est, par défaut, le blanc. Il est impossible de la faire disparaître sans enlever la bordure originelle. Alors, réfléchissons...

/** Ceci s'applique uniquement à IE 7, via un commentaire conditionnel **/
.button {
border: 1px solid transparent; /* on laisse une bordure invisible pour que le pixel en trop reste */
background-color: #3B3B3B; /* on donne à ce pixel la couleur souhaitée pour notre bordure */
}