Конечно, среднее значение не так уж интересно. Более интересны те вопросы, на которых «засыпалась» большая часть посетителей. В этой статье я расскажу о трех вопросах, в которых ошибались чаще всего.
Вопрос 1: Как лучше установить line-height?
Этот вопрос должен быть простым для тех, кто постоянно работает с текстами.
Если вы хотите установить двойной интервал на всем вашем сайте, какое из следующих значений line-height лучше всего подойдет для этой цели?
— 200%;
— 2em;
— 2;
— double;
Только 31% ответили правильно на этот вопрос. Остановитесь на минутку и выберите ответ для себя.
Во-первых, double – это отвлекающий маневр. Я счастлив сказать, что только 9% людей выбрали его. Остальные три ответа были довольно популярны.
Ответ, который выбрало большинство людей — 2em (39%). Действительно, 2em, несомненно, даст вам двойной интервал для элемента, в котором он применен, но то же делает и значение 200%, но только 21% понравился этот ответ!
Однако правильным ответом является значение 2 (вариант №3).
Это урок, который я усвоил очень давно, когда только начинал изучать CSS. Всегда указывайте line-height, как безразмерное число; таким образом, дочерние элементы, которые используют различные font-size, будут наследовать это число, а не фиксированную высоту строки.
Скажем страница имеет размер шрифта в 12pt, но она также содержит заголовок с размером шрифта в 24pt. Если вы установите line-height: 2em; (или 200% ), то вы получите высоту строки 24 пт (в два раза выше размера по умолчанию) во всем документе. Поэтому заголовок будет отображаться с одним интервалом.
line-height: 2; указывает браузеру, что он должен сохранять соотношение размера шрифта и высоты строки 1:2, даже если размер шрифта меняется.
Вопрос 2: Перекрытие элементов
Этот вопрос был немного сложнее. Он требует некоторого опыта в использовании «грязных трюков».
Какое из следующих свойств CSS, использованное само по себе, может вызвать перекрытие элементов?
— z-index;
— margin;
— overflow;
— background;
Выбрали ответ?
Естественно, мы сразу можем отмести background. Только 2% участников тестирования указали его как правильный ответ.
К сожалению, большинство опрошенных выбрало z-index. Ему отдали предпочтение 46% людей. Возможно, они неверно восприняли вопрос или просто не понимают, как работает z-index. Само по себе это свойство не имеет никакого эффекта, кроме него вы должны будете указать это свойство и для другого элемента, а также установить позицию для каждого из них. Короче говоря, Z-индекс позволяет контролировать порядок элементов, которые перекрываются, но, в первую очередь, они должны накладываться друг на друга.
Overflow довольно просто исключается из списка вариантов, если вы хотя бы пару раз использовали это свойство. Оно определяет поведение содержимого, которое не помещается внутри контейнера. Поведение элемента зависит от размера контейнера и значений других свойств. Опять же, само по себе, это свойство не приведет к перекрытию. Но, так или иначе, его выбрали 22%.
В итоге, у нас остается один ответ, а именно «margin». Вам может показаться странным, что свойство, которое управляет отступами от края элемента, может привести к перекрытию. Ответ прост: для этого необходимо использовать отрицательные значения.
Отрицательные поля являются чрезвычайно полезными для размещения HTML элементов.
Вопрос 3: Псевдо-элементы против псевдо-классов
Последний вопрос немного каверзен, я признаю.
Какие из следующих эффектов реализуется с помощью псевдо-элементов?
— Добавить к гиперссылке тень, которая появляется при наведении.
— Изменить цвет элемента checkbox при его выборе.
— Окрасить четные и нечетные строки таблицы различным цветом.
— Всегда отображать жирным шрифтом первую строку абзаца на адаптивной странице.
Три из этих эффектов достигаются при использовании псевдо-класса; только один требует использовать псевдо-элемент. Можете ли вы сказать, какой именно?
Псевдо-класс — определенное состояние, в котором может оказаться элемент. Думайте об этом как о классе, который применяется к элементу автоматически при определенных условиях.
Псевдо-элемент — это часть документа, для которой CSS позволяет использовать стили, даже несмотря на то, что он фактически не является HTML-элементом. Это что-то вроде виртуального HTML-элемента ¬– то, для чего вы можете создавать стили, хотя он, и не заключен в HTML-теги.
Учитывая это различие, давайте попробуем отыскать правильный ответ:
Добавить к гиперссылке тень, которая появляется при наведении
Гиперссылка — существующий HTML элемент. Применение стилей к нему только в конкретной ситуации (когда указатель находится над ним) означает, что мы используем псевдо-класс. Псевдо-класс, который вы бы могли использовать в этом случае: :hover.
22% участников тестирования думали, что это псевдо-элемент.
Изменить цвет элемента checkbox при его выборе
Опять же, checkbox является существующим HTML элементом, не виртуальным. Когда флажок установлен, браузер применяет к нему псевдо-класс :checked.
20% участников тестирования думали, что это псевдо-элемент.
Окрасить четные и нечетные строки таблицы различным цветом
Это то, чем мы действительно обманули людей, но мы все еще говорим о применении стилей к реальным элементам HTML. TR, как четные, так и нечетные, существуют, и мы просто применяем к ним стили, в зависимости от их состояния (четная/нечетная).
Используйте :nth-child(even) (или :nth-child(2n)) для четных и :nth-child(odd) (или :nth-child(2n+1)) для нечетных.
Я предполагаю, что 36% участников выбрали этот вариант только потому, что: nth-child и псевдо-элементы — довольно непонятные особенности CSS.
Всегда отображать жирным шрифтом первую строку абзаца на адаптивной странице
Давайте вспомним разницу между псевдо-классами и псевдо-элементами.
При адаптивной верстке вы не можете четко сказать, что вот этот элемент содержит первую строку. Ее содержание будет меняться в зависимости от ширины окна просмотра.
:first-line — псевдо-элемент, который позволяет применять стили к первой строке текста в блоке, независимо от того, где она заканчивается.
> Принимайте оплату от компаний через Интернет. Без сайта, ИП и ООО.
> Приём платежей от компаний для Вашего сайта. С документооборотом и обменом оригиналами.
> Автоматизация продаж и обслуживание сделок с юр.лицами. Без посредника в расчетах.
Комментарии (35)
neolink
25.04.2015 11:35+15На самом деле процент успешных ответов очень сильно зависит от того как спрашивают, поэтому пакет тестов и прогоняют на подопытных (не составлявших его и лучше вообще левых людях) в тестовом режиме, выбирая лучший вариант
— первый вопрос, не факт конечно что сильно изменило бы, но стоило добавить оговорку про то на сайте внутри будут менять шрифт.
— второй вопрос очень плох — так как надо угадать вопрос, а не ответ
— третий вопрос тоже не очень, псевдо-классы и псевдо-элементы не пересекаются, вы не можете использовать или то или то, поэтому и вопрос выбора лучшего из них не корректен. Так и спрашивайте: «Для какого из представленных случаев в селекторе будет использоваться псевдо-элемент.»
SelenIT2
25.04.2015 12:30По-моему, вся «подковырка» первого вопроса именно в том, что правильный ответ остается правильным независимо от оговорок (не говоря о том, что запрет разного
font-sizeдля основного текста и заголовков, при котором «подходят» варианты с процентами иem-ами — оговорка достаточно серьезная и неестественная:). В третьем вопросе тоже не так всё очевидно: для «исторических» псевдоэлементов из CSS1 допустим синтаксис с одним двоеточием, и:first-letter,:first-childи:first-lineна первый взгляд кажутся близнецами (более того, многие часто не задумываются о существовании других псевдоэлементов, кроме::before/::after:). И в чем необходимость угадывать вопрос во втором примере?neolink
25.04.2015 15:05+2> независимо от оговорок
это скорее наводящий вопрос
> для «исторических» псевдоэлементов из CSS1 допустим синтаксис с одним двоеточием
дело то не в кол-ве двоеточий, а в том чтобы вопрос доносил суть того что от тебя хотят, текущий вариант вопроса допускает что тень можно добавить через :hover:before — то есть я могу добавить «тень» которая будет даже в ie8 работать.
> И в чем необходимость угадывать вопрос во втором примере?
начну издалека — в чем смысл тестов? проверить знания, сделать некую общую шкалу для сравнения этих знаний и т.п. Как вы думаете сколько человек из тех кто ответил не правильно на этот вопрос ни разу не использовали отрицательный margin?
теперь по вопросу: что такое сами по себе? даже на картинке в статье есть ещё float, а в браузерах есть дефолтовые стили.
что такое перекрытие элементов и почему overflow: visible тут не подходит (http://habrahabr.ru/post/48383/)SelenIT2
25.04.2015 15:38+2текущий вариант вопроса допускает
… любые подвыподверты, даже подсветку строк таблицы через псевдоэлементы (иногда и такое бывает необходимо:). Но вот сделать жирным текст первой строки, когда ширина этой строки неизвестна (в оригинале речь про «резиновый» макет, в переводе это почему-то превратилось в «адаптивную страницу»), без псевдоэлемента(:):first-lineв CSS просто невозможно. И для этой задачи это решение единственное. Так что вопрос был еще и на внимательность:) А тень для IE8, если на то пошло, можно сделать без всяких псевдоштук через-ms-filter.
сколько человек из тех кто ответил не правильно на этот вопрос ни разу не использовали
Не обязательно пользоваться особенностью технологии, чтобы знать о ней. Знание неочевидных и даже вредных особенностей помогает избежать неожиданных граблей.
почему overflow: visible тут не подходит
Потому что он создает перекрытие только при фикированной высоте (реже ширине), которую нужно задавать явно. Т.е. не «сам по себе» при любой трактовке.neolink
25.04.2015 16:02+1> CSS просто невозможно. И для этой задачи это решение единственное
В вопросе спрашивается:
> Какие из следующих эффектов лучше всего делать с помощью псевдо-элементов?
ЭФФЕКТ ЛУЧШЕ, то что один из эффектов можно сделать только на псевдоэлементах не означает что нет другого который лучше делать на них же.
> Не обязательно пользоваться особенностью технологии
Если на вопрос об отрицательном марджине не могут ответить 70% респондентов это минимум повод задуматься над этим вопросом.
Ну и на вопрос вы не ответили — вы правда считаете что все over 2000 человек которые ответили не правильно не знают что такое отрицательный margin?
> Потому что он создает перекрытие
я кстати написал visible.
да я могу и про background тоже написать — почему красный квадрат не перекрывает белый body?
ну и я как бы доводы привел, нет особого смысла их повторять из записи в запись — более менее нормальный только первый вопрос, остальные нужно менять, и да это моё мнение оно может не совпадать с вашим.SelenIT2
25.04.2015 16:10-1то что один из эффектов можно сделать только на псевдоэлементах не означает что нет другого
Но выбрать-то можно только один вариант. И не выбрать вариант, решаемый только псевдоэлементами, ради варианта, который можно решить over 9k других способов — причем псевдоэлементы там изрядно притянуты за уши, и их «лучшесть» как минимум сильно субъективна — логически выглядит очень и очень слабо.
все over 2000 человек которые ответили не правильно не знают что такое отрицательный margin?
Я считаю, что они невнимательно прочитали вопрос. И не только они, сорри;). А верстальщик должен быть внимательным…
andrewiWD
26.04.2015 10:09+3пример на JSFiddle
Отрицательный марджин так же не работает «сам по себе». В фиддле простейший пример, где марджин даёт наложение, а не перекрытие для блочных элементов.
Какие из следующих эффектов лучше всего делать с помощью псевдо-элементов?
— Добавить к гиперссылке тень, которая появляется при наведении.
— Изменить цвет элемента checkbox при его выборе.
— Окрасить четные и нечетные строки таблицы различным цветом.
— Всегда отображать жирным шрифтом первую строку абзаца на адаптивной странице.
— А если ваш фонт размыт при помощи тени? Как лучше, в током случае, для него сделать тень? Тут уже напрашивается :before
— А если задача сделать анимацию при этом? серый чекбокс уезжает влево, а покрашенный приезжает справа?
— Ок, не могу придумать реальный пример.
— Вы сами сказали, что это можно сделать только при помощи псевдоэлемента. Т.е. уже не подходит под поставленный вопрос, с указанием на «лучше делать».
Я это всё к тому, что все ваши вопросы неоднозначны и оспоримы. Их можно спрашивать на собеседовании, где вам пояснят, что и почему считают правильным ответом. Для теста эти вопросы не подходят.SelenIT2
27.04.2015 00:21+2марджин даёт наложение, а не перекрытие
А разве это не один х..? (© деццкий анекдот:)
А если ваш фонт размыт при помощи тени? Как лучше, в током случае, для него сделать тень?
Внезапно, CSS позволяет навешивать несколько теней на один элемент, с разным смещением и размытием. Никаких псевдоэлементов (в которые, в случае text-shadow, еще нужно как-то проборосить сам текст) не нужно.
уже не подходит под поставленный вопрос, с указанием на «лучше делать»
Прекрасно подходит. Способ, решающий задачу, априори лучше всех способов, не решающих ее:)
все ваши вопросы неоднозначны и оспоримы
Вопросы не мои. Но внимательность, как показывает практика, они проверяют очень неплохо;)
Mercury13
25.04.2015 12:57Я в работу вебиста не лезу (и как-то облом разобраться, как правильно верстать div’ами). Но их тест по HTML я прошёл на 100%, по CSS — на 80%.
Что сказать? Единицу измерения «2» впервые вижу! Чем псевдокласс отличается от псевдоэлемента, пока не понимаю. Как я понял, псевдокласс
— это какое-то состояние тэга, а псевдоэлемент — какой-то кусок информации в тэге, правильно?
gwer
25.04.2015 13:43+1С псевдоэлементами в данном случае и у меня возникла путаница. Разделение на псевдоклассы и псевдоэлементы вполне логичное. За исключением first-line и first-letter, которые, по моему мнению, все же больше похожи на псевдоклассы, такие же как first-child, first-type, etc. И хотя формально их действительно относят к псевдоэлементам, логика этого мне не ясна.
SelenIT2
25.04.2015 14:15+6Псевдоклассам соответствуют элементы в определенном состоянии (:hover, :active, :checked, :valid) или положении (:first-child, :nth-of-type), тот же эффект можно было бы получить динамическим навешиванием обычных классов. Псевдоэлементам никакие элементы не соответствуют, штатными средствами DOM к первой букве и первой строке блока текста никак не достучаться, не меняя самой DOM (понадобятся дополнительные обертки). Поэтому отнести :first-line и :first-letter к псевдоклассам нельзя.
KriMs
25.04.2015 13:49+18Зачем нужна «спам-реклама» в конце статьи, которая вообще никак не относится к теме самой статье?
dom1n1k
25.04.2015 14:36+2Ответил правильно на все три. Осмысленно, не угадывая.
Но третий вопрос сформулирован очень мутно, долго пытаешься понять, что вообще от тебя хотят.
Novitsky
25.04.2015 19:15Но третий вопрос сформулирован очень мутно
Да, сформулирован мутно. Хотя, если точно знать, что:first-line— это псевдоэлемент, то ответ напрашивается сам собой.
Я, например, не задумываюсь псевдоэлемент это или псевдокласс. Я знаю, как это работает и этого достаточно.
Если честно, на третий вопрос я сначала начал думать, какой из вариантов можно сделать с помощью:before,:after. Быстро поняв, что во всех случаях есть свои инструменты (:hover,:checked,:nth-childи:first-line), я на время зашел в тупик, так как забыл, что:first-line— это псевдоэлемент.
EzS
25.04.2015 22:33+1На большую часть вопрос возникал свой вопрос: «а что имеется в виду?». Плохо поставленные вопросы
estum
26.04.2015 00:13+5Такое впечатление, что я прошел тест не на знание CSS, а на умение распознать подвох в вопросе про CSS. Подобные тесты обычно составляют преподы-теоретики, которые не используют свой предмет в реальной работе. Я не утверждаю, что в данном случае это так, но уж больно почерк похож.
Apx
26.04.2015 23:57+1. Прошёл тест, и ради интереса даже для JS. Как всегда поражаюсь. Вопросы вида «Which of these organisations is officially responsible for defining » траляля. Зачем они там? Как будто я от этого стану лучше верстать или писать код.
Steely
26.04.2015 02:49+3Большинство вопросов сформулировано неправильно. Это неправильный тест и он дал неправильные результаты.
vintage
26.04.2015 03:46+31. В дизайне есть такое понятие как «ритм текста». Ритм задаётся межстрочными интервалами и вообще говоря не зависит от размера шрифта. При малых отклонениях размера шрифта межстрочный интервал имеет смысл сохранять постоянным, кратно корректируя его лишь для сильных отклонений.
2. Отрицательные отступы дают больше вреда, чем пользы. Особенно в резиновых макетах. По возможности, стоит избегать их использования для компенсации отступов.
3. «Псевдоэлемент» — это частный случай «элемента с псевдоклассом», только элемент не представлен в DOM. Но привязываются стили к нему по псевдоклассу.SelenIT2
27.04.2015 00:243-й пункт — частный случай бреда:) Псевдоклассы и псевдоэлементы не пересекаются, а «DOM-элемент, только не представленный в DOM» — оксюморон.
vintage
27.04.2015 03:03
SelenIT2
27.04.2015 09:00И как частный нюанс блинковской реализации одного псевдоэлемента (притом абсолютно отсебятского и не описанного ни в одной спецификации) уменьшает абсурдность тезиса
«Псевдоэлемент» — это частный случай «элемента с псевдоклассом», только элемент не представлен в DOM. Но привязываются стили к нему по псевдоклассу.
?vintage
27.04.2015 10:54Он наглядно иллюстрирует, что любой псевдоэлемент — это скрытый dom- или css-элемент, доступ к которому осуществляется через некоторый установленный для него псевдокласс.
SelenIT2
27.04.2015 12:39или css-элемент
Еще одна новая сущность, неизвестная W3C? :)
некоторый установленный для него псевдокласс
В примере отсутствует напрочь. Есть нестандартный атрибут теневой DOM (кстати, всё-таки DOM), но опять же — это особенность конкретной реализации, притом вообще не связанной с каким-либо стандартом CSS.
иллюстрирует, что любой псевдоэлемент
Делать выводы о всеобщности по одному частному случаю (даже если бы пример был верен без оговорок) — грубая логическая ошибка.vintage
29.04.2015 01:42+1Я вас уверяю, во всех реализация dom дерево перед отображением превращается в дерево рендеринга, которое содержит помимо узлов соответствующих DOM, некоторое число дополнительных, для стилизации которых, в селекторе указывается «некоторое идентифицирующее их имя, отсутствующее в исходном dom дереве» или попросту «псевдокласс». Разделение на «всевдоклассы» и «псевдоэлементы» довольно условно. Также как разделение на «цветное» и «чёрное-белое». На этом, пожалуй, закончим сей бесполезный спор.
SelenIT2
29.04.2015 09:26или попросту «псевдокласс»
Всё же попрошу пруфа именно на это… или отказаться от настолько расширительной трактовки термина «псевдокласс», пусть и в кавычках:)
Я всё же считаю, что не стоит путать стандартную терминологию и смешивать стандартные названия для разных механизмов обращения к отдельным частям дерева рендеринга. Всё-таки разница между псевдоклассами и псевдоэлементами ближе не к «цветное vs. черно-белое», а к «цвета vs. краски». Да, спор сугубо терминологический, но вокруг CSS и так хватает путаницы…
zag2art
27.04.2015 08:06-1«а также установить позицию для каждого из них» лучше перевести «а также установить позиционирование для каждого из них»
IgorAdamenko
28.04.2015 21:42Если быть точным во всём, то:
::first-line — псевдо-элемент,..
SelenIT2
29.04.2015 09:29Спецификация разрешает для него (и еще трех «исторически сложившихся» ПЭ) и одно двоеточие. Что дает бонусом совместимость с IE8-. Так что если быть совсем точным, то формально оба варианта корректны, хотя да, идейно ваш чуть-чуть корректнее:)
quozd
Эти 3 вопроса должен знать каждый frontend-junior. Элементарщина же. Мы своих этим вещам учим в первые три недели.