Simon Bonaventure

Réaliser des aides pour les formulaires avec CSS et Javascript

Simon Bonaventure — Mon, 30 Apr 2007 16:43:00 +0200

Depuis la version 0.14a d'e-majne, vous avez certainement rencontré une nouveauté sur les formulaires. Lors de l'ajout de champs de formulaires, il est possible de remplir un nouveau champ, le champ d'information : On peut se servir de ce champ pour compléter le libellé du champ afin de donner plus d'informations sur le champ à compléter. Nous allons voir comment gérer l'affichage de ces champs de façon un peu moins brut, voir un peu tendance... Attention, ce billet est relativement long, donc pour ceux qui n'ont pas trop le temps voici le résultat final voir le résultat final

Le XHTML et le CSS :

Tout d'abord, il va falloir modifier vos templates si vous voulez pouvoir remonter ce champ de nouveauté pour qu'au niveau du HTML, cela nous donne quelque chose comme cela :

<div class="row">
        <label for="libelleid">
                libelle
                <span class="obligatory">*</span> :
        </label>
        <span>
                <input name="libelle" id="libelleid" type="text">
                <span class="aide">
                        <p>
                        voici mon champ d'information
                        </p>
                </span>
        </span>
</div>

Ce qui impose pour le template creator_form.html de rajouter cet élément à la place des champs de formulaire :

<span mXattribut="class:error2">
        <mx:text id="fields_input"/>
        <mx:bloc id="additionnals_informations">
                <span class="aide">
                        <mx:text id="additionnals_informations" />
                </span>
        </mx:bloc id="additionnals_informations">
</span>

Si maintenant on appliquait un peu de CSS afin de rendre tout ça un peu plus propre.

body{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:65%;
}
*{
        margin:0;
        padding:0;
}
form{
        width:600px;
}
fieldset{
        border: 1px solid #757575;
        margin:10px;
        padding:5px;
}
legend{
        color:#757575;
        font-size:1.1em;
        font-weight: bold;
        padding:0 5px;
}
.row{
        clear:both;
        margin: 5px;
        padding: 5px;
        position:relative;
}
label{
        float:left;
        width:170px;
}
input, select, textarea{
        border: 1px solid #999999;
        text-align:left!important;
        width: auto;
}

Si maintenant on applique un style à nos aides, voici ce que cela donne. On pourra remarquer que les aides sur les champs de formulaires sont masqués par défaut à l'aide d'un display:none;, car nous allons afficher ces aides uniquement lorsque l'internaute aura placé sa souris dans le champs (focus).

.aide {
        display:none;
        width: 191px;
        z-index:800;
        margin:-5px 0 0 15px;
        position:absolute;
        background:url(/common_images/skin001/form_aide.gif) bottom right no-repeat;
}
.aide p{
        margin:0;
        padding:10px 12px 10px 18px;
        background:url(/common_images/skin001/pointer_form.gif) top right no-repeat;
}

Le Javascript :

On va maintenant en javascript parser notre page afin de trouver tout les champs de formulaire de type input, et pour chacun d'entre eux, nous allons réagir au focus en affichant l'aide et enlever cette aide lorsque le curser de la souris ne se trouve plus dans mon champ de formulaire (onblur).

function prepareInputsForHints() {
        var inputs = document.getElementsByTagName("input");
        for (var i=0; i<inputs.length; i++){
                inputs[i].onfocus = function () {
                        if(this.parentNode.getElementsByTagName("span").length>0){
                                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                        }
                }
                inputs[i].onblur = function () {
                        if(this.parentNode.getElementsByTagName("span").length>0){
                                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                        }
                }
        }
}

Il va falloir faire exactement la même manipulation pour les champs de type select (liste déroulante) et textarea (texte multilignes), juste ici aucun soucis, on change les input par les champs de formulaire correspondant. Malheureusement, avec e-majine il existe un peu plus que ces champs de formulaire, il faut aussi prévoir l'affichage de mes champs de formulaire de type input radio et case à cocher qui ont une structure XHTML différente que des champs de formulaire normaux, donc il va falloir gérer des conditions et un fonctionnement différent de ce script. Et puis il y a aussi le soucis pour les champs de formulaire de type file, pour lesquelles la réaction au comportement focus se fait sur le bouton parcourir, ce qui en sera visible que pour les utilisateur qui naviguent à l'aide de la touche tabulation, donc pour ces champs de type fichier, l'affichage de l'aide se fera au survol.
Je vous fait grâce du fonctionnement de ce script, pour les plus curieux, tout se trouve dans le ficher à télécharger ci-dessous.

Télécharger la première version du script.

Un peu d'animation avec tout ça :

Maintenant, si on jouait avec des effets à la sauce 2.0, jouer d'accord mais en toute légèetré d'abbord, voici donc une librairie qui regroupe juste des effets graphique pour seulement 4ko, simple.js. Parmis tout les effets que propose cette librairie javascript, il y en a un qui m'intéresse tout particulièrement c'est $opacity qui va me permettre d'afficher l'aide nom seulement dans la bulle grâce à mes styles, mais aussi en fondu, il faut donc tout d'abord faire appel à cette librairie :

<script type="text/javascript" src="/common_scripts/simple.js"></script>

Lorsqu'on regarde la documentation de cette librairie javascript pour cette fonction, il est écrit :

$opacity(id, opacStart, opacEnd, millisec)

On remarque donc que cette fonction s'applique à un identifiant, avec une opacité de départ et de fin, et une durée en millisecondes entre les deux opacités. Le soucis c'est qu'avec e-majine, nous n'avons pas d'identifiant sur les balises span qui entourent nos aides, pas de soucis, grâce au javascript et surtout du DOM, nous allons recréer ces identifiants.

var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');

Et nous allons donc pouvoir appliquer la fonction qui gère l'opacité

$opacity(this.id+'aide', 0, 100, 1500);

Ce qui nous donne au final :

inputs[i].onfocus = function () {
        if(this.parentNode.getElementsByTagName("span").length>0){
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');
                $opacity(this.id+'aide', 0, 100, 1500);
                return false;
        }
}
inputs[i].onblur = function () {
        if(this.parentNode.getElementsByTagName("span").length>0){
                var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');
                $opacity(this.id+'aide', 100, 0, 1500);
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                return false;
        }
}

Attention, il est important de remarquer qu'à la réaction sur le onblur, je repasse l'opacité à 0, sinon lorsqu'on clique deux fois sur un même élément de formulaire, la gestion de l'opacité ne sera pas bonne.

Et l'accessibilité dans tout ça

Exact, comment font les utilisateurs ne disposant pas de javascript pour avoir accès à ces champs d'aide dans les formulaires. Et bien plutôt que d'appliquer les styles (avec un style display:none;) à ces champs pour tout les utilisateurs, je vais insérer ces styles la via javascript.

document.write('<style type="text/css">.aide {filter:Alpha(opacity=0); -moz-opacity:0; opacity:0;display:inline;width: 191px;z-index:800;margin:-5px 0 0 15px;position:absolute;background:url(/common_images/skin001/form_aide.gif) bottom right no-repeat;}.aide p{margin:0;padding:10px 12px 10px 18px;background:url(/common_images/skin001/pointer_form.gif) top right no-repeat;}</style>');

Désormais, il ne reste plus qu'a intégrer ces deux fichiers javascript

<script type="text/javascript" src="/common_scripts/simple.js"></script>
<script type="text/javascript" src="/common_scripts/helpForm.js"></script>

Voici le résultat final.

Télécharger les deux scripts ainsi que le template et la feuille de style permettant de faire fonctionner ces aides pour les formulaires.

Comment faire un menu déroulant avec e-majine.

Simon Bonaventure — Mon, 05 Mar 2007 14:42:00 +0100

Avec e-majine il est possible de réaliser des menus déroulant, c'est à dire qu'au survol d'un item de menu, on va afficher tout les sous-niveau de cet item.

Pour cela, il faut tout d'abord aller dans le factory puis dans votre projet pour aller configurer la navigation, et ici, on pourra noter l'apparition d'une nouvelle case à cocher « menu toujours déplié ». Cette dernière permet de faire apparaître tout les niveaux et sous niveaux d'un menu, sans avoir besoin de cliquer sur un item du menu pour faire apparaître les sous item de ce menu. Mais aussi subtil que cela puisse paraître c'est grâce à cette case que l'on va pouvoir réaliser notre menu déroulant. Il ne faut pas oublier de sélectionner le type de menu vertical dans le factory, car un menu de type vertical est en réalité un menu à listes imbriqués, ce qui est indispensable pour réaliser un menu déroulant. Voici de façon simplifié la structure html dont on a besoin:

<ul id="first_level">
      <li>
            <a href="#">libelle</a>
            <ul class="second_level">
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
            </ul>
      </li>
      <li><a href="#">libelle</a></li>
      <li><a href="#">libelle</a></li>
</ul>

Toute première chose à faire, avant de commencer à donner une apparence à notre menu, il faut masquer les seconds niveaux de notre arborescence. On va éviter l'utilisation de la propriété display:none; qui pose quelques soucis avec certains navigateurs non graphiques.

ul#first_level li ul{
      position:absolute;
      left:-999em;
}

Une fois que cette étape est faite, il en reste plus qu'a habiller notre menu, et à gérer la réaction au survol pour afficher les seconds niveaux de liste qu'on a masqués auparavant. Pour faire cela, on va utiliser la pseudo classe :hover non pas sur un lien comme on a l'habitude de le faire, mais sur nos éléments de liste (<li>...</li>), jusqu'ici fantastique, cela fonctionne me direz-vous mais en plus cela fonctionne sans javascript

ul#first_level li:hover ul {
        left: auto;
}

Malheureusement Internet Explorer ne comprend cette pseudo-classe :hover que sur les liens. C'est pourquoi nous avons avoir besoin malgré tout de javascript pour IE.

sfHover = function() {
        var sfEls = document.getElementById("first_level").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

En gros, ce code va appliquer la classe "sfhover" aux items ("li") de la liste ("ul") nommée ("id") "first_level", lorsque ces items sont survolés par la souris. Cette classe est ensuite retirée en utilisant une expression régulière lorsque la souris quitte la zone. Donc, du coup le style devient :

ul#first_level li:hover ul, ul#first_level li.sfhover ul {
        left: auto;
}

Cet article s'inspire de l'excellent pompage.net et de son article sur les menus déroulant

Structure et mise en forme optimales d'une page XHTML ...

Simon Bonaventure — Mon, 22 Jan 2007 12:00:00 +0100

Etudions la manière d'organiser une page afin d'être le plus optimal possible. Première étape, séparer le contenu de la mise en forme. Il faut se le dire, le XHTML n'est pas un langage de mise en page, mais un langage de description. Grâce au XHTML, il est possible d'organiser son contenu en regroupant des éléments de contenu entre eux, et de leurs donner un sens (sémantique) tout en le laissant accessible à tous. Le CSS est le langage qui va nous permettre d'habiller, de mettre en forme, ces éléments. Voyons ensemble comment organiser son XHTML et ses CSS afin d'avoir une page XHTML optimale.

La structure (XHTML)

Tout d'abord, il faut trouver la structure XHTML la plus souple possible, dans laquelle nous avons peu de modification à faire du XHTML, tout en ayant la possibilité, avec les feuilles de styles, de faire un maximum de mises en page possibles.

Au niveau de l'en-tête (<head>...</head>), utilisons une DTD XHTML 1.0 Strict. Nous choisissons cette DTD, car c'est la dernière norme en vigueur du W3C. Elle permet de spécifier la langue du document : pour chacune des langues, chaque en-tête doit être différente.

Dans le corps de la page (<body>...</body>), nous retrouvons tout d'abord un div#page contenant l'intégralité du site. Grâce à ce calque, il est possible de restreindre le site en largeur, pourquoi pas en hauteur, et puis de le centrer.

Le premier calque enfant du calque #page est #accessibility. On y retrouve des liens d'évitement qui nous permettent d'accéder directement au menu, au contenu,...(cf Alsacréations - les liens d'évitements).
Un calque #banner, avec un titre reprenant un titre générique à votre projet (pensez aux mots clefs ...) et un lien sur ce titre, permet de revenir à la page d'accueil.
Ensuite, le calque #wrapper, va lui contenir les calques #conteneur, #leftbar et #rightbar. A l'aide de cet élément, nous pouvons dissocier l'affichage des éléments de contenu (le menu, les outils et le contenu) qui peuvent être contraints en largeur et centrés, de la bannière qui elle peut s'adapter à la largeur de l'écran. Cet élément va également servir à mettre une image de fond sous ces trois colonnes.
Les calques #leftbar et #rightbar correspondent aux deux colonnes de la page de base. A l'intérieur de ces deux colonnes, retrouvons un menu et des outils par exemple.
Le calque #footer donne la possibilité d'y mettre des liens pour revenir en haut de page, ou bien pour faire un rappel/accéder à des rubriques importantes de votre site.
Et pour finir, un calque de signature #signature, dans lequel vous retrouverez la signature du/des créateurs de votre projet. Ce calque est le seul ne faisant pas parti du calque #page.

