Consejo rápido: Cómo hacer que los elementos sean redimensionables con la propiedad resize de CSS

En el video de consejos rápidos de hoy, aprenderás a cambiar el tamaño de los elementos con CSS.

Hasta hace poco no me daba cuenta de que era posible; pensaba que solamente las áreas de texto podrían tener ese tirador para cambio de tamaño en la esquina. Resulta que puedes tener este pequeño tirador en prácticamente cualquier elemento de nivel de bloque que quieras, simplemente utilizando una propiedad en CSS llamada (redoble de tambores, por favor) resize.

Redimensionar todas las cosas (como textarea)

La propiedad resize de CSS

Si revisamos la definición en MDN, podemos ver que la propiedad resize admite cuatro valores de palabras clave principales:

• resize: both;
• resize: horizontal;
• resize: vertical;
• resize: none;

Estos valores determinan si el elemento en cuestión se puede cambiar de tamaño a lo largo del eje horizontal, el eje vertical, ambos o (de manera predeterminada) ninguno.

Esta propiedad únicamente se puede establecer para los elementos de nivel de bloque (no para los elementos en línea) y no se puede aplicar a elementos cuya propiedad overflow esté configurada como visible.

Aquí hay una demostración (no lo olvides, tendrás que cambiar la propiedad overflow a algo que no sea visible, de lo contrario, no verás ningún cambio):

Resize de CSS: puntos a tener en cuenta

• Observarás que el cambio de tamaño se detiene en un tamaño mínimo determinado; eso se debe a que ajustamos width y height. También podríamos haber utilizado min-width y min-height para lograr el mismo efecto y, naturalmente, max-width y max-height limitarán qué tan grande podemos hacer nuestro elemento.
• En un elemento textarea puedes configurar resize: none; y ya no será redimensionable.
• Puede tener elementos redimensionables dentro de elementos redimensionables.
• La propiedad Resize de CSS es compatible con todos los navegadores modernos; por lo debes sentirte cómodo para usarla ahora mismo.

Conclusión

Resize de CSS puede ser una propiedad útil para experimentar. Como se mencionó, la compatibilidad con los navegadores es sólida, por lo que puedes usarla ahora mismo. Por favor haznos saber para qué la utilizas, ¡ya que es bastante inusual!

Recursos:

• Propiedad resize de CSS en MDN
• Compatibilidad con navegadores