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

.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.

Сейчас, чтобы охватить различные браузерные реализации, необходимо обслуживать несколько файловых версий одного и того же шрифта.

Но есть и хорошая новость: добавление каждого пользовательского шрифта для любого браузера не составляет особого труда. Посмотрим, как это делается!

Реализация веб-шрифтов с помощью @font-face

CSS предоставляет так называемое эт-правило (по названию символа @ — «эт») @font-face, позволяющее ссылаться на онлайн-шрифты, которые затем можно будет использовать для отображения текста.

Существует большое количество великолепных источников, позволяющих просматривать и получать веб-шрифты, среди которых как бесплатные, так и платные. Что касается источников бесплатных шрифтов, то я отдаю предпочтение Font Squirrel (http://www.fontsquirrel.com/), хотя Google также предоставляет бесплатные веб-шрифты, которые в конечном счете подаются с помощью правила @font-face (http://www.google.com/webfonts). Существуют также отличные платные сервисы от Typekit (http://www.typekit.com/) и Font Deck (http://www.fontdeck.com/).

Для данного упражнения я собираюсь загрузить Roboto. Это шрифт, используемый последними Android-телефонами, и если у вас имеется такой телефон, он должен быть вам знаком. В противном случае все, что вам нужно знать о нем, сводится к тому, что это весьма привлекательный шрифт интерфейса, разработанный для обеспечения высокой разборчивости на небольших экранах. Вы сами можете его получить по адресу http://www.fontsquirrel.com/fonts/roboto.

примечание

Если есть возможность загрузить поднабор своего шрифта, применяемый для языка, который вы собираетесь использовать, именно так и нужно сделать. Это означает, что в результате будет получен файл, намного меньший по размеру, чем тот файл, в котором содержатся образы символов для языков, которые вы не собираетесь использовать.

После загрузки набора @font-face загляните в ZIP-файл, где обнаружатся папки различных шрифтов Roboto. Я выбираю версию Roboto Regular. Внутри этой папки шрифт присутствует в различных файловых форматах (WOFF, TTF, EOT и SVG), вдобавок там имеется файл stylesheet.css, содержащий стек шрифтов. Например, правило для Roboto Regular имеет следующий вид:

@font-face {

    font-family: 'robotoregular';

    src: url('Roboto-Regular-webfont.eot');

    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),

        url('Roboto-Regular-webfont.woff') format('woff'),

        url('Roboto-Regular-webfont.ttf') format('truetype'),

        url('Roboto-Regular-webfont.svg#robotoregular')

    format('svg');

        font-weight: normal;

        font-style: normal;

}

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

Теперь, несмотря на то что этот блок кода вполне достоин копирования и вставки, важно обратить внимание на пути, по которым можно найти сохраненные шрифты. Например, я склонен копировать шрифты из ZIP-файла и сохранять их в папке с незатейливым названием fonts, находящейся на том же уровне, что и моя папка css. Следовательно, поскольку я обычно копирую это правило со стеком шрифтов в свою основную таблицу стилей, мне нужно изменить пути. И тогда правило приобретет следующий вид: