Hala, una vez más, Uniqlo se destapa con una pieza tontorrona pero que engancha y genera una experiencia de marca que ya quisieran muchas que tiran de soportes tradicionales. Y una vez más, el crack del amigo Yugo se marca una pieza en la línea de otras tantas como Uniqlo Grid.

En este caso se trata de Uniqlo Loop que, en resumen es, una manera de hacer blogging viral para vender camisetas con una propuesta de interacción que, al menos a nosotros, nos engancha desde el primer momento, desde la musiquilla hipnótica hasta el jugueteo con los módulos que componen el loop y que nos fusilan casi de modo subliminal con decenas de camisetas de la firma nipona…

He aquí nuestro legado… hala, ya somos un blog más abducido por Uniqlo.

Hala… a ver si superáis la plasticidad y ritmo de nuestro loop…

Editamos… no sabemos qué narices ha pasado pero ESTE NO ES NUESTRO LOOP… si copiamos y pegamos el script que sale en Uniqlo Loop nos sale este y no la belleza musical que habíamos creado…

Si lo queréis ver… a ver si está tras este enlace

Es un truco viejo pero que hasta hace poco no empecé a aplicar en mis proeyctos. Se trata de un fix para ahorrarse el <div style=”clear:both” />

La típica situación donde tenemos que usar un clear es cuando queremos posicionar un elemento debajo de uno o varios elementos posicionados con float. En la situación normal pondríamos el clear como siguiente elemento en el html, en plan.

<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”float:left” >Contenido alineado a la izq</div>
<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”clear:both”></div>
<p>Contenido que va debajo del grupo de divs anteriores</p>

Contenido que va debajo del grupo de divs anteriores

Con el clearfix, en cambio, tenemos que añadirle la clase .clearfix al último div de nuestro grupo posicionado en float.

<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”float:left” >Contenido alineado a la izq</div>
<div style=”float:left” class=”clearfix” >Contenido alineado a la izq</div>
<p>Contenido que va debajo del grupo de divs anteriores</p>

Y esta es la clase en particular que nos ayuda a conseguir este efecto.

.clearfix:after

{

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

/* End hide from IE-mac */

Resumiendo su funcionamiento: esta clase genera un elemento block sin visibilidad justo después del clearfix y a éste elemento le coloca el clear:both por nosotros.

Ya, pero ¿y si mi navegador del pasado no acepta el selector :after?

Suponiendo que estés hablando del ie6, tiene un corportamiento ajeno a las especificaciones en lo referente al modelo de caja y el flujo de float. Si un elemento contenedor tiene un height definido pero su contenido es mayor, el contenedor se ajusta a su contenido (y de paso revienta el flujo de float). Así el height:1% se asegura que en ie6 tengamos el mismo comportamiento.

Bueno, lo teneis explicado como toca en positioniseverything y por cierto, ya nadie usa ie Mac, así que podeis quitar el hack, que siempre queda feo.

Estaba a punto de realizar un review de la nueva versión del navegador de Microsoft cuando he encontrado un análisis de Andrés Nieto que muestra exactamente lo que estaba buscando, Primeras pruebas para Internet Explorer 8. El artículo se centra en el soporte de la especificación CCS 2.1, CSS 3 y en el consumo de memoria y rendimiento con javascript.

Pero supongo que lo que más interesa a algunos de nosotros es la nueva versión de la developer toolbar.

A primera vista tenemos un clon de firebug para internet explorer (viva!), observamos las pestañas de html, css y script. La pestaña html nos muestra el árbol HTML y se puede editar el contenido de los atributos de los elementos, se echa en falta el modo edición para poder editar el nodo completo. La pestaña CSS nos muestra los estilos importados en la página, sin edición otra vez.

Resumiendo, sólo podremos editar la css de los elementos que tengan un atributo style, y activar o desactivar el resto de propiedades en plan booleano.

Es más, la edición de propiedades CSS en el atributo style deja mucho que desear, por ejemplo al añadir al style la propiedad “border:solid 1px #FF0″ se transformará en esto:

Y si borramos el contenido del atributo, se borra el atributo también… En fin que si estábais pensando en desarrollar in-browser aún tendremos que esperar a las siguientes revisiones de este navegador. Y quién sabe, a lo mejor ayudando a los chicos de desarrollo del ie8 en un futuro tenemos un ieBug como dios manda.