Готовимся к собеседованию

Готовимся к собеседованию

На прошедшей конференции FrontendConf было много интересных докладов про CSS. Эти выступления, особенно выступление Никиты Дубко с докладом “CSS — язык программирования”, навели меня на мысль о том, что стоит немного разобрать часто встречающиеся вопросы с собеседований про HTML-CSS, которые некоторые обходят стороной, делая упор на JavaScript.

Вопрос 1

Есть html файл в котором есть такой текст. Будет ли построено DOM дерево и если да, то какой размер текста (нужно назвать точное значение):

Some text

Ответ, на самом деле, простой.

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

Ответ:

Даже если в HTML файле нет тегов, всегда будет сгенерирован DOM из того что есть, в итоге получим:

<html><head></head><body>Some text</body></html>

2. Точные размеры текста, варианты ответов:

  • 100%
  • 1em
  • 1rem

Это точные ответы которые корректны для всех браузеров. Дополнительно вы можете (но не обязательно) сказать что размер шрифта так же:

  • 16px
  • 12pt

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

Вопрос 2

У нас есть файл HTML в котором есть следующий код:

<style>
    body { color: orange }
    p { color: green }
    div { color: red }
</style>
<body>
   Text 1<p>Text 2<div>Text 3</div>Text 4</p>Text 5
</body>

Как отрендерится DOM? Что увидим в браузере?

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

Ответ:

Как уже говорилось выше, браузер создаст DOM структуру и если чего-то не хватает или есть ошибки, то браузер их попытается исправить.

Сначала находится Text 1 — обычная нода с данными (текстом). Далее идет тег <p> и в нем есть текст “Text 2”. А вот далее у нас есть конфликт, который браузер разрулит, так как мы не сменили модель у DIV. А суть в том, что блочный элемент нельзя встраивать внутрь абзацев. Элементы, которые доступны внутри абзацев описаны в спецификации:

https://html.spec.whatwg.org/multipage/dom.html#common.elem.phrasing

В итоге DIV будет вынесен за пределы тега P, и тег закроется. Далее идет тег DIV, все ок. Затем Text 4, который шел после тега DIV, но так как он был вынесен за пределы тега P, то этот текст просто попал в область BODY вне тегов.

А вот далее парсер находит закрывающий тег </p> без открывающего (так как была перестроена структура) и добавляет автоматически открывающий тег, в результате чего появится пустой абзац. Ну и заключительно будет Text 5.

Визуально это будет выглядеть так:


Вопрос 3

Как отрисуется следующий HTML:

<style>
  .green{ color: green}
  .red  { color: red  }
</style>
<div class="green red">Pipiu 1</div>
<div class="red green">Pipiu 2</div>

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

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

Вопрос 4

Классика жанра, самый частый вопрос на собеседовании. Какая ширина блоков (точный размер)? Какое расстояние в пикселях между двумя блоками по вертикали?

<style>
  div { margin: 20px 0 }
</style>
<div>Text 1</div> ┐
                  ├── какое расстояние в пикселях?
<div>Text 2</div> ┘

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

⬇︎

Ответ:

  1. Ширина блоков по дефолту всегда 100%
  2. Расстояние между 2мя блоками 20px по вертикали, так как margin схлопываются.

Есть еще часто встречающиеся вопросы про:

  • как отцентрировать блок по вертикали, горизонтали
  • как сделать clear-fix

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

CSS Battle

А еще вы можете проверить свои знания в CSS в батле:

https://html.spec.whatwg.org/multipage/dom.html#common.elem.phrasing