Думаешь, ты знаешь CSS? Если результаты бесплатного CSS-теста, который я предлагал онлайн в течение последних шести месяцев, не изменится, многие начинающие разработчики не знают CSS так, как они думают. Из более 3000 человек, прошедших тестирование, средний балл составил всего 55%.
Но эй, средний не так уж интересен сам по себе. Мне было более любопытно, какие вопросы люди ошибаются. В этой статье я проверил цифры и сосредоточился на трех вопросах, где люди забили особенно плохо. Я расскажу вам каждый вопрос, покажу ответ, который выбрал большинство людей, и объясню правильный ответ.
Можно с уверенностью сказать, что если вы пройдете тест самостоятельно, прочитав это, у вас будет несправедливое преимущество!
Вопрос 1: Как лучше всего установить line-height
Этот первый вопрос должен был быть легким для любого, кто имеет дело со стилями текста на регулярной основе:
Вы хотите, чтобы текст на вашем сайте был по умолчанию с двойным интервалом. Какое из следующих значений
line-heightявляется лучшим способом для достижения этой цели?
200%2em2double
С четырьмя ответами на выбор вы ожидаете, что 25% людей получат правильный ответ только благодаря удаче, и только 31% получили этот правильный ответ! Найдите минутку и выберите ответ для себя, затем продолжайте читать.
Во-первых, double красная сельдь. Единственное значение ключевого слова, которое принимает line-height является normal . Я счастлив сказать, что только 9% людей влюбились в это. Остальные три ответа были довольно популярны.
Ответ, который выбрал большинство людей — 2em (39% выбрали это). Действительно, 2em наверняка даст вам двойной интервал для элемента, к 2em он применяется; но так будет 200% , и только 21% понравился этот ответ! Либо ems гораздо больше в моде, чем проценты, или люди на самом деле их не понимают.
Правильный ответ, тем не менее, 2 .
Это урок, который мне преподали давным-давно, когда я впервые изучал CSS. Всегда указывайте line-height как число без единиц измерения ; таким образом, элементы-потомки, которые задают другой font-size будут наследовать это число, а не фиксированную высоту строки.
Допустим, у страницы по умолчанию font-size 12pt , но он также содержит заголовок с размером font-size 24pt . Если вы установите line-height тела 2em (или 200% ), то вы получите высоту строки ровно 24pt (в два раза больше font-size тела) в любом месте документа — даже в этом заголовке. Таким образом, заголовок будет с одинарным интервалом, а не с двойным!
Вместо этого, установив line-height в 2 браузер сохраняет соотношение размера шрифта / высоты строки даже при изменении размера шрифта. Высота строки для тела будет 24pt , но для шрифта заголовка 24pt высота линии автоматически увеличится до 48pt .
Вопрос 2: Как сделать так, чтобы элементы перекрывались
Этот вопрос был немного сложнее. Это потребовало некоторого опыта «грязных трюков», которые часто требует CSS-верстка:
Какое из следующих свойств CSS, используемых само по себе, может вызвать наложение элементов HTML?
z-indexmarginoverflowbackground
Получил ответ? Хорошо, давайте погрузимся.
Еще раз, была легко устраняемая опция: background . Все, кроме 2% тестируемых, избегали этого, зная, что он контролирует цвета фона и изображения.
К сожалению, большинство направляется прямо в z-index . Полные 46% людей прыгали на этом. Я предполагаю, что это потому, что никто не понимает, как работает z-index . Фактически, установка свойства z-index сама по себе не имеет никакого эффекта ; вам также нужно установить свойство position элемента, чтобы z-index мог что-либо делать. Короче говоря, z-index позволяет управлять порядком наложения элементов, которые перекрываются, но в первую очередь они должны перекрываться. У MDN есть действительно хорошая статья под названием «Понимание CSS z-index», которую стоит прочитать для более подробной информации.
overflow тоже должно было быть легко устранено, если вы когда-либо использовали его. Он контролирует, как ведет себя контент, который не помещается в размерном блоке: обрезается ли он, выходит ли он за края блока и т. Д. Опять же, это зависит от того, ограничен ли размер блока другими свойствами; само по себе это не вызовет совпадений. Тем не менее, 22% людей думали, что может.
Это оставляет нас с margin , который является правильным ответом. Только 30% людей получили это. Вы можете задаться вопросом, как на земле свойство, которое создает расстояние между элементами, может вызвать их перекрытие. Если вы создали какой-либо реальный CSS-макет, ответ должен быть очевидным: отрицательные поля приводят к перекрытию.
Чтобы продемонстрировать это, создайте страницу с двумя элементами div . Установите на margin-top поле второго div отрицательное значение, например -100px . Бам! Второй div теперь покрывает нижнюю сотню пикселей первого div .
На практике вы почти никогда не перекрываете блоки, подобные этому, специально, но отрицательные поля чрезвычайно полезны для сжатия элементов HTML в местах, куда они обычно не идут. Я часто использую их для вставки левых или правых элементов в область заполнения родительского блока.
Для любителей истории веб-дизайна в 2005 году перекрывающиеся элементы с отрицательными полями сделали возможным создание трехколоночных макетов страниц, таких как так называемый One True Layout (а позднее макет Holy Grail ).
Вопрос 3: псевдоэлементы против псевдоклассов
Этот последний вопрос немного дешев, я признаю. Но только с 23% тестируемых, способных ответить на него правильно (это хуже, чем шанс!), Он явно попадает в замешательство:
Какой из следующих эффектов лучше всего достигается при использовании псевдоэлемента?
- Добавьте тень к гиперссылке, когда пользователь наводит на нее указатель мыши.
- Отображать метку флажка другим цветом, если флажок установлен.
- Дайте четным и нечетным строкам таблицы разные цвета фона.
- В гибком макете страницы отобразите первую строку абзаца жирным шрифтом.
Три из этих вариантов — это эффекты, которые вы достигаете с помощью псевдокласса; только один включает псевдоэлемент. Можете ли вы сказать разницу?
Псевдокласс — это определенное состояние, в котором может находиться фактический элемент HTML. Думайте об этом как о виртуальном классе, который автоматически применяется к элементу браузером при определенных условиях.
Псевдоэлемент — это часть документа, которую CSS позволяет стилизовать, даже если это не фактический элемент HTML. Это похоже на виртуальный элемент HTML — что-то, что вы можете стилизовать, даже если вокруг него нет реальных тегов HTML.
Имея это в виду, давайте рассмотрим варианты:
Добавьте тень к гиперссылке, когда пользователь наводит на нее указатель мыши.
Гиперссылка является фактическим элементом HTML. Применение стилей к нему только в определенной ситуации (когда мышь находится над ним) означает, что мы используем псевдокласс. В этом случае вы использовали бы псевдокласс :hover .
22% опрошенных считают, что это псевдоэлемент.
Отображать метку флажка другим цветом, если флажок установлен.
Опять же, label является фактическим элементом HTML, а не виртуальным. Когда флажок установлен, браузер применяет к нему псевдокласс :checked . Затем вы можете использовать его в селекторах для стилизации флажка или даже label рядом с ним (например, с помощью соседнего селекторного элемента с + ).
20% опрошенных считают, что это псевдоэлемент.
Дайте четным и нечетным строкам таблицы разные цвета фона.
Это тот, который действительно обманывает людей, но еще раз мы говорим о применении стилей к фактическим элементам HTML (в данном случае элементам tr ). tr — четное или нечетное число в коллекции дочерних элементов родительского элемента — это просто еще одно обстоятельство, которое можно сопоставить с псевдоклассом.
В этом случае псевдокласс :nth-child(even) (или :nth-child(2n) ) для четных элементов и :nth-child(odd) (или :nth-child(2n+1) ) для нечетных.
Я предполагаю, что это только потому, что :nth-child и псевдоэлементы в целом оба звучат как очень неясные функции CSS, но 36% тестирующих выбрали это как псевдоэлемент.
В гибком макете страницы отобразите первую строку абзаца жирным шрифтом.
Это, конечно, правильный ответ. И теперь, надеюсь, различие ясно. В гибком макете страницы вы не можете посмотреть HTML-код страницы и сказать «этот элемент содержит только первую строку текста абзаца». Браузер выполняет перенос слов в зависимости от ширины абзаца, что вы не можете контролировать в гибком макете страницы.
:first-line — это псевдоэлемент, который позволяет применять стили к первой строке текста в блоке, независимо от того, где эта первая строка переносится на вторую.
Если вы думаете: «Хорошо, конечно, все это имеет смысл, но давайте — никто не знает разницы между псевдоэлементами и псевдоклассами», хорошо, что W3C согласен с вами. В спецификации селекторов CSS3 , пытаясь различить их, он изменил синтаксис, так что селекторы псевдоэлементов используют два двоеточия ( ::first-line ), в то время как псевдоклассы все еще используют один ( :hover ). Конечно, для обратной совместимости браузеры должны поддерживать обе версии.
Так что да, как я уже сказал: дешевый выстрел. Но, эй, если вы такой же фанат CSS, как я, я думаю, вы бы знали свои псевдоэлементы из своих псевдоклассов.
Как дела?
Вот и все: три сложных вопроса из теста. Если вы ответили только на один из них с уверенностью, у вас все хорошо. Есть два из них? Совсем неплохо. Если у вас есть все три, я хотел бы услышать от вас! Особенно теперь, когда я дал ответы на эти вопросы, я действительно мог бы использовать некоторые идеи для более сложных вопросов CSS. Разместите их в комментариях!
Если вам понравились эти вопросы, возможно, вы хотели бы попробовать остальную часть теста . Будьте уверены, другие вопросы гораздо проще, чем эти … в основном!