<!--:fr-->[HTML CSS] hack ie6 : le meilleur de tous<!--:-->

[HTML CSS] hack ie6 : le meilleur de tous

mai 27th, 2009 CSS Antoine

Un billet court pour vous expliquer ce petit hack pour internet explorer 6 (oui ça existe encore…).

Petite remise en situation : j’étais en train de faire une application pour facebook. Je devais placer un boutton de formulaire avec image. Tout se passait bien avant que je teste sous ie6 (ie7/8, firefox, chrome, safari, opera : nickel au pixel près). Juste avant, internet explorer m’avait fait craquer par rapport à une méthode (encore en beta certe…) en FBJS (le javascript de Facebook) pour ajouter du texte. Juste pour les curieux cette méthode s’appelle setInnerXHTML().

Bref, IE me sortait par les yeux. J’ai donc employé les grands moyens!

Facebook rajoutant sa couche d’emmerdement, je ne pouvais pas utiliser les commentaires conditionnels en html. Donc vive la détection du user agent en php.

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.  
  4. }
  5. else {
  6.  
  7. }

Ensuite dehors l’image sur le boutton. Les utilisateurs de ie6 auront un boutton dégueulasse. Tandis que les autres utilisateurs auront un beau boutton (je vous épargne le CSS du boutton pour les utilisateurs CENSES).

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.      echo'
  4. <input id="actionIEEnvoiTop5" type="submit" value="Ayé" />';
  5. }
  6. else {
  7.      echo'
  8. <input id="actionEnvoiTop5" type="submit" />';
  9. }

Maintenant que nous avons créé nos bouttons nous devons les positionner. Grossierement je voulais les centrer dans un div.
Première étape, descendre le boutton :

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.      echo'
  4. <input id="actionIEEnvoiTop5" type="submit" value="Ayé" />';
  5. }
  6. else {
  7.      echo'
  8. <input id="actionEnvoiTop5" type="submit" />';
  9. }

J’ai utilisé la balise
. Oui le truc hyper déprécié et en dehors de toutes normes :D (majuscule, balise non fermante…bref tout pour ie6).
Ensuite, et c’est là où réside la plus grande astuce, je devais décaller mon boutton vers la droite (vers le centre).

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.      echo'
  4.  
  5. <span style="color:#fff">fuckie6</span>
  6. <input id="actionIEEnvoiTop5" type="submit" value="Ayé" />';
  7. }
  8. else {
  9.      echo'
  10. <input id="actionEnvoiTop5" type="submit" />';
  11. }

Donc ici, nous avons rajouté un texte blanc pour décaller le boutton. Surtout il est important de choisir un texte adapté au décallage souhaité (fuckie,fuckie6, voir f*ckie6 en ajustant le nombre d’étoile :) ). N’oubliez pas non plus de faire correspondre la couleur du texte avec votre couleur de background!

Voilà!!! Notre boutton est placé pile au bon endroit!!

Bon j’espère que vous avez compris que c’est une immense farce qui nous a bien fait marré au bureau (oui du coup on a vraiment utilisé ce « hack » :p). Plus sérieusement on pourrais imaginer de mettre un lien vers le téléchargement de chrome/ff/(ie7/8??)/opera … mais c’est moins drôle :D

A bientôt pour un nouveau VRAI tuto sur un sujet qui portera soit sur les sprites CSS ou les plugins jquery ou un concept de POO PHP ou les applications facebook. Que préfereriez vous?

Antoine

Passionné du web et de tout ce qui s'en rapproche, je tiens se blog sans prétentions pour vous faire partager mes découverte et mes interrogations sur le développement, le management, l'agilité, la gestion de projet.

Did you enjoy this post?

If so, would you please consider sharing it with the world

User Responses

8 Responses and Counting...

  1. Rydgel

    mai 27, 2009

    On a bien rigolé c’est clair :’)

  2. Antoine

    mai 27, 2009

    lol ce craquage :D

  3. gaets86

    mai 27, 2009

    On trouve toujours une solution :-)

  4. Antoine

    mai 27, 2009

    c’est notre force :D D

  5. Antwan

    mai 27, 2009

    Il fallait mettre < font > au lieu de span !

    IE comprend mieux :)

  6. Zen-X

    mai 27, 2009

    Le design pattern Singleton, tu nous l’avez promis ! :) . Sinon les autres sujets m’intéressent aussi alors pourquoi pas 3 screencast !?…

    Merci pour tous ces bons tutos !!;

  7. Johannol

    mai 27, 2009

    LOL

    Perso, j’ai adopté la methode Liferay, simple et élégante pour se passer des hack CSS qui se base sur une faille ( !important…). Car le probleme de ses hack, c’est que ie7 en corrige, puis ie8… que la css n’est pas lisible…

    Le serveur java/php detecte le navigateur, et ajoute une classe css correspondante au navigateur:

    …

    C’est tout pour le serveur.

    Ensuite la CSS:

    .monBouton
    {
    color: #123456;
    border: 1px solid black;
    }

    .ie6 .monBouton
    {
    margin: 30px 0 0 40px;
    }

    Voila. Pas de hacks, la css sera facile a maintenir, et on peut meme gerer les problemes autres (bien plus rare) comme opera, webkit.

  8. Johannol

    mai 27, 2009

    Désolé, les balisent html ont été filtré
    Le serveur ajoute :

    html
    header
    /header
    body class=ie6
    …
    /body
    /html

Leave a Reply

Default User

Your Name

mai 27, 2009

* Name, Email, and Comment are Required

Get Adobe Flash playerPlugin by wpburn.com wordpress themes