Voici une petite comparaison des bordures outset générées par Internet Explorer et Mozilla Firefox :

Comme vous pouvez le constater grâce à mes magnifiques smileys, les bordures outset générées par Mozilla Firefox donnent un réel effet de relief contrairement à Internet Explorer qui calcule quant à lui des couleurs bien hasardeuses.

En utilisant quelques fois la propriété border pour mettre un peu de style à mes boutons de formulaires, j’étais obligé de capturer les bonnes couleurs des bordures outset produites par Firefox via la très bonne extension ColorZilla pour finalement appliquer la correction pour Internet Explorer.

Ainsi, au lieu de me contenter d’appliquer ce petit code CSS :

[css] border:2px outset #F0F; background:#F0F;

Je me vois obligé d’appliquer ce code beaucoup moins souple pour obtenir un rendu de couleur satisfaisant :

[css] border-top:2px solid #FFB2FF; border-right:2px solid #8D008D; border-bottom:2px solid #8D008D; border-left:2px solid #FFB2FF; background:#F0F;

Méthode quelques peu rudimentaire mais elle m’a fait me pencher sur le passionnant mécanisme de calcul des couleurs. J’avais déjà vu un article très interressant traitant des problèmes de couleur de texte sur Dying Culture qui m’a ensuite aiguillé sur cette page un peu barbare à mon goût vu mon niveau d’anglais qui explique la lisibilité des couleurs d’un page Web.

C’est alors que je me suis mis au defi de mettre en place un petit script PHP (en POO bien sûr ! ^_^) basé sur la trouvaille de Jean-Marc Fontaine et couplée avec le moteur de Firefox. Bah oui ! Il le fait déjà très bien !

Grâce aux utilisateurs du forum de Geckozone je me suis plongé dans le code source de FireFox alias SeaMonkey et j’ai converti en PHP, avec moins de difficultés que j’imaginais, ce qui m’était utile.

Voici donc mon petit générateur de CSS pour bordures outset en mal de reconnaissance par Internet Explorer. Ceci n’est qu’un premier jet car je compte par la suite le faire fonctionner entièrement en JavaScript puis m’en servir de base pour effectuer d’autres petits travaux que j’ai derrière la tête. Mais bon, si j’étais au chômage (heureusement non) ce serait déjà fait !

Générateur de CSS pour bordures outset

Ainsi mon fabuleux et incroyable générateur haute-technologie vous crée un code CSS pour les bordures, le fond et la couleur de texte qui satisfera les mirettes tant de l’utilisateur de Firefox que de celui d’Internet Explorer. Cela n’interessera sûrement pas grand monde mais, en tout cas, moi oui !