Подготовка к собеседованию по программированию: давайте проверим ваш CSS
programming frontend css interview-questions

Подготовка к собеседованию по программированию: давайте проверим ваш CSS

26 декабря 2023 г.

CSS — это язык с множеством тем. Есть разработчик, который знает все вряд ли. Честно говоря, нам не нужно это знать, чтобы выполнять свою работу. Но есть часть CSS, без которой мы не можем обойтись. Это цель моих вопросов.

Если вы не можете ответить на некоторые вопросы, не волнуйтесь. А это значит, что у вас есть шанс прокачать свои знания 😉

Какова будет специфика следующего селектора?

:is(#container, .content, main) { 
  color: red;
}

Функция псевдокласса :is() помогает браузерам выбирать самый высокий из заданного списка селекторов. В нашем примере селектор более высокого уровня — #container. Специфика этого селектора — 0, 1, 0, 0. Оно будет использоваться для всего at-правила.

Вычисленное значение свойства color — red. Правда или ложь?

<body>
  <span id="container" class="container">content</span>
</body>


.container { 
  color: red;
}

:where(#container) {
  color: blue;
}

Истинный. Функция псевдокласса :where() обнуляет специфичность. Таким образом, селектор .label имеет большую специфичность. Вот почему вычисленное значение свойства color равно red.

Каково вычисленное значение свойства background-color?

<body> 
  <div id="container" class="container">content</div>
</body> 


@layer basic, components;

.container {
  width: 1rem;
  height: 1rem;  
}

@layer components {
  .container {
    background-color: pink;
  }
}

@layer basic {
  #container {  
    background-color: blue;
  }
}

Слои определяются в порядке приоритета. Последний более высокий. Итак, ответ — розовый.

Какая ошибка в следующем коде?

.container { 
  display: inline; 
  width: 1rem; 
  height: 1rem; 
}

Если элемент имеет display: inline, свойства width и height не имеют эффекта. Поэтому нам не следует их определять.

Каков алгоритм вычисления вычисленного значения свойства width элемента .child?

<body>
  <!-- case #1 -->
  <div class="parent">
    <div class="child">content</div> 
    <div class="child">content</div> 
  </div>
  <!-- case #2 -->
  <div class="parent parent-flex">  
    <div class="child">content</div> 
    <div class="child">content</div> 
  </div>
</body>


.parent {
  display: block; 
}

.parent-flex { 
  display: flex; 
}

В случае №1 элементы .child являются элементами уровня блока. Их свойство width равно свойству width родительского элемента.

В случае №2 элементы .child являются гибкими элементами. Их свойство width рассчитывается в зависимости от содержимого.

Каково вычисленное значение свойства display псевдоэлементов?

.parent {
  display: inline-grid;
}

.parent::before { 
  content: ""; 
  display: inline;
}

.parent::after { 
  content: ""; 
  display: flex; 
}

block и flex. Значения grid или inline-grid преобразуют значения inline-* свойства display дочерних элементов для блокировки альтернативы.

.parent {
  display: inline-grid; 
}

.parent::before { 
  content: ""; 
  display: inline; /* display: block will be here */    
}

.parent::after { 
  content: ""; 
  display: flex; /* display: flex will be here */ 
}

В чем разница между положением дочерних элементов по умолчанию в случае родительского элемента с display: flex и в случае с display:grid?< /h2>

Дочерние элементы внутри родительского элемента с display: flex отображаются один за другим в строке. Напротив, в случае с display:grid элементы будут отображаться один под другим.

Каково вычисленное значение свойств width и height элементов .child?

<body>
  <div class="parent"> 
    <div class="child">content</div>
    <div class="child">content</div>
  </div>
</body>


.parent { 
  display: grid; 
  width: 100rem; 
  height: 20rem; 
}

Свойство width элемента .child равно свойству width родительского элемента. Таким образом, вычисленное значение свойства width равно 100rem, т. е. 100 * 16 = 1600 пикселей.

Свойство height дочернего элемента внутри родительского элемента с display:grid заполняет все пространство. Если у родителя несколько элементов, пространство будет разделено между ними поровну. Таким образом, вычисленное значение свойства height дочернего элемента равно 20rem / 2 = 10rem, т. е. 10 * 16 = 160 пикселей.

Я использую 16px как размер шрифта браузера по умолчанию.

Поля элемента .child во всех случаях оказываются за пределами родительского элемента. Правда или ложь?

<body>
  <div class="parent">
    <div class="child">content</div>
  </div>
</body>


/* case #1 */ 
.parent { 
  display: inline-flex;
}

.child {
  display: block;
  margin-block: 1rem;
}

/* case #2 */ 
.parent { 
  display: grid;
}

.child { 
  display: block; 
  margin-block: 1rem; 
}

ЛОЖЬ. Поля дочерних элементов не выходят за пределы родительского элемента с помощью display: flex, display: inline-flex, display: Grid и отображение: встроенная сетка.

Работает ли свертывание полей внутри элементов с display: inline-flex и display: inline-grid?

Нет, это не работает. Поля будут суммироваться внутри элемента с помощью display: flex, display: inline-flex, display: Grid и display: встроенная сетка.

Положение псевдоэлемента центрируется по горизонтали и вертикали. Правда или ложь?

.container { 
  display: grid;
  height: 100dvh; 
}

.container::before {
  content: ""; 
  width: 1rem; 
  height: 1rem; 
  margin: auto; 
}

Истинный. Браузеры будут равномерно распределять все пространство между дочерними и родительскими границами.

Каково вычисленное значение свойства min-width?

<body> 
  <div class="parent">
    <div class="child">content</div>
  </div>
</body> 


body { 
  display: block;
}

.parent { 
  display: grid;
  /* min-width: ? */
}

.child {
  /* min-width: ? */
}

Начальное значение min-width — auto. Таким образом, вычисленное значение min-width элемента .child равно auto.

Но если block, inline, inline-block, table или table-* значение определено для элемента, вычисленное значение min-width его дочерних элементов равно 0.

body {
  display: block;
}

.parent {
  display: grid;
  /* min-width: 0 */
}

.child { 
  /* min-width: auto */ 
}

Как мы можем использовать свойство gap для замены свойства margin?

.parent { 
  display: inline-flex; 
}

.parent::before,
.parent::after { 
  content: ""; 
  width: 1rem; 
  height: 1rem; 
  background-color: #222;
}

.parent::before { 
  margin-right: 1rem; 
}

.parent::after { 
  margin-left: 1rem; 
}

Нам следует определить свойство gap для элемента .parent.

.parent { 
  display: inline-flex;
  gap: 1rem; 
}

.parent::before,
.parent::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: #22;
}

Вычисленное значение свойства display — block. Правда или ложь?

.container { 
  position: absolute;
  display: inline; 
}

Истинный. Если определено значение absolute или fixed, браузеры преобразуют все значения inline-* свойства display в заблокировать альтернативы.

.container {
  position: absolute; 
  display: inline; /* display: block will be here */ 
}

Почему вычисленное значение свойства height элемента .parent равно 0?

<body>
  <div class="parent">
    <div class="child">content</div>
  </div>
</body>


.child { 
  position: fixed; 
}

Элемент с position: Absolute или position: фиксированный удаляется из обычного потока документов. Итак, родительские элементы этого не видят. Вот почему вычисленное значение свойства height равно 0.

Что делает свойство isolation в следующем примере?

<body>
  <div class="parent">
    <div class="child"> 
      <span>content</span>
    </div>
  </div>
</body>


.parent { 
  background-color: purple; 
}

.child { 
  position: relative; 
  isolation: isolate; 
}

.child::after {
  content: "";  
  background-color: green;

  position: absolute; 
  inset: 0; 
  z-index: -1; 
}

Мы должны помнить, какой контекст стекирования используется браузерами при использовании свойства z-index.

По умолчанию корневым контекстом является элемент html. Вот почему псевдоэлемент находится за элементом .parent без isolation: isolate.

Мы создаем новый контекст стекирования с помощью свойства isolation для элемента .child. Таким образом, псевдоэлемент отображается позади текста, но перед элементом .parent.

Каково положение псевдоэлемента?

.container { 
  display: grid;
  place-items: center;
  position: relative;
  height: 100dvh; 
}

.container::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: 0; 
}

Во-первых, псевдоэлементы отображаются в центре, поскольку применяется place-items: center.

Он смещается по оси Y к нижней родительской границе после применения position: Absolute, bottom: 0, поскольку top, Свойства >right, bottom и left имеют более высокий приоритет, чем свойство place-items.

Может ли вычисленное значение свойства flex-basis быть больше, чем вычисленное значение свойства max-width?

Свойство flex-basis имеет приоритет над свойством width, но его значение также должно находиться в диапазоне значений min-width и max-width. Поэтому ответ — нет, не может.

Каково вычисленное значение свойства padding?

:root {
  --padding-vertical-start: 1rem;
  --padding-horizontal-end: 2rem; 
  --padding-vertical-end: 3rem; 
}

.container { 
  padding: var(--padding-vertical-start)  
           var(--padding-horizontal-end)  
           var(--padding-vertical-end)  
           var(--padding-horizontal-start); 
}

Мы должны определить все части сокращения при использовании пользовательских свойств CSS. Если мы этого не сделаем, браузеры не смогут применять значения.

Так происходит в нашем примере. Сокращение padding требует четырех значений. Но разработчик определил только 3. Браузеры не могут устанавливать отступы. Итак, вычисленное значение равно 0.

Почему вычисленное значение свойства background-color будет зеленым для элемента p?

body { 
  background-color: green; 
}

p {
  --background-color: inherit; 
  background-color: var(--background-color, inherit); 
}

Пользовательское свойство CSS наследует значение от того же пользовательского свойства, определенного для родительских элементов. Если пользовательское свойство опущено, браузеры будут использовать резервный вариант.

В нашем примере свойство --background-color отсутствует в родительских элементах. Поэтому браузеры используют запасной вариант, то есть ключевое слово inherit, которое наследует значение green из свойства background-color body.

Сделать свойство scroll-behavior безопасным при вестибулярных нарушениях движений.

html { 
  scroll-behavior: smooth; 
}

Мы должны обернуть код, используя медиа-функцию prefers-reduced-motion. Плавная прокрутка будет отображаться только в том случае, если пользователи разрешили это в настройках ОС.

@media (prefers-reduced-motion: no-preference) {
  html { 
    scroll-behavior: smooth; 
  }
}

Каково вычисленное значение свойства font-size?

html { 
  font-size: calc(1rem + 1px); 
}

Размер шрифта браузера по умолчанию в большинстве случаев составляет 16px. Если оно не изменено, вычисленное значение свойства font-size будет равно 17px.

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE

COPYRIGHT 2020 COFFEE-WEB.RU