Фрэйн . - 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). Комбинированное условие может иметь следующий вид: