Одно из неособо известных свойств CSS3, свойство изменения размера, действует именно так, как следует из его названия: позволяет пользователю изменить размер почти любого элемента HTML, к которому оно применяется. Это свойство не делает содержимое больше или меньше, масштаб содержимого не меняется, если содержимое не влазит в элемент, то может появиться прокрутка.

У свойства изменения размера может быть одно из четырех значений, не считая значения наследования:

Это свойство не применяется к блочным элементам, у которых свойству переполнения задано значение видимое, а также к изображениям.

Первый пример использования свойства изменения размера обычно неудобен в использовании, но полезен при демонстрации возможностей свойства: к блоку с содержимым применяется свойство изменения размера со значением оба. В результате получаем следующее:

Второй пример полезней: браузеры, поддерживающие свойство изменения размера, применяют его к элементам поля ввода текста по умолчанию. Хотя это хорошая идея — пользователю нужно иметь возможность изменить размер поля ввода текста, чтобы иметь достаточно места для того, что он вписывает, — неограниченное изменение размера может испортить дизайн веб-страницы. В большинстве ситуаций лучше задать правило CSS, ограничивающее изменение размера поля ввода текста только одним направлением, следующим образом:

textarea { resize: vertical; }

Вышеприведенная запись также присутствует в рекомендуемой нами таблице стилей для сброса для кода CSS.

На момент перевода этого урока поддержка свойства CSS3 изменения размера присутствует во всех последних и многих устаревших версиях браузеров Firefox, Chrome, Opera и Safari, и не поддерживается многими мобильными браузерами, а также браузерами Internet Explorer и Edge.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование синтаксиса селекторов CSS
• Использование универсального селектора
• Использование нового способа центрирования