aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Desde SitePoint nos traen dos propiedades ocultas de Firefox 3. Dos más a añadir a las que ya conocemos y que nos gustan tanto.

1) Soft hyphens

En los navegadores actuales, podemos tener problemas con los tamaños de los elementos y el texto que tenga dentro. Si una palabra es demasiado larga, no ajusta correctamente el tamaño del elemento al valor que le hemos indicado.

<div style="width: 10em; border: 1px solid red;"> 
	  Supercalifragilisticexpialidocious 
</div>

Ahora con la nueva versión, tenemos la propiedad soft hyphens, que se encarga de acortarnos la palabra en al tamaño que le indicamos al elemento contenedor.

<div style="width: 10em; border: 1px solid red;"> 
	  Supercalifragilistic&shy;expialidocious 
</div>

2) Inline Block

Otro problema que tenemos con los navegadores actuales, es el problema de posicionamiento de elementos de inline.

//HTML
<ul class="gallery"> 
  <li> 
    <div class="caption">A short caption</div> 
    <div class="thumb"><img src="thumb1.jpg"/></div> 
  </li> 
  <li> 
  	<div class="caption">A short caption</div> 
  	<div class="thumb"><img src="thumb2.jpg"/></div> 
	</li> 
</ul> 
//CSS
.gallery li { 
  float: left; 
  width: 100px; 
}

Con la nueva versión y usando la propiedad inline-block, podremos solucionar este problema fácilmente.

//HTML
<ul class="gallery"> 
	  <li> 
     <div class="caption">A short caption</div> 
	    <div class="thumb"><img src="thumb1.jpg"/></div> 
	  </li><li> 
	    <div class="caption">A short caption</div> 
	    <div class="thumb"><img src="thumb2.jpg"/></div> 
	  </li><li> 
	  … 
	</ul> 
//CSS
.gallery li { 
	  display: inline-block; 
	  width: 100px; 
	} 
	  
	/* In an IE-only style sheet */ 
	.gallery li { 
	  display: inline; 
	}

Con vertical-align, podremos elegir hacia donde se ha de alinear (verticalmente) el conjunto de elementos.