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

Предусматривается, что в будущем эти свойства смогут проходить синтаксический анализ и использоваться кодом 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;

}

При всей пользе, ожидаемой от использования единиц измерения относительно окон просмотра, в некоторых браузерах их применение реализовано довольно странно. К примеру, в Safari под управлением iOS 8 при изменении просматриваемой области в ходе прокрутки с верхней части страницы адресная строка сжимается, но никакие изменения в декларируемую высоту окна просмотра не вносятся.

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

Я могу показать вам решение этой задачи прямо сейчас. Но мне хотелось бы использовать вполне определенный шрифт, чтобы независимо от того, в какой системе просматривается пример, Windows, Mac или Linux, мы видели одно и то же.

Хорошо, сознаюсь вам, что это будет простой трюк, позволяющий мне проиллюстрировать возможности использования веб-шрифтов с помощью CSS3.

Шрифтовое веб-оформление

Многие годы в веб-приложениях приходилось довольствоваться скучным выбором «безопасных» шрифтов. Когда для дизайна были важны какие-то особые шрифты, приходилось подставлять графический элемент, а для смещения текста от границ окна просмотра применять правило отступа text-indent. Это была та еще работенка!

Но кроме этого, для добавления на страницу особого типографского оформления имелось несколько оригинальных методов. В sIFR (http://www.mikeindustri­es.com/blog/sifr/) и Cufуn (http://cufon.shoqolate.com/generate/) для переделки текстовых элементов с целью их появления в виде шрифтов, для которых они предназначались, использовались технологии Flash и JavaScript соответственно. К счастью, в CSS3 предоставляются средства пользовательского шрифтового оформления, уже готовые к завоеванию широкой популярности.

CSS-правило @font-face

CSS-правило @font-face появилось еще в CSS2 (но затем из CSS 2.1 оно было удалено). Оно даже пользовалось частичной поддержкой Internet Explorer 4 (кроме шуток!). А как обстоят дела, когда речь заходит о CSS3?

Как выясняется, правило @font-face было снова введено для модуля шрифтов CSS3 Fonts Module (http://www.w3.org/TR/css3-fonts). Из-за исторически сложи­вшейся правовой тяжбы, касающейся использования шрифтов в веб-приложениях, серьезные подвижки в фактическом признании данного решения для шрифтового оформления начались только в последние годы.

Как обычно, когда в веб-мире речь идет о привлечении каких-либо ресурсов, единого формата файлов не существует. Точно так же, как изображения могут приходить в JPG, PNG, GIF и других форматах, у шрифтов имеется собственный набор форматов на выбор. Для Internet Explorer (и больше никакого другого браузера) в качестве наиболее предпочтительных были выбраны шрифты формата Embedded OpenType с расширениями имен файлов .eot. Для других браузеров предпочтение отдавалось более распространенным шрифтам формата TrueType с расширениями имен файлов .ttf. В то же время существуют шрифты форматов SVG-графики и Web Open Font Format с расширениями имен файлов .woff или .woff2.