February 26, 2014gearmobile Reading time ~4 minutes

Кратко о :first-of-type, :nth-of-type и :not

Псевдоэлементы `:first-of-type` и `:last-child`

Псевдоэлемент :first-of-type служит для выборки дочернего элемента определенного типа.

Можно сказать, что псевдоэлемент :first-of-type является частным случаем псевдоэлемента :first-child. Если псевдоэлемент :first-child выполняет выборку первого дочернего элемента вне зависимости от его типа, то псевдоэлемент :first-of-type осуществляет выборку первого дочернего элемента только указанного типа (если этот элемент отвечает заданному условию - типу элемента).

Аналогично работает псевдоэлемент :last-of-type, только применяется к последнему дочернему элементу определенного типа. Более общим случаем является псевдоэлемент :last-child.

Псевдоэлементы :last-child, :nth-child(), :first-of-type НЕ ПОДДЕРЖИВАЮТСЯ IE8.

Пример:

.fofo p:first-of-type{}

… в примере тег p является указанием типа дочернего элемента. То есть, будет выбран первый дочерний элемент типа p, родителем которого является элемент с классом .fofo.

.wowo p:last-of-child{}

Выбрать последний дочерний элемент типа p, родителем которого является элемент с классом .wowo.

Рабочий пример приведен ниже. Два одинаковых списка. К первому применен псевдоэлемент :first-of-type, ко второму - псевдоэлемент :first-child.

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

.fofo p:first-of-type{
  font-weight: bold;
  color: #222;
  font-variant: small-caps;
  text-shadow: 1px 1px 1px #999;
}

Во втором случае к списку применен псевдоэлемент :first-child и в этом случае был отобран первый элемент указанного списка - ссылка a! А то, что этот элемент является ссылкой, а не параграфом p, роли не играет - тип элемента не был указан:

.wowo :first-child{
  font-size: 14px;
  font-style: italic;
  color: green;
  font-weight: bold;
}

Псевдоэлемент :first-of-type

Псевдоэлемент :last-of-child и его общий случай :last-child разбирать смысла нет, так как выборка элемента из HTML-документа осуществляется аналогично с тем лишь различием, что применяется не к первому, а последнему дочернему элементу.

Псевдоэлемент `:nth-of-type`

Псевдоэлемент :nth-of-type является частным случаем псевдоэлемента :nth-child. В случае с :nth-of-type выборка элементов производится не только по порядковому номеру, но и по типу элемента.

Например, p img:nth-of-type(odd){float: left} и p img:nth-of-type(even){float: right} делает выборку четных и нечетных порядковых номеров только элементов img.

Отбираются все дочерние по отношению к .nthOfType элементы типа img, нечетные по порядковому номеру. И применяются к нему правила - смещение влево, margin-right и тень справа:

.nthOfType img:nth-of-type(odd){
  float: left;
  margin: 0 10px 0 0;
  box-shadow: 3px 3px 3px rgba(0,0,0,.65);
}

Отбираются все дочерние по отношению к .nthOfType элементы типа img, четные по порядковому номеру. И применяются к нему правила - смещение право, margin-left и тень слева:

.nthOfType img:nth-of-type(even){
  float: right;
  margin: 0 0 0 10px;
  box-shadow: -3px 3px 3px rgba(0,0,0,.65);
}

Псевдоэлемент :nth-of-type

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

Псевдокласс :not (псевдокласс отрицания) - выбрать все элементы p, у которых НЕТ класса .classy и применить к ним следующие свойства: цвет и тень. Другими словами, выборка элементов с помощью псевдокласса :not производится от обратного - “выбрать все элементы, которые НЕ ОТВЕЧАЮТ следующему условию.”

Этот псевдокласс является антагонистом обычного условия - “если удовлетворяет условию, то примени такое-то свойство”:

<p class="classy">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>

.dodo p:not(.classy){
  color: blue;
  text-shadow: 1px 1px 1px rgba(0,0,255,.2);
}

Псевдоэлемент :not

На этом все.

February 25, 2014gearmobile Reading time ~2 minutes

Как правильно читать псевдо-элемент nth-child

Псевдо-элемент nth-child() полезен и удобен в применении.

Единственный момент, который мне всегда давался с трудом (а потом быстро забывался) - это запомнить тот алгоритм, по которому данный псевдо-элемент производил свои вычисления.

С ключевыми словами все более или менее ясно и просто - их всего два, одно отвечает за счет четных чисел, другое - за счет нечетных чисел. Нумерация в списках начинается с 1, а не с нуля. Поэтому при выборке с помощью ключевого слова odd - выбираются все нечетные позиции (1, 2, 3, 5, 7, ...). С помощью ключевого слова even - выбираются четные позиции (2, 4, 6, 8, ...).

Например, так:

li:nth-child(odd) a{
  color: #778899;
  text-decoration: none;
}

или так:

li:nth-child(even) a{
  color: #778899;
  text-decoration: none;
}

Псевдо-элемент nth-child(even)

А вот с общей формулой примерного вида 2n+2 было несколько сложнее. Пока я в “Большой книге CSS3” не нашел простого и краткого объяснения, как “читать” это выражение.

Все просто на самом деле. Допустим, у нас есть такое выражение:

li:nth-child(2n+3){
  color: #778899;
  text-decoration: none;
}

… здесь мы говорим браузеру - применить цвет #778899 и убрать подчеркивание text-decoration: none; к тексту каждого второго (2n) элемента li, начиная с третьего (3).

Еще примеры:

.third li:nth-child(3n+2) - выбрать каждый третий элемент, начиная со второго по порядку;
.fifth li:nth-child(5n+3) - выбрать каждый пятый элемент, начиная с третьего элемента;
.forth li:nth-child(4n+2) - выбрать каждый четвертый элемент, начиная со второго.

То есть, видя выражение типа 3n+4, мы читаем его так: каждый третий элемент, начиная с четвертого. Вопрос остается открытым в отношении загадочной буквы n.

Как уже можно было догадаться, это всего лишь счетчик. Это объяснение выражения было “подсмотрено” мною на CSS-Tricks (How nth-child Works).

Буква n в этом выражении - счетчик, начинающийся с 0. То есть, если взять первое выражение - .third li:nth-child(3n+2), то вычисление внутри него будет производиться следующим образом:

3 * 0 + 2 = 2
3 * 1 + 2 = 5
3 * 2 + 2 = 8
3 * 3 + 2 = 11
3 * 4 + 2 = 14
3 * 5 + 2 = 17
3 * 6 + 2 = 20
...

То есть, как и говорилось выше - каждый третий элемент, начиная со второго. Совершенно ничего сложного, как видим. Простая математика и запоминать ничего не нужно. Главное - понять алгоритм вычисления в этом выражении.

Тогда ключевое слово odd можно записать в виде выражения 3n, а ключевое слово even как выражение 2n. Ключевые слова были введены в употребление для удобства ввиду частого использования выражений 2n и 3n.

На этом все.

February 24, 2014gearmobile Reading time ~14 minutes

Подключение веб-шрифтов с помощью @font-face

Выжимка из замечательной книги “Большая книга CSS3 3-е издание” Дэвида Макфарланда о веб-шрифтах и способе их подключения с помощью директивы @font-face.

Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом Google Fonts и числовая шкала плотности шрифтов, ресурсы для поиска бесплатных шрифтов, тонкости работы с генератором FontSquirrel, ресурсы по шрифтовым иконкам. Для меня информация оказалась чрезвычайно полезной и интересной.

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

Подключение веб-шрифтов с помощью @font-face:

подключение нестандартного шрифта с помощью директивы @font-face
назначение подключенного шрифта с помощью свойства font-family

Директива @font-face указывает (название говорит само за себя - директива!) браузеру сделать две вещи:

создать указываемое имя шрифта
загрузить глифы для шрифта из указанного ею места

Свойство font-family указывает браузеру применить шрифт с указанным именем выбранным элементам страницы.

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически - это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) - это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

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

Благодаря этому изображения в таком формате масштабируются без потери качества - при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт - это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов - “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.

Платные шрифты делятся на те, которые:

можно использовать в Веб
нельзя использовать в Веб

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

