← Усі теми

Питання на співбесіді з верстки (Middle) з відповідями

75 запитань для співбесіди з теми Верстка (Middle) - з правильними відповідями, поясненнями й посиланнями на документацію.

Пройти цей тест
  1. 1.Яка специфічність селектора nav#main .item:hover > a::before?
  2. 2.Як перебити правило з !important зі сторонньої бібліотеки, не чіпаючи її код?
  3. 3.На що розгортається скорочення flex: 1?
  4. 4.Чим flex-basis відрізняється від width у flex-елемента в рядку (flex-direction: row)?
  5. 5.Усередині flex-елемента довгий текст із text-overflow: ellipsis не обрізається, а розпирає колонку. Як виправити?
  6. 6.Чим repeat(auto-fill, minmax(200px, 1fr)) відрізняється від repeat(auto-fit, minmax(200px, 1fr))?
  7. 7.Як у Grid задати розкладку «шапка вгорі, сайдбар і контент посередині, підвал унизу» через іменовані області?
  8. 8.Що таке неявна сітка (implicit grid)?
  9. 9.Що робить place-items: center у grid-контейнера?
  10. 10.Коли доречніший Grid, а коли Flexbox?
  11. 11.Що поверне font-size: clamp(1rem, 2.5vw, 2rem) на екрані завширшки 1000px (1rem = 16px)?
  12. 12.Навіщо потрібні логічні властивості на кшталт margin-inline-start замість margin-left?
  13. 13.Чим transition відрізняється від animation?
  14. 14.Які властивості найкраще анімувати для плавності 60 FPS?
  15. 15.Чому для анімації переміщення transform: translate() часто кращий, ніж зміна left у position: absolute?
  16. 16.Як правильно використовувати will-change?
  17. 17.Що таке Critical CSS?
  18. 18.Що вимірює метрика CLS (Cumulative Layout Shift)?
  19. 19.Який прийом найкраще запобігає зсуву макета від зображень, що завантажуються?
  20. 20.Що робить font-display: swap в @font-face?
  21. 21.Навіщо в <img> атрибути srcset і sizes?
  22. 22.Коли потрібен <picture>, а не просто <img srcset>?
  23. 23.Що робить атрибут loading="lazy" в <img> і коли його НЕ варто ставити?
  24. 24.Що робить object-fit: cover в <img> із заданими width і height?
  25. 25.Яка специфічність у :where(.card, #hero) p?
  26. 26.Що вибере селектор .card:has(img)?
  27. 27.Чим CSS-змінні (--x) принципово відрізняються від змінних Sass ($x)?
  28. 28.Що таке контекст накладання (stacking context) і чому z-index: 9999 може «не працювати»?
  29. 29.position: sticky не працює, хоча top: 0 задано. Яка причина найімовірніша?
  30. 30.Що таке блоковий контекст форматування (BFC) і як його створити?
  31. 31.Що нового в синтаксисі @media (width >= 768px)?
  32. 32.Для чого контейнерні запити @container?
  33. 33.Чому на мобільних height: 100vh може виявитися вищим за видиму область і як це виправити?
  34. 34.Що означає значення currentColor?
  35. 35.Чим відрізняються значення initial, inherit і unset?
  36. 36.Як за БЕМ правильно назвати клас заголовка всередині блока card в «акцентному» варіанті?
  37. 37.Як CSS Modules розв'язують проблему конфліктів імен класів?
  38. 38.Чим :focus-visible кращий за :focus для стилізації обведення фокуса?
  39. 39.Що робить tabindex="-1"?
  40. 40.Коли виправданий aria-label?
  41. 41.Як у Tailwind застосувати довільне значення, якого немає в темі?
  42. 42.Чому в Tailwind не можна збирати ім'я класу як ` bg-${color}-500 `?
  43. 43.Як у Tailwind v4 додати свій колір brand, щоб працювали bg-brand, text-brand тощо?
  44. 44.Для чого в Tailwind потрібні group і peer?
  45. 45.У React-компоненті класи приходять ззовні: className={"p-2 " + props.className}, і передають p-4. Який padding вийде?
  46. 46.Для чого потрібна директива @apply у Tailwind і чому нею не зловживають?
  47. 47.Як урахувати користувачів, яким анімації завдають дискомфорту?
  48. 48.Як зробити двоколонковий макет, де сайдбар має фіксовану ширину, а контент займає решту?
  49. 49.Який формат зображень зазвичай дає найкраще стискання для фотографій за підтримки сучасними браузерами?
  50. 50.Як правильно підключити стилі лише для друку?
  51. 51.Яка специфічність :is(#hero, .card) p?
  52. 52.Що дає aspect-ratio: 16 / 9 контейнеру відео?
  53. 53.Що означає inset: 0 в абсолютно позиціонованого оверлею?
  54. 54.Що робить grid-auto-flow: dense?
  55. 55.Навіщо додавати flex-shrink: 0 іконці у flex-рядку з довгим текстом?
  56. 56.Як притиснути останній елемент flex-навбару до правого краю?
  57. 57.Що робить object-position: top разом з object-fit: cover?
  58. 58.Для чого потрібен @supports?
  59. 59.Як на чистому CSS слідувати системній темній темі користувача?
  60. 60.Що робить color-scheme: light dark у :root?
  61. 61.Для чого потрібен accent-color?
  62. 62.Що вибирає .field:focus-within?
  63. 63.Як змінити колір маркерів списку, не чіпаючи текст?
  64. 64.Як CSS може автоматично нумерувати заголовки на кшталт «Step 1», «Step 2»?
  65. 65.Як обрізати текст до трьох рядків із трикрапкою?
  66. 66.Звідки невеликий проміжок під <img> усередині <div>?
  67. 67.Що змінює transform-origin?
  68. 68.Чому transition: all 0.3s вважається поганою звичкою?
  69. 69.Навіщо додавати aria-hidden="true" декоративній іконці поруч із підписом кнопки?
  70. 70.Як зробити, щоб скринрідер оголосив «Saved» після асинхронної дії, не переміщуючи фокус?
  71. 71.Що потрібно, щоб <div role="button"> поводився як справжня кнопка?
  72. 72.Як приховати текстовий підпис візуально, але залишити його для скринрідерів?
  73. 73.Який alt має бути в посилання на головну, що складається лише з іконки?
  74. 74.Як у Tailwind стилізувати елемент за атрибутом data-state?
  75. 75.Що робить srcset="logo.png 1x, logo@2x.png 2x"?