Питання інтервью 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.
Яка різниця між
,та?
1 - Коли браузер завантажує HTML і доходить до тегу
, він призупиняє будувати 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.
Поступова деградація – це коли код спочатку пишеться для найновіших браузерів з використанням останніх технологій, але при цьому додаток потребує підтримки старими браузерами. За такого підходу інтерфейс спрощується або деградує поступово, але при цьому ним все одно можна користуватися.
Що таке repaint та reflow?
Під час завантаження сторінки, якщо вона не порожня, завжди виконується щонайменше по одному reflow та repaint. Далі ці події виникають у таких випадках:
- 1 - частина дерева відображення потребує перерахунку, тобто у якогось вузла змінилися ширина, висота чи координати. Викликається подія reflow.
- 2 - в результаті змін частина контенту, що відображається, повинна оновитися. Йдеться в першу чергу про властивості стилів: колір фону і т. д. Викликається подія repaint. Якщо викликається reflow, після нього обов’язково викликається і repaint. Але зворотне хибно: repaint може викликатися незалежно від reflow.
Яка різниця між cookie, sessionStorage та localStorage?
localStorage:
- зберігає дані безстроково.
- очищається тільки за допомогою JavaScript або чищення кешу браузера.
- зберігає дані об’ємом до 5 МБ.
- не підтримується старими браузерами, наприклад, IE 7 і нижче.
- працює за правилом обмеження домену (same origin policy).
sessionStorage:
- зберігає дані, поки триває поточна сесія вкладки.
- кожна вкладка має свій sessionStorage.
- зберігає дані об’ємом до 5 МБ.
- не підтримується старими браузерами, наприклад, IE 7 і нижче.
cookie:
- зберігає дані, що передаються на сервер через заголовки.
- мають термін зберігання даних.
- обсяг даних від 4 Кбайт до 32 Кбайт.
- сookie можуть бути захищеними, в цьому випадку їх вміст не можна отримати на стороні клієнта. Це важливо для аутентифікації при зберіганні користувальницьких токенів. “
Яка різниця між відносним та абсолютним шляхом?
Абсолютні адреси повинні починатися із зазначення протоколу (зазвичай http://) та містити ім’я сайту. (http://some-site.com/path)
Відносні посилання ведуть відлік від кореня сайту чи поточного документа. (/path)
