Je ne suis pas encore un pro en matière de développement Web, et je crois même pouvoir dire que j'en suis loin, mais lorsque j'ai développé ce nouveau thème pour mon blog, j'ai aussi eu envie de parler des techniques de transparence que l'on utilise dans les feuilles de style (CSS). Plusieurs existent, et elle permettent même facilement de créer quelques effets plaisants (pas forcément pro, mais on s'en fout, hein ?).

Avant que je fasse évoluer ce thème, qui connaissait un nombre de bugs impressionnants, parce que codé à la va-vite, j'utilisais pour les fenêtes la technique de l' "opacity". Ainsi, pour créer un fond avec une transparence de 70%, cette technique consiste à écrire ceci :

.exemple {
filter:alpha(opacity=70); // Internet Explorer
-moz-opacity:0.70; // Anciennes versions de Firefox
-khtml-opacity: 0.70; // Anciennes version de Safari
opacity: 0.70; // La version standard normalement gérée par la plupart des navigateurs sauf IE...
}

4 lignes pour le même effet, et ce en fonction de chaque type de navigateurs et de leur ancienneté.

Toutefois, j'avais vu que les styles hérités prenaient aussi cette transparence, rendant possible, selon l'effet utilisé, des lettres pénibles à lire. Et, en commençant à faire évoluer mon thème, j'ai découvert la technique du rgba. Grâce à elle, cet effet indésirable de l'attribution automatique de la transparence disparait, et les styles hérités deviennent désormais indépendants. Pour appliquer une transparence de 70%, il faudra aussi en profiter pour attribuer la couleur de fond, de quoi gagner encore une ligne de code. Ce qui donne ceci :

.exemple {
background-color: rgba (255,255,255,0.7);
}

On utilise donc le code rgb de la couleur voulue (à générer ici) auquel on ajoute la transparence. Seulement, vous savez quoi ? Je vous le donne en mille : Internet Explorer ne gère pas non plus cette technique. Il faudra, comme d'habitude ajouter une nouvelle ligne rien que pour lui, du moins jusqu'à la version 8, puisqu'il semble que la prochaine version 9 de IE devienne beaucoup plus respectueuse des standards. Il était temps, mais pour moi, il est trop tard, et utiliser ce truc lourdingue, non merci, je prends de bien meilleures habitudes ailleurs... A ce propos, si vous voulez savoir quels navigateurs gèrent cette technique, voici un joli tableau (en anglais) qui récapitule. On voit même que certains IE ne comprennent que le code hexadécimal. 15 années de domination sans aucune évolution, ça se paye.

Un peu plus loin

Même si je ne me suis pas servi de ces sites, vous pouvez allez voir celui d'Alsacréation, et l'article d'Olivier Faurax est aussi très bien.