Frontend

Подход к вёрстке, при котором под несколько заранее выбранных диапазонов ширины экрана готовят отдельные раскладки страницы, переключаемые на заданных границах.

Плавное изменение свойств элемента во времени — положения, размера, цвета, прозрачности, — которое создаёт на странице эффект движения или перехода между состояниями.

Пара «имя — значение» в открывающем теге HTML-элемента, которая задаёт его настройки: адрес ссылки, путь к картинке, тип поля, идентификатор или служебные данные.

Воображаемая горизонтальная линия, на которой стоят буквы строки; по ней браузер по умолчанию выравнивает текст, картинки и другие строчные элементы.

Правило CSS, по которому каждый элемент представляется прямоугольником из четырёх слоёв: содержимое, внутренний отступ, рамка и внешний отступ.

Элемент, который в обычном потоке страницы начинается с новой строки и по умолчанию растягивается на всю доступную ширину родителя, выстраиваясь с соседями сверху вниз.

Колонка сбоку от основного содержимого страницы, где размещают навигацию по разделу, фильтры каталога, оглавление, формы подписки и другие вспомогательные блоки.

Самый внешний прямоугольник блочной модели: рамка элемента вместе с его внешними отступами, то есть всё пространство, которое элемент занимает в раскладке.

Программа, которая по адресу загружает страницу с сервера, собирает из HTML, CSS и JavaScript изображение на экране и выполняет действия пользователя на сайте.

Ядро браузера, которое разбирает HTML и CSS, рассчитывает расположение элементов и рисует страницу; на одном движке могут работать разные браузеры.

Набор жёстких ограничений на вес страницы, число запросов или время загрузки, которые команда договаривается не превышать при развитии сайта.

Программа или онлайн-сервис, который сверяет HTML, CSS, JSON, микроразметку и другие форматы с их спецификацией и выдаёт список ошибок с номерами строк.

Код, в котором нет нарушений синтаксиса и обязательных правил своего стандарта: теги вложены разрешённым образом, обязательные атрибуты на месте, значения допустимы.

Набор связанных между собой веб-страниц и файлов, которые открываются в браузере по одному доменному имени и объединены общей навигацией и назначением.

Общие открытые правила, по которым устроены HTML, CSS, JavaScript, HTTP и другие технологии веба, чтобы один и тот же сайт одинаково работал в разных браузерах.

Сторонние библиотеки и пакеты, которые проект подключает как готовые зависимости и хранит отдельно от собственного кода — обычно в папках node_modules или vendor.

Приставка вида -webkit-, -moz- или -ms- перед названием CSS-свойства, которой браузер помечал свою экспериментальную или нестандартную реализацию.

CSS-свойство vertical-align, которое сдвигает строчный элемент относительно базовой линии строки или прижимает содержимое ячейки таблицы к верху, центру или низу.

Элемент интерфейса в виде ряда заголовков-ярлыков, где выбор одного ярлыка показывает связанную с ним панель, а остальные панели в той же области скрываются.

Обычное рабочее состояние элемента формы, в котором он принимает фокус и ввод, реагирует на нажатия и передаёт своё значение при отправке формы.

Действие, которое переводит элемент управления, настройку или функцию в рабочее состояние: кнопка становится нажимаемой, опция начинает действовать.

Принцип размещения одних конструкций внутри других — тегов в тегах, CSS-правил в правилах, компонентов в компонентах, — который выражает иерархию и область действия.

Характеристика элемента, правила, функции или структуры данных, которые находятся внутри другого такого же или родственного объекта и подчинены ему.

Свойство CSS margin, которое задаёт прозрачное расстояние снаружи от рамки элемента и отодвигает от него соседние блоки и края родителя.

Размеры, которые элемент имеет сам по себе, по своему содержимому: собственные ширина и высота картинки или видео, ширина текста без переносов, пропорции файла.

Пространство между содержимым элемента и его рамкой: оно входит в сам элемент, закрашивается его фоном и отодвигает текст и вложенные блоки от краёв.

Короткое пояснение, которое появляется рядом с кнопкой, иконкой или полем при наведении курсора или фокусе с клавиатуры и исчезает, когда взаимодействие закончилось.

Момент, когда браузер уже показал текст и блоки страницы, но ещё не применил к ним CSS, и посетитель на долю секунды видит голую разметку, после чего вёрстка перестраивается.

Элемент интерфейса, который в свёрнутом виде занимает одну строку, а по щелчку или нажатию клавиши раскрывает перечень вариантов, пунктов меню или фильтров.

CSS-свойство, которое задаёт, как строки текста и другое строчное содержимое располагаются по горизонтали внутри блока: по краю, по центру или по ширине.

Размер элемента по вертикали и CSS-свойство height, которое его задаёт. По умолчанию высота блока вычисляется по содержимому, но её можно зафиксировать, ограничить или привязать к экрану.

Текст, символы или картинки, которые добавляет таблица стилей через псевдоэлементы ::before и ::after и свойство content, не трогая HTML-разметку страницы.

Проверка двух структур данных на равенство по содержимому: сравниваются не ссылки на объекты, а все их поля и вложенные значения на любой глубине.

Плавный переход между двумя или несколькими цветами, который браузер рисует сам как CSS-изображение: линейный, радиальный или конический, без загрузки файла.

