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

.Title {

font-family: var(--MainFont);

}

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

Предусматривается, что в будущем эти свойства смогут проходить синтаксический анализ и использоваться кодом JavaScript. Более подробную информацию о такого рода невероятных вещах можно найти в описании нового модуля CSS Extensions: http://dev.w3.org/csswg/css-extensions/.

CSS-функция calc

Сколько раз приходилось создавать код разметки и думать о чем-нибудь вроде следующего: «Нужно от половины ширины родительского элемента отнять точно 10 пикселов». Возможность выполнять подобные вычисления особенно пригодилась бы при разработке адаптивного веб-дизайна, поскольку нам никогда заранее не известен размер экрана, на котором будут просматриваться наши веб-страницы. К счастью, в CSS теперь есть способ решения этой задачи. Он называется функцией calc(). Рассмотрим пример CSS-кода:

.thing {

width: calc(50% - 10px);

}

В этой функции поддерживаются сложение, вычитание, деление и умножение, что позволяет решить множество проблем, которые ранее решались только с применением JavaScript.

Эта функция пользуется весьма неплохой поддержкой со стороны браузеров, но заметным исключением являются Android 4.3 и более ранние версии. Соответствующую спецификацию можно найти по адресу http://www.w3.org/TR/css3-values/.

Селекторы CSS Level 4

В спецификации CSS Selectors Level 4, последней доступной версией которой была редакторская правка от 14 декабря 2014 года (http://dev.w3.org/csswg/selectors-4/), имелось несколько новых типов селекторов. Но пока шла работа над книгой, их реализация в браузерах так и не появилась. Поэтому мы рассмотрим только один пример, поскольку спецификация еще может претерпеть всяческие изменения. Им будет селектор реляционного псевдокласса (Relational Pseudo-Class) из раздела «Логические комбинации» (http://dev.w3.org/csswg/selectors-4/) самой последней правки.

Псевдокласс :has

Этот селектор имеет следующий формат:

a:has(figcaption) {

padding: 1rem;

}

Он предписывает добавление отступа к любому элементу a-тега, содержащему figcaption. Выбор можно инвертировать, если задать его в сочетании с псевдоклассом отрицания:

a:not(:has(figcaption)) {

padding: 1rem;

}

Отступ будет добавлен в том случае, если элемент a-тега не будет содержать figcaption.

Буду честен и скажу: в данной правке не так уж много новых селекторов, которые произвели на меня впечатление. Но кто знает, как все обернется к тому моменту, когда они станут пригодны к использованию в браузерах.

Адаптивные меры длины, выражаемые в процентных отношениях применительно к окнам просмотра (vmax, vmin, vh, vw)

Давайте сменим направление. Мы рассматривали тему выбора элементов в нашем адаптивном мире. А как насчет задания их размеров? В CSS Values and Units Module Level 3 (http://www.w3.org/TR/css3-values/) вводятся единицы измерения, выражаемые относительно размеров окна просмотра. Для адаптивного веб-дизайна это очень полезное нововведение, поскольку каждая единица измерения представляет собой процентное отношение к длине окна просмотра:

• vw — для ширины окна просмотра;

• vh — для высоты окна просмотра;

• vmin — для минимального размера окна просмотра, равна самому малому значению — либо vw, либо vh;

• vmax — для максимального размера окна просмотра, равна самому большому значению — либо vw, либо vh.

Все эти меры длины пользуются неплохой поддержкой браузеров (http://ca­niuse.com/).

Хотите окно, высота которого задается как 90 % от высоты окна браузера? Проще некуда:

.modal {

height: 90vh;

}