пятница, 20 января 2012 г.

Кроссбраузерное отображение textarea

У textarea есть два замечательных атрибута cols и rows. С их помощью можно выставлять размеры textarea непосредственно в html и не прибегать к стилям. Но, по непонятным причинам, браузеры по разному вычисляют пиксельный эквивалент этих величин.

Конечно, можно написать отдельный класс для  textarea и везде его использовать. Например так:
  1. .textarea {
  2.     width: 200px;
  3. }
Но что делать если видов  textarea достаточно много и все они разной ширины? К тому же, есть ситуации, когда нет возможности каждому отдельному полю назначать отдельный класс. У меня был именно такой случай. Разработанные шаблоны позволяли менять исключительно количество столбцов и строчек textarea. 
Поэтому был придуман следующий способ обойти разное отображение textarea в разных браузерах через использование CSS3
  1. textarea[cols=30] {
  2.     width: 300px;
  3. }
  4. textarea[cols=40] {
  5.     width: 400px;
  6. }
Пиксельный эквивалент колонки подбирается в соответствии с размерами шрифта и его семейством и потом умножается на количество столбиков.