Отображение веб-форм в разных ОС

Это статья — небольшое исследование того, как рендерят браузеры стандартные веб-формы в разных операционных системах. Мы будем говорить именно о стандартных, дефолтных формах и не коснемся распространенных сейчас форм с png-подложками и сильно измененным CSS и JS.


Я вот люблю firefox (в моменты, когда он не тормозит), и поэтому ради примера сверстал такую форму. Нигде кроме firefox я её, допустим, не тестировал.



Как видно я выровнял все инпут-элементы по сетке, добавив несколько классов. Я изменил padding у селекта чтобы сравнять его высоту с другими полями. Так же немного увеличил ширину полей в правом ряду, чтобы подравнять их под статичный инпут загрузки файлов. HTML и CSS вышел вот такой:

<div class="wrapper">
  <label for="1">Имя</label>
  <input type="text" id="1">
  <label for="2">Фамилия</label>
  <input type="text" id="2" class="mail">
  <label for="3" class="lbl-msg">Почта</label>
  <input type="text" id="3">		
  <label for="4">Город</label>
  <select id="4">
    <option value="1">Москва</option>
    <option value="2">Лондон</option>
    <option value="3">Париж</option>
  </select>	
  <label for="5" class="lbl-msg">Чекаем</label>
  <input type="checkbox" id="5">		
  <input type="checkbox" id="51">	
  <input type="checkbox" id="52">	
  <input type="checkbox" id="53">	
  <label for="6" class="lbl-dwl">Загрузим</label>		
  <input type="file" id="6">			
  <label for="7" class="lbl-msg">Сообщение</label>		
  <textarea id="7"></textarea>
  <input type="button" value="Я кнопка">
</div>

body { 
  font:16px "Trebuchet MS", Tahoma, Arial, serif; 
}
.wrapper { 
  float:left; 
  margin:50px 0 0 50px; 
  width:740px; 
}
.wrapper input { 
  display:block; 
  float:left; 
  width:200px; 
}
.wrapper input[type=checkbox] { 
  width:10px; 
  margin:6px 7px 0 0; 
}
.wrapper input[type=button] { 
  width:auto !important; 
  margin:20px 0 0 139px; 
}
.wrapper select { 
  display:block; 
  float:left; 
  width:213px; 
  padding:2px; 
}
.wrapper textarea { 
  display:block; 
  float:left; 
  width:553px; 
  height:70px; 
}
.wrapper label { 
  display:block; 
  text-align:right; 
  float:left; 
  width:100px; 
  margin:0 20px 20px; 
}
.lbl-msg { 
  clear:left; 
}
.lbl-dwl { 
  margin-left:146px !important; 
}
.mail { 
  width:207px !important; 
}

Эта форма выглядит неплохо и по скриншоту вы наверное догадались, что я сделал его на windows 7, давайте посмотрим как ее отрендерят другие браузеры на этой же ОС.



Я провел две направляющие, чтобы увидеть разницу. Как видно на скриншоте chrome рисует более минималистичные поля и более мелкие чекбоксы и кнопки. Зато селект он отрисовал с другой кнопкой выбора и немного иным по высоте. Что касается поля загрузки файла, то оно уже кардинально отличается от других браузеров, и дальше мы увидим, что это некий webkit (chrome и safari) стандарт, с которым придется мириться.

Opera встала где-то между firefox и chrome, и отрисовала нам большинство полей как в chrome, но чекбоксы и селекты больше похожи на firefox версию. Поле загрузки и здесь самое вычурное и отличается от всего что мы видели раньше.

IE тоже рисует компромиссный вариант, он больше похож на firefox, но чекбоксы и селекты тут как в chrome версии. А поле загрузки тоже уникальное и не похоже ни на что.

Я не включил в список safari т.к. он почти не отличается от chrome. В IE ранних версий (6-7-8) формы рендарятся таким же способом, что и в 9 версии, однако в 6 и 7 будут свои проблемы связанные со старыми стандартами, но это статья не о них.

Ubuntu

На виртуальной машине у меня установлена ubuntu 11.10, давайте посмотрим, как дела обстоят там:



Как видно на скриншоте, форма в firefox на ubuntu и та же форма на windows отличаются даже сильнее чем эта форма в разных браузерах на одной ОС. Это происходит из-за того что у firefox нет своих рендеров форм, она просто берет их из стандартных библиотек ОС на которой ее запускают. Абсолютно все элементы, отрисовались по другому нежели в windows, а поле загрузки файла просто сломало всю сетку.

Chome рендерит свои инпуты и не задействует стандартные для ОС. Но на ubuntu у него тоже сильные различия с windows версией. Совсем другие чекбоксы, селект, тексарея и кнопки. Но в целом это лучше чем у firefox.

Opera в ubuntu повела себя похоже на firefox, но отличия и тут почти во всех элементах.

Представить себе людей использующих под ubuntu safari или IE трудно, хотя, наверное, и такие тоже есть. Пусть они сами проверять отрисовку форм у себя, я этого делать не стал.

Mac OS X Leopard

Если посмотреть эту же форму в Mac OS X Leopard, картина следующая:



Lion отобразил форму во всех браузерах максимально одинаково и сделал всем полям стандартное для себя оформление, но и тут есть отличия и главное, конечно, это поле загрузки, на webkit — оно просто другое. Остальное не так значительно, но если приглядеться разница есть.

Такие дела. И это всего на трех самых популярных системах, а есть еще solaris, bsd, куча версий windows, mac и сборок unix-систем. Нужно смириться что, если в вашем дизайне предусмотрены стандартные инпуты в формах (а это хороший тон), в разных ОС они будут отличаться и их нужно сверстать так, чтобы сетка формы не ломалась и не падала при разной отрисовке. Чтобы сетка была ровной, я советую не ставить перед любыми инпутами элементы со строгой и самое главное разной шириной т.к. вы не сможете идеально «в пиксель» подогнать их по линиям. Не стоит так же заключать форму в строго подогнанный и фиксированный по ней родительский блок, сделайте его пошире т.к. инпуты формы на некоторых ОС будут шире чем вы предполагайте.

Поле загрузки файла в современных дизайнах все чаще опускается и заменяется ссылкой, но и о нем нужно помнить т.к. в webkit отрисовывает его совсем по другому, нежели другие браузеры.