Facebook LinkedIn SourceForge Twitter RSS LastFM
logologo

Détection de browsers avec Mootools

Geoffray Warnants|24/11/2008|3 commentaires

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 >>>

Plugin MooTools pour la mise en forme de snippets

Geoffray Warnants|13/09/2008|4 commentaires

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.

<code> <?php function sayHello() { echo 'Hello, world !'; } ?> </code>
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 >>>

Update du plugin mooRainbow pour MooTools 1.2

Geoffray Warnants|29/07/2008|6 commentaires

mooRainbow color picker

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 : Soumettre un formulaire via AJAX

Geoffray Warnants|25/07/2008|35 commentaires

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 >>>

<<< Articles plus récents | Articles plus anciens >>>

zend framework