Resize для textarea в Safari и Chrome
Дата публикации: 29.04.2010
Задача
Отключить посетителю возможность изменять размеры 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 на странице.