← Усі теми

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

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

Пройти цей тест
  1. 1.Як каскадні шари @layer впливають на пріоритет стилів?
  2. 2.Який порядок застосування у звичайних (не !important) стилів із шарів і поза шарами?
  3. 3.Що робить @scope (.card) to (.card__content) { img { ... } }?
  4. 4.Яку проблему розв'язує subgrid?
  5. 5.Які етапи проходить браузер під час оновлення кадру після зміни стилів?
  6. 6.Що таке layout thrashing (forced synchronous layout)?
  7. 7.Що дає властивість contain: layout paint (або contain: content)?
  8. 8.Як content-visibility: auto прискорює довгі сторінки?
  9. 9.Чому в <img> та <input> не працюють ::before і ::after?
  10. 10.Для чого доречний float у сучасній верстці?
  11. 11.Чому для брейкпоінтів медіазапитів часто радять em, а не px?
  12. 12.Що станеться з position: fixed-елементом, якщо в предка задано transform: translateZ(0)?
  13. 13.Чим overflow: clip відрізняється від overflow: hidden?
  14. 14.Як у Sass правильно підключати модулі зараз, коли @import оголошено застарілим?
  15. 15.Чим Dart Sass відрізняється від Node Sass?
  16. 16.Які проблеми в runtime CSS-in-JS (styled-components, Emotion) під час SSR і з React Server Components?
  17. 17.Які техніки зменшують вагу та вплив кастомного вебшрифту на продуктивність?
  18. 18.Як змінюється підхід до бандлінгу ассетів під час переходу з HTTP/1.1 на HTTP/2+?
  19. 19.Що таке performance budget?
  20. 20.Чим лабораторні дані (Lighthouse) відрізняються від польових (CrUX, RUM)?
  21. 21.Які три метрики зараз входять до Core Web Vitals?
  22. 22.Як реалізувати горизонтальну галерею з «защіпанням» слайдів без JavaScript?
  23. 23.Що дає @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }?
  24. 24.Як стилізувати внутрішню частину Web Component, якщо стилі ізольовані Shadow DOM?
  25. 25.Чим min-content, max-content і fit-content відрізняються як значення ширини?
  26. 26.Що створює новий контекст накладання навіть без position і z-index?
  27. 27.Які умови потрібні, щоб вертикальні margin батька й першої дитини схлопнулися?
  28. 28.Чому в grid-колонки 1fr довге слово чи широка таблиця може «розперти» сітку?
  29. 29.Чим oklch() зручніший за hsl() для дизайн-систем?
  30. 30.Для чого color-mix(in oklch, var(--brand) 80%, white)?
  31. 31.Що дає нативна вкладеність CSS (&)?
  32. 32.Для чого використовують CSS Anchor Positioning?
  33. 33.Що таке View Transitions API?
  34. 34.Що мінімально потрібно для доступного модального вікна?
  35. 35.Що робить атрибут inert?
  36. 36.Який мінімальний контраст тексту вимагає WCAG рівня AA для звичайного тексту?
  37. 37.Чим відрізняються рівні відповідності WCAG A, AA і AAA?
  38. 38.Коли потрібні ARIA-атрибути, а коли краще обійтися без них?
  39. 39.Що робить text-wrap: balance у заголовка?
  40. 40.Що таке HTML-landmarks і навіщо вони потрібні?
  41. 41.Яка проблема доступності типова для SPA під час зміни «сторінки» на клієнті?
  42. 42.Чим Tailwind v4 принципово відрізняється від v3?
  43. 43.Як у Tailwind v4 зробити темну тему за класом .dark, а не за системним налаштуванням?
  44. 44.Ви будуєте CSS-архітектуру багатомовного сайту з арабською (RTL) і японською. Що важливо закласти?
  45. 45.Який підхід до адаптивної типографіки найкраще враховує користувацький масштаб шрифту?
  46. 46.Таблиця на 10 000 рядків гальмує під час скролу. Яке рішення найефективніше?
  47. 47.Галерея з 50 відео з YouTube завантажується дуже повільно. Що зробити насамперед?
  48. 48.Чим preload відрізняється від prefetch у <link rel>?
  49. 49.Чим defer відрізняється від async у <script>?
  50. 50.Дизайнер наполягає на повністю кастомних стилях усіх елементів складної форми. Який підхід розумний?
  51. 51.Що означає font-size: 5cqi усередині контейнерного запиту?
  52. 52.Чому помилки краще стилізувати через :user-invalid, а не :invalid?
  53. 53.Що дає атрибут popover?
  54. 54.Яку проблему розв'язує @starting-style?
  55. 55.Що дають scroll-driven анімації (animation-timeline: scroll())?
  56. 56.Що робить color: light-dark(#111, #eee)?
  57. 57.Що потрібно, щоб hyphens: auto працював правильно?
  58. 58.Навіщо в таблицях і таймерах використовувати font-variant-numeric: tabular-nums?
  59. 59.Головна перевага варіативного шрифту?
  60. 60.Як size-adjust у запасному @font-face зменшує зсув макета?
  61. 61.Що робить fetchpriority="high" у головного зображення?
  62. 62.Навіщо додавати isolation: isolate кореню компонента?
  63. 63.Чому запобігає overscroll-behavior: contain на прокручуваному тілі модалки?
  64. 64.Якому зсуву макета запобігає scrollbar-gutter: stable?
  65. 65.Що відбувається з вашими кольорами в режимі високої контрастності Windows (forced colors)?
  66. 66.Що таке skip link?
  67. 67.Як правильно пов'язати повідомлення про помилку з полем введення?
  68. 68.Чого вимагає критерій WCAG «Reflow»?
  69. 69.Чого вимагає WCAG 2.2 «Target Size (Minimum)»?
  70. 70.Навіщо збирачі випускають CSS-файли з хешем вмісту (app.3f9a1c.css)?
  71. 71.Навіщо ділити дизайн-токени на примітивний і семантичний шари?
  72. 72.Навіщо використовувати dir="auto" для контенту користувачів, наприклад коментарів?
  73. 73.Чому для лінивого завантаження й ефектів появи краще IntersectionObserver, а не слухачі scroll?
  74. 74.Чому варто уникати @import у звичайних CSS-файлах?
  75. 75.Що вибирає li:nth-child(2 of .visible)?