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

Разве можно знать абсолютно все?

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

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

Анатомия правила 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-спецификации многоколоночной разметки. Рассмотрим следующую разметку:

lloremipsimLoremipsum dolor sit amet, consectetur

lloremipsimLoremipsum dolor sit amet, consectetur

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

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

main {

column-width: 12em;

}

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

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

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