<C²: webløg />

Courriel - email address

Avatar Denis

mardi 09 septembre 2003
par Denis Boudreau

Enfin, de vraies astuces

Je ne sais pas pour vous, mais moi, depuis quelques années, je n'ai plus beaucoup de patience pour tous ces petits tours de passe-passe et ces trucs "astucieux" issus des années '90 visant à pervertir suffisamment le code d'un document HTML pour lui faire faire n'importe quelle singeries ; violation de la sémantique des éléments, utilisation d'images transparentes pour maintenir des sections en place, multiplication des paragraphes vides pour créer un surplus d'espace, recours à une série d'éléments <li> non-accompagnés de leur parent <ul> pour faire des listes sans trop de marges, etc. Plus que tout, j'en ai plein le dos de ces développeurs qui me présentent leurs "solutions", tous fiers qu'ils sont de leur ingéniosité et de leur créativité.

Alors, quand je tombe sur de véritables astuces, des vrais éclairs de génie de codeurs (parce que parfois, il y en a), j'éprouve un curieux sentiment de joie qui me réconcilie un peu avec la nature humaine. Particulièrement maintenant, avec la flexibilité et la puissance des CSS, il devient possible de réaliser de plus en plus d'effets très simplement et plus efficacement. C'est d'ailleurs le cas de Petr Stanicek qui, comme le faisait remarquer Karl plus tôt cette semaine, a développé...

une méthode simple pour faire un effet rollover en CSS sans avoir à faire de préchargement. Le principe correspond à charger une image, comprenant les différents états sur la même image l'un au dessus des autres, que l'on place dans le fond. Le changement d'état sera effectué par une translation de l'image de façon verticale.

L'approche de l'image simple à plusieurs instances intégrées est véritablement géniale et peut être utilisée dans plusieurs contextes tous aussi créatifs les uns que les autres. L'exemple du zoom automatique en est une autre, tout aussi ingénieuse. Tout porte à croire qu'avec le temps, de plus en plus de développeurs rendront publiques ces innovations et ce, pour le plus grand bien de la santé de ce Web que nous aimons tant.

Denis Boudreau | 2003.09.09 @ 23:05

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.09.10 @ 01:15 par Bieler Batiste

Cet astuce n'est pas très utilisable car il n'échappe pas au bug de cache sur IE6. C'est à dire que l'image de fond est rechargé à chaque modification de la propriété background.

Haut retour au début de la page

2003.09.10 @ 01:34 par Nicolas Moreau

C'est sympa mais c'est une arme a double tranchant, il suffit d'augmenter la taille du texte pour s'en rendre compte,
y aurait bien -moz-image-region mais chut, c'est pas standard ;)

Haut retour au début de la page

2003.09.10 @ 02:34 par Darken

Terrible l'astuce pour le rollover !

J'en utilisais une autre qui consiste à mettre l'image du bouton activé en fond de l'élément parent du bouton. Ainsi le rollover fonctionne immédiatement. En revanche, quand on recharge la page complètement (Ctrl+F5) on voit le truc :) Et ça implique aussi quelques restrictions quand on a des images transparentes.

Je vais expérimenter un peu là-dessus :)

Haut retour au début de la page

2003.09.10 @ 03:11 par stef

Ce qui me chagrine dans son astuce c'est que si on utilise un navigateur un peu vieux, les belles CSS se cassent la figure et que le rendu est très loin du compte. Je crois que je vais rester sur un double-preload encore un moment...

Haut retour au début de la page

2003.09.10 @ 11:44 par CYBERcodeur

il semblerait que l'ami Aaron ait également développé sur le même thème que SimpleBits pour ce qui est des zooms de photos, mais sa version aurait le mérite (à vous d'en décider) de ne pas télécharger la grande photo avant que celle-ci ne soit appelée par le survol de la souris.

http://aaronland.info/htm...

Une alternative intéressante qui exploite la même bonne idée sous un autre angle.

Haut retour au début de la page

2003.09.10 @ 16:33 par Bieler Batiste

Moi jaime moins.

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)