IE6, IE7, IE8 ne supportent pas plus de 31 fichiers CSS liés dans une page html (que se soit par tag <link rel="stylesheet" ...> ou CSS @import).

Toutes les CSS venant après la 31ème seront simplement ignorées !

Ok, ça n'est pas idéal, d'un point de vue performance, de splitter ses CSS mais des fois nous n'avons pas le choix. (Ex : Développement Drupal avec quelques modules rajoutant chacun sa propre CSS).

La solution pour Drupal :

Un module existe (il ne loade pas de CSS propre) : IE CSS Optimizer concatène les CSS trouvées dans les répertoires /modules/ d'un projet Drupal une fois configuré et activé.

Et si je n'emploie pas Drupal ? :

Comme Microsoft le suggère [1] :

To work around this limitation, combine multiple classes into a single style tag.

Pour contourner cette limitation, combinez les différentes classes dans un seul tag style.

Le plus simple est de vérifier si les CSS liées sont vraiment nécessaires et en supprimer si besoin. D'autres solutions de concaténation existent (voir la librairie Minify)

Liens relatifs :

• Testcase des différentes solutions envisageables
• Drupal IE CSS Optimizer Module
• via John Albin
• [1] : Résolution proposée par Microsoft

© Marin for Gatellier.be, 2010. | Permalink | 2 comments | Add to del.icio.us
Post tags: bug, concatenate, CSS, Drupal, IE, IE6, IE7, IE8, minify, Performances

Je me dis que ça pourrait aider du monde d'avoir une compilation des méthodes pour retrouver les versions des Frameworks JavaScript.

Vous n'avez qu'à entrer les lignes suivantes dans une console firebug ou en faire un alerte JavaScript.

jQuery

jQuery.fn.jquery;
//returns jQuery version number ie: "1.2.6"

Prototype JS

Prototype.Version;
//returns Prototype version number ie: "1.5.2_pre0"

Mootools

MooTools.version;
//returns MooTools version number ie: "1.2.0"

ExtJS

Ext.version;
//returns ExtJS version number ie: "2.2.1"

Yahoo! User Interface Library (YUI)

YUI v2

YAHOO.VERSION;
//returns YUI version number ie: "2.5.2"

YUI v3

YUI().Env.meta.version;
//returns YUI version number ie: "3.0.0pr2"

Dojo Toolkit

dojo.version;
/*
returns an object representing DOJO version number ie: "1.3.0 (16807)" major=1 minor=3 patch=0 revision=16807
with major, minor, patch and revision properties
dojo.version.major, dojo.version.minor, etc
*/

Si vous employez d'autres Frameworks JavaScript, n'hésitez pas à laisser un commentaire, je mettrai cette liste à jour.

© Marin for Gatellier.be, 2009. | Permalink | 5 comments | Add to del.icio.us
Post tags:

Alerte de sécurité sur IE < 8.

Security Information

This page contains both secure and unsecure items.

Do you want to display the nonsecure items?

[Yes] [No] [More Info]

Ou en français :

Information sur la sécurité

Cette page contient des éléments sécurisés et non sécurisés.

Souhaitez-vous afficher les éléments non sécurisés ?

