Это статья — небольшое исследование того, как рендерят браузеры стандартные веб-формы в разных операционных системах. Мы будем говорить именно о стандартных, дефолтных формах и не коснемся распространенных сейчас форм с png-подложками и сильно измененным CSS и JS.
Я вот люблю firefox (в моменты, когда он не тормозит), и поэтому ради примера сверстал такую форму. Нигде кроме firefox я её, допустим, не тестировал.
Как видно я выровнял все инпут-элементы по сетке, добавив несколько классов. Я изменил padding у селекта чтобы сравнять его высоту с другими полями. Так же немного увеличил ширину полей в правом ряду, чтобы подравнять их под статичный инпут загрузки файлов. HTML и CSS вышел вот такой:
Эта форма выглядит неплохо и по скриншоту вы наверное догадались, что я сделал его на windows 7, давайте посмотрим как ее отрендерят другие браузеры на этой же ОС.
Я провел две направляющие, чтобы увидеть разницу. Как видно на скриншоте chrome рисует более минималистичные поля и более мелкие чекбоксы и кнопки. Зато селект он отрисовал с другой кнопкой выбора и немного иным по высоте. Что касается поля загрузки файла, то оно уже кардинально отличается от других браузеров, и дальше мы увидим, что это некий webkit (chrome и safari) стандарт, с которым придется мириться.
Opera встала где-то между firefox и chrome, и отрисовала нам большинство полей как в chrome, но чекбоксы и селекты больше похожи на firefox версию. Поле загрузки и здесь самое вычурное и отличается от всего что мы видели раньше.
IE тоже рисует компромиссный вариант, он больше похож на firefox, но чекбоксы и селекты тут как в chrome версии. А поле загрузки тоже уникальное и не похоже ни на что.
Я не включил в список safari т.к. он почти не отличается от chrome. В IE ранних версий (6-7-8) формы рендарятся таким же способом, что и в 9 версии, однако в 6 и 7 будут свои проблемы связанные со старыми стандартами, но это статья не о них.
На виртуальной машине у меня установлена ubuntu 11.10, давайте посмотрим, как дела обстоят там:
Как видно на скриншоте, форма в firefox на ubuntu и та же форма на windows отличаются даже сильнее чем эта форма в разных браузерах на одной ОС. Это происходит из-за того что у firefox нет своих рендеров форм, она просто берет их из стандартных библиотек ОС на которой ее запускают. Абсолютно все элементы, отрисовались по другому нежели в windows, а поле загрузки файла просто сломало всю сетку.
Chome рендерит свои инпуты и не задействует стандартные для ОС. Но на ubuntu у него тоже сильные различия с windows версией. Совсем другие чекбоксы, селект, тексарея и кнопки. Но в целом это лучше чем у firefox.
Opera в ubuntu повела себя похоже на firefox, но отличия и тут почти во всех элементах.
Представить себе людей использующих под ubuntu safari или IE трудно, хотя, наверное, и такие тоже есть. Пусть они сами проверять отрисовку форм у себя, я этого делать не стал.
Если посмотреть эту же форму в Mac OS X Leopard, картина следующая:
Lion отобразил форму во всех браузерах максимально одинаково и сделал всем полям стандартное для себя оформление, но и тут есть отличия и главное, конечно, это поле загрузки, на webkit — оно просто другое. Остальное не так значительно, но если приглядеться разница есть.
Такие дела. И это всего на трех самых популярных системах, а есть еще solaris, bsd, куча версий windows, mac и сборок unix-систем. Нужно смириться что, если в вашем дизайне предусмотрены стандартные инпуты в формах (а это хороший тон), в разных ОС они будут отличаться и их нужно сверстать так, чтобы сетка формы не ломалась и не падала при разной отрисовке. Чтобы сетка была ровной, я советую не ставить перед любыми инпутами элементы со строгой и самое главное разной шириной т.к. вы не сможете идеально «в пиксель» подогнать их по линиям. Не стоит так же заключать форму в строго подогнанный и фиксированный по ней родительский блок, сделайте его пошире т.к. инпуты формы на некоторых ОС будут шире чем вы предполагайте.
Поле загрузки файла в современных дизайнах все чаще опускается и заменяется ссылкой, но и о нем нужно помнить т.к. в webkit отрисовывает его совсем по другому, нежели другие браузеры.
Я вот люблю 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 отрисовывает его совсем по другому, нежели другие браузеры.
