18034 sujets

Questions générales et questions de débutants

Utilisation de certaines fonctions avec IE8

Bonjour

L'outil Google Analytics donne le nombre d'accès à un site avec différents navigateurs et les versions de ces navigateurs.
Il en découle que je peux difficilement négliger les utilisateurs de IE8 qui représentent encore 10% des utilisateurs d'IE, soit à lui seul plus qu'Opera.

Question: y a-t-il quelque part un document qui explique clairement ce qui est ou non supporté par IE8?
En particulier la fonction document.querySelectorAll() est elle absolument pas supportée, comme je le lis à certains endroits, ou supportée uniquement avec des selecteurs "compatibles CSS2" -- ce qui n'est pas très clair.

Merci de votre aide.
querySelector et querySelectorAll sont supportés depuis IE8 inclus, mais les implémentations de ces fonctions dépendent toujours du moteur CSS du navigateur.

En d'autres termes, sur IE8, seuls les sélecteurs reconnus par IE8 sont utilisables avec querySelector/querySelectorAll.


Pour plus d'infos, regarde caniuse.com pour voir quels sélecteurs sont supportés ou non.
QuentinC a écrit :
Pour plus d'infos, regarde caniuse.com pour voir quels sélecteurs sont supportés ou non.

C'est bien ce que j'ai fait, mais je ne comprends pas si oui ou non je peux mettre des classes multiples et faire un querySelectorAll sur une des classes, par exemple si j'ai
<div class="submenu active">...</div>
est-ce que je vais retrouver cet élément par 
document.querySelectorAll(".active")

Je sais déjà que je ne peux pas utiliser classList, je récupère className et je fait du traitement de chaîne de caractères dessus. Mais ça ne sert pas à grand chose si je ne trouve pas les éléments à modifier.
Bonsoir PapyJp,
tu devras déclarer tes éléments id="elem1" id="elem2" id="elem3" pour leur appliquer une fonction.
Modifié par pictural (07 Sep 2015 - 04:38)
a écrit :
C'est bien ce que j'ai fait, mais je ne comprends pas si oui ou non je peux mettre des classes multiples et faire un querySelectorAll sur une des classes, par exemple si j'ai
<div class="submenu active">...</div>
est-ce que je vais retrouver cet élément par
document.querySelectorAll(".active")


Je te réponds volontairement par une question: est-ce que le sélecteur de classe fait partie de CSS2 ?
QuentinC a écrit :
Je te réponds volontairement par une question: est-ce que le sélecteur de classe fait partie de CSS2 ?

Apparemment oui, mais ce sont les classes multiples dont je ne suis pas sûr. Je vais essayer de trouver un site de simulation pour m'en assurer.
En fait dans mon cas je peux remplacer querySelectorAll(".active") par getElementsByClassName("active") mais comme element.className rend comme de juste "submenu active" je ne suis pas sûr à 100% que ça retrouverait mes éléments actifs.
Modifié par PapyJP (07 Sep 2015 - 07:35)
Il y aurait ceci comme approche de solution qui fonctionne bien en utilisant document.getElementsByTagName('_')

hmtl css js : 
<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />
<meta name="description" content="Boucle sur un tag." />

<style>
.active{display:inline-block;height:20px;cursor:pointer;overflow:hidden}
.envue{display:inline-block;height:100px;cursor:pointer;overflow:visible}
.envue span{color:blue}
</style>

</head>

<body>
 
<div class="active">elem1 sans id="_"<br /><span>blabla<br />blabla<br />blabla<br />blabla</span></div><br />
<div class="active">elem2 sans id="_"<br /><span>blabla<br />blabla<br />blabla<br />blabla</span></div>
 
<script>
	function Divs()
{
var i,divs;
// faire un boucle sur tous les 'div' du document
divs=document.getElementsByTagName('div');
for(i=0;i<divs.length;i++)
	{
// tester si le class 'active' existe
if(/active/.test(divs[i].className))
		{
// le 'div' devient lui-même un objet
divs[i].onclick=function(){if(this.className=='active' || !this.className){this.className='envue'}
else if(this.className=='envue'){this.className='active'}};
		}
	}
}

window.onload=function(){Divs()};
</script>

</body>

</html>


ps : si quelqu'un chez Alsac pouvait corriger ce qui s'affiche à l'écran car la présence de i dans mon code entre brackets perturbe la lecture du post, et du coup il manque précisément un i entre brackets dans ce code à la ligne if(/active/.test(divs.className)) ![/i][/i]
Modifié par pictural (07 Sep 2015 - 09:05)
Pour le coup, une capture d'écran de mon Bloc-notes sera plus explicite :

upload/59366-c3.jpg

Et la page est en ligne ici : http://sentrais.eu/essai2.htm

Enfin, dans mon exemple pour gérer une double alternance simultanée, on pourrait faire constater que si un 'div' était passé en class="envue", ce div repasserait en class="active" ... lorsqu'un autre 'div' passerait à son tour en class="envue".
Modifié par pictural (07 Sep 2015 - 09:24)
getElementsByClassName par contre je suis à peu près certain qu'il n'existe pas sur IE8. Sauf erreur c'est pas avant IE9 ou même IE10.

Pictural, ça fonctionne mais niveau performances ça ne doit pas être terrible de faire des boucles là où on peut l'éviter. Pour IE7 et IE6 on n'aurait pas le choix, mais sinon...
En fait il n'y a pas d'éléments qui soient actifs sans qu'on ait appelé la fonction , elle peut donc tenir à jour une table définie en global qui contienne la liste des éléments actifs. Je crois que je vais faire ça, c'est pas cher et sans risque.
Merci de m'avoir aidé dans ma réflexion.
Quant à IE v.5.5 -> v.8, ceci devrait pouvoir répondre à la question de PapyJp pour instruire les versions ancestrales de IE, du 'tant espéré' document.getElementsByClassName : http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

Ou encore ceci beaucoup plus général (notamment sur document.getElementsByTagName qui n'exclut d'emblée que IE v.5.5 ! et qui offre alors à PapyJp de la belle marge ...) :
http://quirksmode.org/dom/core/
Modifié par pictural (07 Sep 2015 - 21:26)
L'exemple que j'ai donné plus haut (qui sollicite document.getElementsByTagName) fonctionne donc parfaitement avec IE v.8, v.7, v.6
Modifié par pictural (08 Sep 2015 - 00:22)
Sujet clos
Aller à