Hello, I’m Vinch

And this is my website.

De l’opacité qui fonctionne sur (quasiment ?) tous les navigateurs !

01/31/07

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

Sur l’ancienne version de vinch.be, j’utilisais de l’opacité sur quelques blocs pour améliorer légèrement le look général du site.

J’avais à l’époque créé un page sur laquelle j’expliquais comment j’avais fait pour que ce soit visible de la même façon sur tous les navigateurs. Comme cette page a aujourd’hui disparu, et en attendant CSS 3, voici un rappel de la façon de procéder…

Le bloc qu’on veut rendre opaque à 50% a l’identifiant foo. Dans le fichier CSS, on a donc :

#foo {
    opacity:0.5;
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    filter:alpha(opacity=50);
}

* opacity est la future propriété CSS 3, qui fonctionne déjà sur quelques navigateurs, dont Opera.
* -moz-opacity fonctionne sur les navigateurs dont le moteur de rendu est Gecko, comme Firefox, Camino, Flock, etc.
* -ktml-opacity fonctionne sur les navigateurs dont le moteur de rendu est KHTML, comme Konqueror, Safari, etc.
* la dernière propriété fonctionne uniquement sur le navigateur de Microsoft.

J’ai créé un exemple simple sur cette page.

Si vous êtes un puriste, évitez d’utiliser ce mécanisme, car cela menera inévitablement à des erreurs de validation CSS.

* Pour en savoir plus sur l’opacité : Transparence des images et navigateurs
* Pour en savoir plus sur les moteurs de rendu des navigateurs : Petite étude sur les moteurs de rendus (layout engines)

Mes extensions Firefox

01/28/07

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

Je ne suis pas un gros consommateur d’extensions Firefox (pas comme ce gars là). Je n’ai actuellement que 6 extensions installées sur mon navigateur Firefox, mais elle couvrent entièrement mes besoins de surfeur et de développeur Web :

* del.icio.us : Cette extension me permet de bookmarker la page courante en lui ajoutant des tags et une description. Remplace avantageusement le système de bookmarking classique de Firefox car mes bookmarks sont enregistrés en ligne et ne sont donc pas perdus en cas de crash/plantage/reformatage.
* Firebug : Découverte récemment (via le bouquin “Bien développer pour le Web 2.0“), cette extension permet de débugger très facilement le DOM/JavaScript (entre autres).
* Google Toolbar : Je m’en sers pour avoir un lien direct vers Google.be, pour voir le PageRank de la page courante, pour vérifier l’orthographe (même si Firefox 2 le permet par défaut) et pour faire mes recherches (j’utilise très peu, pour ne pas dire jamais, le mécanisme de recherche par défaut de Firefox).
* Greasemonkey : Découverte récemment aussi, cette extension est très utile pour palier les manquements de sites que je visite souvent.
* IE Tab : Cette extension me permet d’avoir un aperçu de la page courante dans le navigateur de Microsoft. C’est surtout utile en développement mais également pour certaines pages qui sont “optimisées” pour Internet Explorer (et malheureusement, il y en a encore beaucoup).
* Web Developer Toolbar : On ne présente plus ce don du ciel pour les développeurs Web.

Si vous voulez essayer toutes les extensions Firefox, Geckozone en propose une liste assez exhaustive.

A noter que j’utilise la page d’accueil Google (au lieu d’extensions) pour d’autres besoins : Gmail, Google Reader, Google Calendar et Flickr.

Et vous, c’est quoi vos extensions ?

Petite étude sur les moteurs de rendus (layout engines)

01/04/07

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

Depuis quelques semaines, je commence à m’intéresser aux navigateurs Web et plus particulièrement à leurs moteurs de rendus

Un moteur de rendu HTML est un composant logiciel de base qui permet aux logiciels d’afficher les éléments d’une page Web. Ils sont de ce fait le c≈ìur des navigateurs Web. Depuis le début d’Internet, de nombreux moteurs de rendus ont été utilisés mais, depuis la complexification des standards, on assiste maintenant à une concentration de ceux-ci.

(définition sur Wikipédia)

J’essaye tant bien que mal de déterminer quel moteur de rendu (ainsi que sa version) est utilisé par quel navigateur (ainsi que sa version).
En effet, tout le monde (enfin, ceux qui s’y intéressent un peu) sait que Firefox utilise Gecko, qu’Opera utilise Presto, qu’Internet Explorer pour Windows utilise Trident, etc. Malheureusement, on trouve très peu de documentation précise sur les versions utilisées.
Par exemple : Firefox 1.5 utilise Gecko 1.8

A partir de ces résultats, j’aimerais créer une liste de navigateur sur lesquels il est pertinent de tester un site avant de le mettre en ligne.
Par exemple, je peux déjà tirer comme conclusion que c’est inutile de tester un site sur Flock (toutes versions) et sur Firefox 1.5 car ils utilisent tous les deux Gecko 1.8

J’ai placé le résultat actuel de mes recherches ici : http://docs.google.com/View?docid=dgjgq9zz_19gqqcst

Pour Gecko, je pense avoir plus ou moins bien couvert le sujet (à part Galeon et Epiphany). Cependant, je manque cruellement d’informations à propos des navigateurs basés sur KHTML/WebCore et iCab (y a t’il eu plusieurs versions de ces moteurs de rendus ?) et à propos d’Internet Explorer pour Mac. Je me demande également s’il y a eu plusieurs versions de Elektra et Presto pour Opera…

Si vous avez des informations que je n’aurais pas où que vous voyez des choses à corriger, n’hésitez pas à m’envoyer votre adresse GMail sur vincent.battaglia[at]gmail.com, je vous ajouterai aux collaborateurs du document.

En espérant avoir fait le moins d’erreurs possibles, j’espère que ce document pourra servir à beaucoup de monde…