El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad.

Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML:

<strong style="cursor: help;">¡Ayuda!</strong>

Lamentablemente la visualización de cada tipo de cursor depende del sistema operativo del usuario, y la capacidad de visualizarlo depende del browser que esté utilizando.

A continuación nombro todas las variedades y al final una página de ejemplo con todos ellos aplicados para que tengan al cursor considerado en su próximo proyecto:

CSS2:

cursor: auto;
cursor: inherit;
cursor: crosshair;
cursor: default;
cursor: help;
cursor: move;
cursor: pointer;
cursor: progress;
cursor: text;
cursor: wait;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;

CSS3 (funcionan en los browsers modernos (IE9+, FF 3.5+, Chrome, Safari, Opera 9+):

cursor: none;
cursor: context-menu;
cursor: cell;
cursor: vertical-text;
cursor: alias;
cursor: copy;
cursor: no-drop;
cursor: not-allowed;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
cursor: col-resize;
cursor: row-resize;
cursor: all-scroll;

Propietarios (Firefox y Chrome/Safari):

cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;

Tu propio cursor:

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png), default;

* para mejor fallback después del url() utiliza algunos de los cursores CSS2
* Para Firefox y Chrome/Safari utiliza un PNG transparente.
* IE require que sea un archive .cur
* Opera no lo soporta

Ver cursores

Link:

• Introducing the New Cursor Styles in CSS3

Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores?

Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4.

Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores?

La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante CSS3 media queries. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución:

<link rel="stylesheet" type="text/css" href="css/normal.css">
<link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" >

El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo:

normal.css

#logo {
   background-image: url('images/logo.png');
   background-size: 100px 100px;
   background-repeat: no-repeat;
}

retina.css

#logo {
   background-image: url('images/logo_hi.png');
}

Ver ejemplo

Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados:

Como el navegador va a leer sí o sí normal.css, y por gracia del media="only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código.

Mediante JS

Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción:

<script type="text/javascript">
   if (window.devicePixelRatio >= 2) {
      document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />");
   } else {
      document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");
</script>

Links:

• CSS Image Replacement for iPhone 4 High-DPI Retina Display
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries
• Media Queries by W3C

Selecciona tu idioma / Select your language:

• English
• Español

Outlinr ← click&drag

How to install a bookmarklet / Cómo instalar un bookmarklet

La implementación de columnas múltiples en CSS no es algo nuevo, fue propuesto a la W3C en el 2001 y ya estaba implementado en Webkit desde sus inicios, en Firefox desde la versión 1.5 y se podía utilizar fácilmente desde 2006. Pero con el advenimiento de CSS3 como un estándar cada vez más fuerte, y con una presión bastante notoria por parte de los desarrolladores para implementar sus beneficios en sus proyectos web se ha hecho cada vez más viable su uso. Además, existen fallbacks que permiten que se pueda utilizar en navegadores más antiguos o que no tengan esta capacidad sin mayores problemas.

Por suerte su implementación es bastante simple. Dado el siguiente HTML con un bloque de texto:

<div id="columna">
   <p>International Bitterness Units (IBU), Caramel malt, Pitching Bottom-fermenting Yeast. Double bock/dopplebock; Reboboam Mash Tart Lagering Grist Caramel malt Bittering Hops...</p>
</div>

Para separarlo en 2 columnas basta con utilizar la propiedad column-count: 2;

#columna {
   -webkit-column-count: 2;
   -moz-column-count: 2;
   column-count: 2;
}

Ver Ejemplo 1

La lista completa de propiedades:

column-count:

la cantidad de columnas.

column-width:

define el ancho de las columnas, caso no quieras que el browser calcule de acuerdo al modelo de caja.

column-gap:

el espacio entre cada columna, en la unidad de medida que estimes.

column-rule:

borde (separación) entre cada colina, por ejemplo una línea recta.

Ver Ejemplo 2

Ahora, qué hacemos con los browsers que no tienen la capacidad de interpretar esta úil propiedad? Según caniuse.com, ningún IE lo soporta en la actualidad, quizás IE10 lo haga. Afortunadamente JavaScript viene al rescate con un pequeño script que incluiremos luego del estilo, el que agregará el soporte de column-count y demases.

