Displayfix: lo último en clearfix
Han pasado 5 años desde el primer artículo donde describí exhaustivamente la causa y solución más común de clearfix. Y me asombra que sigan apareciendo soluciones diferentes e innovadoras a este problema que es transversal a todos los browsers. En este artículo, muestro y demuestro el más simple (pero no versátil) de los que existen en el mercado.
Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo:
Animaciones y Transformaciones con CSS3
Se puede ver un aumento en el uso de CSS3 en sitios web de amplio uso, y actualmente es un diferencial a la hora de atraer y enganchar al usuario. Aunque sé que es pronto para sumergirse totalmente en estas aguas, no perdemos nada con jugar un poco con transiciones y animaciones en CSS3.
NOTA: Aún es necesario el uso de browsers muy modernos, como Safari 5 y Chrome 10. Firefox 3.
Tip precoz 8: Deshabilitar click derecho con jQuery
Puede que sea necesario, puede que algún cliente te lo pida y aunque argumentes de diferentes maneras no entienda que no es recomendable deshabilitarle opciones innatas al usuario limitándole la accesibilidad. Pero al final de cuentas, tenemos que vivir y accedemos a realizarle lo que necesita, con tal de terminar luego y entregar el proyecto y obtener finalmente el pago por el trabajo realizado.
Para deshabilitar el click derecho del mouse del usuario basta la siguiente simple instrucción jQuery:
Más y mejores tipografías con @font-face
Está bien, se están utilizando mucho hoy en día pero @font-face no es una de las nuevas propiedades CSS3; de hecho fue propuesta en CSS2 y ha sido implementada en IE desde su versión 5, aunque lo hicieron en el formato de fuentes propietario (como no, si siempre Microsoft lo hace) Embedded OpenType. Como fueron los únicos en utilizarlo de esa manera, y desde Safari 3.1 los fabricantes de browsers han utilizado TrueType (.ttf) y OpenType (.otf), IE ha tenido que adaptarse desde su versión 7. La especificación de los formatos son:
Gradientes con CSS 3
Muchas de las propiedades CSS3 han estado presentes en browsers Webkit como Safari y Chrome desde sus inicios; a medida que avancen han mejorado el soporte y no es diferente con el uso gradientes sólo con CSS. Desde la versión 3.6 se pueden utilizar con Firefox, y últimamente han tomado mucha fuerza en aplicativos web modernos.
¿Porqué utilizar gradientes en CSS en vez de imágenes?
Es más flexible y mantenible Menos dependendias de programas y editores gráficos Menos consultas al servidor Es escalable En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos.
Otro más para matar IE6
No bastan los [hacks][1], los [comentarios condicionales][2], [reseters][3], [advertencias][4]… Internet Explorer 6 sigue dándonos muchos problemas. Pero les traigo una excelente solución ya que es tan invasiva, tan pero taaaaan invasiva que toma por completo control de IE6 y hace q se comporte como se debe.
Google Chrome Frame es un plugin open source que trae la rapidez y versatilidad de Webkit (el motor por detrás de Chrome y Safari) directo a IE6. Con esto, podrás fácilmente utilizar todo lo que siempre quisiste sin preocuparte de este malogrado browser, incluyendo CSS3, HTML5 y Javascript.
El olvidado rel
¿Por qué gastarme el tiempo de escribir un artículo sobre un atributo HTML tan antiguo, y por qué ustedes gastarían el suyo en leerlo? Que buenas preguntas para comenzar a redactar un tema donde es necesario aclarar sus usos y recalcar sus funciones, principalmente cuando las escuelas actuales aún son incipientes en enseñar la teoría por detrás de los fundamentos de los web standards. Comencemos con la parte aburrida:
El atributo rel describe la relación del presente documento al link (href) o ancla (name) especificado en el atributo href="". El valor de este atributo puede ser más de uno y al igual que las clases, separados por espacio.