Рамка, которая проходит между внутренним и внешним отступами элемента; для каждой её стороны отдельно задаются толщина, стиль линии и цвет.

HTML-элемент fieldset, который объединяет связанные поля формы в именованный блок; общую подпись группы задаёт вложенный тег legend.

Ядро программы, которое берёт на себя основную работу — отрисовку страниц, исполнение кода, хранение данных, — а остальные части системы пользуются им через готовый интерфейс.

Проектирование того, как цифровой продукт выглядит и как с ним взаимодействуют: расположение элементов, их внешний вид, состояния и реакции на действия пользователя.

Тип значения в CSS — число с единицей измерения вроде 16px, 1.5rem или 50vw. Длиной задают ширину, высоту, отступы, толщину рамок, размер шрифта и смещения.

Практика создания сайтов и приложений, которыми могут пользоваться люди с нарушениями зрения, слуха, моторики и восприятия — с клавиатуры, экранным диктором, при увеличении.

Элемент, вложенный непосредственно в другой элемент — на один уровень ниже него в дереве документа. Внешний элемент по отношению к нему называют родительским.

Относительная единица CSS, равная размеру шрифта: в свойстве font-size она отсчитывается от шрифта родителя, а во всех остальных свойствах — от шрифта самого элемента.

Относительная единица CSS, равная размеру шрифта корневого элемента html. В отличие от em, она не зависит от вложенности и означает одно и то же во всём документе.

Обозначение после числа в CSS, которое сообщает браузеру, в чём измерено значение: в пикселях, долях шрифта или экрана, градусах, секундах или долях свободного места сетки.

Жест на сенсорном экране или тачпаде, при котором два пальца сводят или разводят, чтобы уменьшить или увеличить страницу, карту или фотографию.

Название HTML-страницы в теге title внутри head. Его показывают вкладка браузера, закладки и история, а поисковые системы чаще всего берут его заголовком сниппета.

Условное CSS-правило @supports, которое применяет вложенные стили только в браузерах, понимающих указанное свойство, значение или селектор.

То, что стоит после двоеточия в CSS-декларации и определяет результат свойства: цвет, длина, число, ключевое слово, строка, функция или их сочетание.

Часть адреса после символа #, которая указывает на место внутри страницы или состояние веб-приложения; браузер обрабатывает её сам и на сервер не отправляет.

Механизм CSS, с помощью которого разработчик обещает браузеру, что содержимое элемента не влияет на остальную страницу, и тот может пересчитывать и перерисовывать его отдельно.

Шрифт, в котором вместо букв нарисованы пиктограммы интерфейса: значок вставляют как символ, а его размером и цветом управляют свойствами текста.

HTML-элемент figure, который оформляет самостоятельный фрагмент — изображение, схему, листинг кода, цитату или таблицу — вместе с его подписью в теге figcaption.

Элемент интерфейса, который показывает, какая часть длительной операции или многошагового процесса уже выполнена: загрузки файла, оформления заказа, прохождения опроса.

Подготовка программы или сайта к работе на разных языках и в разных регионах: тексты выносят из кода, а даты, числа, валюты и направление письма форматируют по правилам локали.

Происхождение CSS-правила: стили браузера по умолчанию, пользовательские настройки или стили автора сайта. От источника зависит, какое правило победит при конфликте.

Анимация, которая описывается набором ключевых состояний — кадров с заданными значениями свойств, — а промежуточные значения между ними браузер вычисляет сам.

Этап стандартизации в W3C, на котором спецификация считается функционально завершённой и ждёт подтверждения от реализаций в браузерах и других программах.

Файл, который связывает каждую позицию в собранном или минифицированном коде с местом в исходниках, чтобы при отладке видеть оригинальные файлы и строки.

Алгоритм, по которому браузер выбирает одно итоговое значение свойства, когда к элементу подходит несколько противоречащих друг другу CSS-правил.

Сделанный или переделанный под конкретный проект вместо стандартного готового варианта — от английского custom. Так говорят о вёрстке, компонентах, темах, полях.

Подстройка расстояния между конкретной парой букв, чтобы промежутки в слове выглядели на глаз одинаковыми, а не механически равными.

Всё, что выполняется на устройстве посетителя: браузер разбирает HTML, применяет CSS, запускает JavaScript и показывает интерфейс без обращения к серверу.

Нажатие и отпускание основной кнопки мыши на элементе, а также событие click, которое браузер генерирует в ответ — в том числе от тапа и клавиатуры.

Опорная точка анимации, в которой задано состояние элемента — положение, цвет, прозрачность; промежуточные кадры браузер достраивает сам.

Элемент интерфейса, который запускает действие: отправляет форму, открывает окно, добавляет товар в корзину. В HTML для этого есть тег button.

Символ между простыми селекторами CSS, который задаёт родственную связь элементов: потомок, прямой ребёнок, соседний или любой следующий брат.

Пояснения внутри исходного кода, которые браузер, интерпретатор или компилятор пропускают: они нужны людям, читающим и поддерживающим код.

Заключительный этап отрисовки страницы: браузер складывает заранее подготовленные слои в один кадр и выводит его на экран, часто с помощью видеокарты.

Часть страницы, которую браузер отрисовывает отдельно и хранит как самостоятельное изображение, чтобы двигать и менять его прозрачность без перерисовки остального.

