oct 21 2010

Problemas con Internet Explorer y hover (css)

tatai

La semana pasada uno de nuestros clientes nos puso un problema sobre la mesa que nos ha traído de cabeza unos días. El problema en cuestión era que diversas páginas de su web, que eran pesadas (incluso podemos decir que muy pesadas ya que algunas tenían 4 megas de HTML, pero otras 8, 13 y hasta 15), tenían un problema de rendimiento bastante grave.

Poniendo en contexto, una vez cargadas esas páginas, es decir, no teniendo en cuenta el tiempo que necesita el navegador para descargar la página ni el tiempo para renderizarla al completo, con su javascript, cuando navegamos por la página, Internet Explorer (7 y 8, con la 6 no tanto) empieza a cargar la máquina, subiendo el uso de CPU hasta el 100% durante varios segundos y haciendo imposible la navegación, hasta tal punto que no sólo afectaba al scroll sino que incluso cuando desplazamos el cursor por la página el simple hecho de ponernos encima de un enlace, llegaban a pasar segundos hasta que el cursor cambiaba desde la tradicional flecha al cursor:pointer característico en cada sistema operativo y navegador.

Por no hablar del tiempo de respuesta ante los scripts o cualquier evento. Inviable.

Detallar todo el proceso que seguimos nos daría para varios posts y varias páginas, pero bueno, habiendo descartando completamente que el problema fuese javascript o el framework que se usaba (en este caso jQuery), el problema parecía estar en el tamaño de página porque cuando se reducía su tamaño los problemas desaparecían y también en la hoja de estilos, porque al comentar algunas de las hojas, el efecto se atenuaba e incluso llegaba a desaparecer.

La primera impresión fue que es posible que al ser la página tan grande y tener muchos elementos que flotaban, alternando con elementos de bloque es posible que el navegador necesitase todo ese procesado, pero comprobamos como ese no era el problema (evidentemente, algo de se notó puesto que efectivamente el navegador tenía que pensar algo menos), pero no era la causa ya que la mejora no era aceptable.

Finalmente, probando más cosas surgió la idea de comentar todos los hover (también se probó con los float y otros atributos) y cuál fue nuestra sorpresa cuando el efecto desapareció. Centramos toda nuestra atención, esto no lo habíamos visto nunca.

Sólo había una cosa rara, en unas pocas líneas (4 ó 6) teníamos unas propiedades css similares a estas (no es el caso real, pero sí similar):

.listados .visual {color:#777;}
.listados .visual:hover {color:#000;}

Para un HTML como este:

<div class="listados">
<p><a href="#" class="visual">Texto</a></p>
<p><a href="#">Texto</a></p>
<p><a href="#">Texto</a></p>
<p><a href="#" class="visual">Texto</a></p>
</div>

Es decir, resumiendo, las propiedades css hacen que los enlaces con class visual se pongan de color negro cuando el ratón se pone por encima.

Esto supone un gran problema para Internet Explorer. Pese a que la propiedad hover está puesta para un enlace, no poner explícitamente en los estilos que es para un enlace (tag <a>) provoca que esté constantemente recalculando y “pensando”, y aquí la raíz de todo el problema.

Es decir, las líneas css deben ser:

.listados .visual {color:#777;}
.listados a.visual:hover {color:#000;}

Lo más correcto sería incluir también el a en la primera línea, para tener más coherencia, aunque no es necesario y no cambia la solución del problema.

Pero bueno, la guerra contra el IE ha terminado… y hemos ganado :)


ago 29 2008

Pixel Perfect, comprueba tu diseño con el resultado

tatai

Leo en Webmaster Libre sobre esta extensión para Firefox llamada Pixel Perfect que permite superponer una imagen a la web que estamos viendo, especialmente útil cuando queremos comparar una imagen de un diseño, una captura de pantalla, etc con nuestro actual integración en HTML.

En la página web de Pixel Perfect, dale a “Watch Demo” para ver un vídeo explicativo en el que se ve el funcionamiento del plugin.


jul 18 2008

Cheatsheets para desarrolladores web en cliente

tatai

Leo en Six Revisions una excelente recopilación de 23 cheatsheets (“chuletas”) sobre lenguajes de desarrollo web en cliente (es decir, lo que llamanos en frontend).

Incluye: HTML/XHTML, CSS, Javascript, DOM, Mootools, jQuery, RGB, SEO y WordPress.


jul 13 2008

Guía CSS para clientes de email

tatai

Vía webeame encuentro este interesantísimo artículo titulado CSS support in email clients (en inglés), o lo que es lo mismo, qué elementos CSS están soportados por clientes de correo. Actualizado al 2008.

Se diferencia entre clientes de escritorio: Thunderbird (1 y 2), Outlook (2003 y 2007), Eudora, Windows Mail, Mac Mail, Entourage (2004 y 2008), AOL (9, 10 y Mac) y Notes 6 y entre clientes web: GMail, Hotmail, Live Mail, Yahoo (antiguo y nuevo), AOL Web y .Mac Web.

Estos cuadros son muy interesantes ya que cuando se envían mail, por ejemplo una newsletter, la mejor forma de asegurarse que el destinatario verá lo que tú quieres que vea y como a ti te gusta, es poner estilos “en línea” (es decir, con atributos style en cada tag HTML) o poniendo los propios estilos CSS embebidos en el mail, no con enlaces externos.

La verdad es que esto de los newsletters es otro mundo totalmente distinto. Si ya nos cuesta muchas veces hacer que nuestras webs se vean bien en Firefox, Internet Explorer (5.5, 6, 7..) e incluso Opera, Safari, etc, como podemos ver, en el mundo de los clientes web la cosa se complica hasta niveles altísimos.

La solución radica en lo de casi siempre intentar hacer las cosas lo más estándar posible y tener en cuenta qué usuarios tenemos y qué programas de mail tienen para intentar adaptarnos a la mayor parte de ellos.


abr 10 2008

Y… un Homer en CSS

tatai

Ya que el otro día veíamos un Homer en carne y hueso, hoy vía SigT tenemos un Homer Simpson en CSS (hecho por Román Cortés y es posible que no se vea en todos los navegadores). Impresionante lo que se puede hacer hoy con CSS :D

Pasemos del Acid Test! Hagamos el Homer Test!!


mar 30 2008

101 Técnicas CSS

tatai

Voy a empezar a poner un montón de posts que se me están acumulando con el paso del tiempo y nunca termino de ponerme, jeje.

Y para empezar, una recopilación de técnicas CSS de la web de noupe.com. En particular, lo que han denominado 101 CSS Techniques of all time que incluye temas como las animaciones (sprites) CSS, esquinas redondeadas, crear menús con listas, sombreados, paginaciones, puntuaciones(star rating), pop-ups, sitemap… y un montón más.

Está dividido en dos partes y también es bueno revisar los comentarios ya que hay aportaciones interesantes con respecto al tema.

Estos son los enlaces: