CSS

Найпопулярніші запитання та відповіді на співбесіді з 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 тощо.

2. Не наслідуються автоматично властивості, що впливають на коробку (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;

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

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

• 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>, і так далі.

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

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

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

• Розмір заголовків можна стилізувати за допомогою 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>

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

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

3. 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;
}

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

.my-class {
  color: blue;
}

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

#my-id {
  color: green;
}

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

input[type="text"] {
  border: 1px solid black;
}

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

a:hover {
  color: red;
}

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

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

7. Комбінатори (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;
}

2. 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; /* Третя іконка в спрайті */
}

3. 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

• Coming Soon... 😎