Utilizar pre-procesadores CSS se ha vuelto una necesidad en la actualidad, ya que sus múltiples ventajas hacen que no exista excusa para seguir escribiendo CSS puro. Lo mejor es que no intervenimos el lenguaje, sólo lo escribimos más eficiente. Ahora les presento un útil mixin para Sass que ayuda a lidiar con los prefijos propietarios de algunas propiedades CSS3. Mientras de a poco los fabricantes de browsers los van eliminando, aún tenemos que utilizarlos por compatibilidad retroactiva.

Este sencillo plugin permite generar dependencia entre 2 y entre ellos mostrar la relación region / comuna que conforma la distribución geopolítica de la República de Chile.

La propiedad CSS content: «»; viene siendo utilizada para entregar más estilos donde no necesitas extra marcado con HTML. Su soporte es amplio (IE8+ y demases browsers modernos). Su uso está atado a los pseudo-elementos :after y :before y permite generar contenido (de tipo texto) en dicho pseudo-elemento. Un ejemplo básico:

Calc() es una propiedad CSS3 que permite realizar operaciones matemáticas simples sustituyendo un valor fijo por una expresión dinámica de medida, por ejemplo, sumando o dividiendo anchos de un contenedor.

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder. Placeholder permite integrar un texto predefinido dentro de un campo de texto (). En general este texto ya tiene un estilo según el browser que utilizamos y se acomoda a utilizar este estilo preexistente:

HTML 5 trae el nuevo atributo download para enlaces. Cuando utilizado dentro de un , este atributo puede ir definiéndose a sí mismo (lo que causará que se descargue solamente el archivo) ó puede contener el nombre del archivo a ser descargado, sin la ruta asociada la que va como de costumbre dentro del atributo href="". Con esto definido el archivo linkeado será forzado a ser descargado. <a href="archivos/pdf/informe.pdf" download>Descargar informe.

En desktop, para tener un elemento escroleable basta con que declares un alto fijo y defines overflow: auto | overflow: scroll y si el contenido interior es mayor que el alto aparecerá la barra de scroll automáticamente. En browsers móviles y tablets ocurre lo mismo pero la sensación es muy inferior ya que el touch/drag es errático y no incluye el movimiento elástico que estamos acostumbrado al scroll en estos dispositivos touch. En el siguiente video pueden ver claramente a lo que me refiero (en el cuadro de la derecha tiene aplicada la propiedad mágica):

Oye Jorge, tengo ganas tomar un diplomado. ¿Sabes de alguno que me recomiendes? Hey, voy a hacer un postgrado en XXX de YYY en la Universidad ZZZ, ¿Qué te parece?

Para un proyecto espontáneo que se me ocurrió hacer, utilicé los íconos y pantallas que recomienda Apple para todos los sitios que requieran ser visualizados en sus teléfonos y tabletas. En mis tiempos mozos, [cuando comencé a jugar con web móvil][1] sólo existía 1 tamaño y 1 resolución. Años han pasado y a continuación está la lista completa si quieres tener todo cubierto: icons (resoluciones) y splash-screens (resoluciones y orientación).

¿Cansado de soportar IE? Te entiendo, pero aún hay clientes que piden que sus proyectos se vean en estos browsers antiguos. Frustraciones aparte, cuando escribes Javascript y usas console.log() para debuggear tu código en la consola del browser, es usual que éstas funcionalidades se quiebren en IE8-.