Navigateur : Astuces de programmation Le MEMO du Web Développeur

Internet Explorer : Commentaire conditionnel

t@ra — Thu, 07 Dec 2023 17:33:32 +0000

Les commentaires conditionnels sont propres à Internet Explorer.

Ils permettent de

Masquer ou afficher du code HTML sous IE uniquement.
Sélectionner une version du navigateur IE pour afficher du code spécifique à cette version.

Cibler une version d’internet Explorer par commentaire conditionnel se fait avec les syntaxes suivante.

Si la version IE est supérieure ou égale à IE9 :

Si la version IE est inférieure ou égale à IE7 :

Si la version de IE est égale à IE10

Exemples d’utilisation :

Utile pour faire des patchs pour certaines vieilles versions d’Internet Explorer

Code HTML affiché uniquement sous navigateur IE8

Afficher du contenu uniquement pour une version d’Internet explorer

Script javascript déclaré uniquement sous navigateurs IE<=8

Déclarer un script pour les vieilles versions d’internet explorer, dans le cas suivant, déclarer un script qui simule les bords arrondis pour les versions d’internet Explorer qui ne supportent pas la propriété CSS border-radius.

Avertissement :
Les commentaires conditionnels IE ne sont plus pris en compte par IE 10 !

source : http://en.wikipedia.org/wiki/Conditional_comment

The post Internet Explorer : Commentaire conditionnel first appeared on Le MEMO du Web Développeur.

Non prise en charge de addEventListener par IE < 9

t@ra — Fri, 06 Jun 2014 15:52:48 +0000

Internet Explorer pour ses version antérieures à la 9 ne prend pas en charge l’événement javascript addEventListener, qui permet d’assigner un événement javascript à un élément HTML.

On peut remplacer cette fonction sous IE par la fonction attachEvent

function addEventMultiBrowsers(event, elem, func) {
   if (elem.addEventListener)  // Si le navigateur prend en charge addEventListener
      elem.addEventListener(event,func,false);
   else if (elem.attachEvent) { // Sinon (cas IE < 9)
      elem.attachEvent("on"+event, func);
   }
}

Remarquez que le nom de l’évément passé en paramètre pour addEventListener doit être nommée sous la form click, mouseover, keydown, keypress … tandis que pour attachEvent, ses mêmes évenements doivent être nommés onclick, onmouseover, onkeydown, onkeypress .

Dans notre fonction nouvellement créée addEventMultiBrowsers, on choisi le premier formalisme et l’on rajoute « on »+event

Exemple d’utilisation :

var mon_element = document.getElementById('mon_div');
addEventMultiBrowsers(mon_element, 'mouseover', function() {
    alert ("Vous avez survolé l'élément d'identifiant mon_div !");
});

The post Non prise en charge de addEventListener par IE < 9 first appeared on Le MEMO du Web Développeur.

Déclaration conditionnelle de feuille de style CSS dans WordPress

t@ra — Tue, 07 Jan 2014 23:00:00 +0000

Il est malheureusement souvent nécessaire de mettre en place une feuille de style spéciale pour certains navigateurs qui ne supportent pas les propriétés CSS modernes.

Prenons un exemple complètement au hasard, disons que IE répond mal à certaines propriétés CSS et que vous voulez affecter à vos éléments un style particulier lorsque votre site est visualisé sous ce navigateur.

Si dans votre thème WordPress, vos fichiers CSS sont déclarés en dur directement dans la balise alors vous pouvez vous référer directement à ce mémo sur les déclaration conditionnelles de CSS

Si votre thème WordPress déclaire les fichiers CSS depuis le fichier functions.php à l'aide de la fonction : wp_enqueue_style, alors je vous propose la méthode suivante pour déclarer votre fichier : style-ie.css qui contient vos styles spécialement dédiés pour Internet Explorer :

