Skip to content
/ css-interview-questions Public

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

License

MIT license
9 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

FrontendLovers/css-interview-questions

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
assets
assets
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
LICENSE.txt
LICENSE.txt
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 

Repository files navigation

CSS CSS logo

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

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

CSS

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

CSS

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

CSS

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

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; }
5. Як працює наслідування в CSS?

CSS

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

  • Особливості:

  1. Автоматично наслідуються тільки текстові та декоративні властивості:
  • color, font, visibility, line-height тощо.
  1. Не наслідуються автоматично властивості, що впливають на коробку (box model):

  • margin, padding, border, width, height тощо.

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

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

    p {
  border: inherit;
}

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

    p {
  color: initial;
}
6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?

CSS

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

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

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

    • За замовчуванням:
    Width/Height = Content + Padding + Border

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

    • Використовуйте властивість box-sizing:
  1. content-box (за замовчуванням):

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

    box-sizing: content-box;
  1. border-box:

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

    box-sizing: border-box;

  • Приклад:

    * {
  box-sizing: border-box;
}
    • Це допомагає уникнути помилок у розмітці.
7. У чому різниця між margin і padding?

CSS

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

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

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

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

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

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

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

  • Приклад:

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

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: Вирівнювання конкретного елемента всередині контейнера.

  • Приклад:

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

.item {
  flex: 1; /* Рівний розподіл простору */
}
9. Що таке Grid?

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: Вирівнювання всієї сітки в контейнері.
  1. Для елементів:

  • grid-column, grid-row: Позиціювання по колонках і рядках.

  • grid-area: Розміщення в іменованій області.

  • place-self: Індивідуальне вирівнювання елемента.

  • Приклад:

    .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; /* Розташований у другому рядку */
}
10. Що таке медіазапити та як їх використовувати?

CSS

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

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

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

/* Стилі для десктопів */
@media (min-width: 769px) {
  body {
    background-color: lightgreen;
  }
}
11. Як можна приховати елемент за допомогою CSS?

CSS

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

CSS

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

  1. Flexbox:

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

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

  2. Grid:

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

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

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

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

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
13. Як розмістити хрестик для закриття справа зверху елемента?

CSS

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

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

.close-btn {
  position: absolute;
  top: 10px; /* відстань від верхнього краю */
  right: 10px; /* відстань від правого краю */
  cursor: pointer; /* щоб курсор змінювався при наведенні */
}
    <div class="container">
  <div class="close-btn">&times;</div>
  <!-- інший контент -->
</div>
14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?

CSS

  • Щоб зробити останній елемент списку червоним без JavaScript, можна використати псевдоклас :last-child:.

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

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

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

15. Які є можливості задати колір?

CSS

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

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

    color: red;

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

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

  3. RGB (Red, Green, Blue):

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

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

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

  5. HSL (Hue, Saturation, Lightness):

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

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

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

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

    color: transparent; /* прозорий */
  • Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису кольору до використання прозорості або відтінків.
16. Що таке z-index? Чи кожен елемент його має?

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 можуть накладатися позаду батьківських елементів.

  • Приклад:

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

.div2 {
  position: relative;
  z-index: 5; /* цей елемент буде під div1 */
}
17. Які переваги і недоліки використання CSS-препроцесорів?

CSS

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

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

    $primary-color: #3498db;

body {
  color: $primary-color;
}

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

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

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

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

div {
  @include flex-center;
}

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

    width: calc(100% - 50px);

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

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

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

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

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

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

  • Використання залежить від розміру проекту та необхідності складних стилів. Для великих проектів переваги переважують недоліки.
18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями?

CSS

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

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

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

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

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

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

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 залежно від контексту.

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

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

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 для батьківського контейнера.
21. Що таке CSS-правило?

CSS

  • CSS-правило складається з селектора та блоку декларацій. Селектор визначає, до яких елементів на сторінці застосовуються стилі, а блок декларацій містить властивості та їх значення, що визначають вигляд цих елементів. Наприклад:
p {
  color: red;
  font-size: 16px;
}
  • Тут p — селектор (вибирає всі абзаци), а в блоці декларацій вказано, що текст буде червоним і розмір шрифту 16px.
22. Варіанти додавання CSS стилів на сторінку?

CSS

  1. Inline CSS: Стилі додаються безпосередньо до HTML елементів через атрибут style.
