Solution incompatibilité IE/CSS + "hover"

Solution incompatibilité IE/CSS + "hover" - HTML/CSS - Programmation

Marsh Posté le 11-02-2005 à 14:31:41    

Salut,
 
Je partage ce que j'ai trouvé pour résoudre l'incompatibilité de IE6 à gérer le "hover" dans les CSS.
 
Ca marche impec ! A quelque chose prés ça donne la même chose que sous Firefox. :)
 

Code :
  1. nom du fichier : csshover.htc
  3. <attach event="ondocumentready" handler="parseStylesheets" />
  4. <script language="JScript">
  5. /**
  6. * PSUEDOS - V1.21.041022 - hover & active
  7. * ---------------------------------------------
  8. * Peterned - http://www.xs4all.nl/~peterned/
  9. * (c) 2004 - Peter Nederlof
  10. *
  11. * Credits  - Arnoud Berendsen  
  12. *          - Martin Reurings
  13. * for inspiring me and finding really sick bugs
  14. *
  15. * howto: body { behavior:url("csshover.htc" ); }
  16. * ---------------------------------------------
  17. */
  19. var currentSheet, doc = window.document;
  20. var activators = {
  21. onhover:{on:'onmouseover', off:'onmouseout'},
  22. onactive:{on:'onmousedown', off:'onmouseup'}
  23. }
  25. function parseStylesheets() {
  26. var sheets = doc.styleSheets, l = sheets.length;
  27. for(var i=0; i<l; i++)
  28.  parseStylesheet(sheets[i]);
  29. }
  30. function parseStylesheet(sheet) {
  31.  var l, rules, imports;
  32.  if(sheet.imports) {
  33.   imports = sheet.imports, l = imports.length;
  34.   for(var i=0; i<l; i++)
  35.    parseStylesheet(sheet.imports[i]);
  36.  }
  38.  rules = (currentSheet = sheet).rules, l = rules.length;
  39.  for(var j=0; j<l; j++) parseCSSRule(rules[j]);
  40. }
  42. function parseCSSRule(rule) {
  43.  var select = rule.selectorText, style = rule.style.cssText;
  44.  if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
  46.  var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
  47.  var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
  48.  var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
  49.  var affected = select.replace(/:hover.*$/, '');
  50.  var elements = getElementsBySelect(affected);
  52.  currentSheet.addRule(newSelect, style);
  53.  for(var i=0; i<elements.length; i++)
  54.   new HoverElement(elements[i], className, activators[pseudo]);
  55. }
  57. function HoverElement(node, className, events) {
  58. if(!node.hovers) node.hovers = {};
  59. if(node.hovers[className]) return;
  60. node.hovers[className] = true;
  61. node.attachEvent(events.on,
  62.  function() { node.className += ' ' + className; });
  63. node.attachEvent(events.off,
  64.  function() { node.className =
  65.   node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
  66. }
  68. function getElementsBySelect(rule) {
  69. var parts, nodes = [doc];
  70. parts = rule.split(' ');
  71. for(var i=0; i<parts.length; i++) {
  72.  nodes = getSelectedNodes(parts[i], nodes);
  73. } return nodes;
  74. }
  75. function getSelectedNodes(select, elements) {
  76.  var result, node, nodes = [];
  77.  var classname = (/\.([a-z0-9_-]+)/i).exec(select);
  78.  var identify = (/\#([a-z0-9_-]+)/i).exec(select);
  79.  var tagName = (/^[a-z0-9]+/i).exec(select.toUpperCase()) || '*';
  80.  for(var i=0; i<elements.length; i++) {
  81.   result = elements[i].getElementsByTagName(tagName);
  82.   for(var j=0; j<result.length; j++) {
  83.    node = result[j];
  84.    if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
  85.     classname[1] + '\\b').exec(node.className)))) continue;
  86.    nodes[nodes.length] = node;
  87.   }
  88.  } return nodes;
  89. }
  90. </script>


 
@+

Reply

Marsh Posté le 11-02-2005 à 14:31:41   

Reply

Marsh Posté le 11-02-2005 à 14:33:27    

Mouaip, un comportement HTC... A utiliser alors dans un commentaire conditionnel. Aussi, y'a des chances d'avoir la prochaine version d'IE aux normes, donc valable pour IE5&6 :)

Reply

Marsh Posté le 11-02-2005 à 14:33:52    

C'est quoi le problème d'IE avec le hover?
Je me sers du hover pour les liens et ca marche niquel, dans d'autres cas ça déconne?

Reply

Marsh Posté le 11-02-2005 à 14:34:42    

harrysauce a écrit :

C'est quoi le problème d'IE avec le hover?
Je me sers du hover pour les liens et ca marche niquel, dans d'autres cas ça déconne?


Ouais, IE ne gère la pseudo-classe hover que pour les liens. Si t'essayes de mettre sur un autre élément, ça ne fonctionne pas :cry:

Reply

Marsh Posté le 11-02-2005 à 15:39:45    

FlorentG a écrit :

Mouaip, un comportement HTC... A utiliser alors dans un commentaire conditionnel. Aussi, y'a des chances d'avoir la prochaine version d'IE aux normes, donc valable pour IE5&6 :)

Et quand est il pour toutes les versions de windows qui n'auront bientôt plus droit aux mises à jour d'IE? ;)
Et qui sait, la prochaine version grosse version d'IE sera peut être IE 7 ... à tout les coups valable uniquement sous XP et supérieur. ;)

Reply

Marsh Posté le 11-02-2005 à 15:40:23    

Ca sera pour 2006-2007 :(

Reply

Marsh Posté le 30-08-2005 à 09:30:12    

heu, question bête : on en fait quoi d'un fichier htc ?

Reply

Marsh Posté le 30-08-2005 à 09:46:56    

Manque :target :o
 
Puis :focus et :not (mais plus difficiles à émuler :o :o :o)

omega2 a écrit :

Et qui sait, la prochaine version grosse version d'IE sera peut être IE 7 ... à tout les coups valable uniquement sous XP et supérieur. ;)


IE7b1 n'est disponible que pour Windows XP SP2 et supérieurs (Windows Server 2003 & Vista), le produit final aura les mêmes compatibilités [:klem3i1]


Message édité par masklinn le 30-08-2005 à 09:48:05

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-08-2005 à 10:38:36    

Au risque de me répèter :
On en fait quoi d'un fichier htc ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed