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> или 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-кода: