css-interview-questions

KO | EN

gitlite — search

#python #ai #golang #go #android #deep-learning #macos #java #awesome #cli #security #pytorch #mcp #open-source

css-interview-questions

(★ 40)

Найпопулярніші запитання та відповіді на співбесіді з CSS

css-interview-questions Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h2>Найпопулярніші запитання та відповіді на співбесіді з CSS</h2>

<details>
<summary>1. Що таке CSS? І навіщо він використовується?</summary>

#### CSS

- CSS (Cascading Style Sheets) — це мова стилів для опису вигляду веб-сторінок.
  Використовується для розмітки елементів на сторінці, таких як шрифти, кольори,
  відступи, позиціонування та інші візуальні аспекти. CSS дозволяє відокремити
  контент (HTML) від стилів, що полегшує підтримку та зміну вигляду сайту.

</details>

<details>
<summary>2. Що таке каскадність у CSS??</summary>

#### CSS

- Каскадність у CSS — це механізм, який визначає, як застосовуються стилі до
елементів веб-сторінки, якщо для одного елемента задано кілька різних стилів із
різних джерел або рівнів. Вона дозволяє браузеру вирішити, які стилі будуть мати
вищий пріоритет і застосовуватися в кінцевому результаті.
</details>

<details>
<summary>3. Які є способи підключення CSS до HTML-документу?</summary>

#### CSS

- Вбудовані стилі (inline) — напряму в HTML-тегах через атрибут `style`.
- Внутрішні стилі — у секції `<style>...</style> ` всередині HTML-документа.
- Зовнішні стилі — у CSS-файлах, підключених через
  `<link rel=”stylesheet” href=”styles.css”>` або `@import`.

</details>

<details>
<summary>4. Що таке CSS-селектори? Наведіть приклади.</summary>

#### CSS

- CSS-селектори використовуються для вибору HTML-елементів, до яких
  застосовуються стилі.

- **Приклади:**

- За тегом: `h1 { color: red; }`
  - За класом: `.button { background: blue; }`
  - За ID: `#header { padding: 10px; }`

- **Комбіновані:**

- Дочірні: `ul > li { margin: 5px; }`
  - Нащадки: `div p { font-size: 14px; }`
  - Атрибути: `[type="text"] { border: 1px solid gray; }`

- **Псевдокласи:**

- `a:hover { color: green; }`
  - `:nth-child(2) { font-weight: bold; }`

- **Псевдоелементи:**

- `p::first-line { text-transform: uppercase; }`

</details>

<details>
<summary>5. Як працює наслідування в CSS?</summary>

#### CSS

- Наслідування в CSS дозволяє деяким властивостям автоматично передаватися від
  батьківського елемента до дочірніх.

- **Особливості:**

1. Автоматично наслідуються тільки текстові та декоративні властивості:

- `color`, `font`, `visibility`, `line-height` тощо.

2. Не наслідуються автоматично властивості, що впливають на коробку (box model):

- `margin`, `padding`, `border`, `width`, `heigh`t тощо.

- **Контроль наслідування:**

1. **Примусове наслідування:** використовуйте значення inherit.

```css
   p {
     border: inherit;
   }
   ```

2. **Відміна наслідування:** значення initial скидає властивість до початкового
   (згідно стандарту).

```css
   p {
     color: initial;
   }
   ```

</details>

<summary>6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?</summary>

#### CSS

- «Модель коробки» (box model) визначає, як розміри елемента розраховуються в
  CSS. Вона складається з:

- **Content:** Вміст елемента (текст, зображення).
  - **Padding:** Внутрішній відступ між вмістом і рамкою.
  - **Border:** Рамка навколо padding.
  - **Margin:** Зовнішній відступ між елементом і сусідніми елементами.

- Розрахунок ширини та висоти:

- За замовчуванням:

```css
  Width/Height = Content + Padding + Border
  ```

- Зміна моделі коробки:

- Використовуйте властивість box-sizing:

1. content-box (за замовчуванням):

- Ширина/висота включає лише вміст. Padding і border додаються до загального
  розміру.

```css
  box-sizing: content-box;
  ```

2. border-box:

- Ширина/висота включають вміст, padding і border (зручніше для макетів).

```css
  box-sizing: border-box;
  ```

- Приклад:

```css
  * {
    box-sizing: border-box;
  }
  ```

- Це допомагає уникнути помилок у розмітці.

</details>

<details>
<summary>7. У чому різниця між margin і padding?</summary>

#### CSS

- Різниця між margin і padding:

1. Розташування:

- `margin` створює зовнішній відступ між елементом і сусідніми елементами.
   - `padding` створює внутрішній відступ між вмістом елемента і його рамкою
     (border).

2. Вплив на фон:

- `margin` не впливає на фон елемента; простір залишається прозорим.
   - `padding` є частиною елемента, тому фон розтягується на область padding.

3. Колізія (margin collapsing):

- `margin` сусідніх блоків може "зливатися" в один (найбільший).
   - `padding` не зливається; завжди додається до внутрішнього простору.

- Приклад:

```css
  div {
    margin: 20px; /* Відступ від інших елементів */
    padding: 20px; /* Відступ між вмістом і рамкою */
    background-color: lightblue;
  }
  ```

</details>

<details>
<summary>8. Що таке Flexbox?</summary>

#### CSS

- Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка
  забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть
  якщо розміри елементів невідомі або змінюються.

- **Основні поняття:**

- **Flex-контейнер:** Батьківський елемент, на який застосовується
    `display: flex;`.
  - **Flex-елементи:** Дочірні елементи flex-контейнера.

- **Основні властивості Flexbox:**

1. Для контейнера:

- `flex-direction`: Напрямок розташування елементів (`row`, `row-reverse`,
     `column`, `column-reverse`).
   - `justify-content`: Горизонтальне вирівнювання елементів (`flex-start`,
     `center`, `space-between`, `space-around`, `space-evenly`).
   - `align-items`: Вертикальне вирівнювання елементів (`stretch`, `center`,
     `flex-start`, `flex-end`, `baseline`).
   - `align-content`: Вирівнювання рядків у багаторядковому контейнері
     (`stretch`, `center`, `space-between`).
   - `flex-wrap`: Дозволяє елементам переноситися (`nowrap`, `wrap`,
     `wrap-reverse`).

2. Для елементів:

- `flex-grow`: Як елемент збільшується вільним простором.
   - `flex-shrink`: Як елемент зменшується при нестачі простору.
   - `flex-basis`: Базовий розмір елемента перед розподілом простору.
   - `align-self`: Вирівнювання конкретного елемента всередині контейнера.

- Приклад:

```css
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

.item {
    flex: 1; /* Рівний розподіл простору */
  }
  ```

</details>

#### CSS

- CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні
  сітки для розташування елементів як по горизонталі, так і по вертикалі.

- **Основні поняття:**

- **Grid-контейнер:** Елемент, на який застосовується `display: grid;`.
  - **Grid-елементи:** Дочірні елементи grid-контейнера.
  - **Лінії сітки:** Вертикальні та горизонтальні межі, що ділять сітку на
    осередки.
  - **Треки:** Рядки (`rows`) і колонки (`columns`).
  - **Області:** Прямокутні зони, об'єднані з кількох осередків.

- **Основні властивості Grid:**

1. Для контейнера:

- `grid-template-rows`, `grid-template-columns`: Задають кількість і розміри
  рядків та колонок.
- `grid-template-areas`: Іменовані області для організації елементів.
- `gap` (або `row-gap/column-gap`): Відступи між рядками та колонками.
- `justify-items`, `align-items`: Вирівнювання елементів у клітинках.
- `justify-content`, `align-content`: Вирівнювання всієї сітки в контейнері.

2. Для елементів:

- `grid-column`, `grid-row`: Позиціювання по колонках і рядках.
- `grid-area`: Розміщення в іменованій області.
- `place-self`: Індивідуальне вирівнювання елемента.

- Приклад:

```css
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */
    grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */
    gap: 10px;
  }

.item1 {
    grid-column: 1 / 3; /* Займає дві колонки */
  }

.item2 {
    grid-row: 2; /* Розташований у другому рядку */
  }
  ```

</details>

<details>
<summary>10. Що таке медіазапити та як їх використовувати?</summary>

#### CSS

- Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності
  від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони
  використовуються в CSS через правило @media.

- Приклад медіазапиту для адаптивного дизайну:

```css
  /* Стилі для мобільних пристроїв */
  @media (max-width: 768px) {
    body {
      background-color: lightblue;
    }
  }

/* Стилі для десктопів */
  @media (min-width: 769px) {
    body {
      background-color: lightgreen;
    }
  }
  ```

</details>

<details>
<summary>11. Як можна приховати елемент за допомогою CSS?</summary>

#### CSS

- Щоб приховати елемент за допомогою CSS, можна використовувати:
  - `display: none;` — видаляє елемент з потоку документа. Він не займає місця
    на сторінці і з ним не можна взаємодіяти.
  - `visibility: hidden;` — елемент стає невидимим, але зберігає своє місце на
    сторінці.
  - `opacity: 0;` — робить елемент прозорим, але він залишається видимим і
    займає місце на сторінці.

</details>

<details>
<summary>12. Як можна зробити лого посередині екрана?</summary>

#### CSS

- Щоб розмістити лого посередині екрана, можна використати такі способи:

1. Flexbox:

```css
   body,
   html {
     height: 100%;
     margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
   }

.logo {
     /* стилі лого */
   }
   ```

2. Grid:

```css
   body,
   html {
     height: 100%;
     margin: 0;
     display: grid;
     place-items: center;
   }

.logo {
     /* стилі лого */
   }
   ```

3. Absolute позиціювання:

```css
   body,
   html {
     height: 100%;
     margin: 0;
     position: relative;
   }

.logo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   ```

</details>

<details>
<summary>13. Як розмістити хрестик для закриття справа зверху елемента?</summary>

#### CSS

- Щоб розмістити хрестик для закриття в правому верхньому куті елемента, можна
  використати абсолютне позиціювання:

```css
  .container {
    position: relative; /* щоб хрестик позиціонувався відносно контейнера */
  }

.close-btn {
    position: absolute;
    top: 10px; /* відстань від верхнього краю */
    right: 10px; /* відстань від правого краю */
    cursor: pointer; /* щоб курсор змінювався при наведенні */
  }
  ```

```html
  <div class="container">
    <div class="close-btn">&times;</div>
    
  </div>
  ```

</details>

<details>
<summary>14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?</summary>

#### CSS

- Щоб зробити останній елемент списку червоним без JavaScript, можна використати
  псевдоклас `:last-child:`.
- Це правило зробить останній елемент у будь-якому списку (незалежно від його
  довжини) червоним.

```css
  ul li:last-child {
    color: red;
  }
  ```

- Це правило зробить останній елемент у будь-якому списку (незалежно від його
  довжини) червоним.

</details>

<details>
<summary>15. Які є можливості задати колір?</summary>

#### CSS

- У CSS є кілька способів задати колір:

1. Ім’я кольору:

```css
   color: red;
   ```

2. Шістнадцятковий код:

```css
   color: #ff0000; /* червоний */
   ```

3. RGB (Red, Green, Blue):

```css
   color: rgb(255, 0, 0); /* червоний */
   ```

4. RGBA (Red, Green, Blue, Alpha):

```css
   color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */
   ```

5. HSL (Hue, Saturation, Lightness):

```css
   color: hsl(0, 100%, 50%); /* червоний */
   ```

6. HSLA (Hue, Saturation, Lightness, Alpha):

```css
   color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */
   ```

7. Ключові слова прозорості:

```css
   color: transparent; /* прозорий */
   ```

- Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису
  кольору до використання прозорості або відтінків.

</details>

<details>
<summary>16. Що таке z-index? Чи кожен елемент його має?</summary>

#### CSS

- `z-index` — це властивість CSS, яка визначає порядок накладання елементів по
  осі Z (глибина, перетин елементів). Елементи з більшим `z-index` накладаються
  поверх елементів з меншим значенням.

- **Особливості:**

1. Тільки для позиційованих елементів: `z-index` працює, якщо елемент має
   `position`: `relative`, `absolute`, `fixed` або `sticky`. Без цього `z-index`
   ігнорується.

2. Значення за замовчуванням: Якщо `z-index` не задано, значення за
   замовчуванням — `auto`. У такому випадку порядок накладання визначається
   порядком у DOM.

3. Може бути від’ємним: Елементи з від’ємним `z-index` можуть накладатися позаду
   батьківських елементів.

- Приклад:

```css
  .div1 {
    position: relative;
    z-index: 10; /* цей елемент буде поверх */
  }

.div2 {
    position: relative;
    z-index: 5; /* цей елемент буде під div1 */
  }
  ```

</details>

<details>
<summary>17. Які переваги і недоліки використання CSS-препроцесорів?</summary>

#### CSS

- **Переваги CSS-препроцесорів:**

1. **Змінні:** Легко створювати глобальні змінні для кольорів, шрифтів,
   розмірів.

```css
   $primary-color: #3498db;

body {
     color: $primary-color;
   }
   ```

2. **Вкладеність:** Зручний запис стилів для вкладених елементів.

```css
   nav {
     ul {
       li {
         a {
           color: #000;
         }
       }
     }
   }
   ```

3. **Міксіни:** Повторно використовувані блоки коду.

```css
   @mixin flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
   }

div {
     @include flex-center;
   }
   ```

4. **Функції:** Обчислення прямо в стилях.

```css
   width: calc(100% - 50px);
   ```

5. **Управління кодом:** Імпорт окремих файлів (`@import`), що полегшує
   підтримку великого проекту.

- **Недоліки CSS-препроцесорів:**

1. **Складність налаштування:** Потрібно встановлювати додаткові інструменти
   (наприклад, компілятор для SCSS або LESS).

2. **Продуктивність:** Велика кількість вкладеностей або міксінів може
   ускладнити генерований CSS і вплинути на швидкість.

3. **Залежність:** Знання синтаксису препроцесора необов'язково підтримується
   усіма розробниками в команді.

4. **Дебагінг:** Згенерований CSS може бути складніше дебажити, якщо немає
   source maps.

- Використання залежить від розміру проекту та необхідності складних стилів. Для
  великих проектів переваги переважують недоліки.

</details>

<details>
<summary>18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями?</summary>

#### CSS

- Рівні заголовків (`<h1> – <h6>`) мають інше призначення, окрім визначення
  розміру. Їхня основна функція — структуризація контенту для семантики та
  доступності:

1. **Семантика:** Заголовки формують ієрархію документа. Наприклад:

`<h1>` — головна тема сторінки. `<h2>` — підрозділ теми `<h1>`. `<h3>` —
підрозділ `<h2>`, і так далі.

2. **SEO:** Пошукові системи (Google, Bing) використовують заголовки для
   розуміння структури і змісту сторінки. Коректна ієрархія заголовків підвищує
   релевантність сторінки.

3. **Доступність:** Екранні читачі для людей із порушеннями зору використовують
   заголовки для навігації по сторінці.

4. **Стандарти:** Використання заголовків за призначенням робить код зрозумілим
   для інших розробників.

- Розмір заголовків можна стилізувати за допомогою CSS, але правильне
  використання тегів забезпечує краще розуміння і роботу сторінки.

</details>

<details>
<summary>19. Які є варіанти позиціонування елемента на сторінці?</summary>

#### CSS

- У CSS є кілька варіантів позиціонування елементів:

1. `static` (за замовчуванням): Елемент розташовується в потоці документа
   відповідно до порядку в HTML. Немає можливості змінювати його положення через
   властивості top, right, bottom, left.

2. `relative`: Елемент залишається в потоці документа, але його положення можна
   змінити відносно початкової позиції за допомогою top, right, bottom, left.

3. `absolute`: Елемент вилучається з потоку і позиціонується відносно
   найближчого батьківського елемента з позиціюванням (relative, absolute,
   fixed). Якщо такого немає, то відносно всього документа.

4. `fixed`: Елемент вилучається з потоку і закріплюється відносно вікна
   браузера. Його положення не змінюється при прокручуванні сторінки.

5. `sticky`: Комбінація relative і fixed. Елемент позиціонується відносно потоку
   документа, поки не досягне заданого порогу (top, bottom тощо), після чого
   "прилипає" до цього порогу при прокручуванні.

6. `inherit`, `initial`, `unset`:

- inherit — наслідує значення від батьківського елемента.
- initial — скидає до значення за замовчуванням (static).
- unset — застосовує inherit або initial залежно від контексту.

- Кожен варіант використовується залежно від завдання: від базового розташування
  до складного позиціонування в макетах.

</details>

<details>
<summary>20. Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block?</summary>

#### CSS

- Основні види display в CSS:

1. `block`:

- Елемент займає всю ширину батьківського контейнера.
   - Починається з нового рядка.
   - Можна задавати ширину, висоту, внутрішні/зовнішні відступи.
   - Приклад: `<div>`, `<p>`.

2. `inline`:

