Le comportement des navigateurs étant aussi diversifié qu'improbable, il s'avère souvent fort tentant d'user de certains "hacks", autant en CSS qu'en Javascript. Bien que ces pratiques soient à utiliser avec prudence (elles constituent parfois une antorse aux standards du web et pourraient provoquer un comportement inattendu sous les futures versions du navigateur ainsi "patché"), elles permettent de corriger certains comportements étranges et autres problèmes de rendu.

En Javascript, pour mettre en place nos propres traitements alternatifs selon le browser, Mootools, plutôt que de proposer un moyen d'identifier le browser qui interprète la page, propose une détection plus intelligente basée sur le moteur interne du navigateur. Comme la plupart des navigateurs sont fondés sur les mêmes principaux moteurs, il est en effet plus judicieux d'effectuer la distinction sur ce critère. Pour ce faire, il suffit d'interroger quelques propriétés de l'objet Browser pour connaître le moteur de rendu qui interprète la page :

• Browser.Engine.name : (string) Nom du moteur
• Browser.Engine.version : (int) Version du moteur
• Browser.Engine.gecko : (bool) True si le navigateur utilise le moteur Gecko
• Browser.Engine.trident : (bool) True si le navigateur utilise le moteur Trident
• Browser.Engine.webkit : (bool) True si le navigateur utilise le moteur WebKit
• Browser.Engine.presto : (bool) True si le navigateur utilise le moteur Presto

Un rapide petit test executé sur une panoplie de navigateurs (merci BrowserShots) m'a permi d'établir le tableau récapitulatif suivant :

Browser.Engine
	.name	.version	.gecko	.trident	.webkit	.presto
Firefox 1.5	gecko	18	true	undefined	undefined	undefined
Firefox 2.0	gecko	18	true	undefined	undefined	undefined
Firefox 3.0	gecko	19	true	undefined	undefined	undefined
Firefox 3.1	gecko	19	true	undefined	undefined	undefined
Seamonkey 1.1	gecko	18	true	undefined	undefined	undefined
Seamonkey 2.0	gecko	19	true	undefined	undefined	undefined
Camino 1.6	gecko	18	true	undefined	undefined	undefined
Galeon 2.0	gecko	18	true	undefined	undefined	undefined
Navigator 9.0	gecko	18	true	undefined	undefined	undefined
Epiphany 2.22	gecko	18	true	undefined	undefined	undefined
K-Meleon 1.5	gecko	18	true	undefined	undefined	undefined
Flock 1.2	gecko	18	true	undefined	undefined	undefined
Flock 2.0	gecko	19	true	undefined	undefined	undefined
IE 5.5	trident	4	undefined	true	undefined	undefined
IE 6.0	trident	4	undefined	true	undefined	undefined
IE 7.0	trident	5	undefined	true	undefined	undefined
IE 8.0	trident	5	undefined	true	undefined	undefined
Avant 11.7	trident	5	undefined	true	undefined	undefined
Konqueror 3.5	webkit	419	undefined	undefined	true	undefined
Safari 2.0	webkit	419	undefined	undefined	true	undefined
Safari 3.2	webkit	525	undefined	undefined	true	undefined
Safari 4.0	webkit	525	undefined	undefined	true	undefined
Chrome 0.3	webkit	525	undefined	undefined	true	undefined
Chrome 1.0	webkit	525	undefined	undefined	true	undefined
Opera 8.53	presto	925	undefined	undefined	undefined	true
Opera 9.52	presto	950	undefined	undefined	undefined	true
Opera 9.62	presto	960	undefined	undefined	undefined	true
Opera 10.0	presto	960	undefined	undefined	undefined	true

Un mécanisme similaire existe aussi pour détecter le système d'exploitation, mais cette fois sans permettre d'en distinguer les versions.

Browser.Platform
	.name	.win	.linux	.mac	.ipod	.other
Windows	win	true	undefined	undefined	undefined	undefined
Linux	linux	undefined	true	undefined	undefined	undefined
Mac	mac	undefined	undefined	true	undefined	undefined
iPod	ipod	undefined	undefined	undefined	true	undefined
Autres (BSD, ...)	other	undefined	undefined	undefined	undefined	true

Réagir à cet article | Lire la suite >>>

Voici mon premier plugin MooTools ! Il permet de formater très simplement les portions de code présentées au travers de ce blog. Son rôle est de mettre en forme dynamiquement les éléments qui contiennent des extraits de code. Prenons comme exemple la balise <code> dans laquelle se trouve un exemple de code PHP en texte brut.

Au chargement de la page, le plugin va appliquer une transformation à toutes les balises <code>, et ainsi produire un résultat qui ressemblera à ceci :

<?php
function sayHello() {
    echo 'Hello, world !';
}
?>

Pour mettre le plugin en place, il suffit de spécifier qu'au chargement de la page, la transformation devra s'appliquer à tous les éléments <code>. Bien évidemment, il est possible d'effectuer des sélections plus complexes grâce aux sélecteurs de MooTools.

<script type="text/javascript">
window.addEvent('domready', function(){
    new MooCode().applyTo($$('code'));
});
</script>

Et le tour est joué !

Réagir à cet article | Lire la suite >>>

Vous connaissez peut-être déjà MooRainbow, ce bien joli plugin MooTools mettant à notre disposition une palette de sélection de couleur fort bien conçue. Et pour cause, son auteur (Djamil Legato) n'est autre qu'un des développeurs officiels de MooTools ! Malheureusement, par manque de temps, le projet est resté en stand by et la dernière version disponible n'est pas compatible à 100% avec la version 1.2 finale de MooTools. Voici donc mon humble contribution au projet : une mise à jour mineure du plugin qui corrige ce léger problème de compatibilité : mooRainbow.1.2b2-gw.js

Réagir à cet article | Lire la suite >>>

MooTools 1.1 permettait de soumettre très simplement nos formulaires de manière asynchrone. La méthode send() de l'objet Form se chargeait de tout : Détection des attributs method et action du formulaire, envoi de toutes les données du formulaire via AJAX, réception de la réponse du serveur et même la possibilité de mettre à jour la page HTML avec le contenu ainsi reçu. On ne pouvait rêver plus simple, les fainéants comme moi s'en trouvaient ravis.

$('myForm').addEvent('submit', function(e) {
    new Event(e).stop();
    this.send({
        update: $('ajax_response')
    });
});

Depuis MooTools 1.2, à moins que je n'ai loupé une étape, il est nécessaire de passer par un objet Request qu'il faut initialiser soi-même pour reproduire le même comportement.

$('myForm').addEvent('submit', function(e) {
    new Event(e).stop();
    new Request({
        method: this.method,
        url: this.action,
        onSuccess: function(responseText, responseXML) {
            $('ajax_response').setHTML(responseText);
        }
    }).send(this.toQueryString());
});

Réagir à cet article | Lire la suite >>>