Ver Ejemplo 3

Como ven, no hay razón para no comenzar a utilizar las columnas múltiples.

Links:

• JavaScript implementation for CSS3 Multi Column
• Caniuse.com: Multi Column browser support
• CSS Multi-column Layout Module W3C Candidate Recommendation 12 April 2011

Dando vida al tiempo / Giving life to time

Selecciona tu idioma / Select your language:

• English
• Español

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

<script type="text/javascript">
   $(function(){
      $().timelinr();
   });
</script>

<script type="text/javascript"> 
   $(function(){
      $().timelinr({
         orientation: 'horizontal',
         // value: horizontal | vertical, default to horizontal
         containerDiv: '#timeline',
         // value: any HTML tag or #id, default to #timeline
         datesDiv: '#dates',
         // value: any HTML tag or #id, default to #dates
         datesSelectedClass: 'selected',
         // value: any class, default to selected
         datesSpeed: 'normal',
         // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
         issuesDiv : '#issues',
         // value: any HTML tag or #id, default to #issues
         issuesSelectedClass: 'selected',
         // value: any class, default to selected
         issuesSpeed: 'fast',
         // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
         issuesTransparency: 0.2,
         // value: integer between 0 and 1 (recommended), default to 0.2
         issuesTransparencySpeed: 500,
         // value: integer between 100 and 1000 (recommended), default to 500 (normal)
         prevButton: '#prev',
         // value: any HTML tag or #id, default to #prev
         nextButton: '#next',
         // value: any HTML tag or #id, default to #next
         arrowKeys: 'false',
         // value: true/false, default to false
         startAt: 1,
         // value: integer, default to 1 (first)
         autoPlay: 'false',
         // value: true | false, default to false
         autoPlayDirection: 'forward',
         // value: forward | backward, default to forward
         autoPlayPause: 2000
         // value: integer (1000 = 1 seg), default to 2000 (2segs)
      });
   });
</script>

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- optional -->
   <a href="#" id="prev">-</a> <!-- optional -->
</div>

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

<script type="text/javascript"> 
   $(function(){
      $().timelinr();
   });
</script>

<script type="text/javascript"> 
   $(function(){
      $().timelinr({
         orientation: 'horizontal',
         // valores: horizontal | vertical, por defecto horizontal
         containerDiv: '#timeline',
         // valores: cualquier etiqueta HTML ó #id, por defecto #timeline
         datesDiv: '#dates',
         // valores: cualquier etiqueta HTML ó #id, por defecto #dates
         datesSelectedClass: 'selected',
         // valores: cualquier clase, por defecto selected
         datesSpeed: 'normal',
         // valores: número entre 100 y 1000 (recomendado) ó 'slow', 'normal', 'fast', por defecto normal
         issuesDiv : '#issues',
         // valores: cualquier etiqueta HTML ó #id, por defecto #issues
         issuesSelectedClass: 'selected',
         // valores: cualquier clase, por defecto selected
         issuesSpeed: 'fast',
         // valores: número entre 100 y 1000 (recomendado)ó 'slow', 'normal', 'fast', por defecto fast
         issuesTransparency: 0.2,
         // valores: número entre 0 y 1 (recomendado), por defecto 0.2
         issuesTransparencySpeed: 500,
         // valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal)
         prevButton: '#prev',
         // valores: cualquier etiqueta HTML ó #id, por defecto #prev
         nextButton: '#next',
         // valores: cualquier etiqueta HTML ó #id, por defecto #next
         arrowKeys: 'false',
         // valores: true/false, por defecto false
         startAt: 1,
         // valor: número entre 1 y el máximo de elementos, por defecto 1 (primero)
         autoPlay: 'false',
         // valor: true | false, por defecto false
         autoPlayDirection: 'forward',
         // valor: forward | backward, por defecto forward
         autoPlayPause: 2000
         // valor: número (1000 = 1 seg), por defecto 2000 (2segs)
      })
   });
</script>

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
<a href="#" id="next">+</a> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>

Demo Horizontal

Demo Vertical

Demo Autoplay

Download/Bajar Plugin 0.9.5 + Demos

Copyright 2011, CSSLab.cl – Free under the MIT license.

Cuando un navegador comienza a parsear una página, comienza a leer desde el encabezado, claro. Si la respuesta del encabezado del content-type especifica un atributo charset, esos bytes pueden ser interpretados inmediatamente como texto utilizando el encoding determinado. Sin embargo, si una declaración charset no está presente, el browser comienza a escanear los bytes de de respuesta del cuerpo, buscando por algún marcador unicode ó algún elemento dentro del meta http-equiv que especifique el charset. Cuando lo encuentra el parser vuelve a leer el documento para asegurarse que lo anterior sea leído correctamente. Ahora, si una declaración de charset no está definido, el browser está obligado a autodetectar el encoding dependiendo del contenido, lo que puede provocar errores de caracteres o en la página misma.

Luego, son leídos el título, favicon y los estilos (<link>) los que deben estar en concordancia con el charset definido anteriormente.

Finalmente, el orden ideal propuesto por la mayoría de los navegadores modernos es el siguiente:

<doctype> 
<html> 
      <head> 
         <meta http-equiv content-type charset> 
         <title>
         <link rel="alternate" />
         <link rel="shortcut icon" />
         <link rel="stylesheet" type="text/css" />

Parece obvio, pero no muchas veces se cumple.

No incluí <script></script> intencionalmente ya que existen escuelas que dicen que es mejor incluirlos abajo del código de tu página, antes del </body>, lo que no valida en el código HTML pero acelera la carga de los elementos del DOM y deja para el final la carga de los scripts. Mejor lo dejo a criterio de cada desarrollador.

Links:

• Best Practice: Get your HEAD in order

En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas.

* He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando

Transiciones 4+ & Mobile11+11+5+

La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando.

Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration.

En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function:

Ver ejemplo 1

En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo através de la propiedad transition-duration:

Ver ejemplo 2

Transformaciones 3D 4+ & Mobile11+

Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframe, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto:

Un keyframe define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del browser interpolará los estilos definidos entre esos keyframes.

Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento:

@-webkit-keyframes girando {
  from { -webkit-transform: rotateY(0deg);    }
  to   { -webkit-transform: rotateY(-360deg); }
}

Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relacion al contenedor que determinemos ahora:

#contenedor {
   margin: 30px auto;
   -webkit-perspective: 600px;
}

Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).

Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:

#girando {
   -webkit-animation-name: girando;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 3s;
   -webkit-transform-style: preserve-3d;
}

Ver ejemplo 3

Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y text-shadow:

Ver ejemplo 4

Interesante es lo que puedes lograr agregando la propiedad:

-webkit-backface-visibility: hidden;

Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML:

Ver ejemplo 4.1

Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes:

@-webkit-keyframes girando {
   from,20% 	{ -webkit-transform: rotateY(0deg);   }
   30%,40%  	{ -webkit-transform: rotateY(90deg);  }
   50%,60%  	{ -webkit-transform: rotateY(180deg); }
   70%,80% 	{ -webkit-transform: rotateY(270deg); }
   90%,to	{ -webkit-transform: rotateY(360deg); } 
}

Ver ejemplo 5

Y para el final, una integración del cubo rotundo anterior con vídeos através de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari):

Ver ejemplo 6

Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.

Links:

• 52framework
• SproutCore
• Jo
• Popcorn.js
• Gravity
• LimeJS

La condición dice:

Si quieres poner una imagen como fondo del <body> y posicionarla abajo de la ventana del browser (background-position: bottom) y el contenido de tu sitio no llega hasta el fondo de la ventana, la imagen de fondo llegará sólo hasta donde llegue el contenido.

Ver ejemplo 1

Para solucionarlo, basta con definir:

html {
   height: 100%;
}

Ver ejemplo 2

Ahora, esta solución es útil cuando sabes que el contenido es y será menor al alto de la ventana; si tu contenido es dinámico es mejor que utilices min-height:

html {
   min-height: 100%;
}

Ver ejemplo 3

Gracias a inyaka por hacerlo notar.