Hello, I’m Vinch

And this is my website.

Ma contribution à Likipad

05/28/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

Il y a quelques semaines, Christophe lancait un concours sur son blog. Le but du jeu était de créer un thème pour la plate-forme de blogs Likipad, uniquement en modifiant le fichier CSS, un peu à la manière de CSS Zen Garden.

J’ai décidé de répondre à cet appel et voici ce que j’ai réalisé.

A défaut d’être vraiment joli (je ne suis pas graphiste), j’ai essayé de créer quelque chose de propre et clair. J’espère avoir réussi et que ce thème trouvera son public.

Si vous voyez des choses à améliorer, mes oreilles sont grandes ouvertes. Il reste deux jours avant que le concours prenne fin…

Simuler min-height sur Internet Explorer 6

04/07/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

Ceci est le premier article d’une longue série. Au fil de mes expériences dans le Web, j’essaierai de vous faire connaître les problèmes que je rencontre au quotidien et les solutions que je trouve pour les régler.

Dans cet article, je vais vous montrer comment simuler le comportement de min-height, une propriété CSS très utile mais très peu jamais utilisée car non comprise par Internet Explorer 6 et inférieurs (au même titre que max-height, max-width et min-width).

Il existe plusieurs solutions pour arriver à nos fins. La première consiste à exploiter la mauvaise interprétation par IE6 des propriétés height et width. En effet, sur IE6, si le contenu d’un bloc dépasse la largeur ou la hauteur définie, le bloc va s’agrandir, ce qui n’est pas le comportement normal (dicté par le W3C). On utilise aussi la non compréhension par IE6 de l’argument CSS !important. Ce dernier permet à l’attribut auquel il est ajouté de prendre le pas sur tous les mêmes autres attributs qui pourraient se trouver à l’intérieur de la même class ou du même id :

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Comment IE6 va l’interpréter ?

Il ne va pas comprendre min-height ni !important (qu’il est bête) mais uniquement height. Comme height se comporte comme min-height devrait se comporter (s’il était compris), on a bien une taille minimum de 500 pixels.

Comment les navigateurs modernes (IE7, Firefox, Opera, etc.) vont l’interpréter ?

Ils vont lire le min-height et les deux height mais prendre en priorité height:auto. Comme auto est la valeur par défaut de height, c’est comme si la propriété n’existait pas. On a bien une taille minimum de 500 pixels.

La deuxième solution consiste à faire appel à un fichier JavaScript qui va tout faire tout seul. Il suffit de l’inclure uniquement dans le cas où le navigateur est IE6 ou inférieur, via un commentaire conditionnel. Cette solution est la moins élégante (quid des gens qui désactivent JavaScript) mais de loin la plus facile à intégrer.

Ajouter ces quelques lignes dans le head de votre fichier (X)HTML :

<!--[if lte IE 6]>
   <script type="text/javascript" src="minmax.js"></script>
<![endif]-->

Le fichier minmax.js est téléchargeable sur cette page. Tous les min-height, max-height, min-width et max-width seront interprétés sur IE6 via ce fichier JavaScript (avec un petit temps de latence).

Les commentaires conditionnels sont des commentaires uniquement interprétés par Internet Explorer. Vous en trouverez une excellente explication chez Laurent Denis. Dans le cas qui nous occupe, le fichier JavaScript ne sera appelé que si le navigateur est inférieur ou égal à IE6.

Si vous avez des problèmes de compatibilité avec vos XHTML et CSS, n’hésitez pas à m’expliquer le problème dans les commentaires. Si je l’ai déjà expérimenté, j’essaierai de vous apporter la (ou les) solutions pour les résoudre.

Sources :

* Le Hack CSS !important
* Min-Height Fast Hack
* Les syntaxes de commentaires conditionnels pour IE Windows
* minmax.js

David Fincher, pour vous servir…

01/19/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

Hier soir, je me suis amusé à soumettre mon site à toute une série de galeries CSS. Je n’avais pas beaucoup d’espoir pour certaines d’entre elles car je sais qu’elles ont parfois des critères extrêmement stricts, mais si on n’essaye pas…

Tout ça pour dire que j’ai eu ma première réponse positive sur l’une de ces galeries : CSS Design Yorkshire

Le problème, c’est qu’ils croient que je m’appelle David Fincher (ndlr. le réalisateur de Se7en et de Fight Club, entre autres) à cause d’une des citations au hasard qui s’affichent dans le header du site…

David Fincher Blog

Trouvez-vous que ces citations prêtent à confusion ou que c’est simplement une erreur bizarre de leur part ? (accessoirement, trouvez-vous que je ressemble à David Fincher ?)

En tout cas, je leur ai envoyé un mail, j’espère qu’ils rectifieront le tir…