Bug: IE n’affiche pas mes CSS
Un magnifique bug (parmi de nombreux autres) existe dans Internet Explorer (IE6, IE7, IE8).
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 :
CSS: vertical-align:middle pour Internet Explorer 6 et 7
Depuis la fin des mises en pages en tableaux html, centrage vertical d’un élément dans son conteneur a toujours posé des problèmes.
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-cellest différent de celui d’undisplay:block. S’il doit prendre la largeur d’un conteneur, il faudra spécifier celle-ci.
IE8 est là, mettez à jour vos butineurs
Internet Explorer 8 (IE8) vient de sortir, réjouissons-nous !
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 ?
IE: supprimer les alertes de sécurité en mode https
Internet Explorer, dans toutes ses versions, affiche une alerte de sécurité lorsque l’on visite une page, servie via le protocole de sécurité https, si celle-ci contient des ressources servies via le protocole http.
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="//noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: //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: //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="//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 !
2 commentaires