Xiper

Resize для textarea в Safari и Chrome

Автор: Александр Головко Дата публикации:

Задача

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

Теория

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

уголок textarea Угол textarea в Safari или Chrome

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

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

супер textarea

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

упс! в 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