Часть браузерного движка, которая собирает кадр из готовых слоёв и выводит его на экран; в Chromium она работает в отдельном потоке, независимо от JavaScript.

Самостоятельный кусок интерфейса — кнопка, карточка товара, модальное окно, — у которого есть своя разметка, оформление, состояния и поведение и который переиспользуется на разных страницах.

Этап отрисовки, на котором браузер вычисляет размеры и координаты каждого блока страницы по стилям, содержимому и ширине окна.

Правило CSS @container, которое меняет оформление элемента в зависимости от размера его контейнера, а не всего окна браузера.

Изолированная группа элементов, внутри которой порядок наложения по оси z вычисляется отдельно; снаружи вся группа ведёт себя как один слой.

Область страницы, внутри которой действует свой набор правил раскладки: блочный, строчный, флекс- или грид-контекст. Он определяет, как дети располагаются и взаимодействуют.

Линия вокруг элемента, которая рисуется поверх соседей и не занимает места в раскладке; браузер по умолчанию показывает ею фокус клавиатуры.

Форма, задаваемая свойством clip-path, по которой элемент обрезается: всё, что снаружи фигуры, становится невидимым и перестаёт реагировать на курсор.

Самый верхний элемент дерева документа, от которого начинаются все остальные; в HTML-странице это тег html, в CSS к нему обращаются через :root.

Группа HTML-элементов — body, blockquote, details, dialog, fieldset, figure и td, — заголовки внутри которых по замыслу стандарта не должны влиять на структуру остальной страницы.

Правило, по которому логическое выражение перестаёт вычисляться, как только результат ясен: у «И» — на первом ложном операнде, у «ИЛИ» — на первом истинном.

Отношение физических пикселей экрана к CSS-пикселям: при значении 2 на один логический пиксель вёрстки приходится квадрат два на два точки матрицы.

Свойство сайта одинаково работать и выглядеть приемлемо во всех браузерах, которые реально используют его посетители, с учётом различий движков и версий.

Способность программы или сайта работать на разных операционных системах и типах устройств — Windows, macOS, Linux, Android, iOS — из одной кодовой базы.

Подпись к группе связанных полей формы, заданная тегом legend внутри fieldset, например «Способ доставки» над набором переключателей.

Приём, при котором картинки, видео, фреймы или код загружаются не сразу, а когда приближаются к видимой части экрана или действительно понадобятся.

Адаптация сайта или приложения к конкретному языку и региону: перевод текстов, форматы дат и чисел, валюта, склонения, изображения и юридические детали.

Статичное изображение будущей страницы или экрана, максимально близкое к итоговому виду: с цветами, шрифтами, картинками и реальными текстами.

Увеличение или уменьшение элемента функцией scale() или свойством scale: блок меняет видимый размер, но соседние элементы остаются на своих местах.

Набор чисел, которым описывается геометрическое преобразование элемента: сдвиг, поворот, масштаб и наклон сразу. В CSS её задают функциями matrix() и matrix3d().

Условие в CSS, при котором блок правил применяется только для подходящей среды вывода: ширины окна, типа устройства, способа ввода или настроек пользователя.

Отдельная характеристика среды, которую проверяет медиазапрос: ширина окна, ориентация, плотность экрана, тип указателя или выбранная пользователем тема.

Свойство CSS letter-spacing, которое равномерно добавляет или убирает расстояние между всеми символами строки; в типографике это называют трекингом.

Свойство CSS word-spacing, которое добавляет к обычному пробелу между словами дополнительное расстояние или уменьшает его.

Высота строки текста, которую задаёт свойство line-height: от неё зависят расстояние между строками абзаца и вертикальное положение текста внутри блока.

Текстовая подпись к полю формы, программно привязанная к нему тегом label: она называет поле, озвучивается экранными дикторами и расширяет область клика.

Группа показателей, по которым судят, как быстро страница становится видимой, отзывчивой и стабильной для человека, а не только когда браузер закончил загрузку.

Именованный блок стилей или кода, который объявляют один раз и подключают в разных местах, при необходимости передавая параметры. Чаще всего встречается в Sass и Less.

Уменьшенная копия изображения, видео или документа, которую показывают в списках и галереях вместо оригинала, чтобы страница загружалась быстрее.

Модуль CSS, который разливает один поток текста или элементов по нескольким колонкам, как в газетной полосе: содержимое заполняет первую колонку и переходит в следующую.

Элемент формы textarea для ввода текста в несколько строк — комментария, сообщения, адреса доставки. Сохраняет переносы строк, которые набрал пользователь.

Режим, включаемый атрибутом multiple, в котором список select, поле выбора файлов или поле e-mail принимает сразу несколько значений.

Окно поверх страницы, которое блокирует работу с остальным интерфейсом, пока пользователь не выполнит действие или не закроет его.

Основная конструкция таблицы стилей: селектор и следующий за ним блок в фигурных скобках с объявлениями «свойство: значение», которые применяются к найденным элементам.

Трансформация CSS, которая перекашивает элемент: прямоугольник превращается в параллелограмм, потому что точки смещаются вдоль одной оси тем сильнее, чем дальше они по другой.

Принцип, при котором данные после создания не меняют на месте: чтобы получить другое состояние, создают новую копию, а старая остаётся прежней.

Практика, при которой разработчики часто вливают изменения в общую ветку, а сервер после каждого коммита автоматически собирает проект и прогоняет проверки.

CSS-свойство opacity, которое задаёт прозрачность элемента целиком — вместе с текстом, рамками и всеми вложенными блоками — числом от 0 до 1.

Характеристика элемента, цвета или слоя, сквозь который ничего не видно. В веб-разработке слово также обозначает данные, содержимое которых скрыто от скрипта.

Прямоугольная часть окна браузера, в которой сейчас видна страница. От её размеров зависят медиазапросы, единицы vw и vh и масштаб страницы на телефоне.

Способ обойти ошибку или ограничение, не устраняя саму причину: проблема остаётся, но перестаёт мешать работе. Обычно задумывается как временная мера.

Данные, код или состояние, которыми одновременно пользуются несколько частей системы: компоненты страницы, вкладки браузера, потоки или разные сайты.

Наименьший прямоугольник со сторонами, параллельными осям, в который целиком помещается элемент. По нему вычисляют положение и размеры блока на экране.

Синтаксис JavaScript с троеточием перед последним параметром функции: все аргументы, переданные сверх объявленных, собираются в настоящий массив.

Подход к вёрстке, при котором макет плавно тянется под любую ширину окна: колонки, картинки и шрифты меняют размер непрерывно, а не переключаются между заготовками.

Состояние элемента управления, в котором он виден, но не принимает ввод: на него нельзя нажать, перейти клавишей Tab, а его значение не уходит при отправке формы.

Действие, после которого элемент интерфейса или функция перестаёт реагировать на пользователя: кнопку нельзя нажать, поле — изменить, раздел — использовать.

Программа или встроенный инструмент, который умеет приостановить выполнение кода в выбранной строке и показать значения переменных, стек вызовов и состояние программы в этот момент.

Синтаксис CSS, который строит новый цвет из каналов другого, указанного через from: можно сделать оттенок темнее, добавить прозрачность или сдвинуть тон без ручного подбора значений.

Момент, когда браузер собирает значения полей формы и передаёт их обработчику: на сервер по адресу из action или в скрипт, который перехватил событие submit.

CSS-свойство clear, которое не даёт элементу встать рядом с плавающими (float) блоками и опускает его ниже них — слева, справа или с обеих сторон.

Разбиение длинного списка — товаров, статей, результатов поиска — на страницы с навигацией «1, 2, 3… дальше», чтобы не загружать всё сразу.

Типовое решение часто встречающейся задачи в интерфейсе — как показать путь по сайту, разбить форму на шаги или скрыть второстепенный текст, — которое пользователи уже умеют распознавать.

Элемент формы input type="radio" для выбора ровно одного варианта из группы: отметка одного пункта автоматически снимает отметку с остальных.

Смена состояния между двумя (реже несколькими) фиксированными вариантами одним действием: включить и выключить, раскрыть и свернуть, показать и скрыть.

Единицы длины CSS, у которых нет постоянного размера: их значение пересчитывается от шрифта, окна браузера или контейнера, в котором стоит элемент.

Трансформация CSS, которая сдвигает элемент по горизонтали, вертикали или в глубину, не меняя его места в потоке и не задевая соседние блоки.

Этап работы браузера, на котором он заново вычисляет размеры и координаты элементов страницы после изменений, влияющих на геометрию (reflow, или layout).

Этап, на котором браузер заново закрашивает пиксели элемента после изменения его вида — цвета, фона, тени, обводки, — когда размеры и положение остались прежними.

Этап, на котором браузер заново определяет, какие CSS-правила подходят элементам и какие итоговые значения свойств у них получаются, после изменения классов, атрибутов или DOM.

Способ работы с интерфейсом, при котором объект захватывают мышью или пальцем, переносят и отпускают в нужном месте: сортируют список, загружают файл, двигают блок.

Структура данных, которая при изменении не перезаписывает себя, а порождает новую версию. Все прежние версии остаются доступными и неизменными.

Наименьшая точка изображения или экрана, у которой есть свой цвет. Из сетки таких точек складываются фотографии, интерфейсы и любая растровая графика.

Подход, при котором интерфейс сразу делают полнофункциональным для современных браузеров, а затем следят, чтобы в старых или урезанных средах главное продолжало работать.

Характеристика экрана или изображения: сколько физических точек приходится на единицу длины. Чем она выше, тем мельче точки и чётче картинка при том же размере.

Отношение физических пикселей экрана к CSS-пикселям в браузере — число вроде 1, 1,5, 2 или 3. В JavaScript оно доступно как window.devicePixelRatio.

Способ сравнить два объекта или массива только по первому уровню: совпадают ли ключи и строго ли равны значения, без обхода вложенных структур.

Нижняя область страницы или раздела с контактами, служебной навигацией, правовой информацией и копирайтом. В HTML её размечают тегом footer.

Слой между страницей и элементом верхнего уровня — модальным диалогом, поповером или блоком в полноэкранном режиме. В CSS его оформляют псевдоэлементом ::backdrop.

HTML-элемент figcaption — подпись или легенда к содержимому блока figure: фотографии, схеме, фрагменту кода, цитате. Связывает текст с иллюстрацией на уровне разметки.

CSS-механизм, который решает, остаётся ли элемент в обычном потоке или встаёт по координатам относительно предка, окна браузера или области прокрутки. Задаётся свойством position.

