Hace unos días se publicó oficialmente en un acto político de esos que tanto gustan… la web institucional de Alicante 2008-2009, puerto de salida de la Volvo Ocean Race. Una web que estamos desarrollando en PXL y que todavía está en desarrollo. Se ha presentado antes de acabar? sí… pero bueno, cosas de la política.
Lo que podéis ver ahora mismo online es información básica sobre el evento, la competición y los beneficios que reportará a la ciudad de Alicante. Ah… y si queréis pasar unos días entre barquitos y amantes de la vela podéis haceros voluntarios.
Como decimos, Alicante2008.com sigue en proceso de desarrollo, es decir… que la cosa no acaba aquí. Aún tenemos que pulir ciertos interactivos y aplicaciones que esperemos que se integren en la web y en el espíritu del evento a las mil maravillas.
Mientras, os dejamos con la noticia de la presentación del evento en Canal 9… ay… qué cosas. Mamá, mamá! que salimos en la tele!
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.
07-05-2008 
David 
la web institucional de Alicante 2008-2009, puerto de salida de la Volvo Ocean Race. Una web que estamos desarrollando en PXL y que todavía está en desarrollo. Se ha presentado antes de acabar? sí… pero bueno, cosas de la política.
