Progressive enhancement на примере формы входа
Progressive enhancement на примере формы входа
Progressive enhancement, а по-русски прогрессивное улучшение — это хороший подход к построению клиентских веб-интерфейсов. Интерфейсы, созданные в соответствии с ним, получаются просто бронебойными, работают в любых браузерах.
В этом демонстрационном курсе мы создадим и оформим простую форму входа, следуя заветам progressive enhancement. Вам нужно только нажимать кнопку ▶ ︎и смотреть на код и результат.
Первый этап: разметка и смысл
На первом этапе создания веб-интерфейса по progressive enhancement производится HTML-разметка. На этом этапе важны только смысл и логика. Никакого оформления, а только корректно размеченный документ.
Раз мы делаем форму, то и разметим её с помощью HTML. Создадим форму, пару полей и кнопку отправки. Код формы выделен в редакторе. А в мини браузере она такая, какая есть. Даже в самом простом браузере она не будет выглядеть хуже. Но самое главное, что это рабочая форма.
Подписи к полям
Хорошей практикой при разметке форм является добавление подписей к полям с помощью элемента label. Причем нужно правильно связать подписи и сами поля: атрибут for подписи должен совпадать с атрибутом id соответствующего поля.
Теперь при щелчке на подпись курсор помещается в нужное поле, попробуйте сами. Очень удобно! Но до сих пор некоторые верстальщики пренебрегают этой возможностью.
HTML-разметка формы готова, переходим к следующему этапу.
Второй этап: оформление
На втором этапе документ оформляется с помощью CSS. Можно задать размеры элементов, отступы, параметры шрифта, фоны и так далее. Главная задача — получить хорошо выглядящий документ.
Как вы заметили, редактор переключился на вкладку CSS. Вы всегда можете переключиться обратно на вкладку HTML, чтобы посмотреть код разметки.
Начнем постепенно оформлять интерфейс.
Начнём с формы
Для начала зададим нашей форме:
- ширину;
- внешние отступы;
- внутренние отступы;
- цвет фона.
Оформим подписи полей
Сделаем так, чтобы подписи полей отображались как блочный элемент, задав им display:block;. Теперь подписи отображаются на отдельных строках и им можно задавать вертикальные отступы.
Зададим верхний отступ побольше, а нижний в два раза меньше, чтобы было понятно, к какому полю принадлежит подпись.
Оформим сами поля
Добавим полям внутренние отступы, чтобы они стали немного больше и в них было легче попасть мышкой. Также зададим границы и фон, чтобы избавиться от псевдотрехмерного отображения по умолчанию.
Обратите внимание, что мы используем селекторы c типом поля: input[type="text"]. Это очень удобно, так как не надо навешивать лишние классы на поля разных типов (а так раньше делали).
Оформим кнопку
Добавим отступ сверху для прилипшей кнопки. Для этого тоже используем селектор с типом input[type="submit"].
Уберём лишний отступ
В верхней части формы образовался неприятный отступ. Уберем его.
Можно уменьшить верхний отступ у формы padding-top:1px;. Обнулять его нельзя из-за поведения margin у подписи.
Второй вариант — убрать верхний отступ у первой подписи. Его и используем, заодно применим еще один удобный селектор label:first-child.
Зададим ширину полей
Чуть увеличим поля формы по ширине. Пока зададим фиксированную ширину в пикселях: 180px. Кстати, общая ширина полей ввода будет больше из-за внутренних отступов и границ. В стандартной блочной модели эти ширины складываются и общая ширина получится 192px.
На этом шаге оформление формы завершено. Она достаточно простая, но аккуратная. Теперь можно переходить к третьему этапу: делать из формы конфетку.
Третий этап: доводим до блеска
На третьем этапе веб-интерфейс доводится до блеска с помощью новых CSS-свойств из спецификаций CSS. Эти свойства поддерживаются еще не всеми браузерами, поэтому в новых браузерах интерфейс будет выглядеть просто отлично, а в старых просто аккуратно (см. предыдущий шаг).
Начнем с простого: закруглим поля формы с помощью свойства border-radius.
Поля ввода
Теперь оформим поля ввода. Для начала просто закруглим их.
Тени в полях ввода
Добавим в поля ввода внутренние тени, чтобы они смотрелись объемней. Для этого используем свойство box-shadow. Синтаксис его очень прост:
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.2);
Слово inset обозначает, что тень внутренняя. Если убрать это слово, то тень будет внешней.
Далее 0 1px 2px обозначают сдвиг по оси x, сдвиг по оси y и радиус размытия тени. Наша тень смещена на 1 пиксель вниз и размыта на 2 пикселя
Последний компонент rgba(0, 0, 0, 0.2) — это запись цвета в формате RGBA. В данном случае это черный цвет с прозрачностью 20%, т. е. практически прозрачный.
Поэкспериментируйте с этим свойством прямо сейчас. Просто меняйте значения в редакторе и смотрите, что получится.
Улучшаем кнопку
Пришло время оформить кнопку отправки формы. Для начала зададим несколько обычных CSS-свойств:
- внутренние отступы (кнопка больше — легче попасть);
- цвет и жирность шрифта;
- цвет фона;
- уберем границы.
Теперь кнопка приведена в исходный вид, который почти одинаково отображается в большинстве браузеров. Можно начинать её украшение.
Круглая кнопка
Первым делом скруглим кнопку. Для этого просто применим уже знакомый border-radius.
Кнопка с градиентом
Наложим на кнопку градиент, чтобы она казалась выпуклой. Конечно, градиент можно было бы сделать с помощью фонового изображения, но мы используем CSS. В нашем случае синтаксис CSS-градиента получился очень простым:
background-image: linear-gradient(to bottom, #ffffff, #dddddd);
Ключевое слово linear-gradient обозначает линейный градиент, а аргументы в скобках to bottom, #ffffff, #dddddd обозначают его направление, исходный и конечный цвета. Наш градиент идет сверху вниз от белого к светло-серому.
Синтаксис градиентов достаточно сложен, он позволяет создавать достаточно сложные и красивые градиенты. CSS-градиентам будет посвящено несколько отдельных курсов.
Тень на кнопке
Добавим тень на кнопку. Это придаст ей объём.
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
В этот раз нет ключевого слова inset, поэтому тень отображатся снаружи кнопки. Если добавите это ключевое слово, то кнопка получится как бы вдавленной. Попробуйте.
Вдавленный текст на кнопке
Добавим тексту на кнопке эффект вдавленности. Сделаем это с помощью легкой, почти незаметной белой тени.
Тень к тексту добавляется с помощью свойства text-shadow, синтаксис которого аналогичен синтаксису box-shadow. Правда, ключевое слово inset работать не будет.
Широкие поля
Ранее мы установили фиксированную ширину полей в 180px. Намного чаще требуется, чтобы поле тянулось и занимало всю ширину родительского блока, т. е. ширина задается относительно.
Чтобы поля занимали всю доступную ширину формы, задаём width:100%. Возникла проблема: поля оказались шире, чем нужно, и заползают на правый отступ формы.
Это происходит из-за стандартного поведения блочной модели: общая ширина элемента складывается из его ширины контента, внутренних отступов и границ. У нас ширина контента поля равна ширине формы, т. е. 200px, а общая ширина поля равна 212px.
Как быть?
box-sizing: border-box
Проблему можно решить, избавившись от внутренних отступов и границ. Но это плохое решение. Другой вариант заключается в том, чтобы изменить поведение блочной модели для полей. Можно ли это сделать? Можно!
Это поведение изменяется с помощью свойства box-sizing. У элемента со значением box-sizing:border-box; свойство width задает общую ширину блока, а не ширину контента. Ширина контента расчитывается вычитанием из общей ширины внутренних отступов и границ.
Растянем форму
Проверим, как работают наши тянущиеся поля. Для этого немного увеличим ширину формы. Как вы видите, поля замечательно тянутся и не заползают на отступы. Box-sizing работает замечательно.
Вот полезная статья про box-sizing на русском: Используйте свойство box-sizing
Осталось добавить еще пару штрихов.
Подсветка активного поля
Чтобы красиво выделить активное поле, можно использовать уже знакомое свойство box-shadow.
Чтобы стили применялись к активным полям ввода, используем псевдокласс :focus.
Обратите внимание, что с помощью свойства outline:none; убрана подсветка по умолчанию для активного поля (желтая рамка вокруг поля в Chrome).
Поместите курсор внутрь поля и увидите аккуратную голубую подсветку.
Финальные штрихи
Добавим странице красивый фон, созданный с помощью CSS-градиентов. Какая же мощная штука, эти градиенты! Фон взят из этой галереи.
Добавим форме небольшую тень и сделаем её фон слегка прозрачным. Обратите внимание, как именно задана прозрачность фона:
background:#f5f5f5;
background-color:rgba(245,245,245,0.95);
Сначала обычный фон, а затем фон в формате rgba. При таком подходе старые браузеры проигнорируют rgba и форма останется с непрозрачным серым фоном. Новые же браузеры заменят непрозрачный фон, на слегка прозрачный. Это отличный пример того, как работает progressive enhancement: ничего не сломав для старых браузеров, сделали красивей для новых.
Заключение
Форма готова. При желании её можно улучшать и улучшать с помощью CSS3 и JavaScript.
Подытожим, что же такое progressive enhancement. При этом подходе создание веб-интерфейса происходит поэтапно, от самого простого к сложному. Мы прошли три этапа:
- Чистый HTML. Разметка и смысл.
- CSS. Простое оформление.
- CSS. Оформление-конфетка.
Есть еще и четвертый этап: улучшение взаимодействия с помощью JavaScript. Например, можно было бы сделать отправку формы с помощью AJAX.
Самое главное в этом подходе, что код каждого последующего этапа накладывается на предыдущий как новый слой, ничего не ломая, а улучшая, если это возможно. Например, форма без AJAX всё равно отправится, форма в старом IE будет смотреться просто аккуратно, а форма без стилей всё равно останется рабочей формой и ей можно будет пользоваться.