wp_register_style( 'theme-style-ie', get_bloginfo( 'stylesheet_directory' ) . '/css/style-ie.css', false, $theme['Version'] );
$GLOBALS['wp_styles']->add_data( 'theme-style-ie', 'conditional', 'lte IE 9' );
    wp_enqueue_style( 'theme-style-ie' );

Le code ci dessus doit donc être inséré dans le fichier functions.php de votre thème, sachant que vous avez pris soin de préalablement déposer votre fichier style-ie.css dans le répertoire /css de votre thème.

Bien entendu, la condition lte IE 9 doit être changée selon vos besoins.

The post Déclaration conditionnelle de feuille de style CSS dans WordPress first appeared on Le MEMO du Web Développeur.

Uncaught TypeError: Cannot read property ‘msie’ of undefined

t@ra — Thu, 08 Aug 2013 22:00:00 +0000

Si vous tombez sur cette erreur, c'est que la propriété jQuery.browser a été dépreciée dans la version Query 1.9. Pas glop …

Cette propriété pourtant bien utile permettait de connaitre l'identité du navigateur ainsi que sa version.

Aucun remplacement facile à mettre en place apparemment pour l'instant. Vous pouvez régler le problème en déclarant le plugin jQueryMigrate après votre déclaration jQuery.

Ce plugin permet de patcher les fonctions jQuery obsolètes. Pas super optimisé mais ça peut servir.

Plus d'info sur le site officiel de jQuery

The post Uncaught TypeError: Cannot read property ‘msie’ of undefined first appeared on Le MEMO du Web Développeur.

La feinte de l’underscore dans un fichier CSS sous IE

t@ra — Sat, 25 Feb 2012 23:00:00 +0000

La position fixed n’étant pas prise en compte sous ma version de IE (apparemement ca n’est pas un cas général), j’utilise alors le underscore hack sous IE qui consiste a précéder une propriété CSS par un underscore ‘_’ , il n’y aura alors que IE pour comprendre la propriété, les autres navigateurs l’ignoreront.

C’est pas très propre comme solution, mais étant déjà tombée sur des CSS y faisant appel, au moins ça permet de comprendre …

{
position :fixed; /*Propriété correcte mise en premier pour être lue par tous les navigateurs */

_position :absolute; /* Propriété précédée d'un underscore mise en deuxième et comprise par IE seulement qui la gardera*/
}

The post La feinte de l’underscore dans un fichier CSS sous IE first appeared on Le MEMO du Web Développeur.

Problème de changement d’opacité d’image avec transparence sous … IE

t@ra — Sat, 17 Dec 2011 23:00:00 +0000

Il semblerait que IE<9 gère mal le changement d'opacité animé sous JQuery d'une image à fond transparent , tel que :

$("#monimage").animate({opacity:1},600);

Le symptôme est l'apparition d'un fond noirâtre du plus mauvais effet durant l'animation.

Pas trouvé de remède au mal, à part le patch salvateur quoi que sectaire (en utilisant la propriété JQuery de détection de navigateur) :

// si le navigateur est IE et la version<9	
if ($.browser.msie && jQuery.browser.version < 9){
     var iepourri = true; 
     alert ('tant pis pour vous');
} else{
     var iepourri = false;
     $("#monimage").animate({opacity:1},600);
}

The post Problème de changement d’opacité d’image avec transparence sous … IE first appeared on Le MEMO du Web Développeur.

un input de type passwd ne prend pas en compte une police font-face sous IE

t@ra — Sat, 17 Dec 2011 23:00:00 +0000

Symptôme :

Lorsque je tape mon mot de passe dans un input de type "passwd" sous Internet Explorer, et que la font définie pour cet input est une police non standard générée par font-face (voir le memo http://www.memo-web.fr/categorie-CSS-52.php) , les petits points rassurants qui s'affichent habituellement à la saisie du mot de passe ne s'affichent pas (peut être aussi que ça dépend de la font récupérée).

Solution : Appliquer une font standard aux inputs de type "passwd" !

The post un input de type passwd ne prend pas en compte une police font-face sous IE first appeared on Le MEMO du Web Développeur.