HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

input:required + label:after {

    content: "*";

    font-size: 2.1em;

    position: relative;

    top: 6px;

    display: inline-flex;

    margin-left: .2ch;

    transition: color, 1s;

}

input:required:invalid + label:after {

    color: red;

}

input:required:valid + label:after {

    color: green;

}

Затем, если фокус устанавливается на поле ввода, обязательное для заполнения, и в него вводится соответствующее значение, звездочка меняет цвет на зеленый. Мелочь, а приятно.

примечание

Наряду с уже рассмотренными существуют и другие селекторы, как уже реализованные, так и задекларированные. Для получения самого актуального перечня этих селекторов изучите последнюю редакторскую правку Selectors Level 4 Specification, которая находится по адресу http://dev.w3.org/csswg/selectors-4/.

Создание эффекта заливки фона

В главе 6 мы научились выполнять линейные и радиальные градиенты для использования в качестве фоновых изображений, но, к сожалению, переход между двумя фоновыми изображениями невозможен (что вполне резонно, поскольку браузер, по сути, растрирует объявление в изображение). И тем не менее мы можем обеспечивать переходы между значениями сопутствующих свойств, таких как background-position и background-size. Мы воспользуемся этим обстоятельством для создания эффекта заливки в момент получения фокуса полем ввода или областью ввода текста.

К полю ввода добавляются следующие свойства и значения:

input:not([type="range"]),

textarea {

    min-height: 30px;

    padding: 2px;

    font-size: 17px;

    border: 1px solid #ebebeb;

    outline: none;

    transition: transform .4s, box-shadow .4s, background-position .2s;

    background: radial-gradient(400px circle, #fff 99%, transparent 99%), #f1f1f1;

    background-position: -400px 90px, 00;

    background-repeat: no-repeat, no-repeat;

    border-radius: 0;

    position: relative;

}

input:not([type="range"]):focus,

textarea:focus {

    background-position: 0 0, 0 0;

}

В первом правиле генерируется сплошной белый радиальный градиент, име­ющий позицию за пределами видимости. Расположенный за ним фоновый цвет (шестнадцатеричное значение, указанное после radial-gradient) не имеет смещения, поэтому предоставляет исходный цвет. Когда поле ввода получает фокус, фоновая позиция radial-gradient устанавливается обратно на исходные значения, и поскольку происходит возвращение к установке background-image, создается красивый переход между двумя настройками фона. Результатом станет заливка поля другим цветом при получении фокуса.

примечание

При придании стилевого оформления частям исходного пользовательского интерфейса у разных браузеров находятся собственные селекторы и возможности. Для удобства работы с множеством конкретных селекторов Аврелий Уэнделкен (Aurelius Wendelken) собрал их во внушительный перечень. Я сделал для себя копию этого перечня (или ответвление в терминологии управления Git-версиями), которую можно найти по адресу https://gist.gi­thub.com/benfrain/403d3d3a8e2b6198e395.

Резюме

В данной главе были изучены способы применения новых HTML5-атрибутов для работы с формами. Они позволяют нам сделать формы более удобными, а собираемые с их помощью данные — лучше соответствующими конкретным требованиям. Кроме того, при необходимости мы можем поддерживать эту новую разметку в актуальном состоянии с помощью сценариев-полифиллов, написанных на JavaScript, чтобы давать пользователям единое представление о свойствах форм независимо от возможностей применяемых пользователями браузеров.

Мы приблизились к финишу путешествия по адаптивным конструкциям на основе HTML5 и CSS3. Хотя за то время, которое мы провели вместе, был охвачен большой объем материала, я прекрасно понимаю, что поделиться информацией на все случаи жизни просто невозможно. Поэтому в последней главе хотел бы взглянуть на подходы к адаптивному веб-дизайну на более высоком уровне и постараться рассказать о накопленном опыте, чтобы направить в нужное русло ваш первый или последующий проект разработки адаптивной конструкции.

10. Подходы к адаптивному веб-дизайну

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

Итак, в заключительной главе я хочу сыграть роль наставника (к тому же с моей поредевшей шевелюрой на роль героя я вряд ли подойду). При этом хочу, чтобы вы, мой прилежный ученик, потратили еще немного времени на усвоение заключительных советов, прежде чем направите все свои усилия на поиск собственных решений в области адаптивного веб-дизайна.

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

• обкатка дизайна в браузере и на реальных устройствах на самых ранних стадиях;

• задание контрольных точек применительно к дизайну;

• использование принципа постепенного усложнения;

• определение матрицы браузерной поддержки;

• применение на практике принципа постепенного усложнения;

• привязка контрольных точек CSS к JavaScript;

• отказ от использования сред разработки CSS при создании конечного продукта;

• выработка наиболее практичных решений;

• написание как можно более простого кода;

• скрытие, показ и загрузка содержимого для всевозможных окон просмотра;

• возложение самых трудных задач визуального оформления на CSS;

• использование средств контроля качества кода;

• анализ и тестирование производительности веб-страниц (webpagetest.org);

• применение более скоростных и эффективных технологий;

• отслеживание появления очередных грандиозных нововведений.

Обкатка дизайна в браузере на самых ранних стадиях

Чем больше адаптивных проектов я разрабатывал, тем более важной мне представлялась обкатка дизайна в среде браузера на самых ранних стадиях. Если вы и дизайнер и разработчик в одном лице, то дело упрощается. Как только сложится более или менее конкретное визуальное представление о насущных потребностях, следует обкатать прототип в браузере и далее прорабатывать идею в среде браузера. Этот подход можно расширить за счет прогона сразу всех высококачественных полностраничных прототипов. Или же присмотреться к использованию таких средств, как Style Tiles, занимающих место между подборкой изображений и полноценным макетом. Во введении в Style Tiles (http://styletil.es/) это средство описывается следующим образом:

«Style Tiles является дизайнерской подборкой, состоящей из шрифтов, цветовых решений и элементов интерфейса с целью передать суть визуального фирменного стиля для веб-технологий».

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

Задание контрольных точек применительно к дизайну. Я хотел бы повторить мысль, высказанную в предыдущих главах: пусть дизайн определяет, где нужно расставить контрольные точки. Когда дизайн оценивается в браузере, это процесс существенно облегчается. Всегда следует вносить изменения в дизайн, исходя из начального варианта для самых небольших экранов, и идти по нарастающей до дизайна для самых крупных экранов. Поэтому по мере увеличения размеров окон просмотра нужно смотреть, до каких пределов дизайн способен работать, прежде чем потребуется вводить контрольную точку.

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

.rule {

    /* Стили для самых скромных окон просмотра */

}

@media (min-width: 40em) {

    .rule {

        /* Изменения для окон просмотра среднего размера */

    }

}

@media (min-width: 70em) {

    .rule {

        /* Изменения для более крупных окон просмотра */

    }

}

Просмотр и обкатка дизайна на реальных устройствах

Приступать к созданию «лаборатории устройств» для тестирования вашей работы можно с самых старых моделей телефонов и планшетов. Наличие ряда разнообразных устройств может принести большую пользу, позволив не только отследить работу дизайна на различных устройствах, но и выявить особенности разметки и вывода элементов на экран. Ведь известие о не работающем в конкретной среде проекте, считающемся уже завершенным, вряд ли кого-то обрадует. Приступайте к тестированию как можно раньше и проводите его как можно чаще! Все окупится сторицей. Можно, к примеру, купить устаревшие модели телефонов и планшетных компьютеров на eBay или приобрести их у друзей и знакомых, обновляющих свою технику.