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

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

Анатомия правила CSS

Перед исследованием всего арсенала средств, предлагаемого CSS3, и во избежание путаницы установим терминологию, которой будем придерживаться для описания правила CSS. Рассмотрим следующий пример:

.round { /* селектор */

    border-radius: 10px; /* объявление */

}

Это правило состоит из селектора (.round), после которого следует объявление (border-radius: 10px;). В свою очередь, объявление определяется свойством (border-radius:) и значением (10px;). Наши мнения совпали? Отлично, теперь давайте ускоримся.

Не забудьте проверить наличие поддержки для ваших пользователей

По мере углубления в CSS3 не забудьте посещать сайт http://caniuse.com/, если, конечно, вам интересно, каков текущий уровень браузерной поддержки конкретной возможности CSS3 или HTML5. Кроме отображения сведений о поддержке различными версиями браузеров (которые можно найти в отношении конкретной возможности), на сайте также приведены текущие статистические данные об уровнях использования браузеров, взятые с сайта http://gs.statcounter.com/.

Простые и полезные трюки CSS

Я пришел к выводу, что в своей повседневной работе постоянно использую одни возможности CSS3 и весьма редко применяю другие. Я подумал, что было бы полезно поделиться знаниями о тех возможностях, которые использую наиболее часто. В CSS3 имеется множество полезных вещей, способных облегчить жизнь, особенно тем, кто занимается адаптивным веб-дизайном. С их помощью довольно легко решаются проблемы, которые раньше вызывали головную боль.

Использование CSS при создании многоколоночных разметок  для адаптивных конструкций

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

<main>

lloremipsimLoremipsum dolor sit amet, consectetur

<!-- БОЛЬШОЙ ОБЪЕМ ТЕКСТА -->

lloremipsimLoremipsum dolor sit amet, consectetur

<!-- БОЛЬШОЙ ОБЪЕМ ТЕКСТА -->

</main>

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

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

main {

    column-width: 12em;

}

Это будет означать, что независимо от ширины окна просмотра содержимое будет распределяться по колонкам шириной 12 em. При изменении размеров окна просмотра количество выводимых на экран колонок будет динамически изменяться. Можно посмотреть все это в браузере, загрузив в него пример из файла каталога example_05-01 (или из репозитория GitHub — https://github.com/benfrain/rwd).

Посмотрим, как эта страница выводится на экран iPad в портретной ориентации (при ширине окна просмотра 768 пикселов).

А теперь посмотрим на нее в браузере Chrome на экране настольного компьютера (с шириной окна просмотра около 1100 пикселов).

Вот вам и простые адаптируемые текстовые колонки, полученные при минимуме усилий. Лично мне это нравится!

Фиксированное количество колонок при изменяемой ширине

Если нужно получить неизменное количество колонок при изменяемой их ширине, можно написать следующее правило:

main {

    column-count: 4;

}

Добавление промежутков и разделителей колонок

Можно пойти еще дальше и добавить определенный промежуток между колонками, а также разделитель колонок:

main {

    column-gap: 2em;

    column-rule: thin dotted #999;

    column-width: 12em;

}

При этом будет получен следующий результат.

Спецификацию, касающуюся модуля CSS3 Multi-Column Layout Module, можно найти по адресу http://www.w3.org/TR/css3-multicol/.

На данный момент, несмотря на объявленный W3C статус CR, при объявлении колонок вам для максимальной совместимости, скорее всего, понадобится указать префиксы производителей.

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

Перенос слов на новые строки

Сколько раз вы впадали в уныние, когда приходилось вводить длинный URL-адрес, имея для этого весьма узкое поле ввода? Посмотрите на пример, находящийся по адресу rwd.education/code/example_05-04. Проблему можно разглядеть и в следу­ющей копии экрана, заметив, что URL-адрес выходит за пределы выделенного ему пространства.

Данная проблема решается довольно легко путем простого CSS3-объявления, которое, как нарочно, работает точно так же и в устаревших версиях Internet Explorer вплоть до версии 5.5! Просто добавьте:

word-wrap: break-word;

к элементу-контейнеру — и получите эффект, показанный в следующей копии экрана.

Вуаля, теперь длинные URL-адреса отлично переносятся на новую строку!

Усечение текста с добавлением многоточия

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

Рассмотрим следующую разметку (в Интернете этот пример можно найти по адресу rwd.education/code/ch5/example_05-03/):

<p class="truncate">OK, listen up, I've figured out the key eternal

happiness. All you need to do is eat lots of scones.

А нам нужно произвести усечение текста до ширины 520 пикселов, чтобы он имел следующий вид.

Этого эффекта можно добиться с помощью следующего кода CSS:

.truncate {

    width: 520px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: no-wrap;

}

совет

Спецификацию, касающуюся свойства text-overflow, можно найти по адресу http://dev.w3.org/csswg/css-ui-3/.

Когда ширина содержимого превышает ширину, заданную в определении (которую можно также задать как 100 %, если содержимое находится в подстраиваемом под экран контейнере), оно будет усечено. Пара «свойство — значение» white-space: no-wrap используется для обеспечения отключения переноса внутри элемента-контейнера.

Создание панелей, прокручивающихся по горизонтали

Надеюсь, вы понимаете, о чем речь? Панели с прокруткой по горизонтали широко представлены в магазине iTunes и в Apple TV и используются как демонстрационные панели соответствующего содержимого (фильмы, альбомы и т. д.). Когда горизонтального пространства вполне хватает, в поле зрения попадают все объекты. Когда пространство ограничено (например, на мобильных устройствах), панель можно прокручивать из стороны в сторону.

Прокручиваемые панели особенно хорошо работают на современных устройствах под управлением Android и iOS. Если у вас есть современное iOS- или Android-устройство, посмотрите следующий пример на нем, а также в браузе­ре настольного компьютера типа Safari или Chrome: rwd.education/code/ch5/example_05-02/.

Я создал панель для лучших фильмов 2014 года, которая имеет на iPhone следующий вид (см. стр. 121).

Сильно стараться мне не пришлось. Ключевым в данной технологии является свойство white-space, которое появилось еще в версии CSS 2.1 (http://www.w3.org/TR/CSS2/text.html). Но я собираюсь использовать его совместно с новым механизмом разметки Flexbox, ведь вы же не станете мне возражать?

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

.Scroll_Wrapper {

    width: 100%;

    white-space: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

}

.Item {