The League of Movable Type (https://www.theleagueofmoveabletype.com/)
FontSquirrel (http://www.fontsquirrel.com/)
Google Fonts (https://www.google.com/fonts)
The Open Font Library (http://openfontlibrary.org/ru)
Fontex.org (http://fontex.org/)
Exljbris Font Foundry (http://www.exljbris.com/)

The League of Movable Type

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

Единственное ограничение этого сервиса - он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.

Генератор @font-face Generator - не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.

Порядок указания форматов шрифтов в директиве @font-face важен и должен быть следующим:

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansRegular.eot');
  src:  url('PTSansRegular.eot#iefix') format('embedded-opentype'),
    url('PTSansRegular.woff') format('woff'),
    url('PTSansRegular.ttf') format('truetype'),
    url('PTSansRegular.svg') format('svg');
}

EOT - формат только для Internet Explorer 8 и ниже
WOFF - самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
TTF - сравнительно большой по размеру шрифт и достаточно устаревший
SVG - самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

Браузер читает тело директивы @font-face - каждую строку последовательно. Как только он обнаруживает понятный для него формат шрифта, то загружает его. Поэтому последовательность объявления форматов шрифтов в директиве @font-face является неслучайной и эмпирически выверенной на основе опыта предыдущих веб-разработчиков.

h1{
  font-family: 'League Gothic', Arial, sans-serif;
  font-weight: normal;
}

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем - резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

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

Помимо букв, шрифты могут состоять из иконок или изображений. Ресурсы, посвященные теме шрифтовых иконок и значков:

Виды шрифтов

При подключении шрифтов, установленных на компьютере, обычно не возникает вопросов и мы не задумываемся о том, как так получается, что при указании браузеру отрисовать текст полужирным с помощью тега strong у нас действительно получается полужирный шрифт; при указании сделать текст курсивным через тег em текст действительно делается курсивным; а при полужирном курсиве через теги strong em он делается полужирным курсивом. Нам кажется, что браузер делает текст таким, каким мы указываем ему.

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь - попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название oblique. В этом случае браузер просто тупо выполняет наклон всех букв шрифта на 45 градусов, и все. Получившийся результат может быть просто ужасным, поэтому такая команда используется очень редко.

В случае с веб-шрифтами веб-дизайнеру нужно самому побеспокоиться от том, чтобы подключить все четыре вида начертания выбранного шрифта по отдельности. Из-за браузера IE8 подключение веб-шрифтов с помощью директивы @font-face значительно осложняется и может быть выполнено двумя способами: простым, который IE8 не понимает (но понимают все остальные браузеры) и сложным, который будет доступен и IE8 также.

Простой способ подключения веб-шрифта

Простой способ заключает в добавлении к директиве @font-face двух CSS-правил: font-weight и font-style. Обычно эти два правила задают браузеру команды отображать текст полужирным и курсивным начертанием. Но внутри директивы @font-face эти правила выполняют другую роль, они заставляют браузер загрузить веб-шрифт с указанным стилем и жирностью. Чтобы быть более понятным, приведем сразу пример подключения веб-шрифта PTSans с четырьмя вариантами его отображения:

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansRegular.eot');
  src:  url('PTSansRegular.eot#iefix') format('embedded-opentype'),
  url('PTSansRegular.woff') format('woff'),
  url('PTSansRegular.ttf') format('truetype'),
  url('PTSansRegular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansItalic.eot');
  src:  url('PTSansItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansItalic.woff') format('woff'),
  url('PTSansItalic.ttf') format('truetype'),
  url('PTSansItalic.svg') format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansBold.eot');
  src:  url('PTSansBold.eot#iefix') format('embedded-opentype'),
  url('PTSansBold.woff') format('woff'),
  url('PTSansBold.ttf') format('truetype'),
  url('PTSansBold.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansBoldItalic.eot');
  src:  url('PTSansBoldItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansBoldItalic.woof') format('woff'),
  url('PTSansBoldItalic.ttf') format('truetype'),
  url('PTSansBoldItalic.svg') format('svg');
  font-weight: bold;
  font-style: italic;
}

Расскажу, как я понимаю данные CSS-правила. Директива @font-face является своего рода функцией наподобие функции в JavaScript (а может это и есть функция на самом деле, уж больно похожа по своему функционалу?). Эта функция (я буду называть так здесь эту директиву) объявляет имя переменной правилом font-family: 'PTSans'. Эта переменная является массивом, который заполняется значениями с помощью последующих правил:

src: url('PTSansBoldItalic.eot') - местоположение шрифта;
font-weight: normal - загрузить шрифт указанной жирности;
font-style: normal - загрузить шрифт указанного стиля.

CSS-правила требуют, чтобы при четырех вариантах отображения шрифта заполнение массива PTSans производилось каждый раз отдельным вызовом функции @font-face. После этого достаточно подключить переменную PTSans к выбранным элементам страницы:

p {
 font-family: PTSans;
}

И затем HTML-тегами strong или em указать, какое начертание шрифта применить к указанным элементам:

dolor ets <strong>lorem ipsum dolor ets</strong> lorem ipsum ipsum dolor ets lorem ipsum <em>dolor ets lorem ipsum dolor</em> ets lorem ipsum dolor ets

Браузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.

Преимуществом данного способа подключения веб-шрифта является его универсальность. Достаточно один раз объявить шрифт с помощью директивы @font-face и правила:

какой-то элемент {
 font-family: PTSans;
}

… чтобы потом управлять отображением этого шрифта посредством семантически верных тегов strong и em.

Сложный способ подключения веб-шрифта

К сожалению, IE8 не понимает способа подключения веб-шрифта, описанного выше. Точнее, этот браузер не понимает способа подключения различных начертаний шрифта к одному и тому же имени этого шрифта. Если создать правила, описанные выше и попробовать загрузить полученную HTML-страницу в IE8, то весь текст будет отображен как: font-family: PTSans; font-weight: normal; font-style: normal.

В тех местах, где применены теги strong или em, браузер IE8 будет сам делать из шрифта PTSans начертания bold и italic, а не подключать уже готовые шрифты в этих начертаниях. Результат такой “самодеятельности” будет плачевным.

Выходом из положения будет применение различных имен шрифта в директиве @font-face. Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:

@font-face{
  font-family: 'PTSansRegular';
  src:  url('PTSansRegular.eot');
  src:  url('PTSansRegular.eot#iefix') format('embedded-opentype'),
  url('PTSansRegular.woff') format('woff'),
  url('PTSansRegular.ttf') format('truetype'),
  url('PTSansRegular.svg') format('svg');
}

@font-face{
  font-family: 'PTSansItalic';
  src:  url('PTSansItalic.eot');
  src:  url('PTSansItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansItalic.woff') format('woff'),
  url('PTSansItalic.ttf') format('truetype'),
  url('PTSansItalic.svg') format('svg');
}

@font-face{
  font-family: 'PTSansBold';
  src:  url('PTSansBold.eot');
  src:  url('PTSansBold.eot#iefix') format('embedded-opentype'),
  url('PTSansBold.woff') format('woff'),
  url('PTSansBold.ttf') format('truetype'),
  url('PTSansBold.svg') format('svg');
}

@font-face{
  font-family: 'PTSansBoldItalic';
  src:  url('PTSansBoldItalic.eot');
  src:  url('PTSansBoldItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansBoldItalic.woof') format('woff'),
  url('PTSansBoldItalic.ttf') format('truetype'),
  url('PTSansBoldItalic.svg') format('svg');
}

Обратите внимание на отсутствие правил font-weight и font-style во всех четырех директивах @font-face. Такой код выглядит даже более понятным и логичным, нежели первый вариант. И вроде бы все хорошо, но задавайте теперь рассмотрим простой пример параграфа с тегами strong и em, к которому следует применить шрифт PTSans.

Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам h1, h2, ссылке a? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?

p{
 font-family: PTSansRegular;
 font-weight: normal;
 font-italic: normal;
 font-size: 36px;
}

p strong{
 font-family: PTSansBold;
 font-weight: bold;
 font-italic: normal;
}

p em{
 font-family: PTSansItalic;
 font-weight: normal;
 font-italic: italic;
}

p strong em{
 font-family: PTSansBoldItalic;
 font-weight: bold;
 font-italic: italic;
}

Применять или не применять второй способ подключения веб-шрифтов - это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.

Шрифты Google Fonts

Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив font-face, можно воспользоваться сервисом Google Fonts. Преимущество этого способа заключается в простоте способа и его надежности - достаточно получить на сервере Google одну строку ссылки и поместить ее в свой проект.

Примечательный момент использования шрифтов Google - это способ подключения полученных шрифтов. Первый способ - с помощью тега link, второй в помощью директивы @import, третий с помощью скрипта JavaScript.

Первый способ прост, но имеет один недостаток - тег link нужно будет подключать к каждой из разрабатываемых HTML-страниц проекта.

В тоже время, второй способ с помощью директивы @import более лаконичный - достаточно подключить ее в начало таблиц стилей, чтобы выбранные шрифты применялись ко всем HTML-страницам.

Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.

В Google плотность шрифта обозначается не с помощью ключевых слов normal, bold или bolder, а в числовой шкале - 100 до 900. Значение 400 соответствует normal, 700 - bold.

К примеру, код может выглядеть следующим образом. Зададим для элемента em шрифт Gentium Book Basic нормальной плотности курсивного начертания:

em{
 font-family: 'Gentium Book Basic', serif;
 font-weight: 400;
 font-style: italic;
}

На этом выжимка по веб-шрифтам заканчивается.

February 23, 2014gearmobile Reading time ~4 minutes

Отрицательный margin в нормальном потоке

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

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

Решения такого вопроса два.

Первый способ - это воспользоваться смежными селекторами.

Второй способ, представленный на рисунке ниже, это применить отрицательный margin-bottom для h2:

Между заголовком и параграфом нет промежутка

Можно подумать, что у параграфа, который следует сразу за заголовком, отсутствует margin-top, но это не так. Margin-top никуда не пропадал.

Он просто оказался перекрытым заголовком h2, у которого край margin-bottom находится в непосредственной близости от края текста самого заголовка. Параграф и его собственный margin располагаются сразу под ним, а не у нижнего края границы заголовка.

Такой прием полезен на практике в случае, когда необходимо расположить часть контента “на одной линии”. Почему слово на одной линии заключено в кавычки - потому-что контент только визуально располагается на одной линии.

Предположим, у нас есть список (HTML-разметка):

<ul class="jump">
  <li class="prev">
    <a class="ch03.html" href="#">Salaries</a>
  </li>
  <li class="next">
    <a class="ch05.html" href="#">Punching the Clock</a>
  </li>
</ul>

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

Такую задачу можно выполнить обычным способом - через float (прим. переводчика - я бы так и поступил, разбросал оба li по разным углам блока ul через float: left и float: right) для обоих пунктов.

Но можно решить такую задачу другим способом:

Два пункта меню на одной линии

.jump{
  list-style-type: none;
  line-height: 1;
  width: 25em;
  margin: 0 auto;
  padding: .25em 1em;
  border: 1px solid;
}
  .jump .next{
    text-align: right;
    margin-top: -1em;
  }

В этом примере отрицательный margin-top величиной в -1em “поднимает” элемент li.next вверх ровно на высоту строки, установленную нами ранее в правиле line-height: 1.

Прим. переводчика: очень понравилось, о таком способе решения даже не подозревал!

Другим полезным приемом является частичное выдвижение элемента изнутри наружу своего контейнера-родителя. Предположим, у нас стоит задача расположить блок заголовка точно по центру разделительной линии так, как это показано на рисунке ниже:

Расположение заголовка по центру разделительной линии

HTML-разметка такого заголовка будет следующей:

<div class="entry">
  <h2>
    The Web Stack
  </h2>
    ...
</div>

.entry{
    border-top: 1px solid gray;
  }
  .entry h2{
    width: 80%;
    background-color: #fff;
    border: 1px solid gray;
    margin: -0.67em auto 0;
    text-align: center;
  }

C другой стороны, может потребоваться задача, когда блок заголовка не имеет фиксированной ширины, а ширина задается только его содержимым. В этом случае необходимо добавить всего несколько строк кода в HTML-разметку и CSS-правила, соответственно:

HTML-разметка, в которой добавлен еще один элемент - span:

<div class="entry">
  <h2>
    <span>The Web Stack</span>
  </h2>
    ...
</div>

.entry h2{
    margin-top: -0.67em;
    text-align: center;
    border-top: 1px solid gray;
  }
  .entry h2 span{
    background-color: #fff;
    border: 1px solid gray;
    padding: .25em 1em;
  }

Ширина блока заголовка задается его контентом

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

Для этого случая решение с помощью отрицательного margin-top не является самым лучшим. Можно лишь посоветовать убрать верхнюю границу border-top у блока-родителя и сделать для него фоновую заливку белого цвета, также. Это будет не совсем то, что нужно; но все же достаточно хорошее решение.

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

На этом все.

February 21, 2014gearmobile Reading time ~3 minutes

CSS-разметка - применение outline вместо border

Для начала я бы хотел поговорить об использовании свойство outline, которое на первый взгляд кажется подобным свойству border.

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

Во время создания разметки можно визуально обозначить местоположение всех ее частей.

Например, таким образом:

div {outline: 1px solid #ff0000}

Пример CSS-разметки

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

Вот что я имею ввиду: предположим, у вас есть три колонки div‘ов, которые должны располагаться внутри контейнера-родителя div с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели em, проценты или любую другую единицу измерения).

Для всех трех div‘ов-потомков устанавливаем правила float: left; width: 33.33% и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

Если ко всем трем блокам вы добавите свойство border: 1px solid #ff0000;, то последний из этих трех опустится вниз и расположиться под двумя первыми:

CSS-разметка с помощью border

Это произошло потому, что каждый из трех блоков div имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в 1px, что делает ширину блока равной, как минимум, 322px.

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера - сместить последний блок вниз!

Именно по этой причине свойство border нарушает разметку. Свойство outline, с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока div со свойством outline: 1px solid #ff0000; разместятся друг рядом с другом внутри блока-родителя.

Не имеет значения, какой толщины вы сделаете outline, блоки div никогда не сдвинуться и не нарушат разметку (это касается не только блока div, а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:

CSS-разметка с помощью outlines

Сразу становится ясно преимущество использования outline при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие outline от border заключается в том, что outline “рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

Другими словами, вы не можете просто создать левый outline или же правый outline, как вы это обычно делаете при работе с границами border. Может существовать только граница outline вокруг всех четырех сторон элемента, и не может быть по другому.

По этой же причине невозможно изменять цвет, ширину или стиль какой-либо одной из сторон элемента. Если необходимо создать границу outline: 2px dashed yellow, то она будет создана таковой вокруг всех сторон элемента.

Заметьте, что элемент может одновременно иметь оба свойства border и outline. В этом случае граница outline будет отрисована браузером снаружи от границы border, так что внутренний край outline будет соприкасаться с внешним краем границы border:

Свойство outline и border для одного элемента

Если элемент также имеет margin, то эти поля рисуются вокруг границ outline; но при этом outline не изменяют поля margin и не замещают их.

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

Zencoder

Frontend Developer Notebook

Кратко о :first-of-type, :nth-of-type и :not

Псевдоэлементы `:first-of-type` и `:last-child`

Псевдоэлемент `:nth-of-type`

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

Как правильно читать псевдо-элемент nth-child

Подключение веб-шрифтов с помощью @font-face

Подключение веб-шрифтов с помощью @font-face:

Правовой вопрос использования шрифтов

Виды шрифтов

Простой способ подключения веб-шрифта

Сложный способ подключения веб-шрифта

Шрифты Google Fonts

Отрицательный margin в нормальном потоке

CSS-разметка - применение outline вместо border

Zencoder

Frontend Developer Notebook

Псевдоэлементы :first-of-type и :last-child

Псевдоэлемент :nth-of-type

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

Подключение веб-шрифтов с помощью @font-face:

Правовой вопрос использования шрифтов

Виды шрифтов

Простой способ подключения веб-шрифта

Сложный способ подключения веб-шрифта

Шрифты Google Fonts

Псевдоэлементы `:first-of-type` и `:last-child`

Псевдоэлемент `:nth-of-type`