Ця стаття допоможе вам підготуватися до співбесіди з CSS, надаючи список найпоширеніших питань з короткими відповідями та посиланнями на матеріали для додаткового вивчення. Перевірте знання стилізації веб-сторінок, а саме: основні концепції CSS, селектори, властивості та техніки, необхідні для успішного проходження співбесіди.
Нижче наведено питання по темі CSS (джерело), які часто задають на співбесіді. Прочитавши питання, постарайтеся відповісти на нього так, як ви це зробили б під час свого інтерв'ю. Під питанням ви знайдете відповідь та посилання на джерела, які розкривають тему докладніше.
1) Що таке специфічність селекторів CSS і як вона працює?
Переглянути відповідь
Специфіка селектора (ще називають вагою) це властивість що визначає пріоритет стильового правила, тобто те, який стиль буде застосований до HTML елементу в результаті. Наприклад, використовуючи якусь UI бібліотеку, елементам цієї бібліотеки будуть застосовані правила, задані авторами за замовчуванням. При необхідності можна змінити стилі на свої, «перебивши» дефолтні більш специфічним селектором.
Докладніше тут:
2) Яка різниця між скиданням та нормалізацією CSS? Що ви оберете і чому?
Переглянути відповідь
Мета скидання CSS - скинути всі стилі в нуль для того, щоб можна було розпочати стилізацію сайту з чистого аркуша. Недоліком скидання стилів є те, що їх частково доведеться встановлювати заново. Ціль нормалізації - привести вихідні стилі до єдиного стану, у всіх браузерах. Якщо розглядати Normalize.css, то з його допомогою не просто встановлюються певні значення стилів, а й вирішуються деякі проблеми відображення елементів, особливо в мобільних браузерах. Вибирати між двома інструментами залежить від поставленого завдання.
Докладніше тут:
3) За що відповідає властивість float і як вона працює?
Переглянути відповідь
Визначає сторону, за якою буде вирівняно елемент. Сусідні елементи «обтікатимуть» такий елемент з протилежного боку.
Докладніше тут:
4) Що робить властивість z-index та як формується контекст накладання?
Переглянути відповідь
Визначає положення елемента осі Z. Якщо елементи перекриваються один одним (накладаються), ця властивість диктує порядок накладання. Працює тільки для елементів, у яких властивість position встановлена як absolute/relative/fixed.
Докладніше тут:
5) Опишіть BFC (Block Formatting Context - блоковий контекст форматування) та принцип його роботи.
Переглянути відповідь
Block formatting context — це область, де відбувається форматування та розміщення блокових елементів. Він відіграє важливу роль у визначенні того, як елементи взаємодіють один з одним по відношенню до своїх батьківських та сусідніх елементів.
Принцип роботи BFC полягає в тому, що кожен блоковий контейнер формує власний контекст форматування, всередині якого відбувається розподіл і позиціонування його нащадків. Це дозволяє уникнути деяких типових проблем у верстці, таких як проблеми з плаваючими елементами, зовнішніми відступами та переповненнями контейнерів.
Створити BFC можна за допомогою певних CSS властивостей, таких як overflow
, float
, display
і position
. Наприклад, встановлення властивості overflow
на значення, відмінне від visible
створить BFC для елемента.
Докладніше тут:
6) Які існують методи очищення floats та які з них підходять для якого контексту?
Переглянути відповідь
Властивість clear, застосована до нижчого (від float) елемента зі значеннями left, right, both, а також властивість overflow зі значенням hidden. Сама по собі властивість overflow управляє відображенням вмісту блоку (додає смуги прокрутки, обрізає контент, що не помістився), на додаток, значення auto, scroll або hidden скасовують властивість float.
Докладніше тут:
7) Як ви боретесь з проблемами стилізації, пов'язаними з крос-браузерністю?
Переглянути відповідь
Є кілька основних рішень проблем стилізації, пов'язаних із крос-браузерністю. Наприклад, розділення стилів для різних браузерів та пристроїв, а також додавання вендорних префіксів до стильових правил. Метод поділу стилів полягає в ідентифікації виду браузера користувача та застосуванні відповідного стилю на додаток до основних стилів. За допомогою правила @media можна вказати тип пристрою, для якого будуть застосовані певні стилі, а додавання вендорних префіксів до стилів розширить список підтримуваних браузерів.
Докладніше тут:
8) Як працювати зі стилями у старих браузерах з обмеженими можливостями? Які методи/техніки ви використовуєте?
Переглянути відповідь
Підхід progressive enhancement передбачає поетапне створення веб-інтерфейсів, що повинні створюватися поетапно, циклічно, від простого до складного. На кожному з етапів створюється закінчений веб-інтерфейс як покращена версія попереднього. Усього можна виділити 4 етапи:
- HTML – вміст сторінки розмічується за допомогою HTML. Важливо зробити логічно та семантично правильну розмітку, тоді документ буде коректно відображено будь-яким браузером. Цей етап є найважливішим.
- CSS – документ отримує акуратний вигляд: з'являється сітка сторінки, фонові зображення тощо.
- CSS3 - додаються анімаційні та декоративні фішки, тіні, плашки, куточки і т.д.
- JavaScript – покращується взаємодія з інтерфейсом: AJAX рішення, динамічні елементи тощо.
Такий підхід у поєднанні з mobile first гарантує, що сторінка сайту коректно відображатиметься на будь-яких пристроях. Підхід graceful degradation має зворотну філософію — функціонал сайту деградує від складного до простішого в ранніх версіях браузерів, де ще не реалізовані останні фічі. Для визначення наявності потрібного функціоналу браузера використовується інший прийом feature detection (правило @supports)
Докладніше тут:
9) Які ви знаєте способи приховування контенту сайту (при цьому залишивши його доступним для скринридерів)?
Переглянути відповідь
Властивість opacity зі значенням 0 приховує елемент та всі його дочірні елементи. Прихований контент все ще є на сторінці, його місце нічим не зайняте. Техніка .sr-only дозволяє приховати елемент, але залишити його доступним для скринрідерів
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Докладніше тут:
10) Ви коли-небудь використовували Grid систему, і якщо так, то яку технологію для спрощення розмітки HTML-сторінок ви надаєте перевагу?
Переглянути відповідь
Grid Layout – двомірна сітка (набір вертикальних та горизонтальних ліній) для CSS. Використовується для розміщення основних областей сторінки або невеликих елементів інтерфейсу користувача. Елементи поміщаються в сітку, відповідно до рядків і стовпців. Grid дозволяє створити сітку з фіксованими розмірами смуг, розміщувати елементи у заданому місці, створювати додаткові смуги для керування контентом та вирівнюванням. У поєднанні з flexbox grid Layout дозволяє будувати макети, створення яких за допомогою чистого CSS неможливо.
Докладніше тут:
11) Що ви можете розповісти про медіа-запити?
Переглянути відповідь
Медіа-запити дозволяють адаптувати сторінки для різних типів пристроїв (принтерів, мовних браузерів тощо) або для пристроїв з певними характеристиками: ширина (width), висота (height), співвідношення ширини до висот області перегляду (aspect-ratio), орієнтація (orientation), роздільна здатність (resolution), кількість біт на кожен із колірних компонентів пристрою (color) та інші.
Докладніше тут:
12) Що ви можете розповісти про стилізацію SVG?
Переглянути відповідь
Стилізація (зміна зовнішнього вигляду) SVG-елементів аналогічна HTML, з деякими особливостями: фон призначається властивістю fill, а границі - stroke замість border. Властивості можуть бути додані як безпосередньо в теги, так і як стилі. Також можливе підключення зовнішніх стилів. Оскільки SVG заснований на XML-розмітці, стиль у .svg-документі необхідно укладати в CDATA, інакше конструкція буде конфліктувати з XML-парсерами. SVG — елементи можна групувати за допомогою тега g та застосовувати до них загальні стилі.
Докладніше тут:
13) Наведіть якийсь приклад властивості @media, що відрізняється від @media screen?
Переглянути відповідь
- @media all — значення за замовчуванням для всіх типів пристроїв.
- @media print - принтери.
- @media speech - програми для відтворення тексту вголос (у тому числі мовні браузери) та мовні синтезатори.
Докладніше тут:
14) Які моменти написання ефективного CSS ви б виділили?
Переглянути відповідь
- Код має бути валідним (коректно виконуватись).
- Коментарі мають бути докладними.
- Код має бути розбитий на логічні блоки, кожен блок потрібно відокремлювати порожнім рядком.
- Використання ієрархії полегшує читання коду.
- Властивості бажано розміщувати за абеткою.
- Каскадні таблиці (CSS) слід розміщувати в окремому файлі.
- Невикористовувані селектори потрібно видаляти.
- Потрібно використовувати там, де це можливо, універсальні властивості.
Докладніше тут:
15) Які переваги/недоліки при використанні препроцесорів CSS? Опишіть, що вам сподобалося/не сподобалося у використаних вами препроцесорах.
Переглянути відповідь
Переваги використання препроцесорів: використання додаткового функціоналу (змінних, умов, циклів, функцій тощо). Недоліки загалом виявляються при неправильному використанні цього функціоналу. Наприклад:
- Зловживання домішками (@mixin, коли один об'єкт копіює властивості іншого об'єкта). У результаті значно збільшується розмір файлу та падає загальна продуктивність.
- Використання розширення (@extend) Sass дозволяє уникнути описану вище проблему, але може виникнути інша: багаторазове розширення базового класу може призвести до отримання CSS-правила з довгим ім'ям селектора, що погано позначається на продуктивності.
- При редагуванні міксину або базового класу можна, не помітивши, змінити властивості багатьох об'єктів.
- Узагальнюючи селектори, можна занадто збільшити їхню специфічність, що ускладнить їхнє управління та підтримку.
В цілому, використання препроцесорів надає великі можливості, але потрібно ретельно зважувати всі за та проти їх використання для кожного конкретного проекту.
Докладніше тут:
16) Які існують псевдоелементи і навіщо вони використовуються.
Переглянути відповідь
Псевдоелемент CSS — це ключове слово, яке додається до селектора і дозволяє стилізувати певну частину вибраного елемента. Псевдоелементи: after, before, first-letter, first-line.
- :after — використовується для вставки потрібного контенту після вибраного елемента. Використовується з властивістю content, яка визначає вміст для вставки.
- :before — використовується для вставки потрібного контенту до вибраного елемента. Також необхідно задати властивість content із вмістом для вставки.
- :first-letter — додає до першого елемента в тексті і визначає його стиль: можна створювати буквицю (збільшену першу літеру, базова лінія якої нижче на один або кілька рядків базової лінії основного тексту) або виступаючий ініціал (збільшена велика літера, лінія якої збігається з лінією основного тексту).
- :first-line — використовується для зміни першого рядка блокового тексту
Докладніше тут:
17) Що таке блокова модель і як, за допомогою CSS, змінювати розташування блоків на сторінці в браузері?
Переглянути відповідь
Блокова модель - модель, при якій кожен елемент є прямокутним блоком і має ширину, висоту, поля, межі і відступи. Міняти розташування елементів можна за допомогою позиціонування (position), відступів (margin) та трансформування (transform).
Докладніше тут:
18) Що робить властивість *{box-sizing: border-box;}? Які у неї переваги?
Переглянути відповідь
При використанні box-sizing: border-box властивості width і height включають значення padding і border, але не відступів (margin). Тобто. об'єкт залишається з фіксованими параметрами, але зменшується місце для контенту. При використанні border-box, не потрібно турбуватися про те, скільки місця займатиме відступ чи границя, оскільки ці значення просто віднімаються від загальної ширини, а не додаються до неї
Докладніше тут:
19) За що відповідає властивість display у CSS? Наведіть кілька прикладів її використання.
Переглянути відповідь
Властивість display визначає як елемент буде показано у документі. Якщо вказати властивості display значення none, то елемент та всі його дочірні елементи будуть видалені з дерева доступності (об'єкт у якому зберігається інформація для допоміжних технологій забезпечення доступності сайту для людей з підвищеними потребами) і не сприйматимуться технологіями читання екранів. Значення властивості display — contents, видаляє елемент з дерева доступності, дочірні елементи стають дочірніми елементами наступного рівня DOM.
Докладніше тут:
20) Поясніть різницю між значеннями inline та inline-block?
Переглянути відповідь
Inline та inline-block це значення, які можна призначити властивості display. При використанні inline для будь-якого елемента він стає рядковим. Inline-block поєднує в собі характеристики як рядкових, так і блокових елементів: блоковий елемент з поведінкою, як у рядкового. Вміст таких елементів буде відображатися, як звичайно, але при цьому блоки будуть поводитися як рядкові елементи, шикуючись в одному рядку один за одним і переносячись на новий рядок лише за необхідністю.
Докладніше тут:
21) Поясніть різницю між псевдокласами "nth-of-type()" і "nth-child()"?
Переглянути відповідь
- nth-of-type() використовується для додавання стилю до елементів зазначеного типу на основі нумерації дерева елементів.
- nth-child() це псевдоклас, який використовується для вибору дочірніх елементів за допомогою числового виразу без урахування типів елементів.
Докладніше тут:
22) Поясніть різницю між relative, fixed, absolute та static - видами позиціонування елемента?
Переглянути відповідь
- Relative – положення елемента задається щодо вихідного розташування. Сам елемент стає батьківським для всіх дочірніх, абсолютно позиціонованих елементів.
- Fixed — положення елемента прив'язується до вказаних властивостей left, top, right і bottom точки на екрані і не змінює свого положення при прокручуванні сторінки.
- Absolute - положення елемента задається щодо меж батьківського елемента (той, у якого position: relative), елемент випадає з початкового контексту.
- Static - положення елемента залишається незмінним. Такий вид позиціонування ще називають нормальним. Елементи відображаються у тому порядку, як вони йдуть у вихідному коді
Докладніше тут:
23) Які CSS фреймворки ви використовували? Як би ви змінили/поліпшили їх?
Переглянути відповідь
Foundation – це адаптивний фреймворк, який дозволяє легко створювати гарні адаптивні веб-сайти, програми та електронні листи. Основа семантична, легкочитана, гнучка і повністю настроюється. Foundation досить громіздкий і складний для розробників-початківців, але автори проводять навчальні заняття.
Докладніше тут:
24) У чому різниця між розробкою адаптивних веб-сайтів та використанням “Mobile first” стратегії?
Переглянути відповідь
При адаптивній розробці головними є 3 речі: гумовий макет, медіа-вирази та гнучкі картинки. Усі розміри рекомендують вказувати у відсотках для більшої точності. Сайт має бути орієнтований не на конкретний пристрій, а на вміст. Mobile First - підхід, який передбачає спочатку розробку мобільної версії, а потім її ускладнення до десктопної. Найважливіша інформація має бути показана першою. Сайт має бути легким, для швидкого завантаження за будь-якої швидкості інтернету.
Докладніше тут:
25) Чи працювали ви з оптимізацією графіки для екранів Retina? Які методи ви використали?
Переглянути відповідь
Різні методи оптимізації графіки підходять для різних завдань:
- Для односторінкових сайтів з кількома зображеннями можна встановити параметри width і height тегу img просто розділивши навпіл розміри зображення.
- На сайтах з кількома зображеннями в контенті можна розділити розміри зображень навпіл, використовуючи Javascript.
- На сайтах з обмеженою кількістю фонових зображень можна використовувати зображення як фон з необхідними розмірами (background-size) певного div'а.
- На сайтах або в додатках, в яких застосовується background-image для елементів дизайну, але немає зображень усередині контенту device-pixel-ratio, щоб встановити потрібне співвідношення між фізичними та CSS-пікселями.
- На сайтах з великою кількістю іконок та для швидкого прототипування можна використовувати іконкові шрифти (заміна літер у шрифті на потрібні символи з подальшим відображенням на сторінці за допомогою CSS).
- На будь-яких сайтах із зображеннями в контенті можна використовувати window.devicePixelRatio для оптимізації графіки.
- Векторну графіку (SVG), що масштабується, можна використовувати на будь-яких сайтах, він підходить для іконок, логотипів і простих Векторних ілюстрацій.
Докладніше тут:
26) У яких випадках є сенс використовувати функцію translate() замість абсолютного позиціонування і навпаки? І чому?
Переглянути відповідь
У разі створення анімацій, використання 2D-трансформацій замість абсолютного позиціонування зазвичай забезпечує більшу частоту кадрів за рахунок швидшого рендерингу. Властивість position має більше відношення до верстки, а не візуальних ефектів і анімації, тому абсолютне позиціонування краще використовувати при необхідності статично розмістити контент.
Докладніше тут: