CSS3 для веб-дизайнеров

Сидерхолм Дэн

По умолчанию сами элементы форм могут очень сильно различаться внешне – в зависимости от операционной системы и браузера, в котором открыт сайт. Почему бы не использовать эту разницу, применяя рабочие фрагменты CSS3, чтобы улучшить пользовательский опыт?

Важно сохранять баланс: немного изменяя элементы форм, нужно сохранять их узнаваемость, чтобы позаботиться о юзабилити. Иными словами, поле ввода должно явно выглядеть как поле ввода. Теперь, когда элементы форм можно стилизовать с помощью CSS (в большинстве браузеров), нужно быть осторожными, чтобы не разрушить самую важную часть: функциональность.

При этом в отношении CSS3 с формами можно сделать очень многое, чтобы расширить пользовательский опыт в тех браузерах, которые поддерживают новые свойства; в остальных браузерах нужно показывать упрощенную

версию.

Эта глава также дает возможность поговорить о трех аспектах CSS3, которых мы до сих пор не касались:

1) новые мощные селекторы;

2) CSS-градиенты;

3) CSS-анимации.

Мы вновь обратимся к сайту-примеру с Луной как к отправной точке, чтобы поговорить о том, как формы и CSS3 могут сочетаться новыми и необычными способами. Будем работать с формой регистрации «Оповещение о новых предметах», расположенной справа сбоку (рис. 6.01).

^{Рис. 6.01. Простая форма, где посетитель может подписаться на обновления о том, что на Луне оставили новые вещи}

Разметка для простой формы регистрации

В терминах HTML эта небольшая форма очень проста: всего лишь несколько полей ввода, подписи к ним и кнопка «подписаться».

<form action="/" id="thing-alerts">

<fieldset>

<label for="alerts-name">Your Name</label>

<input type="text" id="alerts-name" />

</fieldset>

<fieldset>

<label for="alerts-email">Your Email</label>

<input type="text» id="alerts-email" />

</fieldset>

<fieldset>

<input type="submit" value="Subscribe" />

</fieldset>

</form>

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

^{Рис. 6.02. Форма, открытая в Safari; без стилей}

Стили для полей и подписей

Первые фрагменты CSS, которые мы добавим, чтобы начать построение этой формы, будут обрабатывать элементы

fieldset

и 

label

– лишь немного пространства между строками.

#thing-alerts fieldset {

margin: 0 0 10px 0;

}

#thing-alerts label {

 

display: block;

font-weight: bold;

line-height: 1.4;

color: #666;

color: rgba(0, 0, 0, 0.6);

text-shadow: 0 1px 1px #fff;

}

Глядя на рис. 6.03, можно увидеть, что мы добавили отступ в

10px

под каждой строкой

fieldset

и задали подписям свойство

display: block

, чтобы они отображались на отдельной строке. Мы также выставили черному тексту

непрозрачность в 60% и указали запасной серый цвет для тех браузеров, которые пока не поддерживают RGBA. Мы также добавили небольшую белую подсветку свойством

text-shadow

, чтобы текст выглядел так, будто бы он вставлен на фон.

^{Рис. 6.03. К элементам fieldset и label применены стили}

Теперь у нас есть хороший интервал в 10px между элементами

fieldset

, но из-за поля внутри серого блока нам не нужен отступ в 10px под последней строкой (содержащей кнопку «подписаться»).

Это часто встречающаяся ситуация: есть список элементов, к каждому из которых применяется один и тот же стиль, но нужно применить другой стиль к последнему элементу списка.

Вместо добавления

class="last"

к последнему элементу почему бы не воспользоваться CSS3-псевдоклассом: last-child, чтобы убрать отступ снизу, не трогая разметку:

#thing-alerts fieldset {

 

margin: 0 0 10px 0;

}

#thing-alerts fieldset label {

display: block;

font-weight: bold;

line-height: 1.4;

color: #666;

color: rgba(0, 0, 0, 0.6);

text-shadow: 0 1px 1px #fff;

}

#thing-alerts fieldset: last-child {

margin: 0;

}

Помните, что

:last-child

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

На рис. 6.04 показано, что мы успели сделать: теперь нижний отступ на последнем элементе

fieldset

убран с помощью псевдокласса

:last-child

.

^{Рис. 6.04. Форма выглядит лучше, когда у последнего элемента fieldset нет отступа снизу}

Больше CSS3-селекторов

Теперь, когда мы успешно воспользовались

:last-child

, пора отметить, что в CSS3 есть много других чрезвычайно удобных селекторов.

Я очень рекомендую прочитать статью Роджера Йоханссона на эту тему – CSS selectors explained [14] , – в которой он показывает, что они представляют собой и как работают. Поддержка этих селекторов различается между браузерами, так что обязательно сверьтесь с доскональными таблицами CSS contents and browser compatibility Питера-Пола Коха [15] и CSS Compatibility and Internet Explorer от Microsoft (http:// bkaprt.com/css3/13/) [16] , чтобы узнать, что где поддерживается.

14

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

15

http://www.quirksmode.org/css/contents.html

16

http://msdn.microsoft.com/en-us/library/cc351024(Vs.85). aspx