La propiedad resize

Quienes usan Chrome, ya lo veían pero, para quienes usan Firefox 4 es una novedad.

Seguramente habrán notado que los formularios como el de comentarios, poseen en la parte inferior derecha, un simbolito que nos permite cambiar el tamaño de ese formulario, arrastrando y soltando el puntero del ratón del mismo modo que usualmente redimensionamos cualquier otra cosa.

Esto, que es tan útil, no es otra cosa que la incorporación a los estilos por defecto que tienen ciertas etiquetas en estos navegadores, de una de las nuevas propiedades del CSS3 llamada resize que, si bien no está disponible en todos los navegadores, es más que interesante porque no está limitada a los formualrios sino que se la puede utilizar con otro tipo de etiqueta de bloque como un DIV siempre que esa etiqueta, además, posea una propiedad overflow, distinta de visible.

La propiedad resize puede tener uno de cuatro valores: none es el valor por defecto, both permite redimensionar en ambos sentidos y horizontal o vertical, sólo en uno de ellos.

Como las etiquetas TEXTAREA de los formularios tienen esa propeidad por defecto, si no quisieramos permitirlo, deberíamos indicarlo en una regla de estilo:

textarea { resize: none; }

Y por el contrario, si quisiéramos que otra etiqueta tuviera esa particularidad, deberíamos agregarla. Por ejemplo, estos tres DIVs tienen las mismas propiedades:

.demoresize {
  background-color: #000;
  border: 1px solid #333;
  color: #EEE;
  margin: 10px auto;
  overflow: hidden;
  padding: 10px;
  width: 175px;
  resize: VALOR;
}

y en cada uno de ellos, lo que varia es el valor de resize:

resize:both

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

resize:horizontal

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

resize:vertical

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

Como la altura no está definida, overflow:hidden; no tiene ningún efecto y sólo se agrega para usar resize pero, bien podría darle una altura y en ese caso, sería visible solo una parte y el resto, se desplegaría cuando un usuario lo deseara:

resize:both

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

La redimensión sólo tiene como límite los bordes del contenedor, en este caso, la redimensión horizontal está contenida por los bordes de la entrada en si misma pero, la vertical no tiene límites. Si quisiéramos dárselos, es decir, permitir que se redimensione sólo hasta cierto tamaño y no más, podríamos usar las porpiedades max-width y max-height, indicando en ellas, los valores corespondientes, lo mismo que los mínimos con las propiedades min-width y min-height:

max 300x300

Sed et egestas sapien? Donec interdum molestie eleifend. Donec lectus enim; posuere mollis consectetur et, lacinia vel enim. Nullam aliquet nisl non sapien mattis tristique! Praesent vulputate diam vitae justo commodo id feugiat urna dictum. Integer vitae eros ac orci rutrum accumsan at ac tellus. Donec id aliquet massa. Ut id dignissim leo. Aenean orci aliquam.