Imbrication des éléments dans le flux

La mise en forme (CSS)

Utiliser des feuilles de style ne fait pas tout, encore faut-il bien les utiliser. Tout d'abord, n'utilisez pas une unique feuille de style mais plusieurs feuilles de style. Ceci vous permettra d'économiser un temps non négligeable lors de vos intégrations, car plutôt que de naviguer dans une seule feuille de style qui fait des milliers de lignes, vous n'aurez qu'à sélectionner la bonne feuille de style pour trouver tout de suite ce que vous désirez.

Pour permettre de s'y retrouver encore plus facilement, indenter ses feuilles de style est un bon moyen de regrouper toutes les déclarations qui servent à mettre en page un élément :

#menu{}
     #menu ul{}
          #menu ul li{}
          #menu ul li.toto{}
          #menu ul#toto li{}
                  #menu ul li a{}
                  #menu ul li a:hover{}
                  #menu ul li a:visited{}
                  #menu ul li.active a{}

Supprimez toutes les marges par défaut *{margin:0;padding:0;}. On trouvera cette déclaration dans la feuille de style de base (celle qui importera toutes les autres). Cela servira à annuler les styles que toutes les balises HTML ont par défaut. Désormais grâce à cet élément, plus besoin de se poser la question si les éléments auxquels on veut appliquer des styles héritent d'une propriété qui a été écrite ou bien du style par défaut que possèdent toutes les balises HTML (notamment pour les listes des menu). Ceci va également éviter de mettre les marges internes et externes à zéro. Enfin, nous devrons penser aux espaces entre les paragraphes par exemple, plutôt que de se laisser porter par les styles HTML par défaut.

Attention particulière afin de contourner le problème du "box model" : ne pas mélanger, et des propriétés width, et du padding. Il est préférable d'appliquer le padding, si besoin, à un calque enfant. Par exemple :

#box{
width:250px;
}
#box div{
padding:15px;
}

Concernant le style de la balise body, inutile de vous rappeler qu'il est toujours important de déclarer ses polices de caractères de façon relative (si besoin est, alsacreations a un très bon tutoriel)

Il est important de dédier une feuille de style qui va permettre d'installer uniquement l'ergonomie du site, celle-ci ne sera pas parasitée par la mise en place d'autres éléments. La zone #banner sera fixe en hauteur pour pouvoir placer tout ce qui se trouvera dedans de façon absolue, et aussi appliquer de jolis fonds en CSS. Ensuite on va retrouver le calque #conteneur qui prend la totalité de la largeur de son parent (#wrapper), et auquel on attribut un float:left; pour que les éléments qui le suivent #leftbar et #rigthbar reviennent vers leur gauche. Ces deux derniers éléments ont des largeurs d'appliqués avec des marges négatives sur la gauche afin de venir se placer au dessus de #conteneur. Attention dans le cas d'une design liquide (qui s'adapte à la largeur de l'écran), la largeur de la colonne de gauche se doit d'être à -100%. Mais dans le cas d'une design restreint il faudra spécifier pour internet explorer une marge négative de la largeur de l'élément conteneur. Logiquement le -100% devrait suffire, car 100% de 770px par exemple, ça fait 770px ! Et bien de temps à autres, Internet Explorer ne comprend pas, il faudra donc spécifier des largeurs en pixels dans les cadres de designs qui ne s'adaptent pas aux écrans. Ensuite, nous avons un élément avec un style de type clear:left;, afin que l'élément conteneur (#wrapper) puisse savoir où il se termine. Mais pourquoi utiliser une structure aussi compliquée avec toutes ces marges négatives ? En fait, le but de cette structure, est d'utiliser le moins possibles d'éléments avec des clear:both;, tellement problématiques sous Internet Explorer...

Afin d'optimiser le poids de ses feuilles de styles, utilisons des propriétés raccourcies. Par exemple, pour appliquer un fond en CSS, il existe toutes une série de propriétés qui peuvent être remplacées par une seule :

#element{
background-color:red;
background-image:url(/images/monimage.jpg);
background-repeat:repeat-y;
background-attachment:scroll;
background-position:top left;
}

équivaut à

#element{
background:red url(/images/monimage.jpg) repeat-y scroll top left;
}

On peut faire ça avec les propriétés de font, padding; margin, border, list-style, outline et background bien sûr.

Pour l'insertion des images, dans une logique de sémantique et d'accessibilité, les images qui seront inclues en feuille de style sont uniquement les images de décoration. Dès qu'une image apporte du sens à votre page web, dès qu'il y a du texte dessus, il est préférable de l'inclure en XHTML.

Quelque chose de plus didactique (à la alsacréations, si si) sera réalisé dans les prochaines semaines afin de mieux comprendre comment est réalisé le style par défaut.

Faire une galerie d'images avancée ailleurs que dans un article en blocs

Simon Bonaventure — Mon, 04 Dec 2006 17:11:00 +0100

Une galerie, quoi ?

Dans l'interface d'administration e-majine manage, lorsque vous créez un article en bloc, vous avez la possibilité de faire un bloc de type médias. Configuration de ce bloc :

- Type : image
- Affichage: galerie d'images
- Insertion de plusieurs images composant cette galerie et enregistrement de leur ordre d'apparition
- Cocher la case "vignettes" - les vignettes des images sont affichées par défaut, en cliquant dessus les images sont affichées à leur taille réelle.
- Type de galerie : avancée
- Choix de l'alignement

Comment elle fonctionne ?

Beaucoup d'entre vous apprécient le fonctionnement du bloc de type média lorsqu'il affiche une galerie d'images en mode avancé. On me pose souvent la question sur son fonctionnement et les technologies qui sont utilisées pour afficher cela. Certains parlent de flash, d'autres d'AJAX... En fait, il s'agit de DHTML, qui n'est pas à proprement parler un unique langage mais une combinaison de technologies : Javascript, CSS et XHTML. La librairie utilisée pour faire ces galeries d'images provient du site lightbox.

Comment intégrer une galerie avancée ailleurs dans votre site ?

Faire appel aux fichiers externes

En suivant les recommandations du site de l'auteur, on s'aperçoit qu'il faut tout d'abord faire appel aux fichiers javascripts permettant de réaliser les effets de redimensionnement. Je vous conseille de déposer ces fichiers dans le dossier prévu à cet effet : "Scripts" se trouvant à la racine de votre FTP :

<script type="text/javascript" src="/scripts/prototype.js"></script>
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/scripts/lightbox.js"></script>

Ensuite, il faut faire appel à la feuille de style de cette galerie, sans oublier de déposer dans le dossier images, à la racine du FTP, toutes les images, elles-mêmes appelées à partir de la feuille de style :

<link  rel="stylesheet" type="text/css" href="/modeles/fr/Modele1/css/gallery.css" title="normal" />

Définir le(s) endroit(s) où se trouvera la galerie d'images

Il est nécessaire ensuite de définir dans votre template, l'endroit où va se trouver la galerie d'images. Pour cela, il faut encapsuler les images dans un div qui devra porter un attribut de class que vous aurez définit.

<div class="gallery">
         <img src="/medias/thumbnail/image1.png" alt="texte alternatif 1" />
         <img src="/medias/thumbnail/image2.png" alt="texte alternatif 2" />
         <img src="/medias/thumbnail/image3.png" alt="texte alternatif 3" />
</div>

Amusons-nous avec le javascript et le DOM

Intégrons maintenant un nouveau fichier javascript ayant pour but de rajouter, avec le DOM, pour chaque image, le lien avec les bons attributs, permettant de faire afficher le galerie d'images. Dans ce fichier, nous allons tout d'abord commencer par écrire une fonction pour travailler avec les "classname".