- Елемент розташовується в одному рядку з іншими елементами.
   - Неможливо задавати ширину та висоту.
   - Відступи (margin/padding) впливають лише на внутрішній простір.
   - Приклад: `<span>`, `<a>`.

3. `inline-block`:

- Поєднує особливості block і inline.
   - Елемент розташовується в рядку, але дозволяє задавати ширину, висоту,
     відступи.
   - Зручний для створення кнопок, тегів.

4. `flex`:

- Відображає елемент як контейнер для гнучкого компонування дочірніх
     елементів.
   - Використовується для вирівнювання та розподілу простору між елементами.

5. `grid`:

- Задає контейнер для компонування в двовимірній сітці.
   - Зручний для складних макетів.

6. `none`:

- Елемент не відображається на сторінці.

7. `inline-flex` / `inline-grid`:

- Аналогічні flex і grid, але зберігають властивості inline.

8. `table` / `table-row` / `table-cell`:

- Елементи імітують поведінку таблиць HTML.

- **Найчастіше використовується:**

- block, inline-block, flex, і grid — залежно від завдань.
  - inline-block популярний для створення кнопок або елементів меню, які
    потрібно розташувати в рядок, але контролювати їх розміри.

- **Особливість inline-block:**

- Елементи розташовуються в рядок, як inline, але поводяться як block,
    дозволяючи задавати ширину, висоту, та всі відступи.
  - Проблема: між елементами може з’явитися проміжок (через пробіли в HTML).

- Виправляється:
  - Видаленням пробілів у коді.
  - Встановленням font-size: 0 для батьківського контейнера.

</details>

<details>
<summary>21. Що таке CSS-правило?</summary>

#### CSS

- CSS-правило складається з селектора та блоку декларацій. Селектор визначає, до
  яких елементів на сторінці застосовуються стилі, а блок декларацій містить
  властивості та їх значення, що визначають вигляд цих елементів. Наприклад:

```css
p {
  color: red;
  font-size: 16px;
}
```

- Тут `p` — селектор (вибирає всі абзаци), а в блоці декларацій вказано, що
  текст буде червоним і розмір шрифту 16px.

</details>

<details>
<summary>22. Варіанти додавання CSS стилів на сторінку?</summary>

#### CSS

1. **Inline CSS:** Стилі додаються безпосередньо до HTML елементів через атрибут
   `style`.

```html
<p style="color: red; font-size: 16px;">Text</p>
```

2. **Internal CSS:** Стилі додаються в `<style>` тег в межах `<head>` секції
   HTML документа.

```html
<style>
  p {
    color: red;
    font-size: 16px;
  }
</style>
```

3. **External CSS:** Стилі прописуються в окремому CSS файлі, який підключається
   до HTML через тег `<link>`.

```html
<link rel="stylesheet" href="styles.css" />
```

- Ці варіанти відрізняються за пріоритетом і зручністю для масштабування
  проектів.

</details>

<details>
<summary>23. Типи позиціонування у CSS?</summary>

#### CSS

1. **static:** За замовчуванням для всіх елементів. Елементи розташовуються в
   нормальному потоці документа (тобто, згідно з їх порядком у HTML).

2. **relative:** Елемент розташовується відносно його початкового положення в
   потоці. Можна використовувати властивості `top`, `right`, `bottom`, `left`.

3. **absolute:** Елемент позиціонується відносно найближчого батьківського
   елемента з позиціонуванням (не `static`). Якщо такого немає, то відносно
   документа.

4. **fixed:** Елемент позиціонується відносно вікна браузера, тобто він
   залишатиметься на тому ж місці при прокручуванні сторінки.

5. **sticky:** Елемент поводиться як relative до певного моменту, після чого
   стає fixed, коли прокручують сторінку до заданого порогу.

</details>

<details>
<summary>24. Блокова модель CSS?</summary>

#### CSS

- Блокова модель CSS (Box Model) описує, як елементи розташовуються на
  веб-сторінці та як обчислюються їх розміри. Вона включає такі компоненти:

1. **Content (Контент):** Це основна частина елемента, де міститься текст або
   інші медіа. Розміри контенту визначаються властивостями `width` і `height`.

2. **Padding (Відступи):** Простір між контентом і межами елемента (border).
   Відступи додаються всередині елемента. Властивості: `padding-top`,
   `padding-right`, `padding-bottom`, `padding-left`.

3. **Border (Межа):** Лінія, яка оточує елемент. Може мати товщину, стиль та
   колір. Властивості: `border-width`, `border-style`, `border-color`.

4. **Margin (Зовнішній відступ):** Простір між елементом і його сусідніми
   елементами. Відступи додаються зовні елемента. Властивості: `margin-top`,
   `margin-right`, `margin-bottom`, `margin-left`.

- Коли вказуються розміри елемента через `width` і `height`, вони зазвичай
  враховують тільки `content`, але при додаванні `padding`, `border` і `margin`,
  розміри елемента змінюються.

- Важливо знати, що властивість `box-sizing` дозволяє визначати, як враховуються
  ці величини при обчисленні розмірів елемента:

- `content-box` (за замовчуванням): розміри елемента — це тільки контент.

- `border-box`: розміри елемента враховують також `padding` та `border`.

</details>

<details>
<summary>25. Що таке селектор? І які селектори є?</summary>

#### CSS

- **Селектор** у CSS — це частина правила, яка визначає, до яких елементів на
  сторінці застосовуються стилі. Селектори дозволяють вибирати HTML елементи для
  застосування стилів.

#### Основні типи селекторів:

1. **Типовий селектор (Type selector):** Вибирає елементи за їх тегом.

```css
p {
  color: red;
}
```

2. **Класовий селектор (Class selector):** Вибирає елементи за класом,
   починається з крапки.

```css
.my-class {
  color: blue;
}
```

3. **Ідентифікатор (ID selector):** Вибирає елементи за ідентифікатором,
   починається з решітки.

```css
#my-id {
  color: green;
}
```

4. **Атрибутний селектор (Attribute selector):** Вибирає елементи за значенням
   їх атрибутів.

```css
input[type='text'] {
  border: 1px solid black;
}
```

5. **Псевдоклас (Pseudo-class selector):** Вибирає елементи, що знаходяться в
   певному стані.

```css
a:hover {
  color: red;
}
```

6. **Псевдоелемент (Pseudo-element selector):** Вибирає частини елементів,
   наприклад, перший рядок або першу літеру.

```css
p::first-letter {
  font-size: 2em;
}
```

7. **Комбінатори (Combinators):**

- **_Descendant_** (потомок): Вибирає елементи, які є нащадками іншого елемента.

```css
div p {
  color: purple;
}
```

- **_Child_** (прямий нащадок): Вибирає елементи, що є прямими дітьми іншого
  елемента.

```css
div > p {
  color: yellow;
}
```

- **_Adjacent sibling_** (сусід): Вибирає елемент, який йде безпосередньо після
  іншого.

```css
h1 + p {
  margin-top: 0;
}
```

- **_General sibling_** (загальний сусід): Вибирає елементи, які є сусідами
  певного елемента.

```css
h1 ~ p {
  color: orange;
}
```

Це основні типи селекторів, що використовуються для вибору та стилізації
елементів.

</details>

<details>
<summary>26. Різниця між Reset.css та Normalize.css?</summary>

#### CSS

- **Reset.css** і **Normalize.css** — це два різні підходи до управління стилями
  за замовчуванням у браузерах, але з різними цілями:

1. **Reset.css:**

- **Мета:** Видалити всі стилі браузера (включаючи відступи, поля, шрифти тощо),
  щоб почати з "чистого аркуша".

- **Результат:** Все, що за замовчуванням задається браузером, скидається, і
  елементи стають однаковими в усіх браузерах. Це часто призводить до того, що
  потрібно вручну додавати стилі для базових елементів.

- **Приклад:**

```css
* {
  margin: 0;
  padding: 0;
  border: 0;
}
```

2. **Normalize.css:**

- **Мета:** Зробити стилі браузерів більш однаковими, але не скидаючи їх
  повністю. Підтримує стандартні стилі для елементів, щоб забезпечити однаковий
  вигляд у всіх браузерах.

- **Результат:** Зберігаються деякі стилі за замовчуванням, але вони
  нормалізуються для забезпечення консистентності між різними браузерами
  (наприклад, вирівнювання шрифтів, списки, таблиці).

- **Приклад:**

```css
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
```

- **Основна різниця:** Reset.css скидає всі стилі браузера до мінімуму, тоді як
  Normalize.css підтримує базові стилі, але нормалізує їх для більшої
  узгодженості між браузерами.

</details>

<details>
<summary>27. Різниця між display: none та visibility: hidden?</summary>

#### CSS

`display: none` і `visibility: hidden` приховують елементи, але працюють
по-різному:

- `display: none`

- Елемент зникає повністю зі сторінки.
  - Він не займає місця в макеті.
  - Інші елементи зміщуються так, ніби його не існувало.
  - Події (наприклад, кліки) не спрацьовують на ньому.
  - Використовується для повного приховування елементів.

```css
.hidden {
  display: none;
}
```

- `visibility: hidden`

- Елемент залишається на сторінці, але стає невидимим.
  - Він продовжує займати місце в макеті.
  - Інші елементи не зміщуються.
  - Події (наприклад, кліки) не спрацьовують, хоча елемент все ще є в DOM.

```css
.hidden {
  visibility: hidden;
}
```

**Різниця:** `display: none` прибирає елемент повністю, а `visibility: hidden`
залишає його місце, але робить невидимим.

</details>

<details>
<summary>28. Різниця між блоковим та інлайновим елементами?</summary>

#### CSS

- **Блокові (block) та інлайнові (inline) елементи** відрізняються способом
  відображення та впливом на структуру сторінки.

#### Блокові елементи (display: block)

- Починаються з нового рядка.
- Автоматично займають всю доступну ширину (по горизонталі).
- Можуть містити як інші блокові, так і інлайнові елементи.
- Підтримують width, height, margin, padding.

**Приклади:** `<div>`, `<p>`, `<h1>-<h6>`, `<section>`, `<article>`, `<form>`,
`<header>`, `<footer>`

```css
div {
  display: block;
  width: 100%;
}
```

#### Інлайнові елементи (display: inline)

- Не починаються з нового рядка, розташовуються "в потоці" тексту.
- Ширина та висота залежать від вмісту.
- width і height ігноруються (не можна змінювати вручну).
- margin та padding працюють тільки по горизонталі.

**Приклади:** `<span>`, `<a>`, `<strong>`, `<em>`, `<b>`, `<i>`

```css
span {
  display: inline;
  color: red;
}
```

#### Різниця

- Блокові елементи займають всю ширину і формують окремий рядок.
- Інлайнові елементи залишаються в потоці тексту та займають рівно стільки
  місця, скільки потрібно їх вмісту.

</details>

<details>
<summary>29. Різниця між класом та ідентифікатором у CSS?</summary>

#### CSS

#### Клас (`class`) vs Ідентифікатор (`id`) у CSS

| Параметр              | Клас (`class`)                            | Ідентифікатор (`id`)                      |
| --------------------- | ----------------------------------------- | ----------------------------------------- |
| Синтаксис             | Починається з `.`                         | Починається з `#`                         |
| Призначення           | Використовується для групи елементів      | Призначається одному унікальному елементу |
| Повторне використання | Може застосовуватися до кількох елементів | Повинен бути унікальним на сторінці       |
| Пріоритет у CSS       | Менший (0,0,1,0)                          | Вищий (0,1,0,0)                           |
| HTML приклад          | `<div class="box"></div>`                 | `<div id="unique-box"></div>`             |
| CSS приклад           | `.box { color: red; }`                    | `#unique-box { color: blue; }`            |

#### Різниця

- Класи використовуються для стилізації кількох елементів.
- ID застосовується до одного унікального елемента (але можна порушити це
  правило).
- ID має вищий пріоритет, тому його важко перевизначити.
- Класи краще використовувати для стилізації, ID — для JavaScript або унікальної
  ідентифікації.

</details>

<details>
<summary>30. Що таке CSS спрайт? І для чого він використовується?</summary>

#### CSS

- CSS спрайт — це техніка, де кілька зображень об'єднуються в одне велике
  зображення, а потім через CSS задаються позиції фону для відображення різних
  частин цього зображення.

Використовується для зменшення кількості HTTP-запитів, що підвищує швидкість
завантаження сторінки. Зазвичай застосовується для іконок, кнопок або інших
маленьких зображень, що використовуються на сайті.

#### Ось приклад використання CSS спрайту:

1. **Створення спрайта:** У вас є декілька маленьких зображень (наприклад,
   іконки), які ви об'єднуєте в один великий файл sprite.png.

2. **CSS для використання спрайта:**

```css
.icon {
  width: 50px;
  height: 50px;
  background-image: url('sprite.png');
  display: inline-block;
}

.icon-facebook {
  background-position: 0 0; /* Перша іконка в спрайті */
}

.icon-twitter {
  background-position: -50px 0; /* Друга іконка в спрайті */
}

.icon-linkedin {
  background-position: -100px 0; /* Третя іконка в спрайті */
}
```

3. **HTML для іконок:**

```html
<div class="icon icon-facebook"></div>
<div class="icon icon-twitter"></div>
<div class="icon icon-linkedin"></div>
```

У цьому прикладі всі іконки завантажуються з одного файлу sprite.png, і за
допомогою CSS background-position визначається, яка частина спрайту
відображатиметься для кожної іконки.

- Цей підхід вже не використовуеться в CSS, але для себе знати треба. 📝

</details>

<details>
<summary>31. Що таке вендорні префікси? І навіщо вони використовуються?</summary>

#### CSS

- Вендорні префікси — це спеціальні префікси, які додаються до CSS властивостей
  для забезпечення підтримки нових або експериментальних функцій у різних
  браузерах. Вони використовуються, коли властивість або функція ще не є
  стандартом або коли браузери реалізують їх по-своєму.

#### Приклад вендорних префіксів:

```css
.element {
  -webkit-transform: rotate(
    45deg
  ); /* для браузерів на WebKit, таких як Chrome, Safari */
  -moz-transform: rotate(45deg); /* для Firefox */
  -ms-transform: rotate(45deg); /* для Internet Explorer */
  transform: rotate(45deg); /* стандартна властивість */
}
```

- Вендорні префікси використовуються для забезпечення сумісності з різними
  браузерами, поки властивість не стане частиною офіційного стандарту CSS. Вони
  допомагають тестувати нові функції та забезпечують їх роботу на більшій
  кількості браузерів, поки всі вони не впровадять підтримку стандартних
  властивостей.

</details>

<details>
<summary>32. Що таке псевдоелементи? І навіщо вони використовуються?</summary>

#### CSS

- Псевдоелементи — це конструкції в CSS, які дозволяють стилізувати частини
  елементів, які не мають власного HTML представлення. Вони дозволяють додавати
  стилі до таких частин елементів, як перший рядок тексту, вміст перед або після
  елемента, або створення декоративних елементів без необхідності змінювати
  HTML.

#### Основні псевдоелементи:

- `::before` — додає вміст перед елементом.
- `::after` — додає вміст після елемента.
- `::first-letter` — стилізує першу букву тексту в елементі.
- `::first-line` — стилізує перший рядок тексту в елементі.

**Приклад використання:**

```css
p::before {
  content: '🔹 ';
}

p::after {
  content: ' 🔸';
}

p::first-letter {
  font-size: 2em;
  color: red;
}
```

**Застосування:** Псевдоелементи використовуються для:

- Додавання декоративних елементів без зміни HTML.
- Створення візуальних ефектів (наприклад, стилізація першої літери або першого
  рядка).
- Додавання контенту перед або після елемента, наприклад, іконок або текстових
  маркерів, без необхідності додавати додаткові теги в HTML.

</details>

<details>
<summary>33. Що таке схлопування меж (margin collapsing)?</summary>

#### CSS

- Схлопування меж (margin collapsing) — це явище в CSS, коли вертикальні
  відступи (margins) між сусідніми блоками або елементами "зливаються" в один,
  замість того, щоб відображатися окремо.

**Це зазвичай відбувається в таких ситуаціях:**

1. Коли два сусідні блоки мають вертикальні відступи (margins).

2. Коли один блок має відступ, а наступний блок не має відступу або його margin
   значення нульове.

У результаті, між елементами відображається відстань, що дорівнює найбільшому з
цих відступів.

**Приклад:**

```html
<div style="margin-bottom: 20px;">Block 1</div>
<div style="margin-top: 10px;">Block 2</div>
```

- У цьому випадку схлопування меж призведе до того, що відстань між блоками буде
  20px, а не 30px (як можна було б очікувати при додаванні 20px + 10px).

- **Чому це відбувається?** Схлопування меж застосовується, щоб уникнути зайвих
  відступів і зробити верстку більш зручною для використання, оскільки зазвичай
  не має сенсу мати два відступи, що діють на ту саму частину простору.

**Як уникнути схлопування:**

- Використовувати `padding`, а не `margin`, якщо потрібно уникнути схлопування.
- Встановити `overflow` на елементі.
- Використовувати фонові або градієнтні елементи, щоб блокувати схлопування.

