Nathan Smith, автор 960gs также создал библиотеку для приведения внешнего вида форм к единому стандарту в разных браузерах и под разными операционными системами. Данная статья представляет перевод статьи Натана, которую он опубликовал в своем блоге, чтобы подробнее рассказать о принципах Formalize. Мы ее перевели для Вас. Кроме того, хотим сказать, что Натан разрешил нам создать русские копии его сайтов своих технологий и мы рады Вам их представить: 960gs, Formalize, Adapt Js
Введение
Мы, дизайнеры. Нам нужно контролировать как браузер отобразит наш труд. Конечно, разные движки не всегда согласуются во всем, но, как правило, иногда мы можем найти способы смягчить различия посредством обходных решений.
Безусловно, одними из проблемных элементов при рендеринге браузером являются формы. Существуют два заметно отличающихся направления мысли относительно необходимости стилизации элементов формы. В течение очень долгого времени существовали люди с обеих сторон этого пресловутого барьера, и ни одна из этих групп не была особо прагматичной
Некоторые дизайнеры пытаются привести внешний вид элементов формы в соответствии с дизайном сайта. Другие бы попросили вас оставить их в полном покое, потому что они придерживаются родного стиля данной операционной системы
Это все хорошо, за исключением того, что на проблемы с браузером еще и накладываются проблемы операционной системы. Некоторые браузеры используют моноширинный шрифт для текстовой области, а OS X пренебрегает стилем области текста так же, как и элементами ввода текста. Так что же дизайнеру делать? Это загадка, определенно
Мое решение
Я хочу в какой-то степени получить контроль над элементами формы, не изменяя их настолько радикально, чтобы пользователи других операционных систем не удивились резко нестандартному виду. Таким образом, мои поиски заключаются в том, чтобы найти золотую середину, где браузеры смогли бы согласовываться и позволили мне сохранить свой рассудок. В результате я просто ссылаюсь на то, как формализовать CSS
Я попытался преодолеть разрыв между разными браузерами и OS, принимая лучшие идеи каждого и реализуя, что возможно во всех направлениях. В целом это означает, что большинство текстовых элементов формы имеют небольшую вставку, и все кнопки выглядят схоже, в том числе тег кнопки (button)
Также я добавил немного изящества. Все браузеры, которые поддерживают box-shadow — даже на Windows и Linux — сейчас имеют голубые :focus границы а-ля OS X. Кроме того, с помощью JQuery я добавил поддержку для HTML5 placeholder и атрибуты автофокуса для браузеров, которые еще не оснащены этим исходно
Я оставил нетронутыми типы ввода диапазона и файла. Насколько я могу судить, они парии элементов формы — несовместимы и упорны к стилизации. Для тех браузеров, которые фактически поддерживают диапазон — это слайдер, но для тех, которые не поддерживают — это текстовое поле. Я оставил их в покое, учитывая, что когда все браузеры, в конечном счете, обработают диапазон, они сделают так, как своего рода слайдер
Сделайте это своим
Примечание: На демо-страницах я не применял какой-либо ширины, чтобы вы могли видеть как браузеры изначально обработают различные элементы формы. Например, некоторые элементы стилей Оперы (url, email, дата-время, дата-время местные) значительно шире, чем другие. Это причуда, которой я не видел в других браузерах
Я включил helper классов в начале файла formalize.css, который можно сопроводить добавлением ширины набора к вводу и/или выбору тегов, таких как: input_tiny, input_small, input_medium, input_large, и input_full (100% ширины). Свободно изменяйте их или удаляйте полностью. Они просто предназначены как предложения, чтобы показать как вы можете изменить размеры элементов при необходимости
В отличие от такой платформы, как 960 Grid System — которая предназначена для записи против, но не усовершенствована — вообще, formalize существует только как предложение некоторых рекомендаций о том, как вы могли бы подойти к стилизации формы. Ничто не установлено в камне. Если вы хотите адаптировать это для более однозначного соответствия вашим потребностям, идите прямо вперед
Webkit
Я спорил о том, оставить ли <select> один, так как я предпочитаю как это выглядит в WebKit (Safari + Chrome) на OS X. Однако, это «третий лишний», так сказать, и я пошел вперед и стилизовал его, чтобы он выглядел совместимым во всех браузерах. Не знаю, насколько это важно, так он выглядел бы в Safari на Windows в любом случае
Мне удалось получить управление пререканиями поискового ввода под контролем в WebKit. Это значит, что Safari и Chrome скорее предоставляют поиск так же, как ввод текста, но вы все равно получаете недавний список поиска, и clear/reset (очищаете/сбрасываете) x функциональность. Если вам любопытно, эти волшебные строки CSS отменяют встроенные функции округления уголков у WebKit:
IE6 & IE7
Я даже зашел так далеко, что добавил дополнительные классы через JavaScript, как приспособления стилизации для IE6, так как он не признает селекторы атрибутов как input [type=text]. Как ни странно, это связано с дублированием стилей, чем с укладкой имен классов IE6, потому что присутствие атрибутов селектора в разделенном запятыми списке элементов приводит к полному игнорированию IE6 правил стиля. Например:
Излишне говорить, если у вас нет необходимости поддерживать IE6, спокойно удаляйте весь раздел в formalize.css и все, что к нему относится, так как все эти стили дублируются только для одного этого браузера. В самом деле, вы должны отказаться от IE6 в любом случае
Дополнительно IE6 и IE7 имеют искусственную box-sizing поддержку, добавленную для <textarea> и, поэтому они могут пойти на 100% ширины и по-прежнему иметь margin и padding. Вы можете прочитать больше о box-sizing на CSS Tricks
Спасибо
Ряд людей, помогли мне сделать Formalize такой как Вы ее знаете. А именно, Энтони Шорту за подсказку, что поиск в WebKit действительно можно преодолеть, и Крису Койеру за намек о том, как задать цвет текста placeholder. Также благодарю Джонатана Снука за скриншот экрана для меня в IE6 на Windows XP (просто, чтобы дважды проверить IETester), и Джона Сэддингтона за снимок на его iPhone 4
Скриншоты
Если вам интересно как все это выглядит в различных браузерах и операционных системах, посмотрите на приложенные скриншоты. Я должен сказать, что в то время как Opera превосходит всех по сырой функциональности, она также является победителем в спортивных состязаниях самых уродливых видов стилей для некоторых из более новых HTML5 форм элементов, худший правонарушитель из существующих date-time.