function getElementsByClassName(strClass, strTag, objContElm) {
        strTag = strTag || "*";
        objContElm = objContElm || document;
        var objColl = objContElm.getElementsByTagName(strTag);
        if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
        var arr = new Array();
        var delim = strClass.indexOf('|') != -1  ? '|' : ' ';
        var arrClass = strClass.split(delim);
        for (var i = 0, j = objColl.length; i < j; i++) {
        var arrObjClass = objColl[i].className.split(' ');
        if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
                var c = 0;
                comparisonLoop:
                for (var k = 0, l = arrObjClass.length; k < l; k++) {
                        for (var m = 0, n = arrClass.length; m < n; m++) {
                                if (arrClass[m] == arrObjClass[k]) c++;
                                if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
                                arr.push(objColl[i]);
                                break comparisonLoop;
                                }
                        }
                }
        }
        return arr;
}

La seconde fonction : à chaque fois que l'on va rencontrer le nom de la class, choisi sur notre div qui englobe les images de notre galerie, la fonction va détecter toutes les images. Pour chacune des images, il faut rajouter un lien dans le div parent, à ce lien. L'image est à insérer à l'intérieur et nous créons les attributs href, title et rel (qui va permettre de créer la galerie). Je vous fait grâce du fonctionnement de tout ça.

function createGallery(nameclass){
        var className = getElementsByClassName(nameclass, "div", document);
        for(var i=0 ; i<className.length ;i++){
                var imagesGallery = className[i].getElementsByTagName("img");
                for(var j=0 ; j<imagesGallery.length ;j++){
                        var lien = document.createElement("a");
                        className[i].appendChild(lien);
                        lien.appendChild(imagesGallery[j]);
                        lien.setAttribute('rel', 'lightbox['+nameclass+']');
                        lien.setAttribute('href', '/media/'+imagesGallery[j].src.split("/")[5]);
                        lien.setAttribute('title','<h3>'+imagesGallery[j].alt+'</h3>');
                }
        }
}

Et enfin, une fois que tout cela est fait, il ne reste plus qu'à lancer cette dernière fonction à la fin du chargement de la page. En n'oubliant pas de faire appel au même nom de class, mis sur le div qui englobe nos images.

window.onload = function(){
        var classname = "gallery";
        if (getElementsByClassName(classname, "div", document).length>=1){
                createGallery(classname)
        }
}

Ces trois dernières fonctions se trouvent aussi dans un fichier externe, il est nécessaire d'y faire appel comme précédemment :

<script type="text/javascript" src="/scripts/Gallery.js"></script>

Je laisse à disposition une archive contenant tous les fichiers suscités

A vos claviers, il ne vous reste plus qu'à insérer cela dans vos annuaires, catalogues, articles préformatés, etc.

PS : si dans votre site vous avez déjà intégré du javascript avec la fonction onload, il est fort probable qu'il y ait un conflit avec deux fonctions onload. Si c'est le cas, n'hésitez pas à lire cet article

EDIT : attention, pour la fonction createGallery à ne pas utiliser le paramètre "class" qui est un mot réservé pour Internet Explorer

Les hacks de css

Simon Bonaventure — Mon, 04 Dec 2006 10:23:00 +0100

Internet Explorer 7 est sorti sous la forme d'une mise à jour récemment. Nombre d'entre nous ont du tester ce nouveau navigateur dans sa version beta (comme nous le proposait Ronan avec une double installation). IE7 fait un grand pas en avant dans le respect des standards. Il implémente à présent une grande partie de CSS 2 et gère notamment la transparence des PNG. IE7 reste toujours en retard vis à vis des autres navigateurs modernes (Firefox, Opéra ou Safari pour ne citer qu'eux), bien qu'il évolue dans le bon sens, soyons satisfait, voilà 5 ans que cela n'avait pas été le cas.

Bref, lors de vos intégrations, il y a certainement quelques hack de css qui doivent trainer quelque part, afin d'obtenir un affichage correct sur tous les navigateurs et aussi pour Internet Explorer... Car rappelons le, IE n'implémentait pas en complètement les standards et imposait donc les hacks de css. Les plus célèbres étant le bidouillage du « modèle de boîte Microsoft » ( « box model hack » ) en contradiction avec CSS2 et, jusqu'à la sortie d'IE7, la non-gestion de la transparence des images au format PNG. Malheureusement, chez Microsoft, ils n'ont pas jugé bon de faire de la rétro-compatibilité avec les hacks de css, donc ceux que vous pouviez utiliser peuvent soudainement être interprétés ou non par d'autres navigateurs...

Voici ce qui a changé dans internet explorer , et voici quelques sites avec des nouveaux hacks pour donner des styles différents selon les navigateurs et même les versions d'IE :