Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Проблема ресайза textarea для браузеров на движке webkit

Раздел: 

В статье рассказывается о возможности в новых браузерах устанавливать размер текстового поля самим пользователем. А также описан способ, как отключить эту возможность.

проблемы ресайза продвинутых браузеров

Благодаря умным разработчикам продвинутых браузеров, работающим на движке webkit, у пользователей появилась возможность устанавливать собственный размер для текстового поля (textarea). Ниже показан маркер, потянув мышью за который можно изменять размеры полей:

маркер для ресайза

А если вы читаете эту статью через нужный браузер, то у вас прямо сейчас есть возможность попрактиковаться в изменении размеров поля. Ниже для этого специально установлено текстовое поле.

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

Однако ничего не было предпринято для отмены пользовательской возможности управлять ресайзом. Из-за этого может возникнуть такая ситуация, когда границы отведенного поля будут изменены и текст поля будет наплывать на соседние блоки.

Решение, как обычно, гениально и просто. Естественно, предложение вернуться к прошлому дизайну не принимается. Нужно двигаться вперед. Я предлагаю разрешить эту проблему тем же путем, по которому она возникла. Необходимо для всех тегов textarea прописать свойство resize со значением none, что в свою очередь отменит это свойство. Вот такую строку необходимо внести в файл CSS

CSS

textarea{
	resize:none;
}

Теперь следует пояснить в чем гениальность. Может это прозвучало как легкое преувеличение, но не может не тешить тот факт, что свойство будет воспринято только браузерами Webkit, остальные же программы, которые никаких проблем с ресайзом не создают, просто проигнорируют эту строчку с кодом.

В каких браузерах работает?

6.0+ 4.0+ 9.5+ 3.0+ 2.0+ - -

Вывод

В завершении хочется отметить, что наилучшее решения всегда оказывается очень простым. Не следует искать изощрённых способов, чтобы отменить пользовательский ресайз браузеров Webkit, следует просто обратиться к средствам CSS.