Три вещи, которые никто (почти) не знает о CSS

12.05.2015

Кевин Янк (Kevin Yank) — автор статей, докладчик и гуру фронтенд-разработки, опубликовал на sitepoint.com довольного интересные результаты проводимого им теста по CSS. Более 3000 человек прошли тест, средний результат составил 55%. Но более интересен не сам результат, а вопросы, вызвавшие наибольшие трудности у отвечающих.

Вопрос 1. Как лучше задать line-height

Первый вопрос касается стилизации текста:

Вы хотите задать двойной межстрочный интервал по умолчанию. Какое значение свойства line-height подойдет для этого лучше всего?

  • 200%
  • 2em
  • 2
  • double

Поскольку вопрос имеет всего четыре варианта ответа, можно предположить, что 25% ответивших правильно просто выбрали случайный вариант и только 31% действительно знали правильный ответ.

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

Допустим, размер шрифта по умолчанию 12pt, а размер заголовка — 24pt. Если задать значение line-height элемента body равным 2em (или 200%), межстрочный интервал будет равен 24pt (размер шрифта, умноженный на 2) для всего документа, в том числе для заголовка.

Величина без единицы измерения означает отношение line-height / font-size, таким образом, оно будет изменяться при изменении размера шрифта.

Вопрос 2: Как сделать перекрытие элементов

Следующий вопрос сложнее:

Какое из следующих свойств CSS, используемое самостоятельно, может привести к перекрытию HTML элементов?

  • z-index
  • margin
  • overflow
  • background

Наименее популярный ответ — background, только 2% отвечавших выбрали его. Зато самый популярный — z-index, его выбрали 46% отвечавших. Свойство z-index позволяет управлять только порядком элеменов при перекрытии, а без указания свойства position не имеет вообще никакого действия.

Свойство overflow помогает контролировать поведение содержимого в блоках фиксированного размера. А вот margin — это правильный ответ. Отрицательное значение свойства margin может создать перекрытие элементов.

Отрицательное значение свойства margin может создать перекрытие элементов

Вопрос 3. Псевдо-элементы или псевдо-классы

На следующий вопрос ответили правльно только 23% отвечавших (даже меньше, чем по статистике):

Какой из следующих эффектов лучше всего реализовать с помощью псевдо-элемента?

  • Добавление тени к ссылке при наведении на нее.
  • Разный цвет для элемента label при активном или не активном элементе checkbox.
  • Разный цвет фона для четных и нечетных строк таблицы.
  • Отображение первой строки абзаца жирным текстом.

В основе этого вопроса лежит понимание разницы между псевдо-классами и псевдо-элементами. Псевдо-классы описывают специфические состояния элемента, а псевдо-элементы — это своего рода «виртуальные» элементы, которые можно стилизовать с помощью CSS, но они не имеют своего HTML-тега на странице.

Добавление тени при наведении реализуется с помощью псевдо-класса :hover, разный цвет для элемента label — с помощью псевдо-класса :checked и селектора +, разный цвет фона для четных и нечетных строк таблицы — с помощью псевдо-класса :nth-child. А вот выделение первой строки абзаца реализуется с помощью пседо-элемента ::first-line. Подробнее о разнице между псевдо-классами и псевдо-элементами можно прочитать в спецификации.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться