Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование свойства CSS изменения размера

21 октября 2018 | Опубликовано в css | Нет комментариев »

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

 

 


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

none Размер элемента не может быть изменен. Это значение по умолчанию для большинства элементов в большей части таблиц стилей браузеров.
horizontal Элемент может быть изменен пользователем, но только по горизонтали.
vertical Элемент может быть изменен пользователем, но только по вертикали.
both Элемент можно изменять и по горизонтали, и по вертикали.

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

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

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

textarea { resize: vertical; }

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

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

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

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

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




Оставить ответ


+ четыре = 9

Вставить изображение