Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.
Помните горизонтальную прокручиваемую панель, файлы для создания которой можно найти в каталоге example_05-02? Посмотрим, как это может выглядеть в той ситуации, при которой осуществить горизонтальную прокрутку невозможно. Используя ту же разметку, поместим верхнюю десятку самых кассовых фильмов 2014 года в решетку grid-системы. Для некоторых окон просмотра решетка будет шириной всего в два элемента, по мере увеличения окна просмотра будут показаны три элемента, при еще более крупных размерах — четыре элемента. Но при этом возникает проблема. Независимо от размера окна просмотра нам бы не хотелось, чтобы у самой нижней строки элементов имелась нижняя граница. Файл с соответствующим кодом можно найти в каталоге example_05-09.
Результат при ширине четыре элемента можно увидеть на следующей странице.
Видите эту совершенно ненужную границу ниже последних двух элементов? Именно ее и следует удалить. Но мне нужно получить надежное решение, чтобы граница удалялась и при другом составе элементов последней строки. Теперь, поскольку при различных окнах просмотра в каждой строке содержится разное количество элементов, нам также нужно для разных окон просмотра изменить выбор на nth-основе. Для краткости я покажу вам выбор, соответствующий четырем элементам в строке (для самого большого из окон просмотра). Чтобы увидеть измененный выбор при различных окнах просмотра, можете просмотреть образец кода:
@media (min-width: 55rem) {
.Item {
width: 25%;
}
/* Получить каждый четвертый элемент, а из них
взять только тот, который находится в составе
последних четырех элементов */
.Item:nth-child(4n+1):nth-last-child(-n+4),
/* Теперь получить каждый элемент, следующий
за той же самой коллекцией. */
.Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item {
border-bottom: 0;
}
}
примечание
Как видите, здесь выстроена цепочка из селекторов псевдоклассов на nth-основе. Важно понимать, что предыдущие селекторы не фильтруют выбор для следующих, а элемент должен соответствовать каждому из выборов. Для предыдущего примера первым должен быть элемент из четырех, он должен быть также одним из четырех последних.
Отлично! Благодаря выбору на nth-основе у нас получился стойкий набор правил для удаления самой нижней границы независимо от размера окна просмотра или количества показываемых на экране элементов.
Селектор отрицания (:not)
Еще одним полезным селектором является селектор псевдокласса отрицания. Он пригодится для выбора всего, что не подпадает под какой-либо другой выбор. Рассмотрим следующий код:
<div class="a-div"></div>
<div class="a-div"></div>
<div class="a-div"></div>
<div class="a-div not-me"></div>
<div class="a-div"></div>
И вот эти стили:
div {
display: inline-block;
height: 2rem;
width: 2rem;
background-color: blue;
}
.a-div:not(.not-me) {
background-color: orange;
border-radius: 50%;
}
Последнее правило предписывает каждому элементу, имеющему класс .a-div, быть оранжевого цвета и иметь скругление, за исключением div-контейнера, у которого также имеется класс .not-me. Файл с этим кодом находится в каталоге example_05-07 образцов кода (напоминаю, что все образцы можно взять на сайте http://rwd.education/).
совет
До сих пор мы рассматривали в основном то, что называется структурными псевдоклассами (вся информация о них доступна по адресу http://www.w3.org/TR/selectors/). Но в CSS3 имеется гораздо больше селекторов. При работе над веб-приложением стоит просмотреть полный перечень элементов пользовательского интерфейса, относящихся к псевдоклассам (http://www.w3.org/TR/selectors/), поскольку они могут, к примеру, нацеливать правила на основе того, выбраны некоторые элементы или нет.
Селектор пустого элемента (:empty)
Мне приходилось сталкиваться с ситуациями, когда элемент, включающий внутренние отступы, получает динамически вставляемое в него содержимое. Иногда он получает содержимое, а иногда — нет. Проблема в том, что, даже когда он не включает содержимое, я все равно вижу отступ. Рассмотрим код HTML и код CSS, которые находятся в файле каталога example_05-08:
<div class="thing"></div>
.thing {
padding: 1rem;
background-color: violet;
}
При отсутствии в этом div-контейнере содержимого все равно виден его фоновый цвет, задаваемый свойством background-color. К счастью, его нетрудно спрятать:
.thing:empty {
display: none;
}
Но все же селектор :empty нужно применять с оглядкой. Например, можно подумать, что данный контейнер пуст:
<div class="thing"> </div>
Но ведь это не так! Обратите внимание на пробел в контейнере. Пробельный символ не означает пустоту!
И чтобы не запутаться, следует знать, что комментарий не влияет на наличие или отсутствие пробельного символа в элементе. Например, этот элемент-контейнер все равно будет считаться пустым:
<div class="thing"><!--I'm empty, honest I am--></div>
Дополнение к псевдоэлементам
Псевдоэлементы используются со времен появления CSS2, но в спецификации CSS3 синтаксис их использования был слегка пересмотрен. Чтобы освежить вашу память, скажу, что до сих пор p:first-line указывал на первую строку тега
или p:first-letter указывал на первую букву. А CSS3 требует отделять эти псевдоэлементы от псевдоклассов, таких как nth-child(). Поэтому теперь нужно использовать запись p::first-letter. Но следует заметить, что Internet Explorer 8 и предыдущие версии не понимают синтаксис с двойным двоеточием, они понимают только синтаксис с одним двоеточием.
Работа с :first-line независимо от размеров окна просмотра
Одно из качеств псевдоэлемента :first-line, которое может вам особенно пригодиться, заключается в его работе с учетом специфики окна просмотра. Например, если написать следующее правило:
p::first-line {
color: #ff0cff;
}
то, как и ожидалось, первая строка будет выведена на экран в ужасном розовом оттенке. Но при другом размере окна просмотра в ней будет выведена другая подборка текста.
Следовательно, при реализации адаптивного дизайна вам предоставляется удобный способ визуального отображения первой строки в стиле, отличающемся от стиля других строк, без необходимости внесения изменений в разметку (браузер выведет ее на экран, не считаясь с тем, как она обозначена в разметке).
Пользовательские свойства и переменные в CSS
Благодаря популярности препроцессоров CSS-таблиц эти таблицы стали приобретать все больше функций, присущих программированию. Первыми из таких функций стали пользовательские свойства. Нам они больше известны как переменные, хотя это не является их обязательным и единственным предназначением. Полную спецификацию можно найти по адресу http://dev.w3.org/csswg/css-variables/. Но имейте в виду, что на начало 2015 года реализация этой функции в браузерах была весьма скудной — ограничивалась браузером Firefox.
Пользовательские свойства CSS позволяют хранить в таблицах стилей информацию, которая затем может использоваться в таблице стилей или, возможно, оказывать влияние на сценарий JavaScript. Очевидным вариантом использования будет хранение имени семейства шрифтов с последующей ссылкой на него:
:root {
--MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Здесь с целью хранения пользовательского свойства в корне документа используется псевдокласс :root (хотя эти свойства можно хранить в любом выбранном вами правиле).
совет
В структуре документа псевдокласс :root всегда ссылается на самый верхний родительский элемент. В HTML-документе им всегда будет тег HTML, но в SVG-документе, который рассматривается в главе 7, он будет ссылаться на другой элемент.
Пользовательское свойство всегда начинается с двух дефисов, за которыми следует выбранное пользователем имя, а его окончание обозначается, как и любое другое свойство в CSS, точкой с запятой.
Сослаться на значение этого свойства можно с помощью записи var():
.Title {
font-family: var(--MainFont);
}
Очевидно, таким образом вы можете хранить любое количество пользовательских свойств. Основным преимуществом такого хранения является возможность изменения значения внутри переменной, и каждое использующее эту переменную правило получает новое значение без его непосредственного изменения.
Предусматривается, что в будущем эти свойства смогут проходить синтаксический анализ и использоваться кодом JavaScript. Более подробную информацию о такого рода невероятных вещах можно найти в описании нового модуля CSS Extensions: http://dev.w3.org/csswg/css-extensions/.
CSS-функция calc
Сколько раз приходилось создавать код разметки и думать о чем-нибудь вроде следующего: «Нужно от половины ширины родительского элемента отнять точно 10 пикселов». Возможность выполнять подобные вычисления особенно пригодилась бы при разработке адаптивного веб-дизайна, поскольку нам никогда заранее не известен размер экрана, на котором будут просматриваться наши веб-страницы. К счастью, в CSS теперь есть способ решения этой задачи. Он называется функцией calc(). Рассмотрим пример CSS-кода:
