HTML/CSS Flashcards
- Для чого потрібно вказувати DOCTYPE?
DOCTYPE вказує тип поточного документа. Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує у кількох версіях.
- Що буде, якщо не вказати DOCTYPE на початку документа?
Браузер спробує відобразити сторінку в режимі сумісності (quirks mode). Це може призвести до того, що в різних браузерах сторінка відображатиметься по-різному.
- Для чого потрібні мета-теги?
Мета-теги – це теги, які надають пошуковим системам додаткову інформацію про сторінку сайту. Наприклад, механізми пошукових систем звертаються до мета-тегів для отримання опису сайту, ключових слів та інших даних. Мета-теги для сайту розміщуються всередині <head>.
- Чим відрізняється блоковий елемент від рядкового?
Блокові елементи є основою, яка використовується для верстки сторінок. Такий елемент є прямокутником, який за замовчуванням займає всю доступну ширину сторінки, а висота елемента залежить від його вмісту. Такий елемент завжди починається з нового рядка. Блоковий елемент може містити в собі інші блокові та рядкові елементи.
Приклади блокових елементів: <div>, <p>, <ul>, <ol>, <h1>
На відміну від блокового, рядковий елемент не переноситься на новий рядок, а розташовується у тому ж рядку, що й попередній елемент. Ширина рядкового елемента залежить від його вмісту. Блокові елементи не можна вкладати в рядкові.
Приклади рядкових елементів: <a>, <span>, <strong>, <em>, <img></img></em></strong></span></a>
- Чому деякі символи можуть відображатися у вигляді квадратів?
Це може виникати через те, що деякі браузери можуть не підтримувати певні символи операційної системи. Також може відрізнятися кодування. Або не підключено потрібний шрифт з іконками.
- Які типи заголовків є в HTML?
HTML підтримує шість різних типів заголовків. Ці заголовки відрізняються за розміром шрифту, починаючи з найбільшого.
h1 – найбільший заголовок. h6 – найменший заголовок.
h1 має бути лише 1 на сторінці.
- Що таке семантична верстка?
Це верстка орієнтована на структурування html-документів. У ній використовуються теги, які поділяють код на логічні блоки, що явно показують їх роль та зміст у структурі сторінки.
Семантична верстка відрізняється від блокової лише елементами, що використовуються при структуризації сторінки.
У блоковій верстці використовують в основному тільки елемент div, а в семантичній використовуються крім div ще безліч інших тегів, таких як: header, main, section, footer, nav, aside.
- Що таке потік HTML-документа?
Потоком документа HTML називається порядок виведення елементів на сторінку. У звичайному вигляді всі блоки виводяться у порядку, у якому записані всередині HTML-документа.
Потік можна змінювати за допомогою css правил, наприклад, за допомогою position: absolute.
- Як підключити JavaScript до сторінки?
Перший спосіб — вставити скрипт у блок script.
Другий спосіб — підключити скрипт за допомогою додавання посилання на файл JavaScript. Бажано всі скрипти підключати наприкінці блоку body.
- Яка різниця між script, script async та script defer?
1 - Коли браузер завантажує HTML і доходить до тегу script, він призупиняє будувати DOM. Він повинен спочатку завантажити та виконати скрипт, і лише потім обробити решту сторінки.
2 - Атрибут defer повідомляє браузеру, що він повинен продовжувати обробляти сторінку та завантажувати скрипт у фоновому режимі, а потім запустити цей скрипт, коли сторінка завантажилася.
3 - Атрибут async повідомляє браузеру, що він повинен продовжувати обробляти сторінку та завантажувати скрипт у фоновому режимі, а потім запустити цей скрипт, як тільки він буде завантажений.
- Як додати CSS на сторінку?
Перший спосіб — описати селектори та їх значення всередині тегу style.
Другий спосіб — підключити стилі за допомогою додавання посилання на зовнішній файл css, використовують тег link, що розташовується всередині блоку head.
Третій спосіб — додати інлайнові стилі для кожного окремого елемента, використовуючи атрибут style.
- Яка різниця між reset.css та normalize.css?
reset.css - скидає всі стилі в нуль для того, щоб можна було розпочати стилізацію сайту з чистого аркуша.
normalize.css - приводить вихідні стилі до єдиного стану, у всіх браузерах.
- Що таке critical CSS?
Critical CSS - це стилі, які необхідні для відтворення першої видимої частини сторінки. Для моментального відтворення критичний CSS вбудовують в HTML, всі інші стилі завантажуються окремим файлом асинхронно.
- Що таке специфічність селекторів CSS?
Це спосіб, за допомогою якого браузери визначають, які значення властивостей CSS найбільше відповідають елементу і, отже, будуть застосовані. Специфічність є вагою, що надається конкретному правилу CSS.
Найбільшу вагу мають inline стилі. Потім стилі селектора за ID. Найменшу вагу мають селектори по тегу і також селектор * (астерікс).
- Яка різниця між псевдокласом і псевдоелементом в CSS?
Псевдокласи описують особливий стан елементу. Наприклад, стан натиснутої кнопки. Псевдоелементи відповідають віртуальним елементам. Наприклад, потрібно виділити першу літеру в рядку.
- Що таке блокова модель CSS?
Кожен блок має прямокутну область вмісту в центрі, поля навколо вмісту (padding), рамку навколо полів (border) та відступ за межами рамки (margin).
- Що робить властивість box-sizing?
Властивість box-sizing визначає як обчислюється загальна ширина та висота елемента. Має 2 поведінки:
- content-box це стандартна поведінка. Якщо встановити елементу ширину 100 пікселів, то ширина його контенту буде 100 пікселів, а ширина меж і внутрішніх відступів під час рендеру буде додана до фінальної ширини, що зробить елемент ширше ста пікселів.
- border-box каже браузеру враховувати будь-які межі та внутрішні відступи у значеннях, які вказані у ширині та висоті елемента. Якщо виставити елементу ширину 100 пікселів, то ці 100 пікселів будуть містити межі та внутрішні відступи, а контент стискається, щоб виділити для них місце. Зазвичай це полегшує роботу з розмірами елементів.
- Які види позиціонування елементів на сторінці ви знаєте?
Існує 5 видів позиціонування:
- static - стандартне позиціонування;
- relative - позиціонування щодо самого себе;
- absolute - позиціонування щодо його найближчого відносно позиціонованого предка, якщо такий є;
- fixed - позиціонування відносно viewport
- sticky - липке позиціонування, яке може змінювати своє значення з relative на fixed під час прокручування сторінки.
- Що робить властивість z-index?
Ця властивість визначає положення елемента та елементів, розташованих нижче по осі z. У разі перекриття елементів це значення визначає порядок накладання. У загальному випадку елементи з більшим z-index перекривають елементи з меншим.
Ця властивість працює тільки для елементів, у яких значення position встановлено як absolute, fixed або relative.
- Яка різниця між px, em, rem?
px - піксель, це найбільш базова, абсолютна та остаточна одиниця виміру;
em - одиниця виміру відносно поточного розміру шрифту;
rem - одиниця виміру відносно розміру шрифту елемента <html>.
- Яка різниця між гумовою, адаптивною та респонсивною версткою?
У гумовій верстці блоки змінюють ширину залежно від розміру вікна браузера.
Адаптивна верстка реалізується за допомогою правил @media. Це дає змогу для кожного окремого розміру екрана відображати різну верстку. Будь-яка зміна розміру вікна відбувається ривками, після досягнення однієї із зазначених точок перелому.
Респонсивна верстка — це поєднання гумової та адаптивної верстки. У реалізації найскладніша. Але результат виходить найбільш прийнятним.
- Яка різниця між visibility:hidden та display:none?
visibility:hidden залишає елемент у нормальному потоці сторінки, і він все ще займає місце.
display:none видаляє елемент із нормального потоку сторінки, що дозволяє іншим елементам заповнити його місце.
- Для чого потрібне правило @supports?
Правило @supports дозволяє перевірити, чи підтримує браузер ту чи іншу можливість, і на основі цього створити набір стильових правил.
- Яка різниця між Progressive Enhancement та Graceful Degradation?
Прогресивне покращення – це коли основний функціонал програми однаково працює у всіх браузерах, а для нових браузерів додається щось додаткове. Це добре працює з технологіями, які поки що широко не підтримуються, але вже можуть принести користь. Для реалізації цього підходу використовується директива @supports.
Поступова деградація – це коли код спочатку пишеться для найновіших браузерів з використанням останніх технологій, але при цьому додаток потребує підтримки старими браузерами. За такого підходу інтерфейс спрощується або деградує поступово, але при цьому ним все одно можна користуватися.