[Oui] [Non] [Plus d'infos]

Alerte de sécurité sur IE8b2.

A l'heure actuelle, la version finale d'IE8 n'est pas encore sortie. J'ai donc fait des tests sur la version bêta 2.

Security Warning

Do you want to view only the webpage content that was delivered securely?

This webpage contains content that will not be delivered usin a secure HTTPS connection, which could compromise the security of the entire webpage.

[More Info] [Yes] [No]

Notez la tournure de la phrase qui est completement l'inverse du message de sécurité des versions précédantes...

Examples d'alerte de sécurité.

Démonstration.

J'ai mis en place une page démontrant cette popup de sécurité. Je sais que le certificat n'est pas valable pour le domain, d'où la première alerte.

Cette page est servie via le protocole sécurisé https et contient un lien vers une image servie via http.

Sur Internet Explorer, vous devriez avoir le message d'alerte ci-dessus.

Code.

<div>
<img src="http://noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: http://www.catswhocode.com/blog/404" />
</div>

Supprimer l'alerte de sécurité une fois pour toute.

Il y a plusieurs solutions pour cela. Dont une consiste à changer les paramètres d'IE.

Je me vois mal conseiller à mes clients de changer leurs paramètres.

La seule solution est d'employer correctement le Common Internet Scheme Syntax, en supprimant le protocole.

Démonstration.

Dans cet exemple, le protocole https du lien vers l'image à simplement été supprimé.

Le message de sécurité n'apparaît plus.

Code.

<div>
<img src="//noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: http://www.catswhocode.com/blog/404" />
</div>

Notez que la même technique est d'application pour les fichiers .swf que vous pourriez avoir dans vos pages sécurisées.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf"quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

code vu sur la base de connaissance Macromedia

J'ai enlevé le protocole http de l'attribut codebase du tag object.

Maintenant, ceux qui utilisent encore Internet Explorer (et qui devraient vraiment essayer un meilleur browser) n'ont plus de raisons de se plaindre de ces messages d'alerte !

© Marin for Gatellier.be, 2009. | Permalink | 2 comments | Add to del.icio.us
Post tags: https, IE, scheme, security, url, warning

Bug de rendu de background-images

Je suis tombé aujourd'hui sur un bug mystérieux de background-image mal rendue. L'image de fond des list-items est évidemment la même, le premier rendu étant le bon. Le bug est connu (depuis au moins le mois d'avril) et devrait être corrigé dans la prochaine version de Firefox.

Taux de pénétration de Firefox 3 - suite

Semaine 2 - les navigateurs visitant ce blog :

Navigateurs 25/06/2008 - 1/07/2008

Pénétration Firefox 25/06/2008 - 1/07/2008

Pénétration Internet Explorer 25/06/2008 - 1/07/2008

Analyse :

Je sais très bien que les données récoltées sur deux semaines et sur un blog technologique ne sont pas du tout représentatives.

Néanmoins, la majorité des visiteurs de ce blog emploient à présent Firefox 3 (29,4%) suivi de très près par les versions de Firefox 2 (26,4%) puis IE7 (25,3%) et enfin IE6 (12,1%).

Par rapport à la semaine dernière, l'avancée est belle !

Semaine 2 - les navigateurs visitant un site tout public :

Navigateurs 25/06/2008 - 1/07/2008

Pénétration Firefox 25/06/2008 - 1/07/2008

Pénétration Internet Explorer 25/06/2008 - 1/07/2008

Analyse :

Entre ces deux semaines, sur un site grand public sur lequel je ne peux malheureusement pas donner plus d'infos, pas des masses d'évolutions sur les répartitions des browsers.

Par contre, dans l'ensemble des visites sur Firefox, on voit une avancée notoire de la part de marché de la version 3 (de 8,9% à 26,7% - et ce au détriment de Firefox 2). Pas mal non plus !

Merci encore à Chacsam, Gaetano Laurent pour leurs statistiques.

Autres nouvelles du monde des navigateurs :

Mise à jour pour Firefox 2 :

La branche 2 de Firefox est passée en version 2.0.0.15 suite à des failles de sécurité. Je vous recommande donc vivement de mettre à jour si vous êtes toujours sur Firefox 2.

Opera Dragonfly est disponible en alpha 2 :

Le développement du firebug-like d'Opera (très prometteur) avance à grand pas.

Trop d'internautes emploient un navigateur non sécurisé :

Selon ZDNet, seulement 52% des utilisateurs d'Internet Explorer seulement ont optés pour IE7, le reste étant squatté par des anciennes versions (brrr).

Pour moi, un nombre tellement important d'utilisateurs d'anciennes versions ne peut s'expliquer que par du code non standard, d'intranets et autres applications internet développés il y a un bout de temps forçant les sociétés à garder une version obsolète d'Internet Explorer.

Une initiative est née pour sauver les développeurs.

© Marin for Gatellier.be, 2008. | Permalink | One comment | Add to del.icio.us
Post tags: browser, Firefox, firefox3, IE, Opera, penetration rate, stats

Editer son fichier HOSTS sous MacOSX

Sous MacOSX, il faut ouvrir une console Terminal.

Pour pouvoir éditer le fichier hosts, dans la console, il faut lancer la commande :
sudo pico /etc/hosts
(il faut avoir le mot de passe de l'administrateur local de votre Mac).

Entrez les lignes désirées, sauvez vos modifications via le raccourcis clavier CTRL+O et enfin fermez la console avec CTRL+X

Editer son fichier HOSTS sous MS Windows

Sous Windows, c'est assez facile de trouver le fichier et de le modifier.

Sous MS Windows, ce fichier se trouve dans le répertoire: C:\WINDOWS\system32\drivers\etc\ où il suffit d'ouvrir le fichier HOSTS (qui n'a pas d'extension) avec un éditeur de texte et de rajouter adresses ip et nom de domaine, de sauver ce fichier et eventuellement redémarrer son navigateur.

En savoir plus :

• le fichier HOSTS, comment ça marche ?

© Marin for Gatellier.be, 2007. | Permalink | One comment | Add to del.icio.us
Post tags:

Spécifiez les répertoires à valider, et scannez. Tidybot génèrera un rapport complet pour les pages contenant des erreurs de syntaxe (x)html voir l'exemple de rapport de page Tidybot.

Des paramètres avancés vous permettent de spécifier, entre autres, de ne pas afficher tel type fichier ou tels types d'erreurs.

Dommage seulement de ne pas pouvoir vérifier des pages en ligne. Disponible pour Window et Unix avec ou sans interface

Liens relatifs :

• La page du validateur Tidybot
• L'exemple de rapport de page tidybot
• Via : l'excellent WATS.ca (excellente ressource d'outils de développement).

© Marin for Gatellier.be, 2007. | Permalink | No comment | Add to del.icio.us
Post tags:

On a vu récemment que sous Firefox, il était très facile de tracer les requêtes Ajax avec l'extension Firebug.

Et pour Internet Explorer?

Il existe une application multi platforme (Win/MacOS/Linux) qui permet de renifler tout le traffic passant par les navigateurs. Le nom de ce bonheur pour les développeurs: Charles

Une fois installé et activé, Charles se comporte comme un serveur proxy et enregistre les différentes requêtes HTTP

L'analyse des données de la partie droite de l'écran permet de retrouver une foule d'informations sur la ressource demandée. Dans ce cas-ci, il s'agissait d'un flux RSS.

L'onglet Général nous indique tout ce qui est relatif au fichier demandé lui-même (taille, vitesse de téléchargement, etc), l'onglet Request reprend ce que le browser a demandé au serveur, et l'onglet Response reprend ce que le serveur a répondu.

Exactement ce qu'on cherche pour déboguer nos applications Ajax.

Comme ce programme se comporte comme un proxy, il capture tous le traffic, même les requêtes qui sont faites par des fichier .swf tels des diaporamas ou des applications FlashComm

Quand je vous disais que c'était le bonheur !

Disponible sur le site du développeur, la version d'essais est tout à fait fonctionnelle sauf qu'elle s'arrête après trente minutes (assez pour certains). Sinon, l'application coûte US$50,-. Pas si cher que ça.

Liens relatifs

• Charles Web Debugging Proxy
• Déboguer grâce à Firebug

© Marin for Gatellier.be, 2006. | Permalink | 6 comments | Add to del.icio.us
Post tags:

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").

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 :

• Firebug, l'extension de débogage pour Firefox
• Le blog du développeur de l'extension Firefox
• La vidéo explicative - qui m'a révélé le potentiel de Firebug
• Un autre article intéressant sur Firebug

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags: