Модуль 6 · Урок 23
CSS cascade, box model і responsive layout
Коли style «не працює», browser уже обрав winning declaration і computed value. QA читає cascade, inheritance, box model та layout context, а не виправляє symptom випадковим `!important`.
Від declarations до used layout
Box model і overflow
Content box оточують padding, border і margin. За `box-sizing: content-box` declared width не включає padding/border; `border-box` включає їх. Overflow може походити від fixed/min-width, unbreakable content, positioned child, transform або grid track — `overflow-x:hidden` лише маскує root cause.
| Evidence | Питання |
|---|---|
| Element geometry | Який node збільшує `scrollWidth`? |
| Computed/min/max | Що реально обмежує width? |
| Box model | Чи враховані padding/border? |
| Content | Чи може long token/image/table wrap/shrink? |
Flex, Grid і responsive contracts
Flex розподіляє space по main/cross axes; Grid задає rows/columns і tracks. Перевіряйте content growth, min-content constraints, wrapping, alignment та order semantics. Media queries мають відображати design breakpoints, а не конкретну модель телефона.
DevTools experiment не є fix
Toggle declaration, змініть value або force state, щоб перевірити hypothesis. Reload повертає original page, якщо не налаштовані overrides/workspace. У finding запишіть original winner, computed value, local experiment та production acceptance.
Практика
Заповніть `css-cascade-layout.csv` для desktop/mobile/dark/light: declared rules, winner, computed, geometry, effect, experiment і acceptance.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.