CSS válido compatible con Internet Explorer y Firefox
Llevo años realizando nuestras webs por medio de CSS, pero antes era sencillo, casi todo el mundo usaba IE, y sólo cuatro se atrevían con navegadores alternativos. A día de hoy las cosas están cambiando, y ya no se puede despreciar a los usuarios de navegadores tan extendidos como Firefox.
Pero surge un problema: en cuanto hagamos ligeramente complejos nuestros diseños, y utilicemos atributos como padding y margin, veremos como la distinta intepretación que hace Internet Explorer y el resto de navegadores del modelo de caja nos jugará malas pasadas.
Esto nos hace necesario acudir a “hacks” que nos permita aprovechar diferencias de interpretación de los CSS de los navegadores realizar CSS compatibles con todos los navegadores.
Existen muchos sistemas distintos, pero no todos son acordes a los standar, por lo que no validarán. De hecho, a lo largo de estos años he usado varios que si bien funcionaban y mantenían la estética más o menos igual en todos los navegadores, no validaban los standar. No es algo fundamental, pero siempre te queda esa espina clavada de “un trabajo bien hecho”.
Hoy he probado un nuevo método, precisamente intentando solucionar este problema histórico, hasta que he encontrado este artículo de Sitepoint (que tantas veces me ha sacado de apuros), que como me decía Carlos Mantero en Twitter no sé si será el Santo Grial (que proporciona vida eterna), pero sí que me ha regalado algunos meses, eso seguro, porque era un tema que me estaba bloqueando.
La solución que he usado es sencilla:
1) creamos una regla adaptada a Internet Explorer
2) repetimos la regla (lo que sea común no es necesario, únicamente lo que cambie -tradicionalmente padding, margin, width o height-) anteponiéndole html>body.
Afortunadamente a este último IE no lo interpretará mientras que el resto de navegadores sí. Lo he probado en una web de estructura compleja (en concreto con el próximo diseño de Mundogamers) y se ve perfectamente en los navegadores testeados: Firefox, IE 6 e IE7, validando perfectamente, por fin.
Termino con un ejemplo práctico, para entenderlo mejor:
#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}
Espero que le sea de ayuda a alguien. Supongo que muchos lo conocerían, pero seguro que alguien tiene problemas similares pendientes de resolver y le ayude a ver luz al final del camino.
Tracking con enlaces directos
Este es el primer post-chuleta que haga, pero os aseguro que no será el único, ya que soy un completo desastre con la organización de documentos físicos, y no digamos con los favoritos, post guardados en el gestor rss, etc. Así que aprovecharé que este blog apenas lo lee nadie (:)) para usarlo de chuleta. Seguro que a vosotros cuantro que me leeis las 3 veces a la semana que escribo os son de utilidad alguno de ellos.
El tema de hoy va dedicado a un buen amigo, como es Carlos (aka Carlitus), que para quien aún no sepa de su blog suele poner interesantes consejos de programación, que muchos de ellos serán rescatados por mi, pero que siempre tendréis que acudir a su blog para completar la información, porque como pretendáis que sea yo quien dé explicaciones técnicas de programación, vamos aviados ;)
En muchas ocasiones (por ejemplo en un directorio, o cuando queremos realizar algún tipo de tracking de campañas y promociones internas) queremos controlar el número de cliks en algunos enlaces salientes. Esto normalmente se venía haciendo con enlaces en javascript (que no serán seguidos por buscadores) o añadiendo parámentros a la url (que o bien no serán seguidos por buscadores si el número es excesivo, o bien nos puede crear problemas de contenido duplicado).
Recientemente tuve una reunión bis a bis con un ingeniero de Google UK para solucionar este problema con un cliente nuestro de una manera que ellos vieran viable y bien vista a sus ojos. La solución más válida era usar eventos onclick dentro de un href normal (enlace común). De esta manera el enlace era válido para buscadores y el tracking se hace de manera normal.
Ahora bien, en este post de Carlos, nos propone una solución similar (se basa en lo mismo), pero mucho más elegante (en el enlace simplemente se pone el nombre de una clase, de la misma forma que se aplican estilos css.
Para ello debemos de usar JQuery, y el siguiente código:
Aunque un usuario de su blog, vía comentarios, propone una versión mejorada:
Posteriormente en los enlaces que queramos contabilizar se haría de la siguiente manera:
Obviamente, el archivo contador.php que controla los clicks debe de estar hecho previamente.
Imagino que este mismo sistema se puede usar con pequeñas modificaciones para votaciones, pero mis conocimientos de javascript tienden a cero, y no sabría plantearlo. ¿Se te ocurre como, Carlos?