Ярослав Анциферов | Frontend-разработчик

В 1996 году W3C в спецификации CSS предложил модель, в которой ширина элемента — это ширина его content-области. Пограничные случаи этой модели начали сыпаться уже к 2002-му: — дизайнер просит блок шириной 300px с 10px padding и 1px border; — вы пишете width: 300px; padding: 10px; border: 1px solid; — браузер выдаёт блок шириной 322px и ломает макет. Это не баг — это content-box в действии. А border-box — это патч, который выправляет поведение. Давайте разберёмся детально. Что происходит внутри? —...

Весь HTML — это коробки. Не «контейнеры», не «блочные элементы», а именно коробки. CSS описывает, как эти коробки устроены физически на странице — в трёхмерном смысле: высота, ширина, толщина стенок, внутреннее пространство. Эту договорённость называют блочной моделью (CSS box model). Она стандартизирована в спецификации CSS и действует одинаково во всех современных браузерах. 📌 Представьте посылку. — Внутри — ваш товар (content). — Вокруг — воздушно-пузырьковая плёнка (padding). — Поверх — картонная коробка (border)...

Вы не просто бросаете всё в кучу. Вы кладёте носки в один ящик, рубашки — в другой, обувь — на полку. Почему? Чтобы найти нужное быстро, без копания в хаосе. Веб-страница — это тоже шкаф. А data-* атрибуты — этикетки на ящиках, которые видите только вы (и JavaScript). Браузер их игнорирует. Пользователь — не замечает. Но они делают ваш код чище, логичнее и управляемее. Это пользовательские атрибуты в HTML, которые начинаются с data-, за которым следует любое имя без заглавных букв и без двойных дефисов...

Когда вы открываете страницу в браузере, HTML-код превращается в DOM-дерево — структуру в памяти, с которой работает JavaScript и которую рисует браузер. Но не вся разметка сразу становится частью этого дерева. Иногда нам нужно заготовить фрагменты разметки, но не рендерить их прямо сейчас. Для этого и существует <template>. Тег <template> — это контейнер для «холодного» HTML. Всё, что внутри него: Этот фрагмент можно клонировать и вставлять в DOM по мере необходимости — например, при клике, при получении данных от сервера, или при создании списка элементов...

Допустим, это — кораблик из спичек. Ты пришёл в класс, поставил его на стол, и тут учитель говорит: — «А где инструкция? Кто это сделал? Из чего? Сколько времени заняло?» А ты только руками разводишь: — «Ну… вот он!» Тут-то и нужна карточка-подпись под поделкой: «Кораблик. Сделал Иван Петров (5 «Б»). Материал: спички, клей, лак. Время: 3 часа.» Без неё — просто вещь. С ней — понятный, самодостаточный элемент выставки. Вот это и есть <figure> + <figcaption> в HTML. <figure> — это «подставка» или «рамка» для чего-то важного, но необязательного для основного текста...