CSS: Pseudo classes sur Internet Explorer

Grâce aux expressions CSS d'Internet Explorer, il y a moyen de simuler les pseudo-classes qui ne sont pas supportées par IE6.

Les expressions CSS d'Internet Explorer

En effet, les expressions CSS (apparues avec IE5) permettent de calculer dynamiquement (via JScript) les différentes propriétés stylistiques.

On attribue une valeur calculée par JScript à une propriété CSS d'un élément html. Les différents objets du DOM sont supportés

#centeredDiv {
	position:absolute;
	left:
		expression(
			(document.body.clientWidth/2)-
			(this.offsetWidth/2)
		);
	top:
		expression(
			(document.body.clientHeight/2)-
			(this.offsetWidth/2)
		);
}

Sur Internet Explorer, cet exemple positionnerait l'élément ayant un id centeredDiv au centre de la page en le positionnant à la différence de la moitié hauteur de la page (document.body.clientHeight/2) et de la moitié de sa hauteur (this.offsetWidth/2). Notez que this représente l'objet en lui-même.

Lire la suite...

Images avec ombre et rotation via flash

Bon, on sait que je n'adore pas le dieu Flash. C'est souvent mal implémenté et donc casse l'accessibilité et l'utilisabilité.

Toutefois, il existe des cas concrets où le flash a des avantages non négligeables.

On connaissait SIFR - qui permet de changer les typos de texte à l'aide de javascript, de css et de flash - ses avantages et ses inconvéniants (sur des grosse pages pleines de titres, le contenu est parfois vraiment long à s'afficher sur un vieux pc).

Dans la même optique, vient d'arriver swfIR pour swf Image Replacement.

Exemple de rendu d'image traitée par swf Image Replacement

Il permet d'ajouter des ombres portées, des bords arrondis et des rotations (choses qu'on ne peut pas faire en css/javascript) à vos images sans devoir passer par votre éditeur d'image favori.

Pour cela, on a juste besoin d'insérer un javascript dans sa page, d'avoir le fichier .swf adéquat dans sa page et d'appeler une fonction javascript qui remplacera votre image par le fichier flash en question.

sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "#fff");
sir.specify("src", "/swfir.swf");
sir.swap("#example img");

Les méthodes specify définissent les propriétés de l'image et la méthode swap remplace l'élément passé en paramètre (via la méthode DOM document.getElementsBySelector - que je ne connaissais pas)

Je pense qu'on va voir cette méthode fleurir aux quatres coins du web.

Liens relatifs

Ajax: Reconnaissance de caractères japonais

Via Fabrice de Reviewing the Kanji et d'Emakina, je suis tombé sur une application de reconnaissance de caractères japonais en Ajax

Bon, même si les explications sont en japonais et que mon court séjour là-bas l'année passée ne m'a pas permis d'apprendre toutes les subtilités de la langue, le concept est très intéressant.

Reconnaissance de caractères japonais en Ajax

Une interface de dessin gérée via javascript enregistre les points qui ont été tracés.

Un post en Ajax vers le serveur permet de récupérer les différents caractères qui ont été compris par le serveur.

Extrait du javascript pour tracer les points du plan de travail

Utilisation d'Ajax appropriée.

L'utilisation d'Ajax est tout à fait appropriée dans ce cas-ci. Le visiteur dessine à l'écran (en créant des span ayant une certaine class). Si la page avait été rafraîchie lors de la soumission du formulaire, le serveur aurait du retourner: soit une image générée avec les coordonnées des points, soit la liste des points qui auraient du être retraités pour redessiner le dessin (ouf)...

Réponse Ajax de la reconnaissance de caractères

Il ne me reste qu'à m'exercer sur mes Kanjis avant de retourner voir Linou au Japon.

Liens relatifs

Je (re)découvre Firebug ou le débogage facile

En préparant un petit article, je suis tombé sur cette vidéo qui montre comment déboguer avec Firebug.

Je suis presque tombé de ma chaise. Je ne connaissais pas la moitié des capacités de cette merveilleuse extension de débogage pour FireFox, que j'emploie quand même depuis un bout de temps (v0.2 si les souvenirs sont bons).

Avant, je ne l'employais que pour tracer mes appels Ajax et les réponses du serveur et tester des variables et fonctions, le tout dans la console.

Je n'avais pas vraiment vu la puissance du débogueur.

Une petit explication s'impose.

Pour que Firebug s'arrête à chaque erreur, il faut que l'option soit activée. (onglet "Debugger", menu "Options").

L'option pour activer le débogueur de Firebug

Je pensais que toutes les options étaient regroupées à un seul endroit. Soit, je m'encroûte, soit l'interface n'est pas super parlante.

Bon maintenant regardons tout ce que l'on peut faire avec ce débogueur.

Le principe est le suivant : on appelle des méthodes de l'objet console en lui passant des paramètres.

console.log("message" [,objects])
console.debug("message" [,objects])
console.info("message" [,objects])
console.warn("message" [,objects])
console.error("message" [,objects])
etc...

La liste complète des méthodes de Firebug est bien évidemment disponible en ligne.

Vraiment bien fait ces petites méthodes (surtout celles qui permettent d'évaluer le temps qu'un javascript met).

Adopté par toute l'équipe des intégrateurs, et certains développeurs. Merci Joe Hewitt !

Liens relatifs :

Gucci 2.0 avec protype et script.aculo.us

Gucci, fabriquant et vendeur de luxe, vient de redesigner son site. Au menu, pas de flash mais l'utilisation des librairies prototype et script.aculo.us.

Accessoires pour chiens sur Gucci.com

Le site tout en largeur est tout en transitions (scroll, apparitions,...), les pages de galerie peuvent être mises en favoris, mon dieu que c'est bien fait.

(bon, être riche et avoir mauvais goût - cf la veste pour toutou)

A voir absolument.

Liens relatifs :

← Previous PageNext Page →