Вы думаете, что знаете CSS? Если результаты бесплатного онлайн-теста не врут, большинство разработчиков знает CSS не так хорошо, как им кажется. У 3000 человек, прошедших тест, средний балл составляет 55%.

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

А после чтения статьи можете проверить себя.

Вопрос №1: как лучше задавать line-height?

Первый вопрос должен быть простым для всех, кто регулярно работает с формлением текста:

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

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

Первый вариант, который мы исключим это double. Единственное ключевое слово, которое принимает line-height это normal, я рад, что 99% это понимают. Оставшиеся 3 варианта собирают примерно одинаковое количество сторонников.

Наиболее популярный ответ 2em (его выбирают 39%). Конечно, 2em дадут вам двойной интервал у элемента, к которому он применен и то же самое дают и 200% (их выбрали 21%). Или em в большей моде, чем проценты или люди не до конца понимают их.

Однако правильный ответ это 2.

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

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

А задание line-height равной 2 говорит браузеру о необходимости сохранять именно соотношение высоты строки к размеру шрифта. Высота строки в body будет равна 24pt, а в заголовке она будет увеличиваться до 48pt.

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

Этот вопрос с подковыркой. Он требует опыта трюков при создании макетов с CSS:

Какое из свойств CSS, использованное само по себе может вызвать перекрытие элементов?

  • z-index
  • margin
  • overflow
  • background

Выбрали ответ? Теперь взглянем на детали.

Опять, здесь есть легко исключаемый вариант: background, на нем остановились лишь 2% тестируемых, остальные помнят, что это свойство относится к фоновым цветам и изображениям.

К сожалению, большинство выбрало z-index, целых 46%. Я думаю, что это из-за непонимания работы z-index. Надо помнить что простое задание z-index не производит никакого эффекта, сначала надо установить свойство position в состояние, отличное от дефолтного. Короче говоря, z-index позволяет вам контролировать элементы,которые уже перекрываются, отличная статья об этом есть на сайте Mozilla.

Свойство overflow вы также исключите, если вы с ним сталкивались. Оно контролирует поведение контента, не вмещающегося в контейнер: обрезается ли он или выходит за границы контейнера. И оно зависит от свойств контейнера — само по себе оно не может вызвать перекрытие. Но 22% считают иначе.

У нас остался правильный ответ — margin и его дали лишь 30%. Вы можете удивиться, как свойство создающее расстояния между элементами создает перекрытия, но ответ прост: негативный margin может.

Для демонстрации этого создадим простую страницу с двумя элементами div, зададим нижнему из них отрицательный margin-top , например, -100px. И теперь нижний див перекрывает верхний на те самые 100 пикселей.

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

negative-margin-float.

И небольшой экскурс в историю: в 2005 году именно перекрытие элементов с отрицательными отступами дало нам трехколоночные макеты, известные как One True Layout (позднее Holy Grail layout).

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

Последний вопрос грубоват, не спорю. Но только 23% тестируемых ответили на него правильно, он четко бьет по больному месту:

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

  • Добавление тени к элементу при наведении мыши.
  • Смена цвета label у чекбокса при выборе.
  • Задание чередующихся цветов для четных и нечетных рядов в таблице.
  • Выделение первой строчки параграфа жирным в резиновом макете

Три эффекта из списка достигаются с помощью псевдоклассов, а один с помощью псевдоэлементов. В чем разница?

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

Псевдоэлемент — часть документа, которую можно стилизовать в CSS, несмотря на отсутствие такого элемента. Это как виртуальный элемент — что-то, что вы можете стилизовать даже при отсутствии тегов HTML.

С учетом этих различий начнем разбирать примеры.

Добавление тени к ссылке при наведении

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

Этот вариант выбрали 22% тестируемых.

Смена цвета label у чекбокса при выборе.

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

Этот вариант выбрали 20% тестируемых.

Задание чередующихся цветов для четных и нечетных рядов в таблице.

Этот пункт одурачил многих, но в данном случае речь опять идет о применении стилей к существующим HTML-элементам (в данном случае tr). Выборка четных и нечетных рядов это опять применение псевдокласса.

Эти псевдоклассы соответственно :nth-child(even) и :nth-child(odd). С псевдоэлементами их спутали 36%.

Выделение первой строчки параграфа жирным в резиновом макете

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

:first-line это псевдоэлемент, позволяющий вам применить стили к первой строке текстового блока, независимо от ее размера на экране.

Вы можете сказать “ОК”, но не торопитесь — никто не знает разницы между псевдоклассами и псевдоэлементами в том числе и W3С. В спецификации CSS селекторов они отличаются синтаксисом — псевдоэлементы теперь выделяются двойным двоеточием (::first-line), а псевдоклассы — одинарным (:hover); в целях совместимости браузеры поддерживают поддерживают и старый (одинаковый) синтаксис.

Да, это грубоваты вопрос, но CSS-гики должны отличать псевдоэлементы от псевдоклассов.

Заключение

Вот и все — три самых сложных вопроса разобраны. Если вы дали хотя бы один правильный ответ, все не так уж плохо. Два? Отлично! Три? Можете писать свои статьи.