Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.
.Scroll_Wrapper {
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.Item {
display: inline-flex;
}
Используя объявление white-space: nowrap, мы предписываем браузеру не переносить эти элементы на новую строку при обнаружении пробельного символа. Затем, чтобы все оставалось в одной строке, для всех первых дочерних элементов этого контейнера задаем линейное отображение. Здесь мы воспользовались значением inline-flex, но точно так же могли бы применить inline, inline-block или inline-table.
Псевдоэлементы ::before и ::after
Если посмотреть на код, выложенный в качестве образца, можно увидеть, что для отображения номера рекламного плаката применяется псевдоэлемент ::before. При использовании псевдоэлементов следует помнить, что для отображения ::before или ::after у них должно иметься значение содержимого, даже если это просто пробел. Когда эти псевдоэлементы отображаются на экране, они начинают вести себя соответственно как первый и последний дочерние элементы того элемента, в отношении которого применяются.
Чтобы все выглядело немного эстетичнее, я собираюсь скрыть полосу прокрутки там, где это возможно сделать. К сожалению, в силу специфики браузеров код придется дополнять вручную (Autoprefixer с этим не справится, поскольку на эти свойства распространяются права собственности). Я также собираюсь добавить инерционность прокрутки, необходимую для сенсорных устройств с браузерами на движке WebKit (обычно это устройства под управлением iOS). Теперь обновленное правило .Scroll_Wrapper будет иметь следующий вид:
.Scroll_Wrapper {
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
/* Придание инерционности прокрутке на
сенсорных устройствах на базе WebKit */
-webkit-overflow-scrolling: touch;
/* Удаление полос прокрутки в поддерживающих
это свойство версиях IE */
-ms-overflow-style: none;
}
/* Предотвращение появления полосы прокрутки в браузерах с движком WebKit */
.Scroll_Wrapper::-webkit-scrollbar {
display: none;
}
При дефиците пространства мы получаем симпатичную горизонтальную панель без полосы прокрутки. В противном случае на экране помещается сразу все содержимое.
Но в отношении данной модели нужно сделать два предостережения. Во-первых, на момент написания книги в браузере Firefox не было свойства, позволяющего скрывать полосы прокрутки. Во-вторых, старые Android-устройства не способны выполнять горизонтальную прокрутку (так оно и есть). Поэтому я, как правило, дополняю данную модель вспомогательным средством обнаружения возможностей. Как это работает, мы рассмотрим в следующем разделе.
Предоставление возможности разветвления функций в CSS
При создании адаптивных веб-конструкций и стремлении получить единую конструкцию, работающую повсеместно на любом устройстве, часто приходится сталкиваться с ситуациями, при которых те или иные функции или технологии не поддерживаются какими-либо устройствами. В таких случаях вам, скорее всего, захочется создать в коде CSS соответствующее разветвление: если браузер поддерживает функцию, предоставить один фрагмент кода, а если не поддерживает — другой. В JavaScript такие ситуации разрешаются с помощью инструкций if-else или switch.
На данный момент имеется два возможных подхода. Один из них полностью основан на применении CSS, но не очень широко поддерживается браузерами, а другой можно воплотить в жизнь только с помощью библиотеки JavaScript, но зато он пользуется значительно более широкой поддержкой браузеров. Рассмотрим их по очереди.
Запросы возможностей
Решением по разветвлению кода в CSS, присущим самой этой технологии, является использование запросов возможностей (feature queries), представляющих собой составную часть условных правил — CSS Conditional Rules Module Level 3 (http://www.w3.org/TR/css3-conditional/). Но на данный момент условные правила CSS не имеют поддержки в Internet Explorer (применительно к версии 11) и Safari (включая устройства под управлением iOS вплоть до версии 8.1), то есть они не пользуются достаточно широкой поддержкой.
Синтаксис у запросов возможностей такой же, как и у медиазапросов. Рассмотрим следующий код:
@supports (flashing-sausages: lincolnshire) {
body {
sausage-sound: sizzling;
sausage-color: slighty-burnt;
background-color: brown;
}
}
В данном случае стили будут применены только в том случае, если браузер поддерживает свойство flashing-sausages. Я абсолютно уверен в том, что ни один браузер никогда не будет поддерживать свойство под названием flashing-sausages, поэтому ни один из стилей внутри блока @supports применяться не будет.
Рассмотрим более практичный пример. Зададим использование Flexbox в случае его поддержки браузером и предусмотрим резервную технологию разметки на случай, если Flexbox не поддерживается. Рассмотрим следующий пример:
@supports (display: flex) {
.Item {
display: inline-flex;
}
}
@supports not (display: flex) {
.Item {
display: inline-block;
}
}
Здесь один блок кода определяется на случай поддержки возможности, а другой блок — на случай отсутствия такой поддержки. Эта модель подойдет в том случае, если браузер поддерживает @supports (я понимаю, что в этом довольно легко запутаться), но если он не обеспечивает такой поддержки, не будет применен ни один из этих стилей.
Если нужно обеспечить работу на устройствах, не поддерживающих @supports, лучше сначала написать исходное объявление и уже после него — то объявление, которое обусловлено запросом @supports, чтобы предыдущее правило отменялось в случае поддержки @supports и блок @supports игнорировался, если его поддержка отсутствует. Поэтому предыдущий пример требует следующей переработки:
.Item {
display: inline-block;
}
@supports (display: flex) {
.Item {
display: inline-flex;
}
}
Комбинирование условий
Условия также можно комбинировать. Предположим, нам нужно применить некоторые правила лишь при одновременной поддержке Flexbox и pointer: coarse (если вы пропустили соответствующий материал, то связанное с взаимодействием со страницей медиасвойство pointer рассматривалось в главе 2). Комбинированное условие может иметь следующий вид:
@supports ((display: flex) and (pointer: coarse)) {
.Item {
display: inline-flex;
}
}
Здесь мы воспользовались ключевым словом and, но можно было использовать также or или заменить одно слово другим. Например, если стили нужно применить при условии поддержки двух предыдущих пар «свойство — значение» или при поддержке 3D-преобразований:
@supports ((display: flex) and (pointer: coarse)) or
(transform:translate3d(0, 0, 0)) {
.Item {
display: inline-flex;
}
}
Обратите в предыдущем примере внимание на дополнительный набор круглых скобок, отделяющих условия для flex и pointer от условия для transform.
К сожалению, как уже говорилось, до широкой поддержки @supports пока еще слишком далеко. А что же тогда делать разработчику адаптивного веб-дизайна? Не впадать в уныние, ведь у нас есть великолепное JavaScript-средство, позволяющее легко преодолеть подобные трудности.
Modernizr
Пока @supports не получит более широкую реализацию в браузерах, мы можем воспользоваться JavaScript-средством под названием Modernizr. На данный момент это самый надежный способ реализации ветвлений в вашем коде.
Когда ветвление требуется в CSS, я стараюсь воспользоваться подходом, предполагающим постепенное усложнение, что означает применение сначала простого и доступного кода, который будет предоставлять на крайний случай функциональный дизайн для устройств с самыми скромными возможностями. Затем этот код постепенно усложняется для устройств с более развитыми возможностями.
совет
Тема постепенного усложнения будет раскрыта в главе 10.
Посмотрим, как можно реализовать постепенное усложнение и ветвление нашего кода CSS с использованием Modernizr.
Обнаружение возможностей с помощью Modernizr. Если вы занимаетесь веб-разработкой, то, скорее всего, уже слышали о Modernizr, даже если и не пользовались этим средством. Оно представляет собой библиотеку JavaScript, включаемую в страницу и тестирующую браузер на наличие определенных возможностей. Чтобы приступить к использованию Modernizr, нужно просто включить ссылку на загруженный файл в раздел заголовка страницы:
<script src="/js/libs/modernizr-2.8.3-custom.min.js"></script>
Этот код при загрузке браузером страницы запускает всевозможные тесты из состава библиотеки. Если браузер проходит тест, Modernizr добавляет соответствующий класс к корневому тегу HTML, что вполне сообразуется с нашими целями.
Например, после того, как Mondernizr выполнит свои задачи, классы в теге HTML могут приобрести следующий вид:
<html class="js no-touch cssanimations csstransforms csstransforms3d
csstransitions svg inlinesvg" lang="en">
В данном случае тестированию подверглись только несколько возможностей: анимация, преобразования, применение SVG, линейной SVG и поддержка сенсорных экранов. При наличии этих классов код может подвергнуться ветвлению:
