PAYSTO
Компания
39,67
рейтинг
25 апреля 2015 в 08:36

Разработка → 3 вопроса по CSS, которые вызывают трудности перевод

Думаете, вы знаете CSS? Шесть месяцев назад я предложил бесплатный тест для всех, кто думает также. В течение этого времени его прошли более чем 3000 людей. Средний балл составил 55%.

Конечно, среднее значение не так уж интересно. Более интересны те вопросы, на которых «засыпалась» большая часть посетителей. В этой статье я расскажу о трех вопросах, в которых ошибались чаще всего.

Вопрос 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 элементов.

img


Вопрос 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 — псевдо-элемент, который позволяет применять стили к первой строке текста в блоке, независимо от того, где она заканчивается.

Автор: @Irina_Ua Kevin Yank
PAYSTO
рейтинг 39,67
Компания прекратила активность на сайте

Комментарии (35)

  • –1
    Эти 3 вопроса должен знать каждый frontend-junior. Элементарщина же. Мы своих этим вещам учим в первые три недели.
  • +15
    На самом деле процент успешных ответов очень сильно зависит от того как спрашивают, поэтому пакет тестов и прогоняют на подопытных (не составлявших его и лучше вообще левых людях) в тестовом режиме, выбирая лучший вариант
    — первый вопрос, не факт конечно что сильно изменило бы, но стоило добавить оговорку про то на сайте внутри будут менять шрифт.
    — второй вопрос очень плох — так как надо угадать вопрос, а не ответ
    — третий вопрос тоже не очень, псевдо-классы и псевдо-элементы не пересекаются, вы не можете использовать или то или то, поэтому и вопрос выбора лучшего из них не корректен. Так и спрашивайте: «Для какого из представленных случаев в селекторе будет использоваться псевдо-элемент.»
    • НЛО прилетело и опубликовало эту надпись здесь
      • +2
        > независимо от оговорок
        это скорее наводящий вопрос

        > для «исторических» псевдоэлементов из CSS1 допустим синтаксис с одним двоеточием
        дело то не в кол-ве двоеточий, а в том чтобы вопрос доносил суть того что от тебя хотят, текущий вариант вопроса допускает что тень можно добавить через :hover:before — то есть я могу добавить «тень» которая будет даже в ie8 работать.

        > И в чем необходимость угадывать вопрос во втором примере?
        начну издалека — в чем смысл тестов? проверить знания, сделать некую общую шкалу для сравнения этих знаний и т.п. Как вы думаете сколько человек из тех кто ответил не правильно на этот вопрос ни разу не использовали отрицательный margin?
        теперь по вопросу: что такое сами по себе? даже на картинке в статье есть ещё float, а в браузерах есть дефолтовые стили.
        что такое перекрытие элементов и почему overflow: visible тут не подходит (http://habrahabr.ru/post/48383/)
        • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            > CSS просто невозможно. И для этой задачи это решение единственное
            В вопросе спрашивается:

            > Какие из следующих эффектов лучше всего делать с помощью псевдо-элементов?
            ЭФФЕКТ ЛУЧШЕ, то что один из эффектов можно сделать только на псевдоэлементах не означает что нет другого который лучше делать на них же.

            > Не обязательно пользоваться особенностью технологии
            Если на вопрос об отрицательном марджине не могут ответить 70% респондентов это минимум повод задуматься над этим вопросом.
            Ну и на вопрос вы не ответили — вы правда считаете что все over 2000 человек которые ответили не правильно не знают что такое отрицательный margin?

            > Потому что он создает перекрытие
            я кстати написал visible.
            да я могу и про background тоже написать — почему красный квадрат не перекрывает белый body?

            ну и я как бы доводы привел, нет особого смысла их повторять из записи в запись — более менее нормальный только первый вопрос, остальные нужно менять, и да это моё мнение оно может не совпадать с вашим.
            • НЛО прилетело и опубликовало эту надпись здесь
              • +3
                пример на JSFiddle

                Отрицательный марджин так же не работает «сам по себе». В фиддле простейший пример, где марджин даёт наложение, а не перекрытие для блочных элементов.

                Какие из следующих эффектов лучше всего делать с помощью псевдо-элементов?
                — Добавить к гиперссылке тень, которая появляется при наведении.
                — Изменить цвет элемента checkbox при его выборе.
                — Окрасить четные и нечетные строки таблицы различным цветом.
                — Всегда отображать жирным шрифтом первую строку абзаца на адаптивной странице.


                — А если ваш фонт размыт при помощи тени? Как лучше, в током случае, для него сделать тень? Тут уже напрашивается :before
                — А если задача сделать анимацию при этом? серый чекбокс уезжает влево, а покрашенный приезжает справа?
                — Ок, не могу придумать реальный пример.
                — Вы сами сказали, что это можно сделать только при помощи псевдоэлемента. Т.е. уже не подходит под поставленный вопрос, с указанием на «лучше делать».

                Я это всё к тому, что все ваши вопросы неоднозначны и оспоримы. Их можно спрашивать на собеседовании, где вам пояснят, что и почему считают правильным ответом. Для теста эти вопросы не подходят.
                • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                В этом случае нормальные разработчики говорят «ТЗ составлено некорректно».
  • 0
    Я в работу вебиста не лезу (и как-то облом разобраться, как правильно верстать div’ами). Но их тест по HTML я прошёл на 100%, по CSS — на 80%.

    Что сказать? Единицу измерения «2» впервые вижу! Чем псевдокласс отличается от псевдоэлемента, пока не понимаю. Как я понял, псевдокласс
    — это какое-то состояние тэга, а псевдоэлемент — какой-то кусок информации в тэге, правильно?
    • +1
      С псевдоэлементами в данном случае и у меня возникла путаница. Разделение на псевдоклассы и псевдоэлементы вполне логичное. За исключением first-line и first-letter, которые, по моему мнению, все же больше похожи на псевдоклассы, такие же как first-child, first-type, etc. И хотя формально их действительно относят к псевдоэлементам, логика этого мне не ясна.
      • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Удалено, ошибся уровнем, извините
  • +18
    Зачем нужна «спам-реклама» в конце статьи, которая вообще никак не относится к теме самой статье?
    • +11
      Как зачем, ссылки с такого популярного сайта на свой сайт — +100500 к SEO
      • 0
        омг, без тегов хабралюди сарказм вообще не понимают уже, да?
    • +15
      ИМХО первоочередной задачей было размещение ссылок, а не написание статьи.
  • +2
    Ответил правильно на все три. Осмысленно, не угадывая.
    Но третий вопрос сформулирован очень мутно, долго пытаешься понять, что вообще от тебя хотят.
    • 0
      Но третий вопрос сформулирован очень мутно

      Да, сформулирован мутно. Хотя, если точно знать, что :first-line — это псевдоэлемент, то ответ напрашивается сам собой.
      Я, например, не задумываюсь псевдоэлемент это или псевдокласс. Я знаю, как это работает и этого достаточно.
      Если честно, на третий вопрос я сначала начал думать, какой из вариантов можно сделать с помощью :before, :after. Быстро поняв, что во всех случаях есть свои инструменты (:hover, :checked, :nth-child и :first-line), я на время зашел в тупик, так как забыл, что :first-line — это псевдоэлемент.
  • +1
    На большую часть вопрос возникал свой вопрос: «а что имеется в виду?». Плохо поставленные вопросы
  • +5
    Такое впечатление, что я прошел тест не на знание CSS, а на умение распознать подвох в вопросе про CSS. Подобные тесты обычно составляют преподы-теоретики, которые не используют свой предмет в реальной работе. Я не утверждаю, что в данном случае это так, но уж больно почерк похож.
    • 0
      +1. Прошёл тест, и ради интереса даже для JS. Как всегда поражаюсь. Вопросы вида «Which of these organisations is officially responsible for defining » траляля. Зачем они там? Как будто я от этого стану лучше верстать или писать код.
  • +3
    Большинство вопросов сформулировано неправильно. Это неправильный тест и он дал неправильные результаты.
  • +3
    1. В дизайне есть такое понятие как «ритм текста». Ритм задаётся межстрочными интервалами и вообще говоря не зависит от размера шрифта. При малых отклонениях размера шрифта межстрочный интервал имеет смысл сохранять постоянным, кратно корректируя его лишь для сильных отклонений.

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

    3. «Псевдоэлемент» — это частный случай «элемента с псевдоклассом», только элемент не представлен в DOM. Но привязываются стили к нему по псевдоклассу.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        image
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Он наглядно иллюстрирует, что любой псевдоэлемент — это скрытый dom- или css-элемент, доступ к которому осуществляется через некоторый установленный для него псевдокласс.
            • НЛО прилетело и опубликовало эту надпись здесь
              • +1
                Я вас уверяю, во всех реализация dom дерево перед отображением превращается в дерево рендеринга, которое содержит помимо узлов соответствующих DOM, некоторое число дополнительных, для стилизации которых, в селекторе указывается «некоторое идентифицирующее их имя, отсутствующее в исходном dom дереве» или попросту «псевдокласс». Разделение на «всевдоклассы» и «псевдоэлементы» довольно условно. Также как разделение на «цветное» и «чёрное-белое». На этом, пожалуй, закончим сей бесполезный спор.
                • НЛО прилетело и опубликовало эту надпись здесь
  • –1
    «а также установить позицию для каждого из них» лучше перевести «а также установить позиционирование для каждого из них»
  • 0
    Если быть точным во всём, то:
    ::first-line — псевдо-элемент,..
    • НЛО прилетело и опубликовало эту надпись здесь

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

Самое читаемое Разработка