Comunidad de diseño web y desarrollo en internet online

Pseudoclases de CSS en IE

CSS tiene varias pseudoclases que se pueden añadir a varios elementos, por ejemplo.

    :hover, que cambia las propiedades especificadas al pasar el mouse.

    :focus, que cambia las propiedades especificadas al estar seleccionadas (formularios).

    :active, que cambia las propiedades especificadas al estar recién tocadas.

Bien, esto es bastante eficiente, pero en IE tiene sus limitaciones, hover y active solo funcionan en los hipervínculos, y focus, bien, no funciona.
Bueno, ahora hay una pequeña solución, que te los arregla en un, dos por tres.
Primero, nos creamos un archivo llamado pseudoie.htc, y le copiamos el siguiente código:

Código :

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *   Whatever:hover - V2.02.060206 - hover, active & focus
 *   ------------------------------------------------------------
 *   (c) 2005 - Peter Nederlof *   Peterned - http://www.xs4all.nl/~peterned/
 *   License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *   Whatever:hover is free software; you can redistribute it and/or
 *   modify it under the terms of the GNU Lesser General Public
 *   License as published by the Free Software Foundation; either
 *   version 2.1 of the License, or (at your option) any later version.
 *
 *   Whatever:hover is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *   Lesser General Public License for more details.
 *
 *   Credits and thanks to:
 *   Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *   howto: body { behavior:url("csshover.htc"); }
 *   ------------------------------------------------------------
 */

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
   onhover:{on:'onmouseover', off:'onmouseout'},
   onactive:{on:'onmousedown', off:'onmouseup'},
   onunknown:{on:'onfocus', off:'onblur'}
}

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]);
}
   function parseStylesheet(sheet) {
      if(sheet.imports) {
         try {
            var imports = sheet.imports, l = imports.length;
            for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
         } catch(securityException){}
      }

      try {
         var rules = (currentSheet = sheet).rules, l = rules.length;
         for(var j=0; j<l; j++) parseCSSRule(rules[j]);
      } catch(securityException){}
   }

   function parseCSSRule(rule) {
      var select = rule.selectorText, style = rule.style.cssText;
      if(!csshoverReg.test(select) || !style) return;
      
      var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
      var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
      var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
      var affected = select.replace(/:(hover|active|unknown).*$/, '');
      var elements = getElementsBySelect(affected);
      if(elements.length == 0) return;

      currentSheet.addRule(newSelect, style);
      for(var i=0; i<elements.length; i++)
         new HoverElement(elements[i], className, activators[pseudo]);
   }

function HoverElement(node, className, events) {
   if(!node.hovers) node.hovers = {};
   if(node.hovers[className]) return;
   node.hovers[className] = true;
   hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
   hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
   function hookHoverEvent(node, type, handler) {
      node.attachEvent(type, handler);
      hoverEvents[hoverEvents.length] = { 
         node:node, type:type, handler:handler 
      };
   }

   function unhookHoverEvents() {
      for(var e,i=0; i<hoverEvents.length; i++) {
         e = hoverEvents[i]; 
         e.node.detachEvent(e.type, e.handler);
      }
   }

function getElementsBySelect(rule) {
   var parts, nodes = [doc];
   parts = rule.split(' ');
   for(var i=0; i<parts.length; i++) {
      nodes = getSelectedNodes(parts[i], nodes);
   }   return nodes;
}
   function getSelectedNodes(select, elements) {
      var result, node, nodes = [];
      var identify = (/\#([a-z0-9_-]+)/i).exec(select);
      if(identify) {
         var element = doc.getElementById(identify[1]);
         return element? [element]:nodes;
      }
      
      var classname = (/\.([a-z0-9_-]+)/i).exec(select);
      var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
      var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
      for(var i=0; i<elements.length; i++) {
         result = tagName? elements[i].all.tags(tagName):elements[i].all; 
         for(var j=0; j<result.length; j++) {
            node = result[j];
            if(classReg && !classReg.test(node.className)) continue;
            nodes[nodes.length] = node;
         }
      }   
      
      return nodes;
   }
</script>

Al hacer sólo esto, todavía no funciona, tenemos que 'decirle' a nuestro CSS que utilice ese archivo como un comportamiento, haremos lo siguiente:

Código :

body {
   ...
   behavior: url("pseudoie.htc");
        ...
}

Bueno, espero que les haya sido de ayuda :)
Un saludo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate