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

Internet Explorer et le vertical-align

En cause, Internet Explorer dans les versions 6 et 7 (je ne parle même pas des versions antécédantes) ne supportent pas correctement la propriété CSS display:table-cell.

En effet, le seul moyen correct de centrer verticalement un élément est de faire en sorte que l'élément parent se comporte comme une cellule de tableau (d'où des réactions folkloriques).

Le display:table-cell a été introduit dans Internet Explorer 8. Avant ça, toutes les solutions avaient leurs revers : line-height qui ne permet pas d'avoir des espacements de lignes correct, hauteur des éléments impérativement fixe, hacks CSS mystérieux (dont on ne connaîtra pas le comportement dans les futurs navigateurs).

Bref, rien qui ne me satisfait pleinement.

CSS vertical-align:middle;

Dans Firefox 2 (pc), Firefox 3 (pc/mac), Chrome 1.0.154, Safari (4 pc, 3.2.1 mac), Opera 9.64 (pc/mac), Camino, Shira, IE8, le code suivant est bien rendu.

Le code HTML

<div class="v">
	<div>Ce texte devrait être centré verticalement</div>
</div>

Le code CSS

<style type="text/css">
.v {
	display:table-cell;
	vertical-align:middle;
	/*les 3 lignes suivantes ne sont pas nécessaires*/
	background:#900;
	height:250px;
	width:150px;
}
.v div {
	/*non nécessaire, juste de la décoration pour mieux visualiser*/
	background:#090;
}
</style>

Par contre dans IE 6 et 7, l'alignement vertical n'est pas pris en compte et la boîte de texte reste en haut de la boîte bleue.

Expressions CSS à la rescousse

Encore une fois, les expressions CSS d'Internet Explorer – qui, je sais, ne sont pas recommandées pour des raisons de performances et qui ont été supprimées d'IE8 – peuvent nous être bien utiles.

Code

<!--[if lt IE 8]>
<style type="text/css">
.v {
	position:relative;
	width:expression(this.childNodes[0].offsetWidth+"px");
}
.v div {
	position:absolute;
	top:50%;
	margin-top:expression(-this.offsetHeight/2);
}
</style>
<![endif]-->

Le contenu sera positionné en absolu, à cinquante pourcent du top, par rapport à son conteneur. Il aura aussi une marge négative de la moitié de sa hauteur.

Comme, le contenu est placé en absolu, il sort du flux de la page. Sa largeur est donc reportée sur le conteneur.

Remarques et limitations :

• voir la démo
• Les commentaires conditionnels sont employés pour cibler les version d'Internet Explorer inférieures à 8.
• Les expressions css ne sont pas exécutées si le navigateur à le JavaScript désactivé.
• Les impacts de preformance sont à tenir en compte : les expressions CSS sont recalculées à chaque changement de propriétés CSS dans la page (redimensionnement du navigateur etc,...)
• Le comportement d'un élément en display:table-cell est différent de celui d'un display:block. S'il doit prendre la largeur d'un conteneur, il faudra spécifier celle-ci.

© Marin for Gatellier.be, 2009. | Permalink | 6 comments | Add to del.icio.us
Post tags: bugfix, expression, fix, vertical-align

Ce qu'il manque dans IE8 :

C'est un grand pas en avant vers les standards web, mais pas encore parfait. Pour moi, il manque l'implémentation de certaines propriétés CSS 3 qui pourraient enfin faciliter la vie des développeurs, à savoir :

• multiple background, pour avoir plusieurs images de fond sur un seul élément
• border radius, pour faire des coins arrondis (sans image) sur un éléments
• svg, canvas, video,...

Ce que IE8 corrige :

Par contre IE8 supporte enfin les data URI, qui permettent d'éviter des requêtes http sur des petites image.

IE8 corrige aussi un bug étrange sur le caractère "Euro" en fonte grasse qui n'apparaît que sur IE7.

IE6 : affichage correct.

IE7 : la fonte affichée n'est pas la bonne, la Verdana est remplacée par de la Times New Roman.

IE8 : affichage correct

La liste des propriétés CSS supportées (ou pas) est éloquente.

Mises à jour.

J'espère vraiment qu'on ne devra pas pas attendre deux ans avant la prochaine mise à jour (pour l'implémentation des recommandations CSS3) et que le système de mise à jours se rapprochera de ce qui se fait sur Firefox, Chrome ou Opera. À savoir : des mises à jour fréquentes et automatiques !

Quelles sont vos raisons ?

IE6 reste encore bien implanté pour un navigateur qui date quand même de 2001, je donnerai mes chiffres plus tard.

Certainement la faute aux infrastructures IT qui ne veulent pas mettre à jour leurs parcs informatiques. Personnellement, je n'ai rien contre ce navigateur (je préfère son interface à celle de ses successeurs et puis, j'ai fini par bien connaître ses bugs).

Je serais juste curieux de connaître vos raisons de rester avec un si vieux navigateur alors que d'autres beaucoup plus performants (et pas gourmants en ressources quoi qu'on en dise) sont disponibles au téléchargement : Firefox, Chrome, Opera, IE8.

De même, il y a encore pas mal de vieilles versions de navigateurs qui sont installées (FF1.5, FF2, IE5.2 mac), qui sont tout aussi obsolètes que IE6, pourquoi ne les mettez-vous pas à jour ?

© Marin for Gatellier.be, 2009. | Permalink | No comment | Add to del.icio.us
Post tags: Browsers, IE8, question, upgrade, versions

Cette nouvelle version apporte plein de changements sous le capot mais aussi une nouvelle icône de status qui me chipote un peu.

La nouvelle icône de status de Firebug, qui reprend le logo Firebug, passe vraiment inaperçue. Elle manque vraiment de contraste par rapport aux autres icônes qu'on pourrait avoir dans la barre de status.

La nouvelle icône de status Firebug passe inaperçue.

La bonne nouvelle c'est que, vu l'architecture des Addons Firefox, l'ancienne icône peut être facilement rétablie.

Localisation du fichier CSS de Firebug.

Pour ce faire, il faut trouver et éditer la CSS qui gère la présentation de Firebug.
Sur Windows, par défaut, elle se trouve dans le répertoire :

C:\Documents and Settings\User\Application Data\Mozilla\Firefox​\Profiles\la1xxvhe.default\extensions\firebug@software.joehewitt.com​\skin\classic\firebug.css

Les parties en italiques sont des parties qui différeront sur votre PC.

Sur MacOS, il faut chercher un petit peu, l'explication se trouve sur le site de support Mozilla.

Edition du fichier CSS.

Pour rétablir l'ancienne icône de Firebug, j'ai simplement quitté Firefox puis remplacé les lignes suivantes dans le fichier CSS :

#fbStatusIcon {
    list-style-image: url(chrome://firebug/skin/firebug-gray-16.png);
}
#fbStatusIcon[jsd="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}
#fbStatusIcon[net="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}
#fbStatusIcon[errors="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}

par :

#fbStatusIcon {
    list-style-image: url(chrome://firebug/skin/disabledIcon.png);
}
#fbStatusIcon[jsd="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}
#fbStatusIcon[net="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}
#fbStatusIcon[errors="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}

Et hop, une fois Firefox redémarré, l'ancienne icône, beaucoup plus visible, est restaurée.

Liens relatifs :

• Get Firebug
• Ranger les icônes de sa barre de status

© Marin for Gatellier.be, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags: firebug, firefox 3, fix, status icon

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

En sept jours, on a eu le temps de s'habituer aux nouveautés apportées à Firefox :

Quelques changements de Firefox 3 cosmétiques et fonctionnels :

• la "AwesomeBar"
• l'option de sauvegarde de session
• le gestionnaire de signets
• le gestionnaire de téléchargement

Quelques changements de Firefox 3 sous le capot :

• des API microformats,
• quelques éléments de HTML5,
• l'implémentation de JavaScript 1.8,
• des améliorations DOM et
• surtout des améliorations CSS

display:inline-block dans Firefox 2 et 3

Firefox 3 supporte enfin les propriétés d'affichage: display:inline-block et display:inline-table.

Pour nous, intégrateurs, ça veut dire qu'enfin, on pourra mettre se passer des propriétés fokloriques display:-moz-inline-box et display:-moz-inline-block pour avoir le même rendu.

Mais ce n'est pas encore pour tout de suite tant que le taux de pénétration ne sera pas encore suffisant.
En attendant, on n'oubliera pas de tester ses pages sur les différentes versions des navigateurs (en employant Firefox Portable).

On écrira du code compatible:

<style type="text/css">
.element {
	display:inline-block !important;
	display:-moz-inline-box;
}
</style>

En attendant, nous pouvons aussi faire du prosélitisme pour Firefox 3.

Taux de pénétration de Firefox 3

Je pense que le but de la tentative de record du monde était surtout de faire changer beaucoup de monde de Firefox 2 à Firefox 3 et donc d'augmenter le taux de pénétration.

Pour faire avancer la cause, je vous propose d'afficher les taux de pénétration des différents navigateurs visitant mon blog ainsi qu'un site "grand public" et de pouvoir les comparer de semaine en semaine. Et d'ainsi avoir une vue plus personnelle du taux de pénétration de Firefox 3

Semaine 1 - les navigateurs visitant ce blog :

Navigateurs 17/06/2008 - 24/06/2008

Pénétration Firefox 17/06/2008 - 24/06/2008

Pénétration Internet Explorer 17/06/2008 - 24/06/2008

Semaine 1 - les navigateurs visitant un site tout public :

Navigateurs 17/06/2008 - 24/06/2008

Pénétration Firefox 17/06/2008 - 24/06/2008

Pénétration Internet Explorer 17/06/2008 - 24/06/2008

A vous de jouer !

Je vous propose de participer à mon projet et de vous aussi afficher les statistiques des visites de vos site/blogs.

Et pour nous faire gagner du temps, allez chez vos parents, frère(s), sœur(s), voisin(s), connaissance(s) et faites leur connaître Firefox 3 ou tout autre navigateur respectant les standards du web.

Liens relatifs :

• Statistiques heure par heure depuis le lancement de Firefox 3
• Le blog Firefox Metrics tout sur le taux d'adoption
• Le groupe Firefox Stats

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

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.

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