Contenido

2 propiedades ocultas de Firefox 3

23 May

+ 4

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>

shy-none

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>

shy-ok

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; 
}

cssgallery-float

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; 
	}

cssgallery-inlineblock-bottom

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

cssgallery-inlineblock-top

  • Muy bien por el soft hyphens.. ya hacía falta en la web algo así..

    Al respecto de la segunda… pues no lo llamaría tanto una ‘propiedad oculta’, sino más bien ‘Soporte CSS por fin adecuado’..

    Saludos!

  • Mira tú que casualidad que llevamos 3 ó 4 días peleándonos con CSS para conseguir eso del ‘soft hyphens’.

    ¿No hay otra forma de hacerlo sin tener que recurrir a un word-wrap en PHP?

  • Sobre el Inline-block: recientemente tuve ese problema, con este metodo ya está resuelto el firefox 3, pero.. como lograrlo en el restode navegadores ??
    Recuerda, que muy a nuestro pesar, el 50% de los internautas que nos visitan usan IE6.
    Un saludo

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.