Это статья — небольшое исследование того, как рендерят браузеры стандартные веб-формы в разных операционных системах. Мы будем говорить именно о стандартных, дефолтных формах и не коснемся распространенных сейчас форм с 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 отрисовывает его совсем по другому, нежели другие браузеры.