Элемент формы input, в который пользователь вводит или выбирает данные. Атрибут type задаёт формат: текст, email, телефон, число, дата, флажок, файл и другие.

Подвижная часть элемента управления, которую тянут мышью или пальцем: бегунок полосы прокрутки или «ручка» слайдера диапазона input type="range".

Состояние, в котором страница или отдельный её элемент — видео, галерея, игра — занимает весь экран, а панели браузера и операционной системы скрыты.

Элемент интерфейса у края прокручиваемой области: показывает, какая часть содержимого сейчас видна, и позволяет перемещаться по ней мышью.

Переменные CSS: значения с именем вида --accent, которые объявляют один раз и подставляют функцией var(). Они наследуются, подчиняются каскаду и меняются прямо в браузере.

Упразднённая стадия процесса W3C: рабочая группа объявляла спецификацию почти готовой и в последний раз собирала замечания других групп и публики.

Режим отрисовки, который совпадает со стандартным во всём, кроме одной старой особенности — расчёта высоты строк с картинками в ячейках таблиц. Его включают переходные DOCTYPE.

Предпоследняя стадия стандарта W3C: техническая работа и проверка реализаций завершены, документ отправлен на голосование членов консорциума перед публикацией рекомендации.

Символы, которые не оставляют видимого следа, но разделяют текст и код: пробел, табуляция, перевод строки, неразрывный пробел и другие.

Способ узнать, что данные изменились: фреймворк хранит прежние значения и периодически сравнивает их с текущими, а найдя разницу, обновляет интерфейс.

Строка кода, которая фиксирует ожидание «здесь должно быть так» и сообщает об ошибке, если условие ложно. Используется в тестах и для контроля внутренних допущений программы.

Подход к разработке, при котором сначала делают базовую версию, работающую везде, а затем слоями добавляют оформление и интерактивность там, где браузер их поддерживает.

Насколько быстро страница загружается, показывает содержимое и откликается на действия пользователя, и насколько бережно она расходует процессор, память и трафик устройства.

Перемещение видимой области по содержимому, которое не помещается в окно или блок целиком: колесом мыши, свайпом, клавишами или перетаскиванием полосы прокрутки.

Значение CSS со знаком %, которое считается как доля от другой величины. От какой именно — зависит от свойства: от размеров родителя, шрифта или самого элемента.

Часть CSS-селектора с одним двоеточием, которая выбирает элемент по состоянию или положению: при наведении, в фокусе, первым в списке, отмеченным, с ошибкой ввода.

Часть CSS-селектора с двойным двоеточием, которая обращается к фрагменту элемента или создаёт блок, которого нет в HTML: ::before, ::after, ::first-letter, ::placeholder.

Опубликованная на w3.org версия спецификации W3C, которую рабочая группа выносит на обсуждение. Её содержимое ещё может сильно измениться, а отдельные части — исчезнуть.

Воплощение спецификации, интерфейса или требования в работающем коде. В веб-стандартах так говорят о поддержке возможности конкретным браузером: «свойство реализовано в Firefox».

Самая свежая рабочая версия спецификации, которую редакторы правят непрерывно, без формальной публикации. Отражает текущее состояние обсуждений, но официального статуса не имеет.

Сервер-хранилище, где публикуют библиотеки с версиями и описаниями и откуда менеджер пакетов скачивает зависимости проекта. Самый известный во фронтенде — реестр npm.

Режим системы или браузера, в котором цвета сайта заменяются ограниченной палитрой, выбранной пользователем, обычно высококонтрастной. Самый известный пример — контрастные темы Windows.

Правило, по которому цвет элемента комбинируется с цветами того, что лежит под ним: умножение, осветление, наложение и другие. В CSS задаётся свойствами mix-blend-mode и background-blend-mode.

Режим, в котором браузер намеренно воспроизводит особенности старых браузеров конца 1990-х, чтобы не сломать древние страницы. Включается, если у документа нет DOCTYPE или он устаревший.

Запасное значение, ресурс или поведение, которое срабатывает, когда основное недоступно: браузер не понимает новое свойство, шрифт не загрузился, скрипт завершился с ошибкой.

Финальный статус документа в процессе стандартизации W3C: спецификация прошла все проверки, согласована участниками консорциума и рекомендована к реализации.

Процесс, в котором браузер превращает HTML, CSS и JavaScript в изображение на экране: строит дерево элементов, считает стили и размеры, рисует и собирает слои.

Любой файл, который страница загружает помимо HTML: изображения, шрифты, иконки, таблицы стилей, скрипты, видео. В англоязычной среде их называют assets.

Элемент, внутри которого непосредственно вложен другой элемент. В дереве DOM у каждого узла, кроме корневого, ровно один родитель.

Свод правил, по которым команда пишет код, оформляет интерфейс и тексты: отступы и именование, цвета и шрифты, вид компонентов, термины и тон.

Набор CSS-правил в начале таблицы стилей, который убирает или выравнивает оформление, заданное браузером по умолчанию, чтобы вёрстка начиналась с предсказуемой базы.

Жест, при котором палец быстро проводят по сенсорному экрану в одном направлении: так листают галереи, переключают вкладки, смахивают уведомления и открывают меню.

CSS-свойство, которое задаёт тип бокса элемента: как он ведёт себя среди соседей (блок или строка) и как раскладывает своих детей (обычный поток, flex, grid).

Механизм, который автоматически держит интерфейс в соответствии с данными: изменилось значение в коде — обновилась страница, а в двустороннем варианте работает и обратное.

Часть CSS-правила перед фигурными скобками, которая указывает, к каким элементам применить стили: по тегу, классу, атрибуту, состоянию или положению в документе.

Метка внутри правила @keyframes, которая указывает момент анимации в процентах (0%, 50%, 100%) или словами from и to; к этому моменту привязан набор значений свойств.

Смысл, который несёт HTML-элемент или атрибут: чем является этот фрагмент страницы для браузера, поисковика и экранного диктора, независимо от того, как он выглядит.

Подход к вёрстке, при котором структура страницы описана тегами по их назначению: шапка, навигация, основное содержимое, статья, боковая колонка, подвал, заголовки по уровням.

Интерфейс, которым управляют пальцами на экране: касаниями, свайпами, щипками. Он требует крупных целей, обходится без наведения курсора и учитывает экранную клавиатуру.

Часть веб-приложения, которая работает на сервере: принимает запросы, обращается к базе данных, проверяет права и данные, формирует ответ и отправляет его браузеру.

Запись в HTML, которая обозначает символ его именем или номером после знака амперсанда: так вставляют знак «меньше», неразрывный пробел, длинное тире.

Ключевые слова CSS вроде Canvas, CanvasText, LinkText и ButtonText, которые берут цвет из настроек системы. Их значение особенно важно в режиме принудительных цветов.

Автоматическое создание заготовки проекта или его части по шаблону: генератор раскладывает папки, файлы настроек и типовой код, а разработчик дальше пишет только своё.

Программа, которую выполняет готовая среда — браузер, сервер или командная оболочка — без отдельной сборки в исполняемый файл. Во фронтенде так называют код на JavaScript, подключённый к странице.

CSS-свойство border-radius, которое скругляет углы рамки и фона элемента. Можно задать один радиус на все углы, разные для каждого угла или эллиптическое скругление.

Именованная группа стилей, объявленная через @layer. Порядок слоёв решает, чьи правила победят, раньше специфичности селекторов: более поздний слой перекрывает более ранний.

Свойство веб-технологии работать одинаково в разных браузерах: одна и та же разметка, CSS и JavaScript дают один результат в Chrome, Firefox, Safari и других.

Прямоугольник, от которого браузер отсчитывает размеры в процентах и координаты элемента. Для обычного блока это область родителя, для позиционированного — ближайший подходящий предок.

Внутренняя часть элемента — текст, картинки и вложенные элементы — и область, которую они занимают в боксе, без внутренних отступов, рамки и внешних полей.

Элемент, у которого тот же непосредственный родитель, что и у другого: пункты одного списка, абзацы одной статьи, поля одной формы. Их называют также сестринскими или братскими.

Документ, который точно описывает технологию: синтаксис, поведение, обработку ошибок и требования к тем, кто её реализует. Для веба это основа, по которой работают браузеры.

Вес селектора, по которому браузер выбирает одно из конфликтующих CSS-правил, когда они пришли из одного источника и одного слоя. Чем точнее селектор, тем выше вес.

Несколько медиазапросов через запятую в одном условии. Стили применяются, если выполнен хотя бы один из них: запятая работает как логическое «или».

Режим, в котором браузер отображает страницу строго по современным спецификациям HTML и CSS. Он включается, когда документ начинается с правильного объявления DOCTYPE.

Набор правил оформления, применённых к элементу: цвет, шрифт, размеры, отступы, расположение. В вебе стиль описывают на CSS отдельно от содержимого.

Сокращённое CSS-свойство list-style, которое задаёт вид маркера списка, его положение относительно текста и картинку вместо стандартной точки или номера.

Вертикальная полоса в раскладке: колонка таблицы, дорожка CSS Grid или одна из колонок многоколоночного текста. У каждого вида свои инструменты и правила.

Горизонтальный ряд в двумерной раскладке: дорожка CSS Grid, строка таблицы (тег tr) или ряд в сетке CSS-фреймворка вроде класса row в Bootstrap.

Невидимый прямоугольник, который браузер строит для каждой строки текста внутри блока: в нём выстраиваются слова и строчные элементы, выровненные по общей базовой линии.

Элемент, который не начинает новую строку, а встаёт в текст подряд с соседями и занимает ровно столько места, сколько нужно его содержимому: ссылка, span, strong, em, code.

Набор CSS-правил, которые описывают, как выглядят элементы страницы: цвета, шрифты, отступы, раскладка. Хранится в отдельном файле или внутри HTML-документа.

Короткое касание пальцем сенсорного экрана, после которого палец сразу отрывается. На телефоне и планшете тап заменяет щелчок мыши по кнопке или ссылке.

Символы, которые страница показывает пользователю. В DOM текст хранится в отдельных текстовых узлах внутри элементов, а его вид задают CSS-свойства шрифта и интервалов.

CSS-свойство box-shadow, которое рисует одну или несколько теней вокруг рамки элемента или внутри неё. Тень повторяет скругление углов и не влияет на размеры блока.

CSS-свойство text-shadow, которое рисует под буквами одну или несколько теней со смещением, размытием и цветом. Тень повторяет форму каждого символа.

Копия рабочего сайта на отдельном адресе, где новую версию кода, обновления и миграции проверяют до выкладки. В англоязычной практике её называют staging.

Категория устройства вывода в медиазапросе CSS: screen для экранов, print для печати и all для всех случаев. Позволяет задать стили для конкретной среды.

Искусство и правила оформления текста: выбор шрифтов, размеров, интервалов, длины строки и иерархии заголовков, чтобы текст легко читался и выглядел цельно.

Понятие CSS Writing Modes: способ набора символов в строке — горизонтальный или вертикальный. От него зависит, стоят ли буквы прямо и какие метрики шрифта применяются.

Значение ширины окна или другого параметра, на котором адаптивная вёрстка меняет раскладку: колонки перестраиваются, меню сворачивается, размеры шрифтов меняются.

Программа, которая переводит исходный код с одного языка или версии языка на другой того же уровня: например, TypeScript или современный JavaScript — в код для старых браузеров.

Приём, при котором функция выполняется не чаще одного раза за заданный интервал, сколько бы раз её ни вызвали. Защищает интерфейс от перегрузки частыми событиями.

Любой объект в дереве документа: элемент, текст, комментарий, сам документ или фрагмент. Узел — базовый тип DOM, от которого наследуются все остальные.

Функция языка, API, тег или настройка, которую ещё поддерживают ради совместимости, но больше не рекомендуют. В документации такие места помечают словом deprecated.

CSS-класс, который делает одну узкую вещь: задаёт отступ, выравнивание, цвет или скрывает элемент. Из таких классов собирают оформление прямо в HTML-разметке.

Элемент формы — квадратик с галочкой, который включает или выключает отдельный вариант. Флажки в группе независимы: можно отметить сразу несколько или ни одного.

Всё, что рисуется под содержимым элемента: сплошной цвет, картинка, градиент или несколько слоёв сразу. В CSS фоном управляют свойство background и его составляющие.

Кривая, которая задаёт, как значение меняется во времени во время CSS-перехода или анимации: равномерно, с разгоном, с торможением или ступеньками.

Цепочка ссылок вида «Главная → Каталог → Диваны → Угловые», которая показывает, где находится текущая страница в структуре сайта, и позволяет подняться на уровень выше.

Значение CSS, которое задаёт оттенок текста, фона, рамок и других частей страницы. Записывается именем, шестнадцатеричным кодом или цветовой функцией: rgb(), hsl(), oklch().

HTML-элемент blockquote, которым размечают развёрнутую цитату из другого источника. Браузер по умолчанию выводит его отдельным блоком с отступами слева и справа.

Тип значения CSS — число без единицы измерения: целое или дробное, со знаком или без. Его принимают line-height, opacity, flex-grow, z-index, font-weight и другие свойства.

Верхняя часть страницы или раздела с логотипом, главным меню, контактами и поиском. В HTML её размечают элементом header, а на всех страницах сайта она обычно одинаковая.

Горизонтальный размер элемента. В CSS задаётся свойством width и ограничивается min-width и max-width; по умолчанию блок занимает всю доступную ширину родителя.

Набор символов одного рисунка, по которому браузер отображает текст. В вебе шрифты подключают файлами через @font-face или берут из системы пользователя.

Программа, которая читает вслух содержимое экрана и элементы управления или выводит его на брайлевский дисплей. Ею пользуются незрячие и слабовидящие люди.

Ссылка на определённое место внутри страницы или сама метка этого места. Адрес такой ссылки заканчивается знаком # и идентификатором нужного элемента.

Отдельная клетка HTML-таблицы на пересечении строки и столбца. Ячейки с данными размечают тегом td, заголовочные — тегом th.

Токен CSS, который состоит из символа @ и следующего за ним имени и с которого начинается любое at-правило: @media, @import, @font-face и другие.

Инструкция CSS, которая начинается с символа @ и управляет не оформлением конкретных элементов, а поведением стилей: условиями, шрифтами, анимациями, слоями каскада.

Затяжной спор о простой и малозначимой детали, в то время как сложные и действительно важные вопросы проекта остаются без внимания.

Устаревший атрибут HTML-таблицы, который задавал внутренний отступ между содержимым каждой ячейки и её границей. Сегодня вместо него используют CSS.

Устаревший атрибут тега table, который задавал расстояние между соседними ячейками таблицы. В современной вёрстке его заменяет CSS-свойство border-spacing.

Привычка навешивать CSS-классы почти на каждый тег без необходимости, из-за чего разметка разрастается, а стили становится трудно понимать и менять.

Приём вёрстки, который заставляет родительский блок учитывать высоту вложенных плавающих (float) элементов, чтобы он не «схлопывался» и не ломал макет.

Атрибут ячейки таблицы (td или th), который растягивает её на несколько соседних столбцов — так делают общий заголовок над группой колонок или итог на всю ширину.

Модуль CSS для двумерной раскладки: контейнер делится на строки и столбцы, а элементы размещаются в ячейки и области этой сетки по обеим осям сразу.

Рабочая группа консорциума W3C, в которой представители браузеров, компаний и независимые эксперты разрабатывают и согласуют спецификации языка CSS.

Одна инструкция оформления внутри CSS-правила: имя свойства, двоеточие и значение, например color: #333. Из таких пар и складывается блок стилей.