<p style="color: red; font-size: 16px;">Text</p>
  1. Internal CSS: Стилі додаються в <style> тег в межах <head> секції HTML документа.
<style>
  p {
    color: red;
    font-size: 16px;
  }
</style>
  1. External CSS: Стилі прописуються в окремому CSS файлі, який підключається до HTML через тег <link>.
<link rel="stylesheet" href="styles.css" />
  • Ці варіанти відрізняються за пріоритетом і зручністю для масштабування проектів.
23. Типи позиціонування у CSS?

CSS

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

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

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

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

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

24. Блокова модель CSS?

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.

25. Що таке селектор? І які селектори є?

CSS

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

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

  1. Типовий селектор (Type selector): Вибирає елементи за їх тегом.
p {
  color: red;
}
  1. Класовий селектор (Class selector): Вибирає елементи за класом, починається з крапки.
.my-class {
  color: blue;
}
  1. Ідентифікатор (ID selector): Вибирає елементи за ідентифікатором, починається з решітки.
#my-id {
  color: green;
}
  1. Атрибутний селектор (Attribute selector): Вибирає елементи за значенням їх атрибутів.
input[type="text"] {
  border: 1px solid black;
}
  1. Псевдоклас (Pseudo-class selector): Вибирає елементи, що знаходяться в певному стані.
a:hover {
  color: red;
}
  1. Псевдоелемент (Pseudo-element selector): Вибирає частини елементів, наприклад, перший рядок або першу літеру.
p::first-letter {
  font-size: 2em;
}
  1. Комбінатори (Combinators):
  • Descendant (потомок): Вибирає елементи, які є нащадками іншого елемента.
div p {
  color: purple;
}
  • Child (прямий нащадок): Вибирає елементи, що є прямими дітьми іншого елемента.
div > p {
  color: yellow;
}
  • Adjacent sibling (сусід): Вибирає елемент, який йде безпосередньо після іншого.
h1 + p {
  margin-top: 0;
}
  • General sibling (загальний сусід): Вибирає елементи, які є сусідами певного елемента.
h1 ~ p {
  color: orange;
}

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

26. Різниця між Reset.css та Normalize.css?

CSS

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

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

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

  • Приклад:

* {
  margin: 0;
  padding: 0;
  border: 0;
}
  1. Normalize.css:

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

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

  • Приклад:

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
  • Основна різниця: Reset.css скидає всі стилі браузера до мінімуму, тоді як Normalize.css підтримує базові стилі, але нормалізує їх для більшої узгодженості між браузерами.
27. Різниця між display: none та visibility: hidden?

CSS

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

  • display: none

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

  • visibility: hidden

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

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

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

CSS

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

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

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

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

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

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

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

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

span {
  display: inline;
  color: red;
}

Різниця

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

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 або унікальної ідентифікації.
30. Що таке CSS спрайт? І для чого він використовується?

CSS

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

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

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

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

  2. 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; /* Третя іконка в спрайті */
}
  1. 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, але для себе знати треба. 📝
31. Що таке вендорні префікси? І навіщо вони використовуються?

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. Вони допомагають тестувати нові функції та забезпечують їх роботу на більшій кількості браузерів, поки всі вони не впровадять підтримку стандартних властивостей.
32. Що таке псевдоелементи? І навіщо вони використовуються?

CSS

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

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

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

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

p::before {
  content: "🔹 ";
}

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

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

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

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

CSS

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

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

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

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

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

Приклад:

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

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

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

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

  • Використовувати padding, а не margin, якщо потрібно уникнути схлопування.
  • Встановити overflow на елементі.
  • Використовувати фонові або градієнтні елементи, щоб блокувати схлопування.
34. Що таке z-index? Як формується контекст накладання?

CSS

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

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

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

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

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

Приклад:

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 можна лише в межах кожного з контекстів.

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

<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 у своєму контексті.
35. Порядок накладання елементів у CSS (Stacking Order)?

CSS

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

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

  1. Елементи за замовчуванням (статичні елементи, без позиціонування та без z-index):
  • Елементи без позиціонування (position: static або без властивості position) розташовуються один за одним у порядку їхнього розташування в HTML.
  1. Елементи з позиціонуванням (relative, absolute, fixed, sticky):
  • Якщо елемент має будь-яке інше значення position (крім static), він створює новий контекст накладання. У межах цього контексту елементи з більшим значенням z-index будуть накладатися поверх елементів з меншим значенням.
  1. Елементи з z-index:
  • Елементи з більш високим z-index будуть розташовуватися поверх елементів з нижчим значенням z-index (якщо елементи знаходяться в одному контексті накладання).
  1. Невидимі елементи (з opacity менше 1 або з visibility: hidden):
  • Елементи, які мають властивість opacity менше 1 або visibility: hidden, можуть бути розташовані поверх інших елементів, але їх все одно не видно.
  1. Елементи з властивістю transform, filter, perspective, clip-path та іншими, що створюють новий контекст накладання:
  • Коли елемент має одну з цих властивостей, це створює новий контекст накладання, і елементи в цьому контексті будуть накладатися згідно з їхніми значеннями z-index, незалежно від того, де вони знаходяться на сторінці.
  1. Елементи з фонового вмісту (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) накладаються поверх всіх інших елементів із меншим пріоритетом.

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

CSS

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

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

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

if (Modernizr.flexbox) {
  console.log("Flexbox підтримується!");
} else {
  console.log("Flexbox не підтримується.");
}
  1. Використання умови @supports в CSS

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

Приклад:

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

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

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

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

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

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

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

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

Висновок

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

37. Глобальні ключові слова у CSS?

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

@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 – скидає значення до попереднього рівня каскаду.
38. Що таке перерахування селекторів?

CSS

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

Синтаксис

selector1,
selector2,
selector3 {
  property: value;
}

Приклади

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

h1,
h2,
h3 {
  color: red;
}
  • Усі h1, h2 і h3 стануть червоними.

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

button,
.btn {
  padding: 10px;
}
  • Застосується до <button> і будь-якого елемента з .btn.

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

.card .title,
.box .header {
  font-weight: bold;
}
  • Стилізує .title всередині .card і .header всередині .box.

Висновок

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

CSS

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

Як працює

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

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

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

button {
  color: blue;
  border: 2px solid currentColor;
}
  • Рамка кнопки буде того ж кольору, що й текст (blue).

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

.icon {
  color: red;
  fill: currentColor;
}
  • fill у SVG прийме color елемента (red).

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

.link {
  color: green;
  background: linear-gradient(currentColor 0%, transparent 100%);
}
  • Градієнт стартує від green, бо це значення color.

Висновок

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

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.

41. Які фільтри є у CSS?

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));

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

  • Фільтри можна комбінувати, вказуючи їх через пробіл:
filter: brightness(120%) contrast(110%) blur(3px);
  • Фільтри застосовуються до всіх елементів, але найчастіше – до зображень (img), відео та бекграундів.
42. Навіщо використовується псевдоклас :invalid?

CSS

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

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

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

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

input:invalid {
  border: 2px solid red;
  background-color: #ffe6e6;
}
<input type="email" required placeholder="Введіть email" />
  • Якщо поле буде пустим або міститиме некоректний email, воно підсвітиться червоним.
43. Розкажіть про властивість display в CSS?

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, який просто приховує його, залишаючи місце.

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

CSS

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

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

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

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

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

  • Якщо потрібно перемістити елемент без зміни його поточного контексту, translate() – кращий вибір.
45. Що таке плаваючі елементи (floats)? Як вони працюють?

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, але зараз використовується переважно для обтікання зображень текстом.

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

CSS

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

Наприклад:

color: red;
  1. Шістнадцятковий код (Hex):

Наприклад:

color: #ff5733; /* Рожевий */
  1. RGB (Red, Green, Blue):
  • Визначається за допомогою значень для червоного, зеленого і синього каналів від 0 до 255.

Наприклад:

color: rgb(255, 87, 51);
  1. RGBA (Red, Green, Blue, Alpha):
  • Подібно до RGB, але з додаванням каналу прозорості (alpha) від 0 (повністю прозорий) до 1 (непрозорий).

Наприклад:

color: rgba(255, 87, 51, 0.5);
  1. HSL (Hue, Saturation, Lightness):
  • Визначається за допомогою відтінку (hue), насиченості (saturation) та яскравості (lightness).

Наприклад:

color: hsl(12, 100%, 60%);
  1. HSLA (Hue, Saturation, Lightness, Alpha):
  • Як HSL, але з каналом прозорості.

Наприклад:

color: hsla(12, 100%, 60%, 0.5);
  1. CSS-Gradients:
  • Колір може бути визначений за допомогою градієнтів.

Наприклад:

background: linear-gradient(to right, red, yellow);
  1. Прозорі кольори:
  • Використовуємо ключові слова для заданого рівня прозорості.

Наприклад:

color: transparent;

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

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

CSS

  • Для створення анімацій та плавних переходів у CSS використовуються такі властивості:
  1. Плавні переходи (transition)
  • Дозволяють змінювати значення властивостей із плавною анімацією.

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

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

Приклад:

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

button:hover {
  background-color: red;
}
  1. Анімації (@keyframes + animation)
  • Дозволяють створювати складніші анімації зі зміною стилів у ключових точках.

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

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

Приклад:

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

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

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

  • transition – якщо треба просто змінювати стилі при наведенні або зміні класу.
  • animation – якщо потрібен складніший ефект з кількома ключовими кадрами.
48. Різниця між псевдокласами та псевдоелементами?

CSS

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

Псевдокласи

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

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

  • :hover — для елементів, на які наводиться курсор.
button:hover {
  background-color: blue;
}
  • :focus — для елементів, на які надано фокус (наприклад, поля введення).
input:focus {
  border-color: green;
}
  • :nth-child() — для вибору елементів за їхнім порядковим номером серед батьків.
li:nth-child(odd) {
  background-color: lightgray;
}

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

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

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

  • ::before— додає вміст перед вмістом елемента.
p::before {
  content: "→ ";
  color: green;
}
  • ::after — додає вміст після вмісту елемента.
p::after {
  content: " ←";
  color: red;
}
  • ::first-letter — для стилізації першої літери елемента.
p::first-letter {
  font-size: 2em;
  color: blue;
}

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

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

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

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

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

CSS

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

Як працює?

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

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

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

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

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

  1. Виділення <input> в контейнері, що містить кнопку "submit"
.form:has(button[type="submit"]) {
  background-color: lightgray;
}
  • Сірий фон застосовується тільки до .form, якщо в ній є кнопка submit.
  1. Приховуємо кнопку, якщо інпут порожній
button:has(+ input:placeholder-shown) {
  display: none;
}
  • Кнопка буде схована, доки користувач не введе текст в інпут.
  1. Вибір батьківського елемента списку, якщо він містить активний пункт
.nav:has(.active) {
  background-color: black;
}
  • Якщо .nav містить .active елемент, змінюється фон.

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

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

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

Висновок

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

CSS

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

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

  • ❌ Проблема:

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

  • ✅ Рішення:

    • Використовувати статичні стилі там, де це можливо (styled-components з as="tag").
    • Переносити стилі на сервер (SSR) з styled-components або emotion.
import { ServerStyleSheet } from "styled-components";
  • Використовувати CSS Modules або Tailwind для критичних стилів.
  1. Великі розміри бандлу

  • ❌ Проблема:

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

  • ✅ Рішення:

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

  • ❌ Проблема:

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

  • ✅ Рішення:

    • Використовувати theme-based стилі через контекст.
    • Використовувати as або css для стилізації без перезапису класів.
<Button as="a" href="/">
  Link
</Button>
  1. Відсутність інтуїтивного автодоповнення в IDE

  • ❌ Проблема:

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

  • ✅ Рішення:

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

  • ❌ Проблема:

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

  • ✅ Рішення:

    • Використовувати keyframes правильно:
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.

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

CSS

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

CSS

  • Є три способи:
  1. Вбудований (Inline CSS) – через атрибут style в HTML-елементі:
<p style="color: red;">Текст</p>
  1. Вбудований блок (Internal CSS) – у <style> всередині <head>:
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
  1. Зовнішній файл (External CSS) – підключення окремого .css файлу через <link>:
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
53. Яка різниця між селекторами класу та ID

CSS

  • Селектор класу (.)

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

Приклад:

<p class="text">Це параграф</p>
.text {
  color: blue;
}

  • Селектор ID (#)

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

Приклад:

<p id="unique-text">Це унікальний параграф</p>
#unique-text {
  color: red;
}

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

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

CSS

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

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

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

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

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

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

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

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

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

CSS

  • Coming Soon... 😎

About

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

Topics

css3 interview-questions css-interview-questions css-interview-questions-and-answers

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Security policy

Security policy
Activity
Custom properties

Stars

9 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published