soy Kseso y esto EsCSS

La propiedad Resize en Css y un desplegable progresivo y persintente

La propiedad Resize en Css y un desplegable progresivo y persintente

·Por Kseso ✎ 1

La propeidad resize es una de esas viejas desconocidas redescubiertas recientemente.
Aparece por primera vez en 2002 y en el punto 9 del documento del consorcio "La interfaz básica del usuario" del 2.004 ya es marcada como "This section is normative". El último documento que la desarrolla es éste, y comparte sección con la propiedad overflow.
Fruto de ese desconocimiento y de otros factores es el escaso uso que se ha hecho de ella. Si exceptuamos la tendencia reciente de aplicarla a los textareas para impedir a los usuarios adaptar estos elementos a sus necesidades, la mayoría de las veces para impedir descuadres en páginas con déficitis de planteamientos y construcción. Pero esta es otra historia que hoy no toca analizar.
Centrémonos en la propiedad y su potencial con algún ejemplo de uso.

La propiedad Resize de Css

Dice de ella el W3c en el último documento publicado:

La propiedad Resize:
La propiedad resize permite al autor especificar si el tamaño de un elemento puede ser redimensionado por el usuario o no, y si lo es, a lo largo de qué eje o ejes puede modificarlo.

Valores admitidos:

none: Valor inicial o por defecto. El usuario no puede hacer más o menos grande el elemento.
both: Se permite variar el tamaño en ambos ejes: horizontal y vertical. Esto es, cambiar la anchura y la altura del elemento.
horizontal: Sólo permitido el redimensionado en el eje horizontal.
vertical: Lo mismo pero en la vertical.
inherit: hereda el valor de su ancestro.

Aplica a:

Todos los elementos con un valor de overflow distinto a visible.
Recuerda que overflow se puede declarar a los elementos a nivel de bloque y reemplazados.
Como overflow puede declararse por separado en cada eje (overflow-X | overflow-Y) resize se aplicará en el eje cuyo valor no sea "visible".

Los elementos contenidos en una caja con resize permitido verán afectadas sus propiedades que dependan del tamaño de su caja padre al redimensionarla.

Soporte de los navegadores a resize

Pese al tiempo que resize lleva entre nosotros, este es el soporte de los distintos navegadores a día de hoy según canIuse:

Propiedades amigas de resize

Además de ser obligado el uso de overflow, por decreto del consorcio, hay alguna otra que se debería tener en cuanta, como definir tamaños máximos y mínimos (max/min width/height) a las cajas con resize para evitar situaciones problemáticas.

No olvides declarar, aunque sea redundante, los cursores apropiados para indicar al usuario que el elemento tiene activada la propiedad resize y en qué dirección o eje.

Demos con resize

Un ejemplo sencillo del uso de resize para un desplegable con opciones persistentes.


El secreto o cómo hacer la magia

Fíjate que hay un resize en un textarea (class="elevator") oculto a la vista con opacity.
Es este elemento al aumentar o disminuir de tamaño el que hace crecer a su contenedor padre y dejar visible al resto de elementos (la lista de opciones).
Sencillo en su realización, imaginativo en la concepción y uso de la propiedad resize.

Sobre la misma base del anterior, pero desplegando hacia arriba:

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso