⑥ Изменение размера блоков: свойство resize

Продолжим изучение темы CSS3 - UI. Если пропустили прошлые статьи, то вот ссылки на них:

Поддержка браузерами

IE: —
Edge: —
Firefox: 5
Chrome: 4
Safari: 4
Opera: 15
iOS Safari: —
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5

Свойство resize позволяет указать, может ли пользователь изменять размер элемента, и если да, то вдоль какой оси/осей. Свойство применяется к элементам, чьё вычисленное значение overflow отличается от visible.

Если для элемента установлено изменение размеров, в правом нижнем углу появляется треугольник, с помощью которого элемент можно растягивать в обеих направлениях. Уменьшение первоначальных размеров элемента не предусмотрено.

Браузер должен позволять пользователю изменять размер элемента без каких-либо других ограничений, кроме ограничений, накладываемых свойствами min-width, max-width, min-height и max-height.

Свойство не наследуется.

resize

Значения:

none - Браузер не предоставляет механизм изменения размера элемента пользователем. Значение по умолчанию.
both - Браузер представляет механизм двунаправленного изменения размера, позволяющий пользователю регулировать как высоту, так и ширину элемента.
horizontal - Браузер представляет однонаправленный горизонтальный механизм изменения размера, позволяющий пользователю регулировать только ширину элемента.
vertical - Браузер представляет однонаправленный вертикальный механизм изменения размера, позволяющий пользователю регулировать только высоту элемента.
inherit - Наследует свойство от родительского элемента.
initial - Устанавливает это свойство в значение по умолчанию.

Синтаксис

CSS

resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
resize: inherit;
resize: initial;

Пример

📷 ФИГУРА 1. СВОЙСТВО RESIZE

Продолжение в следующей статье!