Механизм CSS, который при смене значения свойства не переключает его мгновенно, а плавно проводит от старого значения к новому за заданное время.

Логическая единица длины в вёрстке, не равная точке экрана: на дисплеях высокой плотности один CSS-пиксель занимает два, три и более физических пикселя.

Инструмент, который позволяет писать стили на расширенном языке с переменными, вложенностью, миксинами и функциями, а затем переводит их в обычный CSS для браузера.

Система горизонтальных и вертикальных направляющих в дизайне, которая задаёт колонки, промежутки и поля страницы, чтобы блоки выравнивались по единому ритму.

Свойство CSS, которое сдвигает, поворачивает, масштабирует или наклоняет элемент визуально, не меняя его места в потоке и не сдвигая соседние блоки.

Возможности CSS, которые позволяют задать произвольный контур (круг, многоугольник, силуэт картинки), вдоль которого текст обтекает плавающий элемент.

Свойство CSS, которое пропускает отрисованный элемент через графические эффекты: размытие, яркость, контраст, оттенки серого, тень по контуру и другие.

Перегруженная вёрстка, в которой почти всё собрано из вложенных div, хотя для шапки, меню, статьи или кнопки в HTML есть элементы с собственным смыслом.

Первая строка HTML-документа, которая сообщает браузеру, что страницу нужно отображать по современным стандартам, а не в режиме совместимости со старыми сайтами.

Маленький значок сайта, который браузер показывает во вкладке, в закладках и истории, а поисковые системы — рядом с адресом сайта в результатах поиска.

Модель раскладки CSS, которая выстраивает дочерние элементы в одну линию — строку или столбец — и распределяет между ними свободное место и выравнивание.

Часть сайта или приложения, которую видит пользователь и с которой он взаимодействует в браузере: вёрстка, оформление, поведение интерфейса и код на клиенте.

Единица структуры HTML-документа: открывающий тег с атрибутами, содержимое и закрывающий тег. В браузере каждый такой элемент становится узлом дерева DOM.

Подход к проектированию и вёрстке, при котором интерфейс сначала делают для маленького экрана телефона, а затем постепенно расширяют для планшетов и десктопов.

Тестовый двойник, который подменяет настоящую зависимость и не только отдаёт заготовленные ответы, но и запоминает, как к нему обращались, чтобы тест мог это проверить.

Серый текст-подсказка внутри пустого поля формы, который показывает пример или формат ввода и пропадает, как только пользователь начинает печатать.

Фрагмент JavaScript-кода, который добавляет в старый браузер стандартную возможность, уже описанную в спецификации, но в этом браузере ещё не реализованную.

Всплывающая панель поверх страницы, которая появляется по нажатию на кнопку или ссылку и показывает дополнительное содержимое рядом с ней, не блокируя остальную страницу.

Окно или слой поверх страницы, который появляется сам или по действию пользователя: форма подписки, предложение скидки, сообщение, согласие на cookie, отдельное окно браузера.

Плотность экрана — количество физических пикселей, приходящихся на один дюйм (2,54 см) его поверхности. Чем она выше, тем мельче точки и чётче изображение.

Экспериментальная реализация возможности, которая только обсуждается для будущего веб-стандарта и ещё может измениться или вовсе не попасть в спецификацию.

Объект JavaScript, который представляет результат асинхронной операции, ещё не готовый в момент вызова, и позволяет обработать его успешное завершение или ошибку.

Сайт, который браузер позволяет установить как приложение: со значком на рабочем столе, отдельным окном, работой без сети и push-уведомлениями.

Открытое сообщество (community group) при W3C, которая продвинула в стандарт HTML элемент picture и атрибуты srcset и sizes — механизм выдачи разных картинок под разные экраны.

Атрибут ячейки таблицы td или th, который растягивает её вниз на указанное число строк, объединяя ячейки по вертикали.

Механизм, который прикрепляет к элементу отдельное скрытое дерево узлов со своими стилями: внешний CSS не задевает его разметку, а внутренние стили не выходят наружу.

Прослойка кода, которая перехватывает вызовы к API или окружению и подгоняет их под ожидаемый интерфейс, сглаживая различия между версиями и платформами.

Оператор JavaScript из трёх точек, который раскрывает элементы массива, строки или свойства объекта по месту — в новом массиве, объекте или списке аргументов функции.

Подставной объект для тестов, который заменяет настоящую зависимость и на любой вызов возвращает заранее заданный ответ, не обращаясь к сети, базе или файлам.

Международный консорциум, который разрабатывает и утверждает открытые спецификации веба: CSS, рекомендации по доступности WCAG, SVG и многие API браузера.

Браузерный API, который запускает скрипт в отдельном фоновом потоке, чтобы тяжёлые вычисления не останавливали прокрутку, анимацию и реакцию страницы на клики.

Общее название фоновых сред выполнения JavaScript в браузере — выделенных, разделяемых и сервис-воркеров, — которые работают отдельно от страницы и общаются с ней сообщениями.

Небольшой модуль JavaScript, который браузер запускает внутри своего конвейера отрисовки или обработки звука, позволяя дописывать собственную логику туда, где раньше работал только движок.

Способ растягивать графический элемент так, чтобы углы сохраняли размер, края тянулись только вдоль своей стороны, а центр заполнял оставшееся место.