</details>

<details>
<summary>34. Що таке z-index? Як формується контекст накладання?</summary>

#### CSS

- `z-index` — це CSS властивість, яка визначає порядок накладання елементів на
  сторінці. Вона використовується для визначення, який елемент має бути поверх
  іншого, коли елементи перекривають один одного. Вищий `z-index` означає, що
  елемент буде накладатися поверх елементів з нижчим значенням `z-index`.

#### Як працює `z-index`:

- Значення `z-index` може бути цілим числом (наприклад, 1, 10, -5).

- За замовчуванням, елементи з однаковим `z-index` або без нього накладаються
  один на одного в порядку їх появи в HTML.

- Чим більше значення `z-index`, тим вище елемент буде на сторінці.

#### Приклад:

```css
div {
  position: absolute;
}

.div1 {
  z-index: 1;
}

.div2 {
  z-index: 2;
}
```

- У цьому прикладі `.div2` буде накладатися поверх `.div1`, оскільки у неї вищий
  `z-index`.

#### Контекст накладання:

Контекст накладання — це область, в межах якої визначаються всі значення z-index
для елементів. Це стосується елементів з властивістю position (не static), або
коли застосовуються інші властивості, які створюють новий контекст накладання.

- **Контекст накладання формується, коли:**

1. Елемент має властивість `position` з одним із значень (`relative`,
   `absolute`, `fixed`, `sticky`).
2. `z-index` встановлено на значення, відмінне від auto.
3. Властивість opacity менша за 1.
4. Властивість `transform`, `filter`, `perspective`, `clip-path` та інші
   створюють новий контекст.

- **Як формується контекст накладання:**

1. Вищезгадані умови (наприклад, `position: relative` і `z-index`).
2. Ті елементи, які знаходяться в цьому контексті, будуть порівнювати свої
   z-index тільки в межах цього контексту, а не з іншими елементами на сторінці.
3. Якщо елемент знаходиться в різних контекстах накладання, то порівнювати
   z-index можна лише в межах кожного з контекстів.

#### Приклад контексту накладання:

```html
<div class="parent" style="position: relative; z-index: 10;">
  <div class="child" style="position: absolute; z-index: 5;">Child 1</div>
  <div class="child" style="position: absolute; z-index: 15;">Child 2</div>
</div>

<div class="sibling" style="position: absolute; z-index: 20;">Sibling</div>
```

- У цьому прикладі:

- `.child 1` і `.child 2` знаходяться в одному контексті накладання всередині
    `.parent`.
  - `.sibling` має інший контекст накладання і з'явиться поверх обох `.child`,
    оскільки має більший `z-index` у своєму контексті.

</details>

<details>
<summary>35. Порядок накладання елементів у CSS (Stacking Order)?</summary>

#### CSS

- Порядок накладання елементів у CSS (Stacking Order) визначається порядком, у
  якому елементи накладаються один на одного на сторінці. Це важливо, коли
  елементи з різними властивостями (наприклад, `z-index`) можуть перекривати
  один одного.

#### Порядок накладання (Stacking Order):

1. **Елементи за замовчуванням** (статичні елементи, без позиціонування та без
   `z-index`):

- Елементи без позиціонування (`position: static` або без властивості
  `position`) розташовуються один за одним у порядку їхнього розташування в
  HTML.

2. **Елементи з позиціонуванням** (`relative`, `absolute`, `fixed`, `sticky`):

- Якщо елемент має будь-яке інше значення `position` (крім `static`), він
  створює новий контекст накладання. У межах цього контексту елементи з більшим
  значенням `z-index` будуть накладатися поверх елементів з меншим значенням.

3. **Елементи з z-index**:

- Елементи з більш високим `z-index` будуть розташовуватися поверх елементів з
  нижчим значенням `z-index` (якщо елементи знаходяться в одному контексті
  накладання).

4. **Невидимі елементи** (з `opacity` менше 1 або з `visibility: hidden`):

- Елементи, які мають властивість `opacity` менше 1 або `visibility: hidden`,
  можуть бути розташовані поверх інших елементів, але їх все одно не видно.

5. **Елементи з властивістю** `transform`, `filter`, `perspective`, `clip-path`
   та іншими, що створюють новий контекст накладання:

- Коли елемент має одну з цих властивостей, це створює новий контекст
  накладання, і елементи в цьому контексті будуть накладатися згідно з їхніми
  значеннями `z-index`, незалежно від того, де вони знаходяться на сторінці.

6. **Елементи з фонового вмісту** (`backgrounds`, `borders`, etc.):

- Вміст, такий як фон або бордери, не створює власного контексту накладання, але
  може бути важливим для визначення, як інші елементи накладаються.

#### Порядок накладання елементів за замовчуванням:

1. **Блоки без позиціонування** (статичні елементи).

2. **Елементи з позиціонуванням** `relative` (якщо не визначено `z-index`).

3. **Елементи з позиціонуванням** `absolute`, `fixed`, `sticky` (в залежності
   від `z-index`).

4. **Нове контексти накладання** (наприклад, елементи з `transform`,
   `opacity < 1`, `filter` тощо).

#### Простіше кажучи:

- Статичні елементи не створюють контексту накладання і накладаються в порядку
  їхнього розташування в HTML.

- Елементи з позиціонуванням `relative`, `absolute`, `fixed`, `sticky` створюють
  контекст накладання, де `z-index` визначає, які елементи будуть поверх інших.

- Елементи з новими контекстами накладання (наприклад, з `transform` або
  `opacity < 1`) накладаються поверх всіх інших елементів із меншим пріоритетом.

</details>

<details>
<summary>36. Як за допомогою CSS визначити, чи підтримується властивість у браузері?</summary>

#### CSS

- Для того, щоб перевірити, чи підтримується властивість у браузері, в CSS
  безпосередньо неможливо це зробити, оскільки CSS сам по собі не має вбудованих
  механізмів для перевірки підтримки властивостей. Однак, є кілька способів
  зробити це за допомогою JavaScript та умовних конструкцій у CSS.

1. **Використання JavaScript (Modernizr)**

Один із способів перевірити, чи підтримується CSS властивість у браузері — це
використати JavaScript-бібліотеку, наприклад, Modernizr. Modernizr дозволяє
перевіряти підтримку різних технологій і властивостей браузером.

**Приклад використання Modernizr:**

```javascript
if (Modernizr.flexbox) {
  console.log('Flexbox підтримується!');
} else {
  console.log('Flexbox не підтримується.');
}
```

2. **Використання умови @supports в CSS**

CSS має власну конструкцію `@supports`, яка дозволяє перевіряти, чи
підтримується певна CSS властивість або її значення в поточному браузері.

**Приклад:**

```css
/* Перевіряє, чи підтримується flexbox */
@supports (display: flex) {
  .container {
    display: flex;
  }
}

/* Якщо не підтримується flexbox, додається альтернативне значення */
@supports not (display: flex) {
  .container {
    display: block;
  }
}
```

У цьому прикладі, якщо браузер підтримує `display: flex`, то він застосує стилі,
визначені в першому блоці. Якщо ж не підтримує, застосує стилі з блоку
`@supports` not.

3. **Використання префіксів для застарілих властивостей**

Для старих властивостей або експериментальних властивостей браузерів часто
використовуються вендорні префікси. Якщо необхідно працювати з такими
властивостями, часто можна додавати ці префікси та перевіряти, чи працює код на
різних браузерах.

**Приклад з вендорними префіксами:**

```css
/* Вендорні префікси для трансформацій */
.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
```

Це допоможе забезпечити сумісність з різними версіями браузерів.

#### Висновок

Найбільш зручним методом перевірки підтримки властивості є використання
@supports у CSS або бібліотеки Modernizr для JavaScript, яка дозволяє створити
перевірки підтримки за допомогою скриптів.

</details>

<details>
<summary>37. Глобальні ключові слова у CSS?</summary>

#### CSS

- Глобальні ключові слова в CSS — це спеціальні значення, які можна задати
  будь-якій CSS-властивості. Вони не змінюють саме значення властивості, а
  вказують, як її слід обчислювати.

#### Список глобальних ключових слів

1. `inherit` – успадковує значення від батьківського елемента.
2. `initial` – скидає значення до дефолтного (згідно зі специфікацією).
3. `unset` – якщо властивість успадковується за замовчуванням (наприклад,
   color), діє як inherit, інакше – як initial.
4. `revert` – повертає значення до того, що визначено у стилях браузера чи
   користувача.
5. `revert-layer` – скидає значення до попереднього рівня каскаду (актуально для
   @layer).

#### Приклади використання

✅ `inherit` (успадкування значення)

```css
p {
  color: red;
}
span {
  color: inherit; /* отримає червоний від <p> */
}
```

✅ `initial` (повернення до стандартного значення)

```css
button {
  all: initial; /* скидає всі властивості до дефолтних */
}
```

✅ `unset` (залежно від властивості)

```css
div {
  color: unset; /* успадкує */
  width: unset; /* повернеться до `auto` */
}
```

✅ `revert` (повернення до стандартних стилів браузера)

```css
a {
  color: green;
}
a.special {
  color: revert; /* поверне синій, якщо його задає браузер */
}
```

✅ `revert-layer` (актуально для @layer)

```css
@layer framework {
  button {
    background: red;
  }
}

@layer custom {
  button {
    background: blue;
  }
}

/* revert-layer поверне червоний із framework, а не дефолтний */
button {
  background: revert-layer;
}
```

#### Висновок

- `inherit` – для спадкування.
- `initial` – для скидання до дефолту.
- `unset` – комбінує inherit та initial.
- `revert` – повертає значення браузера чи стилів користувача.
- `revert-layer` – скидає значення до попереднього рівня каскаду.

</details>

<details>
<summary>38. Що таке перерахування селекторів?</summary>

#### CSS

- Перерахування селекторів — це використання кількох селекторів, розділених
  комою, для одночасного застосування стилів до різних елементів.

#### Синтаксис

```css
selector1,
selector2,
selector3 {
  property: value;
}
```

#### Приклади

✅ Стилізація кількох елементів одночасно

```css
h1,
h2,
h3 {
  color: red;
}
```

- Усі h1, h2 і h3 стануть червоними.

✅ Комбінація класів і тегів

```css
button,
.btn {
  padding: 10px;
}
```

- Застосується до `<button>` і будь-якого елемента з `.btn`.

✅ Перерахування складних селекторів

```css
.card .title,
.box .header {
  font-weight: bold;
}
```

- Стилізує `.title` всередині `.card` і `.header` всередині `.box`.

#### Висновок

- Коми (`,`) об'єднують селектори, застосовуючи однакові стилі.
- Дозволяє скорочувати код і зменшувати дублювання.
- Важливо не плутати з комбінованими селекторами (наприклад, `.class1 .class2`,
  де `.class2` має бути всередині `.class1`).

</details>

<details>
<summary>39. Для чого використовується ключове слово currentColor у CSS?</summary>

#### CSS

- `currentColor` — це ключове слово в CSS, яке задає значення кольору (`color`)
  для інших властивостей, що підтримують кольори.

#### Як працює

- `currentColor` автоматично використовує значення, встановлене у властивості
  `color`.

#### Приклади використання

✅ Однаковий колір для тексту та рамки

```css
button {
  color: blue;
  border: 2px solid currentColor;
}
```

- Рамка кнопки буде того ж кольору, що й текст (`blue`).

✅ SVG-іконки із кольором тексту

```css
.icon {
  color: red;
  fill: currentColor;
}
```

- `fill` у SVG прийме `color` елемента (`red`).

✅ Прозорість зі спадкуванням кольору

```css
.link {
  color: green;
  background: linear-gradient(currentColor 0%, transparent 100%);
}
```

- Градієнт стартує від `green`, бо це значення `color`.

#### Висновок

- Використовує значення `color`, усуваючи дублювання стилів.
- Особливо корисно для SVG, `border`, `background`, `box-shadow`.
- Спрощує темізацію: змінюєш `color`, і все підлаштовується.

</details>

<details>
<summary>40. Які псевдокласи є CSS?</summary>

#### CSS

#### Псевдокласи в CSS

- ✅ Динамічні псевдокласи

| Псевдоклас | Опис                                         |
| ---------- | -------------------------------------------- |
| `:hover`   | При наведенні курсору.                       |
| `:focus`   | Коли елемент у фокусі (наприклад, `input`).  |
| `:active`  | Під час натискання.                          |
| `:visited` | Для відвіданих посилань.                     |
| `:target`  | Для елемента, що відповідає `#anchor` в URL. |

- ✅ Структурні псевдокласи

| Псевдоклас           | Опис                                                   |
| -------------------- | ------------------------------------------------------ |
| `:first-child`       | Перший дочірній елемент.                               |
| `:last-child`        | Останній дочірній елемент.                             |
| `:nth-child(n)`      | Дочірній елемент за індексом `n` (можна `odd`/`even`). |
| `:nth-last-child(n)` | Те саме, але з кінця.                                  |
| `:only-child`        | Якщо елемент єдиний у батьківському контейнері.        |

- ✅ Типові псевдокласи

| Псевдоклас             | Опис                                         |
| ---------------------- | -------------------------------------------- |
| `:first-of-type`       | Перший елемент певного типу.                 |
| `:last-of-type`        | Останній елемент певного типу.               |
| `:nth-of-type(n)`      | N-ий елемент певного типу.                   |
| `:nth-last-of-type(n)` | N-ий елемент певного типу з кінця.           |
| `:only-of-type`        | Якщо елемент унікальний серед такого ж типу. |

- ✅ Логічні псевдокласи

| Псевдоклас         | Опис                                                 |
| ------------------ | ---------------------------------------------------- |
| `:not(selector)`   | Вибирає все, **крім** вказаного селектора.           |
| `:has(selector)`   | Вибирає елементи, що містять інший елемент (`CSS4`). |
| `:where(selector)` | Як `:is()`, але без пріоритету.                      |
| `:is(selector)`    | Спрощує складні селектори.                           |

- ✅ Псевдокласи для форм

| Псевдоклас    | Опис                                |
| ------------- | ----------------------------------- |
| `:checked`    | Позначений чекбокс або радіокнопка. |
| `:disabled`   | Вимкнений елемент форми.            |
| `:enabled`    | Активний елемент форми.             |
| `:required`   | Поле `input`, що обов’язкове.       |
| `:optional`   | Поле `input`, що не є обов’язковим. |
| `:valid`      | Поле форми з коректним значенням.   |
| `:invalid`    | Поле форми з некоректним значенням. |
| `:read-only`  | Поле у режимі `readonly`.           |
| `:read-write` | Поле, що можна редагувати.          |

**Псевдокласи допомагають стилізувати елементи без додаткових класів або JS.
Використовуйте `:is()` та `:has()` для скорочення складних селекторів у CSS4.**

</details>

<details>
<summary>41. Які фільтри є у CSS?</summary>

#### CSS

- Фільтри у CSS

Фільтри (`filter`) дозволяють змінювати вигляд елементів, застосовуючи ефекти до
їхнього рендерингу.

#### 🔹 Основні фільтри

| Фільтр          | Опис                                                  | Приклад                     |
| --------------- | ----------------------------------------------------- | --------------------------- |
| `blur(px)`      | Розмиття з вказаним радіусом у пікселях.              | `filter: blur(5px);`        |
| `brightness(%)` | Змінює яскравість (100% – без змін).                  | `filter: brightness(150%);` |
| `contrast(%)`   | Змінює контраст (100% – без змін).                    | `filter: contrast(120%);`   |
| `grayscale(%)`  | Відтінки сірого (100% – чорно-біле).                  | `filter: grayscale(100%);`  |
| `invert(%)`     | Інвертує кольори (100% – повністю інвертоване).       | `filter: invert(100%);`     |
| `opacity(%)`    | Прозорість (0% – повністю прозоре, 100% – непрозоре). | `filter: opacity(50%);`     |
| `saturate(%)`   | Насиченість (100% – без змін, 0% – ч/б).              | `filter: saturate(200%);`   |
| `sepia(%)`      | Ефект сепії (100% – повністю сепія).                  | `filter: sepia(80%);`       |

#### 🔹 Фільтри для тіней та зміщення

| Фільтр                        | Опис                                                                        | Приклад                                              |
| ----------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------- |
| `drop-shadow(x y blur color)` | Додає тінь до зображення (аналог `box-shadow`, але працює з прозорими PNG). | `filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));` |

#### 🔹 Комбінування фільтрів

- Фільтри можна комбінувати, вказуючи їх через пробіл:

```css
filter: brightness(120%) contrast(110%) blur(3px);
```

- Фільтри застосовуються до всіх елементів, але найчастіше – до зображень (img),
  відео та бекграундів.

</details>

<details>
<summary>42. Навіщо використовується псевдоклас :invalid?</summary>

#### CSS

- Псевдоклас `:invalid` використовується для стилізації полів вводу (`<input>`,
  `<textarea>`, `<select>`), які не відповідають вимогам валідації.

#### Навіщо це потрібно?

- Підсвічувати некоректно заповнені поля.
- Покращити UX, показуючи візуальний зворотний зв’язок.
- Додати кастомні стилі без JavaScript.

#### Приклад використання

```css
input:invalid {
  border: 2px solid red;
  background-color: #ffe6e6;
}
```

```html
<input type="email" required placeholder="Введіть email" />
```

- Якщо поле буде пустим або міститиме некоректний email, воно підсвітиться
  червоним.

</details>

<details>
<summary>43. Розкажіть про властивість display в CSS?</summary>

#### CSS

#### Властивість `display` у CSS

- `display` визначає, як елемент відображається на сторінці та як він взаємодіє
  з іншими елементами.

#### 🔹 Основні значення

| Значення       | Опис                                                         |
| -------------- | ------------------------------------------------------------ |
| `none`         | Елемент прихований і не займає місця в макеті.               |
| `block`        | Блочний елемент, займає всю ширину батьківського контейнера. |
| `inline`       | Вбудований елемент, займає лише необхідну ширину.            |
| `inline-block` | Вбудований елемент, але можна змінювати ширину/висоту.       |

#### 🔹 Гнучкі макети

| Значення      | Опис                                                                |
| ------------- | ------------------------------------------------------------------- |
| `flex`        | Активація **Flexbox** для гнучкого розташування дочірніх елементів. |
| `grid`        | Використання **CSS Grid** для двовимірного макету.                  |
| `inline-flex` | Flex-контейнер, але поводиться як `inline`.                         |
| `inline-grid` | Grid-контейнер, але поводиться як `inline`.                         |

#### 🔹 Табличні макети

| Значення     | Опис                           |
| ------------ | ------------------------------ |
| `table`      | Елемент поводиться як таблиця. |
| `table-row`  | Імітує рядок таблиці.          |
| `table-cell` | Імітує комірку таблиці.        |

#### 🔹 Інші значення

| Значення    | Опис                                                         |
| ----------- | ------------------------------------------------------------ |
| `list-item` | Елемент поводиться як `<li>`, додаючи маркер списку.         |
| `inherit`   | Наслідує значення `display` від батьківського елемента.      |
| `initial`   | Встановлює значення `display` за замовчуванням для браузера. |

**`display: none` повністю прибирає елемент з потоку, на відміну від
`visibility: hidden`, який просто приховує його, залишаючи місце.**

</details>

<details>
<summary>44. У якому випадку краще використовувати translate() замість абсолютного позиціонування?</summary>

#### CSS

- Використовувати `translate()` краще в таких випадках:

1. **Оптимізація продуктивності** – `translate()` використовує GPU для
   обчислень, що робить анімації та переміщення плавнішими, ніж зміна
   `top/left`.

2. **Збереження потоку документа** – `translate()` не впливає на положення інших
   елементів, на відміну від `position: absolute`, який змінює розташування
   елемента відносно найближчого позиціонованого предка.

3. **Поліпшення продуктивності рендерингу** – зміна `transform` не викликає
   рефлоу (`reflow`), тоді як `top/left` змушують браузер перераховувати макет.

4. **Гнучке центрування** – `translate(-50%, -50%)` часто використовується для
   центрування без залежності від розмірів контейнера.

- Якщо потрібно перемістити елемент без зміни його поточного контексту,
  `translate()` – кращий вибір.

</details>

<details>
<summary>45. Що таке плаваючі елементи (floats)? Як вони працюють?</summary>

#### CSS

- **Плаваючі елементи** (`float`) — це механізм у CSS, який дозволяє елементам
  "виринати" ліворуч або праворуч усередині контейнера, при цьому текст та інші
  інлайн-елементи обтікають їх.

#### Як працюють `float`:

1. **Обтікання текстом** – якщо блок має `float: left` або `float: right`, інші
   елементи (зазвичай текст) обтікають його.

2. **Вилучення з потоку** – `float` прибирає елемент із нормального потоку
   документа, але він все ще займає місце в контейнері.

3. **Розриви потоку** (`clearfix`) – якщо всі дочірні елементи контейнера float,
   він може схлопнутись. Виправляють це додаванням `overflow: hidden` або
   `.clearfix (::after { content: ""; display: block; clear: both; })`.

4. **Обмежена керованість** – `float` застаріває, бо не підходить для складних
   макетів. Замість нього зараз використовують `flexbox` або `grid`.

**Висновок:** `float` був основним способом верстки до появи `flexbox` і `grid`,
але зараз використовується переважно для обтікання зображень текстом.

</details>

<details>
<summary>46. Способи завдання кольору CSS?</summary>

#### CSS

- Існує кілька способів задавати кольори в CSS:

1. **Назва кольору:**

Наприклад:

```css
color: red;
```

2. **Шістнадцятковий код (Hex):**

Наприклад:

```css
color: #ff5733; /* Рожевий */
```

3. **RGB (Red, Green, Blue):**

- Визначається за допомогою значень для червоного, зеленого і синього каналів
  від 0 до 255.

Наприклад:

```css
color: rgb(255, 87, 51);
```

4. **RGBA (Red, Green, Blue, Alpha):**

- Подібно до RGB, але з додаванням каналу прозорості (alpha) від 0 (повністю
  прозорий) до 1 (непрозорий).

Наприклад:

```css
color: rgba(255, 87, 51, 0.5);
```

5. **HSL (Hue, Saturation, Lightness):**

- Визначається за допомогою відтінку (hue), насиченості (saturation) та
  яскравості (lightness).

Наприклад:

```css
color: hsl(12, 100%, 60%);
```

6. **HSLA (Hue, Saturation, Lightness, Alpha):**

- Як HSL, але з каналом прозорості.

Наприклад:

```css
color: hsla(12, 100%, 60%, 0.5);
```

7. **CSS-Gradients:**

- Колір може бути визначений за допомогою градієнтів.

Наприклад:

```css
background: linear-gradient(to right, red, yellow);
```

8. **Прозорі кольори:**

- Використовуємо ключові слова для заданого рівня прозорості.

Наприклад:

```css
color: transparent;
```

Ці методи дозволяють задавати кольори на різні випадки та з різними рівнями
контролю над прозорістю.

</details>

<details>
<summary>47. Які CSS-властивості використовуються для створення анімацій та плавних переходів?</summary>

#### CSS

- Для створення анімацій та плавних переходів у CSS використовуються такі
  властивості:

1. **Плавні переходи (`transition`)**

- Дозволяють змінювати значення властивостей із плавною анімацією.

**Основні властивості:**

- `transition-property` – яка властивість анімується.
- `transition-duration` – час анімації.
- `transition-timing-function` – крива прискорення (наприклад, `ease`, `linear`,
  `ease-in-out`).
- `transition-delay` – затримка перед анімацією.

#### Приклад:

```css
button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: red;
}
```

2. **Анімації (`@keyframes` + `animation`)**

- Дозволяють створювати складніші анімації зі зміною стилів у ключових точках.

**Основні властивості:**

`animation-name` – ім'я анімації (відповідає @keyframes). `animation-duration` –
тривалість анімації. `animation-timing-function` – крива прискорення.
`animation-delay` – затримка перед початком. `animation-iteration-count` –
кількість повторень (infinite для безкінечної анімації). `animation-direction` –
напрям (normal, reverse, alternate). `animation-fill-mode` – визначає, чи
зберігається стан анімації після завершення.

#### Приклад:

```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 1s ease-in-out;
}
```

#### Що використовувати?

- `transition` – якщо треба просто змінювати стилі при наведенні або зміні
  класу.
- `animation` – якщо потрібен складніший ефект з кількома ключовими кадрами.

</details>

<details>
<summary>48. Різниця між псевдокласами та псевдоелементами?</summary>

#### CSS

- Різниця між псевдокласами і псевдоелементами полягає у їхньому призначенні та
  способі застосування:

#### Псевдокласи

- Псевдокласи застосовуються для вибору елементів на основі їхнього стану або
  взаємодії з користувачем, а не через структуру HTML. Вони дозволяють
  стилізувати елементи в певних умовах.

**Приклади псевдокласів:**

- `:hover` — для елементів, на які наводиться курсор.

```css
button:hover {
  background-color: blue;
}
```

- `:focus` — для елементів, на які надано фокус (наприклад, поля введення).

```css
input:focus {
  border-color: green;
}
```

- `:nth-child()` — для вибору елементів за їхнім порядковим номером серед
  батьків.

```css
li:nth-child(odd) {
  background-color: lightgray;
}
```

#### Псевдоелементи

- Псевдоелементи дозволяють стилізувати частини елементів або додавати вміст,
  який не існує в HTML. Вони створюють віртуальні елементи для маніпуляцій із
  частинами контенту.

**Приклади псевдоелементів:**

- `::before`— додає вміст перед вмістом елемента.

```css
p::before {
  content: '→ ';
  color: green;
}
```

- `::after` — додає вміст після вмісту елемента.

```css
p::after {
  content: ' ←';
  color: red;
}
```

- `::first-letter` — для стилізації першої літери елемента.

```css
p::first-letter {
  font-size: 2em;
  color: blue;
}
```

#### Ключова різниця:

- Псевдокласи працюють з станом елементів (наприклад, під час наведеного курсору
  або фокуса).

- Псевдоелементи дозволяють додавати вміст до елементів або стилізувати їх
  частини (наприклад, перша буква чи передвміст).

#### Важливе зауваження:

- Псевдокласи використовують один знак двокрапки (:), але для псевдоелементів
  традиційно використовують два знаки двокрапки (::). Тому сучасні стандарти
  рекомендують використовувати :: для псевдоелементів (але підтримка : для
  псевдоелементів залишається).

</details>

<details>
<summary>49. Розкажіть про псевдоклас :has()?</summary>

#### CSS

- `:has()` – **потужний CSS-псевдоклас**
  - `:has()` — це "батьківський селектор", який дозволяє стилізувати елемент, що
    містить певні дочірні елементи.

#### Як працює?

Цей псевдоклас перевіряє, чи містить елемент певний вкладений елемент, і
застосовує до нього стилі.

#### Приклад: змінюємо стиль картки, якщо в ній є зображення

```css
.card:has(img) {
  border: 2px solid blue;
}
```

Якщо `.card` містить `<img>`, то отримає синю рамку.

#### Приклади використання

1. Виділення `<input>` в контейнері, що містить кнопку "`submit`"

```css
.form:has(button[type='submit']) {
  background-color: lightgray;
}
```

- Сірий фон застосовується тільки до .form, якщо в ній є кнопка submit.

2. Приховуємо кнопку, якщо інпут порожній

```css
button:has(+ input:placeholder-shown) {
  display: none;
}
```

- Кнопка буде схована, доки користувач не введе текст в інпут.

3. Вибір батьківського елемента списку, якщо він містить активний пункт

```css
.nav:has(.active) {
  background-color: black;
}
```

- Якщо .nav містить .active елемент, змінюється фон.

#### Підтримка браузерами

✅ Chrome, Edge, Safari (з 2023 року) ❌ Firefox (станом на 2025 рік досі немає
підтримки)

- Поліфілів немає, тому варто перевіряти підтримку перед використанням.

#### Висновок

- `:has()` дає можливість змінювати батьківський елемент на основі його вмісту.
- Робить CSS динамічнішим, замінюючи деякі JavaScript-маніпуляції.
- Потрібно враховувати обмежену підтримку в Firefox.

</details>

<details>
<summary>50. Проблеми з використанням CSS-in-JS? Як їх вирішити?</summary>

#### CSS

- **Проблеми CSS-in-JS і способи їх вирішення**

- CSS-in-JS — потужний підхід для стилізації в React та інших фреймворках, але
    він має серйозні недоліки, які потрібно враховувати.

1. Погана продуктивність (перформанс)

- ❌ Проблема:

- Динамічні стилі створюються під час рендеру, що сповільнює завантаження
    сторінки.
  - Генерація стилів на клієнті збільшує TTI (Time to Interactive).

- ✅ Рішення:

- Використовувати статичні стилі там, де це можливо (styled-components з
    as="tag").
  - Переносити стилі на сервер (SSR) з styled-components або emotion.

```tsx
import { ServerStyleSheet } from 'styled-components';
```

- Використовувати CSS Modules або Tailwind для критичних стилів.

2. Великі розміри бандлу

- ❌ Проблема:

- CSS-in-JS додає зайвий код у JavaScript-бандл.
  - Використання бібліотек (styled-components, emotion) збільшує розмір пакета.

- ✅ Рішення:

- Використовувати Linaria або Astro (CSS-in-JS без рантайму).
  - Використовувати компіляцію під час білду (наприклад,
    babel-plugin-styled-components).
  - Використовувати css prop у emotion, який генерує мінімальний CSS.

3. Проблеми з специфічністю CSS

- ❌ Проблема:

- CSS-in-JS генерує унікальні класи, але бувають колізії.
  - Не можна легко перевизначити стилі без !important.

- ✅ Рішення:

- Використовувати theme-based стилі через контекст.
  - Використовувати as або css для стилізації без перезапису класів.

```tsx
<Button as="a" href="/">
  Link
</Button>
```

4. Відсутність інтуїтивного автодоповнення в IDE

- ❌ Проблема:

- IDE не завжди правильно підказує стилі всередині JS.
  - Слабка підтримка підсвітки синтаксису в деяких редакторах.

- ✅ Рішення:

- Використовувати VSCode-плагіни для styled-components або emotion.
  - Використовувати TypeScript + CSS Variables.

5. Труднощі з анімаціями

- ❌ Проблема:

- CSS-in-JS не завжди добре працює з keyframes.
  - Анімації можуть генеруватися кожен рендер.

- ✅ Рішення:

- Використовувати keyframes правильно:

```tsx
import { keyframes } from 'styled-components';

const fadeIn = keyframes`  from { opacity: 0; }
  to { opacity: 1; }`;

const AnimatedDiv = styled.div`
  animation: ${fadeIn} 1s ease-in-out;
`;
```

- Використовувати Framer Motion або GSAP замість CSS-in-JS анімацій.

#### Висновок

- ✅ CSS-in-JS зручно для компонентного підходу, але:

- Має проблеми продуктивності → вирішується SSR або компіляцією.
  - Збільшує розмір бандлу → можна мінімізувати Linaria/Astro.
  - Проблеми з специфічністю → використовувати as, теми та контекст.
  - Автодоповнення не завжди працює → плагіни VSCode + TS.

Для великих проєктів варто комбінувати CSS-in-JS з CSS Modules, Tailwind або
ванільним CSS.

</details>

<details>
<summary>51. Що означає CSS і яке його основне використання?</summary>

#### CSS

- CSS (Cascading Style Sheets) – це мова стилів, яка використовується для опису
  зовнішнього вигляду HTML-документів. Основне використання – керування стилями
  елементів, такими як кольори, шрифти, відступи, розміри та розташування на
  сторінці.

</details>

<details>
<summary>52. Які способи підключення CSS до HTML ти знаєш?</summary>

#### CSS

- Є три способи:

1. **Вбудований (Inline CSS)** – через атрибут `style` в HTML-елементі:

```html
<p style="color: red;">Текст</p>
```

2. **Вбудований блок (Internal CSS)** – у `<style>` всередині `<head>`:

```html
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
```

3. **Зовнішній файл (External CSS)** – підключення окремого `.css` файлу через
   `<link>`:

```html
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
```

</details>

<details>
<summary>53. Яка різниця між селекторами класу та ID</summary>

#### CSS

- **Селектор класу (`.`)**

- Використовується для стилізації групи елементів.
  - Позначається крапкою (`.`) перед назвою класу.
  - Один клас можна застосувати до багатьох елементів.

#### Приклад:

```html
<p class="text">Це параграф</p>
```

```css
.text {
  color: blue;
}
```

- **Селектор ID (`#`)**

- Використовується для унікального елемента на сторінці.
  - Позначається решіткою (#) перед назвою ID.
  - Один ID має бути лише в одному елементі.

#### Приклад:

```html
<p id="unique-text">Це унікальний параграф</p>
```

```css
#unique-text {
  color: red;
}
```

#### Основні відмінності між селекторами класу та ID

| Характеристика            | Клас (`.`)      | ID (`#`)                     |
| ------------------------- | --------------- | ---------------------------- |
| **Призначення**           | Група елементів | Унікальний елемент           |
| **Повторне використання** | Так             | Ні (повинен бути унікальним) |
| **Специфічність**         | Менша           | Вища                         |

</details>

<details>
<summary>54. Що таке псевдокласи в CSS?</summary>

#### CSS

- Псевдокласи в CSS – це спеціальні ключові слова, які додаються до селекторів і
  дозволяють стилізувати елементи в залежності від їхнього стану або положення в
  DOM.

#### Приклади псевдокласів:

- `:hover` – застосовується, коли користувач наводить курсор на елемент.
- `:focus` – активується, коли елемент отримує фокус.
- `:nth-child(n)` – вибирає елементи за їхньою позицією серед братніх елементів.
- `:first-child` – вибирає перший дочірній елемент.
- `:last-child` – вибирає останній дочірній елемент.
- `:checked` – застосовується до вибраних чекбоксів або радіокнопок.

#### Приклад використання:

```css
button:hover {
  background-color: blue;
  color: white;
}

input:focus {
  border: 2px solid green;
}

li:nth-child(2) {
  font-weight: bold;
}
```

#### Важливі особливості:

- Псевдокласи не змінюють HTML-структуру, а лише впливають на стилізацію.
- Можна комбінувати кілька псевдокласів для одного елемента.

</details>

<details>
<summary>55. Опишіть, як реалізувати скидання CSS і чому це корисно.</summary>

#### CSS

1. `Normalize.css` — не прибирає все, а уніфікує:

- Підключаєш файл:

```html
<link
  rel="stylesheet"
  href="https://necolas.github.io/normalize.css/latest/normalize.css"
/>
```

- Перевага — зберігає корисні стилі, робить вигляд однаковим у всіх браузерах.

2. `Eric Meyer Reset` — агресивне скидання:

```css
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
... {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
```

- Мінус: треба переписувати багато стилів з нуля.

3. Modern CSS Reset — компактна сучасна версія:

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}
```

- Ціль — контроль. Без скидання різні браузери дають різні стилі. Це зламає
  дизайн.

#### Користь:

- Усуває розбіжності в дефолтних стилях між браузерами. Дає чисту стартову
  точку. Менше багів, стабільніше верстання.

</details>

<details>
<summary>56. Як ви вибираєте елементи за атрибутами в CSS?</summary>

#### CSS

- Звернення до атрибутів пишемо у квадратних дужках:

```css
/* Всі лінки, що відкриваються в новій вкладці */
a[target='_blank'] {
  color: red;
}

/* Всі інпути з атрибутом required */
input[required] {
  border: 2px solid orange;
}

/* Всі кнопки зі специфічним типом */
button[type='submit'] {
  background-color: green;
}

/* Всі зображення з alt, що містить слово "logo" */
img[alt*='logo'] {
  width: 150px;
}
```

</details>

<details>
<summary>57. Що таке псевдоелементи і для чого вони використовуються?</summary>

#### CSS

- Псевдоелементи — це спецконструкції для стилізації частин елементів, яких нема
  в HTML.

**Використовуються для:**

- додавання контенту (`::before`, `::after`)

- стилізації першої літери або рядка (`::first-letter`, `::first-line`)

- кастомізації `::placeholder` в інпутах

**Приклад:**

```css
p::first-line {
  font-weight: bold;
}

button::after {
  content: ' →';
}
```

- Це дає гнучкість без зайвого HTML.

</details>

<details>
<summary>58. Поясніть різницю між дочірнім комбінатором і нащадком комбінатора.</summary>

#### CSS

- **Дочірній комбінатор** (`>`) — стилізує тільки безпосереднього потомка.
- **Нащадок комбінатор** (`пробіл`) — стилізує будь-якого нащадка на будь-якій
  глибині.

#### Приклад:

```css
/* Дочірній комбінатор */
div > p {
  color: blue;
}

/* Нащадок комбінатор */
div p {
  color: red;
}
```

- У першому випадку — тільки ті `<p>`, що прямо всередині `<div>`.
- У другому — всі `<p>`, навіть вкладені через кілька рівнів.

</details>

<details>
<summary>59. Як би ви вибрали всі прямі дочірні елементи певного типу?</summary>

#### CSS

- Через дочірній комбінатор `>`.

#### Приклад:

```css
ul > li {
  list-style: none;
}
```

- Вибере тільки ті `<li>`, які безпосередньо всередині `<ul>`.

</details>

<details>
<summary>60. Що таке універсальний селектор і однорідний комбінатор, і коли ви їх використаєте?</summary>

#### CSS

- **Універсальний селектор** (`*`) — вибирає всі елементи.

- **Однорідний комбінатор** (`+`) — вибирає елемент, що безпосередньо слідує за
  іншим.

#### Коли використовую:

`*` — для глобального скидання стилів:

```css
* {
  margin: 0;
  padding: 0;
}
```

`+` — для стилізації сусідніх елементів, наприклад:

```css
h1 + p {
  margin-top: 0;
}
```

- Працюють швидко, якщо не зловживати.

</details>

<details>
<summary>61. Що таке CSS Box Model?</summary>

#### CSS

- **CSS Box Model** — це структура кожного елемента у вигляді прямокутника, що
  складається з чотирьох шарів:

1. `Content` — сам вміст (текст, зображення).

2. `Padding` — відступи всередині рамки, навколо контенту.

3. `Border` — рамка навколо паддінгу і контенту.

4. `Margin` — зовнішній відступ від інших елементів.

- Без розуміння **_Box Model_** верстати нормально не вийде.

</details>

<details>
<summary>62. Поясніть що таке Margin Collapsing.</summary>

#### CSS

- **Margin Collapsing** — це коли вертикальні зовнішні відступи двох елементів
  зливаються в один.

- Бере більший з двох `margin`, а не сумує їх.

#### Приклад:

```html
<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 30px;"></div>
```

- Відстань між дивами буде `30px`, а не `50px`.

- Працює тільки вертикально.

</details>

<details>
<summary>63. Які є значення і властивості box-sizing і що вони роблять?</summary>

#### CSS

- **Властивість: box-sizing.**

- Значення:

- `content-box` — ширина і висота враховують тільки контент, `padding` і
    `border` додаються окремо.

- `border-box` — ширина і висота включають контент, `padding` і `border`.

</details>

<details>
<summary>64. Як відцентрувати "div" за допомогою CSS?</summary>

#### CSS

- Щоб відцентрувати `<div>` за допомогою `CSS`, можна використовувати кілька
  підходів. Ось найбільш популярні:

1. За допомогою `margin: auto` (для блочних елементів з заданою шириною):

```css
.element {
  width: 50%;
  margin: 0 auto;
}
```

2. `Flexbox` (центрування в контейнері):

```css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.element {
  width: 50%;
}
```

3. `Grid` (центрування в контейнері):

```css
.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.element {
  width: 50%;
}
```

4. Абсолютне позиціонування з `transform` для точного центрування:

```css
.container {
  position: relative;
  height: 100vh;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}
```

- Ці методи дозволяють вам відцентрувати `<div>` по горизонталі та/або вертикалі
  в залежності від вимог.

</details>

<details>
<summary>65. Яка різниця між block, inline, і inline-block  елементами?</summary>

#### CSS

- Різниця така:

- **block** — займає всю ширину батьківського елемента, починається з нового
    рядка. Можна задавати `ширину`, `висоту`, `margin`, `padding`.

- **inline** — займає тільки ширину свого контенту, не переноситься на новий
    рядок. Ширину й висоту задавати неможливо (ігноруються).

- **inline-block** — поводиться як **inline** (на одному рядку з іншими), але
    дозволяє задавати `ширину`, `висоту`, `margin`, `padding` як **block**.

</details>

<details>
<summary>66. Поясніть різні значення властивості position.</summary>

#### CSS

- Властивість position в CSS визначає метод позиціонування елемента в документі.
  Вона має кілька значень, кожне з яких поводиться по-різному:

🔹 `static` (за замовчуванням) Опис: Елемент розташовується у нормальному потоці
документу.

Не працюють: top, right, bottom, left, z-index.

```css
.element {
  position: static;
}
```

🔹 `relative` Опис: Елемент залишається у своєму звичному місці, але його можна
зсунути відносно цього місця за допомогою top, left, right, bottom.

Зручно: для створення позиціонованих "контейнерів" для absolute.

```css
.element {
  position: relative;
  top: 10px; /* зсувається вниз */
  left: 20px; /* зсувається вправо */
}
```

🔹 `absolute` Опис: Елемент вилучається з нормального потоку й позиціонується
відносно найближчого предка з position: relative|absolute|fixed|sticky.

Якщо таких предків нема — позиціонується відносно body.

```css
.wrapper {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  right: 0;
}
```

🔹 `fixed` Опис: Елемент фіксується відносно вікна браузера (viewport).

Залишається на місці при прокручуванні.

```css
.element {
  position: fixed;
  bottom: 0;
  right: 0;
}
```

🔹 `sticky` Опис: Гібрид relative та fixed.

Елемент поводиться як relative, поки не досягне певної позиції при прокрутці —
після цього стає fixed.

```css
.element {
  position: sticky;
  top: 0; /* стане фіксованим, коли дійде до верху */
}
```

</details>

<details>
<summary>67. Опишіть z-індекс і те, як порядок стекування контролюється в CSS.</summary>

#### CSS

- В CSS z-індекс (z-index) визначає порядок розташування елементів по осі Z —
  тобто, хто буде «над» ким на екрані.

#### 🧱 Основи стекування (stacking)

Усі елементи на сторінці утворюють stacking context (контекст накладання), де
визначається порядок накладання (тобто, що зверху, а що знизу).

🔹 `z-index` Це числове значення, яке вказує порядок стекування елементів. Чим
більше значення — тим вище елемент у візуальному стеку.

```css
.box {
  position: absolute;
  z-index: 10;
}
```

⚠️ z-index працює тільки на елементах з position значенням relative, absolute,
fixed, або sticky.

#### 🔢 Як формується стек:

1. Контекст накладання (stacking context) починається з html, але може
   створюватись новими елементами за певних умов.

2. Новий контекст створюється, коли:

- Елемент має position (relative, absolute, fixed, sticky) + z-index, відмінний
  від auto.

- opacity < 1

- transform, filter, perspective, will-change, mix-blend-mode і т.д.

#### 📚 Приклад стекування

```html
<div class="container">
  <div class="box box--red"></div>
  <div class="box box--blue"></div>
</div>
```

```css
.container {
  position: relative;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.box--red {
  background: red;
  top: 0;
  left: 0;
  z-index: 1;
}

.box--blue {
  background: blue;
  top: 20px;
  left: 20px;
  z-index: 2;
}
```

🔎 Тут синій блок буде зверху, бо має більший z-index.

#### 🪜 Пріоритети стекування (спрощено)

У межах одного stacking context елементи розташовуються так:

1. `z-index`: negative — позаду всіх

2. `z-index`: auto (блоки без явного індексу)

3. `z-index`: 0 і вище — зверху

#### 📌 Поради:

- Уникай зайвого використання високих z-index (типу 9999). Краще керуй
  контекстом.

- Створюй окремі stacking context-и для складних компонентів (наприклад,
  модальних вікон).

- Використовуй BEM або семантичні класи, щоб зрозуміло керувати елементами в
  контексті.

</details>

<details>
<summary>68. Як створити sticky footer за допомогою CSS?</summary>

#### CSS

- Щоб створити sticky footer (футер, що прилипає до низу сторінки, навіть якщо
  контенту мало), можна скористатися Flexbox-макетом. Це сучасний, простий і
  стабільний підхід.

#### ✅ Готове рішення з поясненням:

```html
<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky Footer</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

html,
      body {
        height: 100%;
      }

.layout {
        min-height: 100%;
        display: flex;
        flex-direction: column;
      }

.main {
        flex: 1;
      }

.footer {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <main class="main">
        <p>Контент сторінки (може бути короткий)</p>
      </main>
      <footer class="footer">
        <p>Я — футер. Я завжди внизу!</p>
      </footer>
    </div>
  </body>
</html>
```

#### 🧠 Як це працює:

- html, body → мають height: 100% — дозволяє контейнеру .layout зайняти всю
  висоту.

- .layout → display: flex; flex-direction: column — компоненти йдуть
  вертикально.

- .main → flex: 1 — займає всю доступну висоту, «виштовхує» футер вниз.

- .footer → автоматично лишається внизу, навіть коли мало контенту.

</details>

<details>
<summary>69. Як створити фіксований header, який залишається зверху під час прокручування?</summary>

#### CSS

- Щоб створити фіксований header, який залишається зверху сторінки під час
  прокручування, можна використати властивість CSS `position: fixed`.

```html
<header class="fixed-header">
  <h1>Мій сайт</h1>
</header>

<main>
  <p>Контент сторінки...</p>
  
</main>
```

```css
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* висота хедера */
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px 20px;
}

/* Щоб основний контент не ховався під хедером */
main {
  margin-top: 60px; /* дорівнює висоті header */
}
```

#### Пояснення:

- `position: fixed;` — фіксує елемент на місці, незалежно від прокрутки.

- `top: 0;` — закріплює хедер до верхнього краю вікна.

- `z-index: 1000;` — забезпечує відображення хедера поверх інших елементів.

- `margin-top: 60px;` — зміщує основний контент вниз, щоб його не перекрив
  хедер.

</details>

<details>
<summary>70. Коли ви використовуєте position: sticky?</summary>

#### CSS

- `position: sticky` використовується, коли ви хочете, щоб елемент:

- **вів себе як звичайний (static або relative)**, поки не досягне певної
    позиції (наприклад, верхнього краю екрана),

- **а потім "прилипав" (sticky)** до цієї позиції під час прокрутки.

#### Коли використовувати position: sticky?

**Приклади використання:**

- Заголовки таблиць або розділів, які залишаються зверху, поки не з’явиться
  наступний.

- Меню навігації, що "прилипає" після певної прокрутки, але не перекриває весь
  час.

- Фільтри або сайдбари, які залишаються в межах свого батьківського контейнера.

#### Синтаксис:

```css
.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}
```

#### Важливо:

- Батьківський елемент не повинен мати `overflow: hidden` або `overflow: auto`,
  інакше `sticky` не працюватиме.

- `sticky` працює в межах свого контейнера, тобто "відлипає", коли контейнер
  закінчується.

</details>

<details>
<summary>71. Як змінити шрифт тексту за допомогою CSS?</summary>

#### CSS

- Щоб змінити шрифт тексту в CSS, використовується властивість font-family.

```css
p {
  font-family: 'Arial', sans-serif;
}
```

#### Деталі:

font-family приймає список шрифтів через кому.

Перший — основний, далі — запасні (fallback).

Якщо ні один не підтримується — браузер візьме системний з тієї ж групи
(sans-serif, serif, monospace тощо).

#### Приклад з Google Fonts:

```html

<link
  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  rel="stylesheet"
