Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

pseudo classe :hover - IE6, UpdatePanel et csshover.htc

CSS permet de définir des pseudos classes, il y a notamment la pseudo classe :hover qui s'applique seulement lorsqu'on passe la souris sur l'élément. On utilise couramment cette technique pour faire des menus, j'avais d'ailleurs fait le menu de la version 8 de CodeS-SourceS ainsi et même un article expliquant les règles CSS utilisés. Le gros problème de ces pseudos classe c'est qu'elles ne sont pas prises en compte par IE6. Il existe cependant un behavior htc qui permet de faire comprendre à IE6 les pseudos règles :hover, :active et :focus : csshover.htc 

Pour rajouter le csshover.htc, il faut utiliser cette syntaxe.

* html body { behavior:url(csshover.htc); } span:hover { color:#F0F; }

Ainsi à chaque fois que la souris passe sur un span, la couleur du texte change, même sous IE6. Le problème est que le csshover.htc fonctionne seulement sur les éléments présents à l'origine du document. Si vous modifier le DOM après le chargement de la feuille de style alors IE6 ne prendra plus en compte le :hover sur les nouveaux éléments.

Ainsi, dans l'exemple ci-dessous, le span ne changera pas de couleur après avoir cliquer sur le bouton :

<asp:ScriptManager runat="server" /> <asp:UpdatePanel runat="server"> <ContentTemplate> <span>pouet</span> <asp:Button runat="server" /> </ContentTemplate> </asp:UpdatePanel>

Ma première idée a été de modifier le fichier csshover.htc, notamment la fonction parseStylesheets :

// this solution doesn't work ! var firstCall = true; function parseStylesheets() { if(!/MSIE (5|6)/.test(navigator.userAgent)) return; if (firstCall){ Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args){ if (args.get_isPartialLoad()) parseStylesheets(); }); } firstCall = false; window.attachEvent('onunload', unhookHoverEvents); var sheets = doc.styleSheets, l = sheets.length; for(var i=0; i<l; i++) parseStylesheet(sheets[ i ]); }

Malheureusement il est impossible de passer un objet Function vers le contexte de la page ! Je n'ai rien trouvé sur le net qui explique le problème. Si quelqu'un a une explication, je suis preneur.

Ma seconde idée est d'utiliser window.setTimeout pour relancer la fonction à intervalle régulier :

function parseStylesheets() { if(!/MSIE (5|6)/.test(navigator.userAgent)) return; window.attachEvent('onunload', unhookHoverEvents); var sheets = doc.styleSheets, l = sheets.length; for(var i=0; i<l; i++) parseStylesheet(sheets[ i ]); window.setTimeout(parseStylesheets, 1000); }

[Update] : On peut bien sur optimiser cette solution, mais suite aux commentaires de FremyCompany, voici une solution bien plus propre que ce je proposais. Il faut mettre la fonction parseStylessheets dans l'objet window.

var firstCall = true;
function parseStylesheets() {
   
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
   
var sheets = doc.styleSheets, l = sheets.length;

    if(firstCall){
        window.attachEvent('onunload', unhookHoverEvents);
        window.parseStylesheets = parseStylesheets
;
        firstCall
= false;
    } else {
        hoverEvents = [];

        unhookHoverEvents();
    }
    
   
for(var i=0; i<l; i++)
        parseStylesheet(sheets[ i ]);
}

Puis dans votre page rajouter

window.pageLoad = function(sender, args){ if (args.get_isPartialLoad() && window.checkParseStylesheets){ window.checkParseStylesheets() } }

Si vous utiliser un script externe, je vous conseille de passer par cette syntaxe :

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args){ if (args.get_isPartialLoad() && window.checkParseStylesheets){ window.checkParseStylesheets() } });

Cette solution vous permettra, en un minimum de temps, de rendre votre application web compatible avec ce vieux navigateur qui reste malheureusement beaucoup trop utilisés.

Posted: dimanche 6 janvier 2008 13:34 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

FREMYCOMPANY a dit :

J'avoue que je ne connaissais pas ce behavior donc ce post me semble très utile !

Néamoins, si c'est du JavaScript qui se charge de faire un parsing CSS puis d'attacher des mouseover/mouseout un peu partout, n'est-ce pas un peu dangereux niveau réactivité ? Je veux dire par là : Le browser (IE6 en l'occurrence) ne risque-t-il pas d'avoir des "moments d'absence ?" ou de trainer la patte quand on bouge la souris ?

# janvier 6, 2008 15:35

FREMYCOMPANY a dit :

J'ai trouvé une solution pour éviter setTimeout Wink

Je te contacte par mail pour t'envoyer le code (histoire aussi que tu teste chez toi, vu que moi je n'ai qu'un Multiple IE6 pour tester)

# janvier 6, 2008 16:02

Chadom a dit :

Je sais bien que IE6 est (malheureusement) encore bcp utilisé... Mais IMHO ça ne vaut plus le coût de faire des hack de ce type pour cet ancêtre bien périmés. Poussons plutôt les utilisateurs à se mettre à jour et utiliser IE7/Fx/Opéra !

# janvier 6, 2008 19:04

Promesses a dit :

Merci Cyril pour cette note.

@Chadom: malheureusement, chez FT, ou je travaille, c'est pas aussi simple...

# janvier 7, 2008 14:07

xyanure a dit :

Je n'arrive pas à comprendre comment intégrer à du code asp.net.

# juin 8, 2009 18:49
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01