Resize для textarea в Safari и Chrome

Задача

Отключить посетителю возможность изменять размеры textarea в Safari и Chrome.

Теория

Некоторые продвинутые браузеры, использующие движок webkit позволяют изменять размеры textarea растягивая его за специальный маркер:

Угол textarea в Safari или Chrome

Возможность замечательная. Если данная страница открыта одним из этих браузеров — можно посмотреть на живом примере:

Заодно обрати внимание, что поле можно легко растянуть и за пределы колонки с текстом. По идее посетитель растянет поле, если ему так удобнее. Конечно если в дело не вмешается Дизайнер. Как всегда он лучше всех знает, как пользователю будет удобнее и, нисколько не смущаясь, уверенными движениями мыши меняет в макете привычный вид контроллов, на что-нибудь гениальное:

И тут webkit браузеры подкладывают ему неплохую мину. Ведь поле по-прежнему можно растянуть!

Поскольку предложение не менять привычный вид контроллов скорее всего будет воспринято как шутка, будем искать другие пути. Вспомнив, что «наши недостатки являются продолжением наших достоинств» и «клин клином вышибают» будем побеждать webkit браузеры их же методами. Воспользуемся тем, что в них частично реализована поддержка CSS3 в том числе и свойство resize.

textarea{
	resize:none;
}

Прием очень прост. Webkit браузеры это свойство поймут и запретят ресайз. Остальные — просто пропустят. Voila, как говорят французы. Мораль — изучайте новые стандарты! Перемены не за горами.

Демо пример. Проверено в:

• IE 6-8
• Firefox 2-3.5
• Opera 9.5-10
• Safari 3
• Chrome 4

Вывод

С помощью CSS3 свойства resize можно успешно бороться с webkit браузерами Safari и Chrome, запрещая пользователю изменять размеры textarea на странице.

Материал

• W3C :: CSS3 "resize" property