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­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.
3 comentarios, 1 referencias
+
#