Comments 35
Эти 3 вопроса должен знать каждый frontend-junior. Элементарщина же. Мы своих этим вещам учим в первые три недели.
На самом деле процент успешных ответов очень сильно зависит от того как спрашивают, поэтому пакет тестов и прогоняют на подопытных (не составлявших его и лучше вообще левых людях) в тестовом режиме, выбирая лучший вариант
— первый вопрос, не факт конечно что сильно изменило бы, но стоило добавить оговорку про то на сайте внутри будут менять шрифт.
— второй вопрос очень плох — так как надо угадать вопрос, а не ответ
— третий вопрос тоже не очень, псевдо-классы и псевдо-элементы не пересекаются, вы не можете использовать или то или то, поэтому и вопрос выбора лучшего из них не корректен. Так и спрашивайте: «Для какого из представленных случаев в селекторе будет использоваться псевдо-элемент.»
— первый вопрос, не факт конечно что сильно изменило бы, но стоило добавить оговорку про то на сайте внутри будут менять шрифт.
— второй вопрос очень плох — так как надо угадать вопрос, а не ответ
— третий вопрос тоже не очень, псевдо-классы и псевдо-элементы не пересекаются, вы не можете использовать или то или то, поэтому и вопрос выбора лучшего из них не корректен. Так и спрашивайте: «Для какого из представленных случаев в селекторе будет использоваться псевдо-элемент.»
UFO just landed and posted this here
> независимо от оговорок
это скорее наводящий вопрос
> для «исторических» псевдоэлементов из CSS1 допустим синтаксис с одним двоеточием
дело то не в кол-ве двоеточий, а в том чтобы вопрос доносил суть того что от тебя хотят, текущий вариант вопроса допускает что тень можно добавить через :hover:before — то есть я могу добавить «тень» которая будет даже в ie8 работать.
> И в чем необходимость угадывать вопрос во втором примере?
начну издалека — в чем смысл тестов? проверить знания, сделать некую общую шкалу для сравнения этих знаний и т.п. Как вы думаете сколько человек из тех кто ответил не правильно на этот вопрос ни разу не использовали отрицательный margin?
теперь по вопросу: что такое сами по себе? даже на картинке в статье есть ещё float, а в браузерах есть дефолтовые стили.
что такое перекрытие элементов и почему overflow: visible тут не подходит (http://habrahabr.ru/post/48383/)
это скорее наводящий вопрос
> для «исторических» псевдоэлементов из CSS1 допустим синтаксис с одним двоеточием
дело то не в кол-ве двоеточий, а в том чтобы вопрос доносил суть того что от тебя хотят, текущий вариант вопроса допускает что тень можно добавить через :hover:before — то есть я могу добавить «тень» которая будет даже в ie8 работать.
> И в чем необходимость угадывать вопрос во втором примере?
начну издалека — в чем смысл тестов? проверить знания, сделать некую общую шкалу для сравнения этих знаний и т.п. Как вы думаете сколько человек из тех кто ответил не правильно на этот вопрос ни разу не использовали отрицательный margin?
теперь по вопросу: что такое сами по себе? даже на картинке в статье есть ещё float, а в браузерах есть дефолтовые стили.
что такое перекрытие элементов и почему overflow: visible тут не подходит (http://habrahabr.ru/post/48383/)
UFO just landed and posted this here
> CSS просто невозможно. И для этой задачи это решение единственное
В вопросе спрашивается:
> Какие из следующих эффектов лучше всего делать с помощью псевдо-элементов?
ЭФФЕКТ ЛУЧШЕ, то что один из эффектов можно сделать только на псевдоэлементах не означает что нет другого который лучше делать на них же.
> Не обязательно пользоваться особенностью технологии
Если на вопрос об отрицательном марджине не могут ответить 70% респондентов это минимум повод задуматься над этим вопросом.
Ну и на вопрос вы не ответили — вы правда считаете что все over 2000 человек которые ответили не правильно не знают что такое отрицательный margin?
> Потому что он создает перекрытие
я кстати написал visible.
да я могу и про background тоже написать — почему красный квадрат не перекрывает белый body?
ну и я как бы доводы привел, нет особого смысла их повторять из записи в запись — более менее нормальный только первый вопрос, остальные нужно менять, и да это моё мнение оно может не совпадать с вашим.
В вопросе спрашивается:
> Какие из следующих эффектов лучше всего делать с помощью псевдо-элементов?
ЭФФЕКТ ЛУЧШЕ, то что один из эффектов можно сделать только на псевдоэлементах не означает что нет другого который лучше делать на них же.
> Не обязательно пользоваться особенностью технологии
Если на вопрос об отрицательном марджине не могут ответить 70% респондентов это минимум повод задуматься над этим вопросом.
Ну и на вопрос вы не ответили — вы правда считаете что все over 2000 человек которые ответили не правильно не знают что такое отрицательный margin?
> Потому что он создает перекрытие
я кстати написал visible.
да я могу и про background тоже написать — почему красный квадрат не перекрывает белый body?
ну и я как бы доводы привел, нет особого смысла их повторять из записи в запись — более менее нормальный только первый вопрос, остальные нужно менять, и да это моё мнение оно может не совпадать с вашим.
UFO just landed and posted this here
пример на JSFiddle
Отрицательный марджин так же не работает «сам по себе». В фиддле простейший пример, где марджин даёт наложение, а не перекрытие для блочных элементов.
— А если ваш фонт размыт при помощи тени? Как лучше, в током случае, для него сделать тень? Тут уже напрашивается :before
— А если задача сделать анимацию при этом? серый чекбокс уезжает влево, а покрашенный приезжает справа?
— Ок, не могу придумать реальный пример.
— Вы сами сказали, что это можно сделать только при помощи псевдоэлемента. Т.е. уже не подходит под поставленный вопрос, с указанием на «лучше делать».
Я это всё к тому, что все ваши вопросы неоднозначны и оспоримы. Их можно спрашивать на собеседовании, где вам пояснят, что и почему считают правильным ответом. Для теста эти вопросы не подходят.
Отрицательный марджин так же не работает «сам по себе». В фиддле простейший пример, где марджин даёт наложение, а не перекрытие для блочных элементов.
Какие из следующих эффектов лучше всего делать с помощью псевдо-элементов?
— Добавить к гиперссылке тень, которая появляется при наведении.
— Изменить цвет элемента checkbox при его выборе.
— Окрасить четные и нечетные строки таблицы различным цветом.
— Всегда отображать жирным шрифтом первую строку абзаца на адаптивной странице.
— А если ваш фонт размыт при помощи тени? Как лучше, в током случае, для него сделать тень? Тут уже напрашивается :before
— А если задача сделать анимацию при этом? серый чекбокс уезжает влево, а покрашенный приезжает справа?
— Ок, не могу придумать реальный пример.
— Вы сами сказали, что это можно сделать только при помощи псевдоэлемента. Т.е. уже не подходит под поставленный вопрос, с указанием на «лучше делать».
Я это всё к тому, что все ваши вопросы неоднозначны и оспоримы. Их можно спрашивать на собеседовании, где вам пояснят, что и почему считают правильным ответом. Для теста эти вопросы не подходят.
В этом случае нормальные разработчики говорят «ТЗ составлено некорректно».
Я в работу вебиста не лезу (и как-то облом разобраться, как правильно верстать div’ами). Но их тест по HTML я прошёл на 100%, по CSS — на 80%.
Что сказать? Единицу измерения «2» впервые вижу! Чем псевдокласс отличается от псевдоэлемента, пока не понимаю. Как я понял, псевдокласс
— это какое-то состояние тэга, а псевдоэлемент — какой-то кусок информации в тэге, правильно?
Что сказать? Единицу измерения «2» впервые вижу! Чем псевдокласс отличается от псевдоэлемента, пока не понимаю. Как я понял, псевдокласс
— это какое-то состояние тэга, а псевдоэлемент — какой-то кусок информации в тэге, правильно?
С псевдоэлементами в данном случае и у меня возникла путаница. Разделение на псевдоклассы и псевдоэлементы вполне логичное. За исключением first-line и first-letter, которые, по моему мнению, все же больше похожи на псевдоклассы, такие же как first-child, first-type, etc. И хотя формально их действительно относят к псевдоэлементам, логика этого мне не ясна.
Удалено, ошибся уровнем, извините
Зачем нужна «спам-реклама» в конце статьи, которая вообще никак не относится к теме самой статье?
Ответил правильно на все три. Осмысленно, не угадывая.
Но третий вопрос сформулирован очень мутно, долго пытаешься понять, что вообще от тебя хотят.
Но третий вопрос сформулирован очень мутно, долго пытаешься понять, что вообще от тебя хотят.
Но третий вопрос сформулирован очень мутно
Да, сформулирован мутно. Хотя, если точно знать, что
:first-line — это псевдоэлемент, то ответ напрашивается сам собой.Я, например, не задумываюсь псевдоэлемент это или псевдокласс. Я знаю, как это работает и этого достаточно.
Если честно, на третий вопрос я сначала начал думать, какой из вариантов можно сделать с помощью
:before, :after. Быстро поняв, что во всех случаях есть свои инструменты (:hover, :checked, :nth-child и :first-line), я на время зашел в тупик, так как забыл, что :first-line — это псевдоэлемент.
На большую часть вопрос возникал свой вопрос: «а что имеется в виду?». Плохо поставленные вопросы
Такое впечатление, что я прошел тест не на знание CSS, а на умение распознать подвох в вопросе про CSS. Подобные тесты обычно составляют преподы-теоретики, которые не используют свой предмет в реальной работе. Я не утверждаю, что в данном случае это так, но уж больно почерк похож.
Большинство вопросов сформулировано неправильно. Это неправильный тест и он дал неправильные результаты.
1. В дизайне есть такое понятие как «ритм текста». Ритм задаётся межстрочными интервалами и вообще говоря не зависит от размера шрифта. При малых отклонениях размера шрифта межстрочный интервал имеет смысл сохранять постоянным, кратно корректируя его лишь для сильных отклонений.
2. Отрицательные отступы дают больше вреда, чем пользы. Особенно в резиновых макетах. По возможности, стоит избегать их использования для компенсации отступов.
3. «Псевдоэлемент» — это частный случай «элемента с псевдоклассом», только элемент не представлен в DOM. Но привязываются стили к нему по псевдоклассу.
2. Отрицательные отступы дают больше вреда, чем пользы. Особенно в резиновых макетах. По возможности, стоит избегать их использования для компенсации отступов.
3. «Псевдоэлемент» — это частный случай «элемента с псевдоклассом», только элемент не представлен в DOM. Но привязываются стили к нему по псевдоклассу.
UFO just landed and posted this here
UFO just landed and posted this here
Он наглядно иллюстрирует, что любой псевдоэлемент — это скрытый dom- или css-элемент, доступ к которому осуществляется через некоторый установленный для него псевдокласс.
UFO just landed and posted this here
Я вас уверяю, во всех реализация dom дерево перед отображением превращается в дерево рендеринга, которое содержит помимо узлов соответствующих DOM, некоторое число дополнительных, для стилизации которых, в селекторе указывается «некоторое идентифицирующее их имя, отсутствующее в исходном dom дереве» или попросту «псевдокласс». Разделение на «всевдоклассы» и «псевдоэлементы» довольно условно. Также как разделение на «цветное» и «чёрное-белое». На этом, пожалуй, закончим сей бесполезный спор.
«а также установить позицию для каждого из них» лучше перевести «а также установить позиционирование для каждого из них»
UFO just landed and posted this here
Sign up to leave a comment.
3 вопроса по CSS, которые вызывают трудности