/>
```

```css
body {
  font-family: 'Roboto', sans-serif;
}
```

</details>

<details>
<summary>72. Що таке «веббезпечний» (web-safe) шрифт у CSS і чому він важливий?</summary>

#### CSS

- Веббезпечний шрифт (англ. web-safe font) — це шрифт, який вже встановлений на
  більшості операційних систем (Windows, macOS, Linux). Такий шрифт
  відображається однаково на різних пристроях, навіть без інтернету чи
  зовнішнього підключення до шрифтів.

#### Навіщо це потрібно:

Гарантована підтримка — браузер не шукає, не завантажує, а одразу використовує
локальний шрифт.

Швидше завантаження сторінки.

Немає проблем з авторським правом.

#### Приклади веббезпечних шрифтів:

| Категорія  | Назва                             |
| ---------- | --------------------------------- |
| Sans-serif | Arial, Verdana, Tahoma, Helvetica |
| Serif      | Times New Roman, Georgia          |
| Monospace  | Courier New, Lucida Console       |

#### Як використовувати fallback (резервні шрифти):

```css
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
}
```

Якщо перший недоступний — спробує другий, потім третій (системна група).

</details>

<details>
<summary>73. Коли доцільно використовувати скорочену (shorthand) властивість font у CSS?</summary>

#### CSS

- Скорочену властивість font у CSS доцільно використовувати тоді, коли потрібно
  задати кілька параметрів шрифту одночасно, щоб:

зменшити обсяг коду,

забезпечити консистентність стилів,

покращити читабельність і продуктивність стилізації.

#### Приклад використання:

```css
p {
  font: italic small-caps bold 16px/1.5 'Arial', sans-serif;
}
```

#### Цей запис одночасно задає:

font-style: italic

font-variant: small-caps

font-weight: bold

font-size: 16px

line-height: 1.5

font-family: 'Arial', sans-serif

#### Обов’язкові значення:

При використанні shorthand font треба вказати мінімум:

font-size

font-family

Без них CSS проігнорує весь запис.

#### Коли НЕ варто використовувати shorthand:

Коли ти хочеш перевизначити тільки одну властивість (наприклад, лише
font-weight).

Коли потрібно уникнути перезапису інших властивостей шрифту.

#### Підсумок:

Використовуй font shorthand, коли задаєш кілька параметрів одночасно — це
чистіше, швидше і зручніше.

</details>

<details>
<summary>74. Як додати та використовувати власні (кастомні) шрифти на вебсторінці за допомогою CSS?</summary>

#### CSS

- Щоб додати власні шрифти (які не входять до стандартних системних),
  використовують директиву @font-face у CSS. Це дозволяє завантажити шрифт з
  локального файлу або з сервера.

#### Кроки для додавання локального кастомного шрифту:

1. Поклади шрифт у папку, напр.:

```swift
/fonts/open-sans.woff2
```

2. Оголоси шрифт у CSS:

```css
@font-face {
  font-family: 'open-sans';
  src: url('fonts/open-sans.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
```

3. Використай його:

```css
body {
  font-family: 'open-sans', sans-serif;
}
```

#### Пояснення:

font-family — задає ім’я, яке потім використовуватиметься в CSS.

src — шлях до шрифту та його формат (woff2 — найоптимальніший).

Можна підключити кілька варіантів (bold, italic) — треба окремий @font-face для
кожного.

#### Альтернатива — Google Fonts:

```html
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  rel="stylesheet"
/>
```

```css
body {
  font-family: 'Inter', sans-serif;
}
```

#### Рекомендації:

Використовуй формат .woff2 — мінімальний розмір + найкраща підтримка.

Завжди вказуй fallback-шрифт (наприклад, sans-serif).

Винось кастомні шрифти у папку fonts/ і називай у kebab-case.

</details>

<details>
<summary>75. У чому полягає різниця між одиницями em та rem у CSS?</summary>

#### CSS

- Одиниці em та rem — це відносні одиниці вимірювання в CSS, які залежать від
  розміру шрифту:

| Одиниця | Повна назва | Залежить від                              |
| ------- | ----------- | ----------------------------------------- |
| em      | element em  | розміру шрифту батьківського елемента     |
| rem     | root em     | розміру шрифту кореневого елемента (html) |

#### Приклад: `em`

```css
/* html font-size: 16px */

.container {
  font-size: 20px;
}

.container .title {
  font-size: 2em; /* 2 × 20px = 40px */
}
```

2em = 2 × 20px, бо береться шрифт батька (.container)

#### Приклад: rem

```css
html {
  font-size: 16px;
}

.title {
  font-size: 2rem; /* 2 × 16px = 32px */
}
```

2rem завжди базується на html, незалежно від ієрархії.

#### Коли яку краще використовувати:

| Випадок                                            | Краще використовувати |
| -------------------------------------------------- | --------------------- |
| Потрібна гнучка масштабованість у вкладених блоках | em                    |
| Потрібна послідовність по всьому сайту             | rem                   |
| Margin, padding, line-height — стабільна відстань  | rem                   |
| Font-size в компонентах, що успадковуються         | em                    |

#### Висновок:

- `em` — відноситься до батьківського шрифту.
- `rem` — відноситься до кореневого (html) шрифту.

В сучасній практиці частіше використовують rem для передбачуваної верстки.

</details>

<details>
<summary>76. Як правильно додати фонове зображення до елемента в HTML/CSS?</summary>

#### CSS

- Щоб додати фонове зображення до елемента, використовуємо CSS-властивість
  background-image. Найчастіше це робиться через CSS-класи або стилі:

**Варіант 1: Через CSS-клас**

```css
.hero-section {
  background-image: url('/images/hero.jpg');
  background-size: cover; /* масштабування */
  background-position: center; /* центрування */
  background-repeat: no-repeat; /* відключення повторення */
}
```

```html
<div class="hero-section">
  
</div>
```

**Варіант 2: Inline-стиль (не рекомендовано для масштабних проєктів)**

```html
<div
  style="background-image: url('/images/hero.jpg'); background-size: cover; background-position: center;"
></div>
```

</details>

<details>
<summary>77. У чому полягає різниця між шістнадцятковим записом кольорів, RGB-форматом і іменованими значеннями в CSS?</summary>

#### CSS

1. Шістнадцяткові коди (Hex)

- Базується на системі числення з основою 16 (від 00 до FF).

```css
Складається з 3 або 6 символів: #RRGGBB або #RGB

#ffffff — білий

#000000 — чорний

Можна використовувати скорочення: #f00 = #ff0000
```

⛔ Не підтримує прозорість напряму (окрім #rrggbbaa, але підтримка обмежена в
старих браузерах)

2. RGB / RGBA

- Працює в десятковій системі: rgb(red, green, blue) з кожним значенням від 0 до
  255

Перевага rgba — можливість встановити прозорість (альфа-канал)

```css
color: rgba(255, 0, 0, 0.5); /* напівпрозорий червоний */
```

3. Іменовані кольори

- Вбудований набір близько 140 назв кольорів:

```css
red, blue, green, darkslategray, transparent, тощо
```

Зручно для простих UI або для швидкого прототипування

❗ Не підходить для складних дизайнів — обмежена палітра, неможливо точно
налаштувати відтінки.

</details>

<details>
<summary>78. Що таке альфа-прозорість у CSS і як працює формат RGBA?</summary>

#### CSS

- Що таке альфа-прозорість? Альфа-прозорість (або alpha channel) — це параметр,
  який визначає ступінь прозорості кольору. Значення прозорості задається числом
  від 0 до 1:

0 — повністю прозорий

1 — повністю непрозорий (суцільний колір)

Наприклад: 0.5 — 50% прозорості

- `RGBA` — це розширення формату `RGB`, яке додає альфа-канал:

```css
color: rgba(R, G, B, A);
```

R — Red (червоний): 0–255

G — Green (зелений): 0–255

B — Blue (синій): 0–255

A — Alpha (прозорість): 0–1

📘 Приклад:

```css
background-color: rgba(0, 0, 255, 0.3); /* синій з 30% непрозорістю */
```

</details>

<details>
<summary>79. Як створити градієнтний фон у CSS і які є типи градієнтів?</summary>

#### CSS

1. Лінійний градієнт (linear-gradient)

```css
background: linear-gradient(to right, #ff7e5f, #feb47b);
```

- to right — напрям (може бути: to left, to bottom, 45deg, тощо)

- #ff7e5f — стартовий колір

- #feb47b — кінцевий колір

Приклад для кнопки:

```css
button {
  background: linear-gradient(to bottom right, #4facfe, #00f2fe);
}
```

2. Радіальний градієнт (radial-gradient)

```css
background: radial-gradient(circle, #ff9a9e, #fad0c4);
```

- Центрований круговий перехід кольорів

- Можна змінювати форму: circle, ellipse

Приклад:

```css
div {
  background: radial-gradient(circle at center, #ff9a9e 0%, #fad0c4 100%);
}
```

</details>

<details>
<summary>80. Як реалізувати кілька фонів (background layers) для одного елемента в CSS і як вони працюють?</summary>

#### CSS

- CSS дозволяє використовувати кілька фонів одночасно в одному елементі,
  наприклад:

- градієнт + зображення

- кілька іконок

- шар затемнення + фонова картинка

#### Синтаксис:

```css
background-image: url('stars.png'), linear-gradient(to bottom, #000000aa, #00000000);
```

#### Головна ідея:

- Фони вказуються через кому

- Перший — верхній шар, останній — нижній (базовий)

#### Приклад — градієнт поверх зображення:

```css
.element {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
    /* верхній шар */ url('/images/bg.jpg'); /* нижній шар */

background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
```

</details>

<details>
<summary>81. Що таке Flexbox у CSS, які його ключові властивості та основні переваги у верстці?</summary>

#### CSS

- Flexbox — це одновимірна модель розмітки в CSS, яка дозволяє гнучко
  розташовувати та вирівнювати елементи в ряд або стовпчик.

#### Ключові властивості:

- `display: flex` — активує флекс-контейнер

- `flex-direction` — напрямок (row, column)

- `justify-content` — вирівнювання по головній осі

- `align-items` — вирівнювання по поперечній осі

- `gap` — відстань між елементами

- `flex` — керує розміром елементів (grow, shrink, basis)

#### Переваги:

- Просте вирівнювання по обох осях

- Адаптивність без медіа-запитів

- Підтримка переносу рядків (flex-wrap)

- Менше хаків і простіший код

</details>

<details>
<summary>82. Як працює властивість flex-grow у CSS Flexbox?</summary>

#### CSS

- `flex-grow` визначає, наскільки елемент може збільшуватись у розмірі, щоб
  зайняти вільний простір у флекс-контейнері.

#### Приклад:

```css
.item {
  flex-grow: 1;
}
```

- Це означає, що елемент отримає частку вільного простору пропорційно значенню
  flex-grow.

#### Наприклад:

```html
<div class="box" style="flex-grow: 1;"></div>
<div class="box" style="flex-grow: 2;"></div>
```

- Другий блок займе вдвічі більше простору, ніж перший.

</details>

<details>
<summary>83. У чому різниця між justify-content та align-items у Flexbox?</summary>

#### CSS

- `justify-content` — вирівнює елементи по головній осі (горизонтальній за
  замовчуванням).

**Напр.: flex-start, center, space-between**

- `align-items` — вирівнює елементи по поперечній осі (вертикальній за
  замовчуванням).

**Напр.: stretch, center, flex-end**

#### Приклад:

```css
.container {
  display: flex;
  justify-content: center; /* по горизонталі */
  align-items: center; /* по вертикалі */
}
```

#### Головне:

Напрям justify-content змінюється з flex-direction.

align-items — завжди перпендикулярна до нього.

</details>

<details>
<summary>84. У яких випадках доцільно використовувати align-self у Flexbox?</summary>

#### CSS

- `align-self` дозволяє перевизначити вирівнювання одного окремого елемента по
  поперечній осі, незалежно від align-items контейнера.

#### Приклад:

```css
.item {
  align-self: flex-end;
}
```

- Цей елемент буде вирівняний донизу, навіть якщо інші — по центру або
  розтягнуті.

#### Використовуйте align-self, коли:

- потрібно виділити один елемент в групі (наприклад, останній пункт у меню —
  вирівняти вниз);

- елемент має іншу висоту або позицію, ніж решта;

- потрібно точково налаштувати позицію без впливу на інші елементи.

</details>

<details>
<summary>85. Як у Flexbox створити стовпці однакової ширини незалежно від їхнього вмісту?</summary>

#### CSS

- Щоб створити стовпці однакової ширини у Flexbox, кожному елементу задаємо:

```css
.item {
  flex: 1;
}
```

- А контейнеру:

```css
.container {
  display: flex;
}
```

- Пояснення:

flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0;

Усі елементи ділять простір порівну, незалежно від вмісту.

</details>

<details>
<summary>86. Що таке CSS Grid Layout і чому він корисний у веброзробці?</summary>

#### CSS

- CSS Grid — це система двовимірного макетування, яка дозволяє створювати
  складні сітки з рядками та стовпцями. Вона спрощує позиціонування елементів на
  сторінці без потреби у флоатах або флексах. Корисна для адаптивних і
  структурованих дизайнів.

</details>

<details>
<summary>87. Як у CSS Grid визначити кількість стовпців і рядків сітки?</summary>

#### CSS

- Стовпці задаються через `grid-template-columns`, а рядки — через
  `grid-template-rows`.

#### Наприклад:

```css
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px auto;
```

Це створить сітку з 2 стовпцями та 2 рядками.

</details>

<details>
<summary>88. У чому різниця між grid-template-areas та grid-template-columns?</summary>

#### CSS

- Відповідь:

- `grid-template-columns` задає ширину стовпців сітки (кількість і розміри).

- `grid-template-areas` задає візуальне розміщення іменованих областей у сітці
    для зручного позиціонування елементів за назвами.

#### Приклад:

```css
grid-template-columns: 1fr 1fr;
grid-template-areas:
  'header header'
  'sidebar main';
```

Це визначає 2 стовпці однакової ширини та розкладку з іменами областей.

</details>

<details>
<summary>89. Як розмістити елементи в сітці CSS Grid?</summary>

#### CSS

- Відповідь:

Елементи розміщуються за допомогою властивостей:

- grid-row, grid-column — для вказання позицій (наприклад, grid-column: 1 / 3)

- grid-area — якщо використовується grid-template-areas

Автоматично — якщо не задані координати, елементи розміщуються у вільні клітинки

#### Приклад:

```css
.item {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}
```

</details>

<details>
<summary>90. Як CSS Grid обробляє перекриття елементів, якщо вони займають одні й ті самі області?</summary>

#### CSS

- Відповідь:

Якщо кілька елементів займають одну й ту саму область сітки, вони
перекриваються, і порядок їх відображення залежить від:

Порядку в `HTML` (останній — зверху)

`z-index` — якщо заданий

`position`— якщо елементи позиціоновані

- Щоб уникнути перекриття — уникай однакових координат або використовуй z-index
  для керування шарами.

</details>

<details>
<summary>91. Що таке медіа-запит?</summary>

#### CSS

- Медіа-запит (media query) — це інструмент CSS, що дозволяє застосовувати стилі
  залежно від характеристик пристрою (ширини екрана, орієнтації, роздільної
  здатності тощо).

#### Приклад:

```css
@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}
```

- Цей стиль застосовується лише, якщо ширина екрана ≤ 768px.

</details>

<details>
<summary>92. Як метатег viewport допомагає у створенні адаптивного дизайну для мобільних пристроїв?</summary>

#### CSS

- Метатег viewport керує тим, як сторінка масштабується та відображається на
  мобільних пристроях. Без нього сторінка відображається з масштабом, як для
  десктопа.

#### Приклад:

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

#### Що робить:

- `width=device-width` — встановлює ширину вікна відповідно до ширини пристрою.

- `initial-scale=1.0` — встановлює початковий масштаб.

Результат: коректне масштабування і адаптивність для різних екранів.

</details>

<details>
<summary>93. Опишіть, як створити адаптивний дизайн, орієнтований на мобільні пристрої.</summary>

#### CSS

- Щоб створити адаптивний мобільний дизайн:

1. Використай метатег viewport:

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

2. Використовуй гнучкі одиниці виміру:

%, vw, vh, em, rem замість px.

3. Застосовуй медіа-запити:

Щоб змінювати стилі під різні розміри екранів:

```css
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}
```

4. Flexbox або CSS Grid:

Для побудови гнучких макетів.

5. Уникай фіксованої ширини елементів.

6. Забезпечуй адаптивні зображення:

Встановлюй max-width: 100%; height: auto;.

- Це дозволяє інтерфейсу підлаштовуватись під різні розміри екранів без
  горизонтальної прокрутки.

</details>

<details>
<summary>94. Як можна створити макет, який змінюється з двоколонкового на одноколонковий, за допомогою медіа-запитів?</summary>

#### CSS

- Створи двоколонковий макет (наприклад, з CSS Grid або Flexbox), а потім через
  медіа-запит змінюй його на одноколонковий при меншій ширині екрана.

#### Приклад (Flexbox):

```css
.container {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
```

#### Приклад (CSS Grid):

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}
```

#### Результат:

- На великих екранах — 2 колонки, на мобільних — 1 колонка.

</details>

<details>
<summary>95. Поясніть використання min-width та max-width у медіа-запитах.</summary>

#### CSS

- `min-width` і `max-width` у медіа-запитах визначають діапазон ширини екрана,
  на який мають застосовуватись стилі.

#### min-width — стилі застосовуються від цієї ширини і вище (mobile-first підхід).

```css
@media (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}
```

#### max-width — стилі застосовуються до цієї ширини включно.

```css
@media (max-width: 767px) {
  body {
    background-color: lightgray;
  }
}
```

#### Використання:

- `min-width` — адаптація від мобільного до десктопа.

- `max-width` — адаптація від десктопа до мобільного.

Зазвичай рекомендується `mobile-first` підхід з `min-width`.

</details>

<details>
<summary>96. Як створити перехід CSS?</summary>

#### CSS

- Перехід у CSS (transition) дозволяє анімувати зміну властивостей елементів,
  таких як колір, розмір чи положення, коли вони змінюються.

#### Основний синтаксис:

```css
.element {
  transition: property duration timing-function delay;
}
```

#### Приклад:

```css
.element {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: red;
}
```

- У цьому прикладі, коли елемент отримує ховер, його колір плавно змінюється з
  синього на червоний за 0.3 секунди.

#### Пояснення:

`background-color` — властивість, що анімується.

`0.3s` — тривалість анімації.

`ease` — функція часу для плавності.

</details>

<details>
<summary>97. У чому різниця між переходом CSS та анімацією?</summary>

#### CSS

- CSS Transition і CSS Animation обидва використовуються для створення анімацій,
  але є важливі відмінності в їх підході та використанні:

#### CSS Transition:

- Триггер: анімація починається тільки тоді, коли відбувається зміна стану
  елемента (наприклад, при ховері або кліку).

- Обмеження: можна анімувати лише зміни існуючих стилів.

- Синтаксис: простіший, зазвичай використовується для ефектів при взаємодії з
  користувачем.

#### Приклад:

```css
.element {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: red;
}
```

- Тут зміна кольору відбудеться тільки при ховері.

#### CSS Animation:

- Триггер: анімація запускається автоматично або за заданим ключовим кадром.

- Гнучкість: дозволяє задавати послідовність анімацій за допомогою @keyframes,
  де можна визначити кілька етапів анімації.

- Без взаємодії: анімація може працювати без будь-якої взаємодії з користувачем.

#### Приклад:

```css
@keyframes example {
  0% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

.element {
  animation: example 2s infinite;
}
```

- У цьому прикладі анімація почнеться автоматично і повторюватиметься
  нескінченно.

#### Основні відмінності:

- Transition: працює лише на зміну стану (наприклад, ховер або фокус).

- Animation: дозволяє створювати складні анімації з багатьма етапами й
  автоматичним запуском.

</details>

<details>
<summary>98. Які способи є для анімації появи та зникнення елемента на сторінці??</summary>

#### CSS

- Можна використати CSS-анімації або transition у поєднанні з класами
  (наприклад, opacity + transform), або бібліотеки типу Framer Motion / React
  Transition Group для керування станом появи/зникнення.

</details>

<details>
<summary>99. Можете пояснити, як працює та використовується @keyframes у CSS?</summary>

#### CSS

- `@keyframes` визначає проміжні стани анімації в CSS.

#### Синтаксис:

```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 0.5s ease-in;
}
```

- Використовується з властивістю `animation` для запуску анімації.

</details>

<details>
<summary>100. Як налаштувати функцію прискорення в CSS-анімації?</summary>

#### CSS

- Функції синхронізації задають, як змінюється швидкість анімації протягом часу.

#### Встановлюються через `animation-timing-function`, приклади:

- `linear` — рівномірно.

- `ease` — повільний старт і кінець.

- `ease-in` — повільний старт.

- `ease-out` — повільний кінець.

- `ease-in-out` — повільний старт і кінець, швидко посередині.

- `cubic-bezier(x1, y1, x2, y2)` — кастомна крива.

</details>

<details>
<summary>101. Що таке CSS-препроцесор і які його переваги?</summary>

#### CSS

- CSS-препроцесор — це інструмент (наприклад, Sass, LESS, Stylus), який розширює
  можливості CSS: змінні, вкладені селектори, міксіни, функції.

- Використовується для структурованішого, повторно використовуваного та легше
  підтримуваного коду.

</details>

<details>
<summary>102. Яке значення мають CSS-змінні та чому їх варто використовувати?</summary>

#### CSS

- CSS-змінні `(--var-name)` дозволяють зберігати значення в одному місці та
  використовувати їх повторно по всьому проєкту.

#### Переваги:

- Легко оновлювати тему/стиль.

- Підтримують динамічні зміни через JS.

- Зменшують дублювання коду.

</details>

<details>
<summary>103. Що таке CSS-модулі та як їх застосовувати?</summary>

#### CSS

- CSS-модулі — це підхід, де стилі автоматично обмежуються тільки тим
  компонентом, у якому їх імпортують (ізольований скоуп).

#### Використання в React:

```jsx
import styles from './Button.module.css';

<button className={styles.primary}>Click</button>;
```

- Переваги — уникнення конфліктів імен класів та краща підтримка коду.

</details>

<details>
<summary>104. Що таке CSS-in-JS і які його переваги?</summary>

#### CSS

- `CSS-in-JS` — це підхід, коли стилі пишуться безпосередньо в
  JavaScript/TypeScript-файлах, часто прив’язані до компонентів.

#### Приклади: styled-components, Emotion.

- Переваги:

- Ізоляція стилів на рівні компонентів.

- Динамічні стилі через пропси/стан.

- Спільний код JS і стилів.

</details>

<details>
<summary>105. Які інструменти використовуються для лінтингу та форматування CSS?</summary>

#### CSS

- Для лінтингу — Stylelint (перевірка якості та відповідності стилів
  стандартам).

- Для форматування — Prettier (автоматичне вирівнювання й оформлення коду).

Часто інтегруються разом у CI/CD та редактор.

</details>

<details>
<summary>106. Як зробити, щоб кнопка виглядала як звичайне посилання?</summary>

#### CSS

- Просто прибрати стандартні стилі кнопки та застосувати стилі посилання:

```css
button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
```

</details>

<details>
<summary>107. Як створити кастомні чекбокси та радіокнопки за допомогою CSS?</summary>

#### CSS

- Роблять прихований `<input type="checkbox/radio">` і стилізують його
  пов’язаний `<label>` або псевдоелементи (`::before`, `::after`).
- Стан `:checked` використовують для зміни стилю при виборі.

#### Приклад:

```css
input[type='checkbox'] {
  display: none;
}

label::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  display: inline-block;
}

input:checked + label::before {
  background: #000;
}
```

</details>

<details>
<summary>108. Як можна стилізувати елемент select лише за допомогою CSS?</summary>

#### CSS

- Використовують селектор `select` і його внутрішні елементи, але можливості
  обмежені через нативний рендер браузера.

#### Основні прийоми:

`appearance: none;` / `-webkit-appearance: none;` — прибрати стандартну стрілку.

Додати власну іконку через `background` або `::after` у контейнері.

Стилізувати `option` (шрифт, колір, фон), але в різних браузерах підтримка
різна.

</details>

<details>
<summary>109. Яка найкраща практика для стилізації плейсхолдера у полі введення?</summary>

#### CSS

- Використовувати псевдоклас `::placeholder` для зміни стилю заповнювача,
  зберігаючи достатній контраст і читабельність.

#### Приклад:

```css
input::placeholder {
  color: #888;
  font-style: italic;
}
```

</details>

<details>
<summary>110. Як правильно реалізувати стилі фокуса для забезпечення доступності?</summary>

#### CSS

- Використовують псевдоклас `:focus` (і бажано `:focus-visible`) для чіткого
  візуального індикатора.

- Найкраща практика — не прибирати `outline`, а кастомізувати його:

```css
button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
```

- Це допомагає користувачам з клавіатурною навігацією.

</details>

<details>
<summary>111. Як діагностувати і виправити проблеми з версткою?</summary>

#### CSS

1. Використовуй `DevTools` (інспектор) для перевірки стилів, розмірів,
   відступів.

2. Перевіряй `flexbox/grid` налаштування, `display`, `position`.

3. Шукай проблеми з переповненням, `z-index`, або невірними розмірами.

4. Використовуй тимчасові кольори/рамки для візуалізації блоків.

5. Перевіряй адаптивність на різних екранах.

</details>

<details>
<summary>112. Як виправити проблеми з пошкодженими колонками у макеті?</summary>

#### CSS

- Перевір:

- чи правильно заданий `display` (`flex` або `grid`) на контейнері;

- чи всі колонки мають коректні розміри (`flex-basis`, `width` або
    `grid-template-columns`);

- чи немає зайвих `margin/padding`, що зрушують колонки;

- чи не порушує макет `box-sizing` (краще `border-box`);

- чи не спричиняє проблеми `overflow` або `min-width`.

Часто допомагає тимчасове підсвічування меж (`outline: 1px solid red`).

</details>

<details>
<summary>113. Як вирішувати проблеми кросбраузерності у CSS?</summary>

#### CSS

- Використовуй префікси (`-webkit-`, `-moz-`, `-ms-`) для нових властивостей
  (через `Autoprefixer`).

- Перевіряй підтримку фіч на `Can I Use`.

- Використовуй `fallbacks` — запасні стилі для старих браузерів.

- Уникай нестабільних експериментальних властивостей.

- Тестуй на основних браузерах і версіях.

- За потреби — поліполіфи або JavaScript-обхідники.

</details>

<details>
<summary>114. Як визначити, який CSS стиль переважає при конфлікті?</summary>

#### CSS

- Перевіряй через `DevTools` вкладку `Styles` — показує застосовані стилі, їх
  пріоритет і джерело.

- Пріоритет визначається специфічністю селекторів, важливістю (`!important`) і
  порядком підключення.

#### Правила:

- Inline стилі мають вищий пріоритет.

- Специфічніші селектори переважають універсальні.

- Пізніші оголошення перекривають ранні.

</details>

<details>
<summary>115. Які CSS проблеми можуть погіршувати продуктивність?</summary>

#### CSS

- Занадто складні селектори (особливо універсальні `*` або глибокі вкладення).

- Часті зміни `layout (reflow)` через властивості типу `width`, `height`,
  `margin`, `padding`.

- Використання `!important`, що ускладнює перезапис стилів.

- Велика кількість анімацій або трансформацій без апаратного прискорення.

- Надмірний використання глобальних стилів і дублювання.

</details>

<details>
<summary>116. Як застосовувати 3D-перетворення в CSS?</summary>

#### CSS

- В CSS 3D-перетворення застосовують через властивості:

- `transform: rotateX(), rotateY(), rotateZ()` — обертання по осях.

- `transform: translateZ()` — переміщення по Z-ось.

- `perspective` — задає глибину (перспективу) контейнеру.

- `transform-style: preserve-3d` — для вкладених елементів, щоб зберегти 3D
    ефект.

#### Приклад:

```css
.container {
  perspective: 600px;
}

.element {
  transform-style: preserve-3d;
  transform: rotateY(45deg);
}
```

</details>

<details>
<summary>117. Як працює і як використовувати властивість perspective у CSS?</summary>

#### CSS

- `perspective` задає відстань від глядача до площини елемента, створюючи ефект
  глибини для 3D-перетворень.

#### Синтаксис:

```css
.container {
  perspective: 500px; /* менше значення — сильніша перспектива */
}
```

- Властивість застосовується до батьківського елемента, а дочірні з transform із
  3D-перетвореннями використовують цю перспективу.

</details>

<details>
<summary>118. Що таке backface-visibility у CSS і як його використовувати?</summary>

#### CSS

- Видимість задньої поверхні (`backface-visibility`) — це CSS-властивість, яка
  визначає, чи видно ли задню сторону елемента при його 3D-обертанні.

- `visible` — задня сторона показується (за замовчуванням).

- `hidden` — задня сторона прихована, не відображається при обертанні на 180°.

#### Приклад:

```css
.element {
  backface-visibility: hidden;
}
```

</details>

<details>
<summary>119. Як зробити ефект перевернутої картки (card flip) на CSS?</summary>

#### CSS

- Створюють контейнер з двома сторонами (`front` і `back`), використовують
  3D-перетворення і `backface-visibility: hidden`.

#### Приклад:

```css
.container {
  perspective: 1000px;
}

.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card:hover {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}
```

</details>

<details>
<summary>120. Які візуальні ефекти можна створити за допомогою CSS-фільтрів?</summary>

#### CSS

- CSS-фільтри дають змогу створювати ефекти:

`blur()` — розмиття

`brightness()` — яскравість

`contrast()` — контраст

`grayscale()` — відтінки сірого

`invert()` — інверсія кольорів

`sepia()` — сепія

`saturate()` — насиченість

`drop-shadow()` — тінь

- Їх можна комбінувати через пробіл:

```css
filter: grayscale(50%) blur(2px);
```

</details>

<details>
<summary>121. Які основні принципи адаптивного вебдизайну?</summary>

#### CSS

- Основні принципи адаптивного вебдизайну:

- Гнучка сітка (flex, grid, % замість фіксованих px).

- Гнучкі зображення та медіа (max-width: 100%).

- Media queries для різних розмірів екранів.

- Мобільний підхід спочатку (mobile-first).

- Тестування на різних пристроях і орієнтаціях.

</details>

<details>
<summary>122. Як створити сіткову систему за допомогою CSS Grid?</summary>

#### CSS

1. Створюю контейнер з display: grid.

2. Визначаю колонки та рядки через grid-template-columns / grid-template-rows
   (можна з fr, auto, %).

3. Додаю проміжки (gap).

4. Для адаптивності — змінюю налаштування через @media або repeat(auto-fit,
   minmax()).

#### Приклад:

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
```

</details>

<details>
<summary>123. Що таке mobile-first підхід у вебдизайні?</summary>

#### CSS

- Mobile-first — підхід, коли дизайн і верстка спочатку створюються для
  мобільних пристроїв (малий екран), а потім розширюються для більших екранів
  через min-width media queries.

#### Переваги:

- Оптимізація продуктивності для мобільних.

- Краща доступність і зручність.

- Легше масштабувати до desktop, ніж навпаки.

</details>

<details>
<summary>124. Які способи підтримати співвідношення сторін в адаптивному дизайні?</summary>

#### CSS

Методи підтримки співвідношення сторін:

- `aspect-ratio` (сучасний спосіб):

```css
.box {
  aspect-ratio: 16 / 9;
}
```

- Через `padding-хаки` (старий спосіб, `padding-top` у `%` від ширини).

- `SVG` та `viewBox` для масштабованих елементів.

- Контейнер із `object-fit` для медіа (зображення, відео).

</details>

<details>
<summary>125. Як забезпечити доступність і інклюзивність вебдизайну?</summary>

#### CSS

- Для доступності та інклюзивності дотримуюсь принципів WCAG:

- Контраст тексту ≥ 4.5:1.

- Чіткі `focus-стилі` для клавіатурної навігації.

- Альтернативний текст (`alt`) для зображень.

- Семантична `HTML-розмітка` (заголовки, списки, `<button>` замість `div`).

- `ARIA-атрибути`, якщо стандартної семантики недостатньо.

- Перевірка з екранними рідерами.

- Не покладатися тільки на колір для передачі інформації.

</details>

<details>
<summary>126. Як додати таблицю стилів для друку на вебсторінці?</summary>

#### CSS

- Створюють окремі стилі з медіатипом print:

**_Через окремий файл:_**

```html
<link rel="stylesheet" href="print.css" media="print" />
```

**_Або всередині CSS:_**

```css
@media print {
  body {
    color: black;
    background: white;
  }

nav,
  footer {
    display: none;
  }
}
```

- Використовується для спрощення макета, видалення непотрібних елементів і
  оптимізації читабельності при друку.

</details>

<details>
<summary>127. Які best practices при створенні CSS для друку?</summary>

#### CSS

- Найкращі практики для CSS-друку:

- Прибрати непотрібні елементи (nav, footer, рекламу).

- Зробити фон білим, текст чорним для читабельності.

- Використовувати читабельний шрифт без надмірних стилів.

- Показувати посилання як текстові URL (a::after { content: attr(href) }).

- Оптимізувати відступи та розміри для формату сторінки.

- Перевіряти друк у різних браузерах.

</details>

<details>
<summary>128. Як використовувати розрив сторінки в CSS для друку?</summary>

#### CSS

- Розрив сторінки в CSS керується властивостями page-break-before,
  page-break-after, page-break-inside (застарілі) або їх новими аналогами —
  break-before, break-after, break-inside.

#### Приклад:

```css
h2 {
  break-before: page; /* Почати з нової сторінки при друку */
}

section {
  break-inside: avoid; /* Не розривати всередині секції */
}
```

- Використовується у друкованих стилях, щоб контролювати, де сторінка має
  ділитися.

</details>

<details>
<summary>129. Як протестувати версію вебсторінки для друку?</summary>

#### CSS

- Тестують версію для друку так:

- У браузері відкрити Print Preview (Ctrl+P / Cmd+P).

- У DevTools вибрати emulate print media (Chrome: More tools → Rendering →
    Emulate CSS media: print).

- Перевірити відображення в різних браузерах (Chrome, Firefox, Edge).

- За потреби протестувати на реальному принтері або PDF-експортері.

</details>

<details>
<summary>130. Які типові проблеми виникають при розробці CSS для друку?</summary>

#### CSS

- Поширені труднощі при створенні CSS для друку:

- Різна підтримка друкованих стилів у браузерах.

- Відсутність відтворення фону або зображень за замовчуванням.

- Неконтрольовані розриви сторінок у великому контенті.

- Неправильні пропорції зображень чи таблиць.

- Проблеми з шрифтами при друкуванні у PDF.

- Важко зберегти точне позиціонування без порушення адаптивності.

</details>

<details>
<summary>131. Для чого призначені псевдоелементи ::before і ::after у CSS?</summary>

#### CSS

- `::before` і `::after` створюють віртуальні елементи до або після вмісту
  вибраного елемента. Використовуються для декоративного або додаткового
  контенту без зміни HTML.

#### Приклад:

```css
button::before {
  content: '→ ';
}
```

#### Особливості:

Працюють тільки з властивістю content.

Не впливають на DOM, але беруть участь у візуальному рендері.

</details>

<details>
<summary>132. Що таке псевдоклас :hover у CSS і як він працює?</summary>

#### CSS

- :hover — псевдоклас, що застосовує стилі, коли користувач наводить курсор миші
  на елемент.

#### Приклад:

```css
a:hover {
  color: red;
}
```

Працює тільки для інтерактивних пристроїв з курсором (на сенсорних — обмежено).

</details>

<details>
<summary>133. У чому різниця між :nth-child та :nth-of-type у CSS?</summary>

#### CSS

- `:nth-child(n)` — вибирає елемент, якщо він є n-м дочірнім серед усіх
  елементів батька.

- `:nth-of-type(n)` — вибирає елемент, якщо він є n-м дочірнім серед елементів
  того ж типу.

#### Приклад:

```css
p:nth-child(2)      /* другий дочірній елемент, неважливо, p це чи ні */
p:nth-of-type(2)    /* другий <p> серед усіх <p> */
```

</details>

<details>
<summary>134. Як працюють псевдокласи :first-child і :last-child у CSS?</summary>

#### CSS

- `:first-child` вибирає елемент, якщо він перший серед усіх дочірніх елементів
  свого батька.

- `:last-child` — якщо він останній серед дочірніх.

#### Приклад:

```css
li:first-child {
  font-weight: bold;
}

li:last-child {
  color: red;
}
```

- Важливо: вони дивляться на позицію, а не на тип елемента (на відміну від
  `:first-of-type` / `:last-of-type`).

</details>

<details>
<summary>135. Що таке псевдоклас :not у CSS і для чого він використовується?</summary>

#### CSS

- `:not(селектор)` — псевдоклас, що вибирає елементи, які не відповідають
  вказаному селектору.

#### Приклад:

```css
button:not(.primary) {
  background: gray;
}
```

- Використовується, коли треба застосувати стиль до групи елементів, крім певних
  винятків, щоб уникнути дублювання правил.

</details>

<details>
<summary>136. Як складність CSS-селекторів впливає на продуктивність?</summary>

#### CSS

- Складні селектори (глибокі вкладення, універсальний `*`, комбінації кількох
  умов) збільшують час, який браузер витрачає на обхід DOM для пошуку
  відповідних елементів.

- Хоч сучасні браузери оптимізовані, надмірно складні селектори можуть
  уповільнити рендеринг у великих проєктах, а також ускладнюють підтримку коду.

- Найкраща практика — використовувати короткі й конкретні селектори.

</details>

<details>
<summary>137. Які стратегії ви б використали для оптимізації шляху рендерингу CSS?</summary>

#### CSS

1. **Мінімізація блокуючого CSS**

- Розміщувати критичні стилі (`critical CSS`) прямо в `<head>` — лише ті, що
  потрібні для початкового рендеру.

- Виносити другорядні стилі в окремі файли та підключати їх асинхронно
  (`media="print"` → потім `media="all"` через JS).

2. **Оптимізація та зменшення обсягу CSS**

- Видалення невикористаних стилів (`PurifyCSS`, `UnCSS`, `purgecss`).

- Мініфікація (`cssnano`, `CleanCSS`).

- Уникати дублювання селекторів і зайвих правил.

3. **Обмеження кількості та складності селекторів**

- Використовувати класи замість універсальних або глибоких комбінацій
  селекторів.

- Не перевантажувати DOM пошуком через дуже складні селектори.

4. **Використання кешування**

- Задавати довгі `cache headers` для CSS-файлів з рідкими змінами.

- Використовувати версіонування (`hash` у назві файлу) для оновлень.

5. **Порядок підключення стилів**

- CSS-файли, що впливають на `Above-the-Fold` контент — якомога вище у `<head>`.

- Модульні стилі — підключати лише там, де вони реально потрібні.

6. **Зменшення залежностей від зовнішніх ресурсів**

- Якщо є зовнішні шрифти або бібліотеки CSS — підключати лише потрібні частини
  (наприклад, `font-subset`).

- Використовувати `preload` для ключових стилів
  (`<link rel="preload" as="style" href="...">`).

</details>

<details>
<summary>138. Як мінімізувати перемальовування та перекомпонування CSS?</summary>

#### CSS

- Щоб мінімізувати перемальовування (`repaint`) та перекомпонування (`reflow`,
  також називають `layout`), треба розуміти, що вони — найвитратніші операції в
  рендерингу браузера.

- `Reflow` відбувається, коли змінюється структура DOM або стилі, що впливають
    на розташування елементів, і браузер змушений перераховувати позиції та
    розміри.

- `Repaint` трапляється, коли змінюється зовнішній вигляд елемента (колір, фон
    тощо), але не його розташування.

#### Основні стратегії зменшення reflow/repaint

1. **Мінімізуйте зміни в DOM**

- Уникайте частого додавання/видалення елементів у циклах.

- Використовуйте DocumentFragment або приховування елемента (`display: none`)
  перед масовими змінами, а потім показуйте назад.

```javascript
element.style.display = 'none'; // масові зміни
DOM element.style.display = 'block';
```

2. **Уникайте читання і запису стилів впереміш**

- Читання властивостей, що викликають `reflow` (наприклад `offsetHeight`,
  `scrollTop`, `getComputedStyle`), після зміни стилів примушує браузер
  синхронно перерахувати `layout`.

❌ **Погано:**

```javascript
element.style.width = '200px';
console.log(element.offsetHeight); // змусить layout виконатися двічі
```

✅ **Добре:**

```javascript
const height = element.offsetHeight;
element.style.width = '200px';
```

3. **Використовуйте CSS-трансформації замість зміни геометрії**

- Зміни `top`, `left`, `width`, `height` спричиняють `reflow`.

- Використання `transform: translate()` чи `scale()` виконується на GPU і не
  викликає перерахунку розташування.

```css
/* краще */
transform: translateX(50px);

/* гірше */
left: 50px;
```

4. **Виносьте анімації на композитний шар**

- Використовуйте `will-change: transform;` або `transform` та `opacity` для
  плавних анімацій.

- Не анімуйте властивості, які впливають на розміри/flow (наприклад `margin`,
  `width`).

5. **Групуйте зміни стилів**

- Зміни кількох властивостей через `classList.add()` або через `style.cssText`
  зменшують кількість `reflow`.

```javascript
element.classList.add('active', 'highlight');
```

6. **Оптимізуйте складні селектори**

- Глибокі та складні селектори збільшують час обчислення стилів.

- Віддавайте перевагу простим класам замість каскаду в 5–6 рівнів.

7. **Використовуйте requestAnimationFrame для оновлень у JS**

- Щоб уникнути "рваних" анімацій, синхронізуйте зміни стилів з кадрами анімації
  браузера.

```javascript
function animate() {
  element.style.transform = `translateX(${x}px)`;
  requestAnimationFrame(animate);
}
```

8. **Обмежуйте використання таблиць**

- HTML-таблиці перераховуються складніше, бо зміни в одній клітинці можуть
  вплинути на всю таблицю.

9. **Кешуйте розрахунки**

- Якщо потрібно кілька разів читати властивість, що викликає `reflow` —
  збережіть її в змінній.

</details>

<details>
<summary>139. Які найкращі практики написання ефективного CSS?</summary>

#### CSS

1. **Структуруйте код і використовуйте конвенції**

- Дотримуйтеся єдиного стилю написання (BEM, SMACSS, ITCSS).

- Використовуйте змістовні імена класів замість описових по вигляду
  (.btn-primary замість .blue-btn).

- Логічно групуйте стилі (базові, компоненти, утиліти).

2. **Мінімізуйте специфічність**

- Уникайте довгих селекторів (header nav ul li a) — вони ускладнюють
  перевизначення.

- Перевага — класи над ID:

```css
/* Добре */
.card-title {
  ...;
}

/* Погано */
#main-content h2.title {
  ...;
}
```

- Не зловживайте `!important` — він ускладнює підтримку.

3. **Використовуйте каскад розумно**

- Пишіть стилі так, щоб вони перевизначалися природно, без зайвих хитрощів.

- Використовуйте успадкування для шрифтів, кольорів і загальних властивостей.

4. **Оптимізуйте для продуктивності**

- Використовуйте простi селектори: браузер читає їх справа наліво, тож div ul li
  a гірший, ніж .nav-link.

- Видаляйте непотрібні стилі — вони лише уповільнюють рендеринг.

- Об’єднуйте спільні властивості у короткі записи (margin: 10px 0; замість
  чотирьох окремих).

5. **Уникайте дублювання**

- Виносьте повторювані значення у змінні (у SCSS або CSS Custom Properties):

```css
:root {
  --main-color: #3498db;
}

.btn {
  background: var(--main-color);
}
```

6. **Думайте про масштабованість**

- Проєктуйте стилі так, щоб додавання нового компонента не ламало існуючі.

- Використовуйте компонентний підхід у фреймворках (React, Vue, Angular).

7. **Мінімізуйте вплив на перерисовку**

- Уникайте частих змін layout-властивостей (width, height, margin).

- Для анімацій використовуйте transform та opacity — вони не викликають reflow.

8. **Готуйте до продакшну**

- Мініфікуйте CSS (через cssnano, clean-css).

- Використовуйте critical CSS для швидкого відображення above-the-fold контенту.

- Вмикайте автопрефікси для кросбраузерності.

9. **Тестуйте**

- Перевіряйте сторінку в різних браузерах та на різних пристроях.

- Використовуйте Lighthouse/DevTools для аналізу unused CSS.

</details>

<details>
<summary>140. Як оптимізувати CSS для критичного шляху рендерингу та швидкого завантаження?</summary>

#### CSS

1. **Виділення критичного CSS**

- Витягніть стилі, які потрібні для першого екрану ("above the fold"), і вставте
  їх інлайн у `<head>`:

```html
<style>
  body {
    font-family: sans-serif;
  }
  header {
    background: #333;
    color: #fff;
    padding: 1rem;
  }
</style>
```

- Решту стилів підвантажуйте окремим файлом асинхронно.

2. **Використання media та preload**

- Для неосновних стилів вказуйте медіа-умови:

```html
<link rel="stylesheet" href="print.css" media="print" />
```

- Або використовуйте preload:

```html
<link
  rel="preload"
  href="styles.css"
  as="style"
  onload="this.rel='stylesheet'"
/>
```

3. **Мінімізація та об’єднання**

- Мінімізуйте CSS (remove spaces, comments, unused rules).

- Об’єднуйте файли, щоб зменшити кількість HTTP-запитів (але не до абсурду, якщо
  є код для різних частин сайту).

4. **Уникання блокуючих CSS**

- Розбийте стилі на критичні (inline) і другорядні (завантаження після
  DOMContentLoaded).

#### Наприклад:

```html
<link
  rel="stylesheet"
  href="main.css"
  media="print"
  onload="this.media='all'"
/>
```

5. **Прибирання зайвих стилів**

- Використовуйте PurgeCSS, UnCSS або аналогічні інструменти для видалення
  невикористаних селекторів.

- Це особливо важливо при роботі з великими фреймворками (Bootstrap, Tailwind).

6. **Оптимізація селекторів**

- Уникайте надто складних і глибоких селекторів (div ul li a span).

- Віддавайте перевагу класам — вони швидші для обробки.

7. **Використання HTTP/2**

- Якщо сервер підтримує HTTP/2, можна не об’єднувати файли, а завантажувати їх
  паралельно — це зменшує час до першого рендеру.

</details>

<details>
<summary>141. Що таке об'єктно-орієнтований CSS (OOCSS)?</summary>

#### CSS

- OOCSS (Object-Oriented CSS) — це методологія написання CSS, що базується на
  розділенні стилів на структуру (layout) і шкіру (theme), та повторному
  використанні класів як «об’єктів» для зменшення дублювання і підвищення
  гнучкості коду.

</details>

<details>
<summary>142. Поясніть принціпи іменування BEM, зокрема як працюють блоки, елементи та модифікатори.</summary>

#### CSS

- `BEM` — це методологія іменування CSS-класів для покращення читабельності і
  масштабованості коду.

**Структура:**

- block — незалежний компонент (наприклад, menu)

- block**element — частина блоку (menu**item)

- block--modifier — варіант блоку (menu--dark) або елемента
  (menu\_\_item--active)

Це допомагає уникати конфліктів і чітко структурує стилі.

</details>

<details>
<summary>143. Які переваги використання CSS-фреймворку, такого як Bootstrap або TailwindCSS?</summary>

#### CSS

- Прискорюють розробку завдяки готовим стилям і компонентам.

- Забезпечують консистентність дизайну між командами.

- Мають адаптивність «з коробки» (responsive).

- Підтримують кросбраузерність.

- TailwindCSS дає гнучкість через утиліти, Bootstrap — готові UI-компоненти.

- Зменшують обсяг кастомного CSS і допомагають уникати помилок.

</details>

<details>
<summary>144. Як забезпечити масштабованість та зручність підтримки CSS у великому проекті?</summary>

#### CSS

- Використовувати методології: BEM, OOCSS, SMACSS для структуризації.

- Розбивати CSS на модулі або компоненти.

- Використовувати препроцесори (Sass, Less) і змінні.

- Мінімізувати специфічність селекторів.

- Документувати стилі і слідувати код-стайлу.

- Писати повторно використовувані утиліти й міксіни.

- Впроваджувати автоматичний лінтинг і тестування стилів.

</details>

<details>
<summary>145. Які підходи до архітектури CSS для великомасштабних застосунків ви знаєте?</summary>

#### CSS

- BEM — чітке розділення блоків, елементів і модифікаторів для передбачуваності.

- OOCSS — розділення структури і стилів, повторне використання об’єктів.

- SMACSS — категоризація стилів на базові, макетні, модульні, станів і теми.

- ITCSS — ієрархія шарів від глобальних до компонентних стилів для кращої
  організації.

- Atomic CSS / Utility-first — маленькі повторно використовувані класи для
  швидкого стилювання.

Кожен підхід можна комбінувати залежно від потреб проекту.

</details>

<details>
<summary>146. Як зробити гамбургер-меню лише на CSS?</summary>

#### CSS

- Створити гамбургер-меню на CSS можна так:

1. Використати чекбокс (`<input type="checkbox">`) для контролю відкриття меню.

2. Стилізувати три смужки як гамбургер через псевдоелементи.

3. При відміченому чекбоксі через CSS (`:checked`) показувати/ховати меню.

#### Простий приклад:

```html
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="hamburger">
  <span></span><span></span><span></span>
</label>
<nav class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>
```

```css
.hamburger span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px 0;
  background: black;
  transition: 0.3s;
}

.menu {
  display: none;
}

#menu-toggle:checked + .hamburger + .menu {
  display: block;
}
```

</details>

<details>
<summary>147. Як зробити слайдер або карусель лише на CSS?</summary>

#### CSS

- Карусель на чистому CSS роблять через:

1. Використання `input type="radio"` або чекбоксів для керування слайдами.

2. Приховані елементи-контролери (`radio buttons`), стилізовані як навігація.

3. Позиціонування слайдів абсолютом в контейнері.

4. Показ слайду через CSS-селектор `:checked` (наприклад, #slide1:checked ~
   .slides .slide1 { opacity: 1; }).

5. Анімації або переходи для плавності.

#### Простий приклад:

```html
<input type="radio" name="slider" id="slide1" checked />
<input type="radio" name="slider" id="slide2" />
<div class="slides">
  <div class="slide slide1">Slide 1</div>
  <div class="slide slide2">Slide 2</div>
</div>
<label for="slide1">1</label>
<label for="slide2">2</label>
```

```css
.slides .slide {
  opacity: 0;
  position: absolute;
  transition: opacity 0.5s ease;
}

#slide1:checked ~ .slides .slide1,
#slide2:checked ~ .slides .slide2 {
  opacity: 1;
  position: relative;
}
```

</details>

<details>
<summary>148. Як реалізувати макет у стилі мура (masonry layout) за допомогою CSS?</summary>

#### CSS

- Щоб створити макет у стилі мура (masonry layout) на CSS, можна використовувати
  кілька підходів:

1. CSS Grid із властивістю grid-auto-rows та grid-row-end

Потрібно вручну або через JS задавати висоту рядків, щоб елементи «заповнювали»
вертикальний простір без фіксованої висоти.

2. Використання CSS Columns (найпростіший спосіб)

```css
.container {
  column-count: 3;
  column-gap: 1rem;
}

.item {
  break-inside: avoid;
  margin-bottom: 1rem;
}
```

- Переваги: автоматичне «обтікання» елементів у колонки, але порядок читання
  зліва направо, зверху вниз.

3. Новий спосіб — grid-template-rows: masonry (поки експериментальний, підтримка
   обмежена).

- Підсумок:

- Для простих проектів — CSS Columns.

- Для складніших — поєднання Grid і JS для обчислення висот.

</details>

<details>
<summary>149. Як застосувати CSS до вебзастосунку, який має друкуватися, а також відображатися на екрані?</summary>

#### CSS

- Для окремого стилювання під друк і екран використовують медіа-запити:

```css
/* Стилі для екрану */
@media screen {
  /* тут стилі для екрана */
}

/* Стилі для друку */
@media print {
  /* тут стилі для друку */
}
```

- Також можна підключати окремі CSS-файли:

```html
<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
```

- Це дозволяє оптимізувати вигляд для кожного режиму — приховувати меню,
  змінювати кольори, поліпшувати читабельність при друку.

</details>

<details>
<summary>150. Як реалізувати безперебійний каскадний потік елементів у адаптивному дизайні?</summary>

#### CSS

- Щоб створити безперебійний каскадний потік (flow) елементів в адаптивному
  дизайні, використовують:

- CSS Flexbox з властивістю flex-wrap: wrap; — елементи переходять на новий
    рядок при браку місця.

- CSS Grid з автоматичним заповненням колонок (grid-template-columns:
    repeat(auto-fill, minmax(200px, 1fr));).

- Media queries для корекції кількості елементів у рядку залежно від ширини
    екрана.

- Використання відсоткових/гнучких ширин замість фіксованих пікселів.

</details>

#### CSS

- Coming Soon... 😎

</details>

css-interview-questions

css-interview-questions Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

css-interview-questions

css-interview-questions Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README