ARIA ARIA
Набор атрибутов, сообщающих вспомогательным технологиям роль и состояние элемента.
Словарь
Термины курса
221 термин — те же определения, что и в уроках. У каждого есть английский оригинал: он пригодится, когда начнёшь читать документацию.
A–Z и символы
BEM block, element, modifier
Способ называть классы: block__element--modifier.
box-sizing box-sizing
Определяет, входят ли padding и border в заданную ширину.
clamp() clamp
Функция «минимум — желаемое — максимум» для плавно меняющихся размеров.
CSS Cascading Style Sheets
Язык описания внешнего вида документа.
font-display: swap font-display
Показывать текст запасным шрифтом, пока грузится основной.
fr fraction
Доля свободного места после вычета фиксированных размеров и промежутков.
gap gap
Расстояние между элементами внутри контейнера, без отступов по краям.
GitHub Pages GitHub Pages
Бесплатный хостинг статических сайтов прямо из репозитория.
HEX hexadecimal color
Запись цвета шестнадцатеричными числами: #6544e0.
HSL hue, saturation, lightness
Запись через тон, насыщенность и светлоту. Удобна для оттенков одного цвета.
HTML-сущность HTML entity
Запись вида для символов, которые нельзя набрать напрямую.
!important important
Пометка, выигрывающая у обычных объявлений. Крайнее средство.
inherit / initial / unset global values
Ручное управление наследованием: взять у родителя, вернуть по умолчанию, или то и другое по ситуации.
inline-block inline-block
В строке, но с размерами и вертикальными отступами.
Masonry masonry
Раскладка кирпичной кладкой без просветов. В CSS пока не стандартизована.
minmax() minmax
Задаёт дорожке минимальный и максимальный размер.
Mobile-first mobile first
Подход, при котором базовые стили пишутся для узкого экрана, а запросы только добавляют.
overflow overflow
Что делать с содержимым, которое не помещается: показать, обрезать или прокручивать.
rem root em
Единица, равная размеру шрифта корневого элемента. По умолчанию 16px.
Skip-link skip link
Первая ссылка страницы, позволяющая перепрыгнуть меню и попасть сразу к содержимому.
SMIL SMIL
Собственный язык анимации SVG через тег animate.
Subgrid subgrid
Значение grid-template-rows и grid-template-columns: вложенная сетка берёт линии родителя вместо своих.
SVG-фильтр SVG filter
Собственный эффект, собранный из примитивов вроде feTurbulence.
А
Абсолютный путь absolute path
Полный адрес с протоколом и доменом. Нужен для внешних ресурсов.
Автозаполнение autocomplete
Подсказка браузеру, какие сохранённые данные подставить.
Адаптивность responsive design
Свойство сайта подстраиваться под размер экрана без отдельной мобильной версии.
Аккордеон accordion
Набор раскрывающихся блоков, где открыт один. Делается атрибутом name у details.
Акцентный цвет accent-color
Свойство, перекрашивающее встроенный вид чекбоксов, переключателей и ползунков.
Альтернативный текст alt
Текстовая замена картинки: для голосовых программ, поисковиков и случая, когда файл не загрузился.
Анимация по прокрутке scroll-driven animation
Анимация, ход которой определяется положением элемента на экране.
Атомарный класс atomic class
Класс из одного объявления: .text-center, .gap-2.
Атрибут attribute
Дополнительная настройка тега, пишется внутри открывающего тега: lang="ru".
Атрибут rel rel
Уточняет отношение между страницами. noopener закрывает доступ открытой странице к твоей вкладке.
Б
Блок block
Самостоятельная часть интерфейса, переносимая в другое место без изменений.
Блокирующий ресурс render-blocking
Файл, из-за которого браузер откладывает показ страницы.
Блочная модель box model
Четыре слоя любого элемента: content, padding, border, margin.
Блочная ось block axis
Направление, в котором идут блоки. Обычно сверху вниз.
Блочный элемент block element
Занимает всю ширину строки и начинается с новой: div, p, section.
Браузер browser
Программа, которая читает HTML и рисует по нему страницу. Chrome, Safari, Firefox, Edge.
Брейкпоинт breakpoint
Ширина, на которой раскладка меняется.
Буквица drop cap
Увеличенная первая буква абзаца, занимающая несколько строк.
В
Валидатор validator
Инструмент, проверяющий разметку на соответствие стандарту.
Вариативный шрифт variable font
Один файл, содержащий все промежуточные начертания.
Векторная графика SVG
Изображение, описанное кодом: линиями и фигурами. Не теряет качества при увеличении.
Видимость изнанки backface-visibility
Показывать ли обратную сторону повёрнутого элемента.
Висячая строка orphan, widow
Одинокое слово или строка, оторванная от абзаца.
Вложенность nesting
Расположение одних элементов внутри других. Даёт дереву документа его структуру.
Вложенность CSS CSS nesting
Запись правил внутри других правил через &, без препроцессора.
Внеслойные стили unlayered styles
Правила вне любого @layer. Считаются самым сильным слоем.
Внешний отступ margin
Расстояние до соседних элементов. Всегда прозрачный.
Внутренний отступ padding
Расстояние от содержимого до рамки. Закрашивается фоном элемента.
Внутренняя тень inset shadow
Тень, нарисованная внутри элемента. Создаёт эффект вдавленности.
Встроенная валидация constraint validation
Проверка данных силами браузера: required, pattern, min, max.
Выход из потока out of flow
Элемент перестаёт занимать место, соседи ведут себя так, будто его нет.
Г
Гиперссылка hyperlink, a
Элемент, ведущий на другую страницу, файл или раздел этой же страницы.
Главная ось main axis
Направление, вдоль которого выстраиваются элементы. Задаётся flex-direction.
Градиент gradient
Плавный переход между цветами. Технически это изображение, а не цвет.
Грид-контейнер grid container
Элемент с display: grid, задающий сетку для своих детей.
Группа полей fieldset / legend
Объединение полей одного вопроса с общим названием.
Группировка :is()
Сокращение для списка селекторов. Специфичность — по самому тяжёлому аргументу.
Д
Див-суп div soup
Разметка, целиком собранная из div без смысловых тегов.
Дизайн-токен design token
Именованное значение оформления: цвет, отступ, радиус, скорость.
Динамическая высота экрана dvh
Единица, учитывающая исчезающие панели мобильного браузера.
Длина строки measure
Количество символов в строке. Комфортно 45–75.
Дорожка track
Колонка или строка сетки.
Доступное имя accessible name
Как читалка называет элемент. Собирается по приоритету источников.
Доступность accessibility, a11y
Свойство сайта быть пригодным для всех, включая людей с ограничениями зрения, слуха и моторики.
Е
Единицы контейнера cqw, cqh, cqi
Проценты от размера контейнера. Позволяют привязать шрифт и отступы к ширине компонента.
Ж
Живая область live region
Область, изменения в которой читалка объявляет вслух.
З
И
Идентификатор id
Уникальное имя элемента на странице.
Иерархия заголовков heading hierarchy
Порядок уровней h1–h6, задающий вложенность разделов документа.
Изящная деградация graceful degradation
Современная версия, дополненная починками для старых браузеров.
Именованная линия named grid line
Имя в квадратных скобках в grid-template-columns. Позволяет не считать номера.
Именованная область grid area
Прямоугольный кусок сетки с именем, заданный в grid-template-areas.
Инертность inert
Атрибут, выключающий ветку разметки из взаимодействия целиком.
Инструменты разработчика DevTools
Встроенная в браузер панель для просмотра и правки разметки и стилей.
Интерполяция interpolation
Подстановка значения в имя селектора: .gap-#{$name}.
К
Каскад cascade
Порядок разрешения споров между правилами: важность, специфичность, порядок.
Класс class
Имя группы элементов. Основная зацепка для CSS.
Ключевые кадры keyframes
Именованный набор состояний, между которыми идёт анимация.
Кодировка charset
Правило, по которому байты файла превращаются в буквы. Современный стандарт — UTF-8.
Композитинг compositing
Последний, самый дешёвый этап отрисовки. Именно на нём работают transform и opacity.
Композитный слой compositing layer
Отдельная картинка в памяти видеокарты. Ускоряет анимацию, но занимает память.
Композиция composite
Сборка готовых слоёв в кадр. Выполняется видеокартой.
Компонент component
Повторяющийся кусок интерфейса со своими стилями: карточка, кнопка, поле.
Компонентный CSS component CSS
Подход, где класс называет сущность, а оформление живёт в стилях.
Компонентный токен component token
Точка настройки конкретного блока: --btn-bg.
Конический градиент conic-gradient
Градиент по кругу. Основа для кольцевых диаграмм на чистом CSS.
Контейнерный запрос container query
Условие по ширине родителя, а не окна.
Контекст наложения stacking context
Область, внутри которой сравниваются значения z-index.
Контраст contrast ratio
Отношение яркости текста к яркости фона. Минимум 4.5 : 1 для обычного текста.
Контур path
Универсальная фигура, описанная командами в атрибуте d.
Крайний случай edge case
Ситуация на границе: очень длинный текст, отсутствие данных, максимум элементов.
Кривая ускорения timing function, easing
Закон, по которому меняется скорость движения.
Критический CSS critical CSS
Стили первого экрана, встроенные прямо в разметку.
Л
Лендинг landing page
Одностраничный сайт, ведущий человека к одному действию.
Липкая шапка sticky header
Шапка таблицы, остающаяся на месте при прокрутке тела.
Липкое позиционирование sticky
Элемент прилипает к краю при прокрутке, пока виден его родитель.
Логический атрибут boolean attribute
Атрибут без значения: важно само его наличие. required, checked, disabled.
Логическое свойство logical property
Свойство, привязанное к осям текста, а не к сторонам экрана.
М
Маркированный список unordered list, ul
Список, где порядок пунктов не имеет значения.
Маска mask
Прозрачность элемента, взятая из другого изображения или градиента.
Медиазапрос media query
Условие, при котором применяются стили: ширина, тема, тип указателя.
Межстрочный интервал line-height
Расстояние между базовыми линиями строк. Задаётся числом без единиц.
Мера набора measure
Длина строки в символах. Комфортно — 45–75.
Мёртвый CSS dead CSS
Правила, которые больше нигде не применяются, но их боятся удалить.
Мета-тег meta tag
Служебная строка в head с информацией о странице: кодировка, описание, настройки для телефонов.
Микроразметка structured data
Данные о содержимом в машиночитаемом виде для поисковиков.
Миксин mixin
Шаблон правил, содержимое которого копируется в каждое место вызова.
Модификатор modifier
Постоянный вариант блока или элемента. Пишется через --.
Н
Направление письма direction, dir
Атрибут dir="ltr" или dir="rtl", задающий начало и конец строки.
Наследование inheritance
Передача значения свойства от родителя к потомкам.
Невидимый текст FOIT
Период, когда текст не показан, потому что шрифт ещё грузится.
Нормальный поток normal flow
Порядок, в котором браузер расставляет элементы по умолчанию: сверху вниз, слева направо.
Нулевая специфичность :where()
То же, что :is(), но вес всегда ноль. Основа для базовых стилей.
Нумерованный список ordered list, ol
Список, где порядок важен: шаги, инструкции, рейтинги.
О
Обводка outline
Линия поверх элемента, не занимающая места в раскладке.
Область действия scope
Атрибут th: col — заголовок столбца, row — строки.
Область просмотра viewBox
Система координат внутри SVG. Не связана с размером на странице.
Обрезка clip-path
Вырезание элемента по геометрической форме. Края резкие.
Обтекание формой shape-outside
Форма, по которой текст огибает плавающий элемент.
Объединение ячеек colspan / rowspan
Растягивание одной ячейки на несколько столбцов или строк.
Объявление declaration
Пара «свойство: значение».
Одиночный тег void element
Тег без содержимого и без закрывающей пары: br, hr, img.
Ориентир landmark
Область страницы, к которой голосовая программа умеет прыгнуть напрямую: main, nav, header, footer.
Открытый код open source
Проекты с общедоступным кодом, куда можно вносить вклад.
Отложенная проверка :user-invalid
Псевдокласс, срабатывающий только после взаимодействия человека с полем.
Относительный путь relative path
Адрес относительно текущего файла. Используется внутри сайта.
Отступ прокрутки scroll-padding
Запас, который браузер оставляет при переходе по якорю.
П
Первая отрисовка First Contentful Paint
Момент, когда на экране появилось первое содержимое.
Переменная Sass Sass variable
Значение, подставляемое при сборке. В готовом файле её нет.
Перерисовка repaint
Заполнение пикселей без пересчёта координат.
Пересчёт раскладки reflow, layout
Вычисление размеров и координат. Самый дорогой этап отрисовки.
Переход transition
Плавное изменение свойства между двумя состояниями.
Перспектива perspective
Расстояние от зрителя до плоскости экрана. Чем меньше, тем сильнее эффект объёма.
Плоский селектор flat selector
Селектор из одного класса. Легко перекрывается и не задевает чужие блоки.
Подпись поля label
Текст, связанный с полем через for и id или вложенностью.
Подпись таблицы caption
Название таблицы, видимое всем и зачитываемое голосовыми программами.
Подсказка в поле placeholder
Пример ввода внутри поля. Исчезает при печати и не заменяет подпись.
Позиционирование positioning
Управление положением элемента через position и координаты.
Покрытие coverage
Вкладка DevTools, показывающая, какая часть кода использовалась при обходе страниц.
Полноширинный прорыв full-bleed
Приём: блок выходит за колонку контента на всю ширину экрана средствами сетки.
Пользовательское свойство custom property
Переменная CSS: объявляется через --имя, читается через var().
Поперечная ось cross axis
Перпендикулярная главной. По ней работает align-items.
Портфолио portfolio
Набор работ с разбором решений, а не галерея скриншотов.
Потомок descendant
Любой элемент внутри другого, на любой глубине. Записывается пробелом.
Правило rule
Селектор и блок объявлений в фигурных скобках.
Препроцессор preprocessor
Инструмент, превращающий расширенный синтаксис в обычный CSS на этапе сборки.
Префикс поставщика vendor prefix
Приставка вроде -webkit- для экспериментальных реализаций.
Привязка прокрутки scroll-snap
Остановка прокрутки на заданных точках — основа галерей без скриптов.
Пробуксовка раскладки layout thrashing
Чередование записи и чтения геометрии, вынуждающее пересчитывать раскладку многократно.
Проверка поддержки @supports
Правило, применяющее блок только если браузер понимает конструкцию.
Программа чтения с экрана screen reader
Приложение, озвучивающее содержимое экрана: VoiceOver, NVDA, JAWS, TalkBack.
Прогрессивное улучшение progressive enhancement
Подход, при котором базовая версия работает везде, а современные возможности добавляются сверху.
Прямой ребёнок child
Элемент на один уровень внутри. Записывается знаком >.
Псевдокласс pseudo-class
Состояние или положение элемента: :hover, :first-child.
Псевдоэлемент pseudo-element
Виртуальный кусочек содержимого: ::before, ::after.
Пунктир обводки stroke-dasharray
Длины штриха и промежутка. Штрих во всю длину контура выглядит сплошной линией.
Р
Разметка markup
Расстановка тегов по тексту, чтобы объяснить его структуру.
Растровая графика raster
Изображение из пикселей: JPG, PNG, WebP. При увеличении становится мыльным.
Растяжение тени spread
Четвёртое значение box-shadow: увеличивает или ужимает тень до размытия.
Расширенные сведения rich results
Цена, рейтинг и наличие в поисковой выдаче под ссылкой.
Режим ввода inputmode
Атрибут, задающий вид клавиатуры на сенсорных устройствах.
Режим наложения mix-blend-mode
Способ смешивания элемента с тем, что под ним.
Режим письма writing-mode
Горизонтальное или вертикальное расположение строк.
Режим смешивания blend mode
Правило, по которому цвета элемента складываются с цветами подложки.
Режим совместимости quirks mode
Режим браузера, который включается без DOCTYPE и считает размеры по правилам старых версий Internet Explorer.
Репозиторий repository
Хранилище файлов проекта с историей изменений.
Родительский селектор :has()
Псевдокласс, выбирающий элемент по наличию подходящего потомка или соседа.
Родовое семейство generic family
Запасное имя в конце стека: sans-serif, serif, monospace.
С
Свойство property
То, что меняем: color, font-size.
Сдвиг вёрстки layout shift
Прыжок содержимого при загрузке: элемент занял место, которое под него не зарезервировали.
Сдвиг пунктира stroke-dashoffset
Смещение пунктира вдоль контура. Анимация этого свойства даёт эффект рисования.
Селектор selector
Выражение, описывающее, к каким элементам применить правило.
Семантика semantics
Смысл, который тег сообщает о своём содержимом, независимо от оформления.
Семантический токен semantic token
Название описывает роль: --color-danger. Именно они переключаются темами.
Сервер server
Компьютер, который хранит файлы сайта и отдаёт их по запросу.
Скелет загрузки skeleton screen
Заглушка формой и размером с будущее содержимое.
Скрытие визуальное visually hidden
Приём: элемент не виден глазами, но доступен читалке.
Слой vendor vendor layer
Приём: чужую библиотеку подключают в отдельный слабый слой, чтобы она не перебивала свои стили.
Слой каскада cascade layer
Именованная группа правил. Порядок слоёв важнее специфичности селекторов внутри них.
Содержащий блок containing block
Элемент, от которого считаются координаты абсолютно спозиционированного потомка.
Состояние state
Временное свойство: открыто, загружается, ошибка. Пишется через is- или атрибутом.
Состояние поля field state
Покой, наведение, фокус, заполнено, ошибка, недоступно, только чтение, проверка.
Сохранение объёма transform-style: preserve-3d
Позволяет детям жить в трёхмерном пространстве родителя.
Специфичность specificity
Вес селектора в виде трёх чисел: id — класс — тег.
Спрайт sprite
Один файл с набором symbol, на которые ссылаются через use.
Стайлгайд styleguide
Страница со всеми компонентами в одном месте, включая крайние случаи.
Статический хостинг static hosting
Публикация сайта из файлов без серверного кода: GitHub Pages, Netlify.
Стек шрифтов font stack
Список шрифтов в font-family. Браузер берёт первый доступный.
Строчная ось inline axis
Направление, вдоль которого идёт текст. Зависит от языка и режима письма.
Строчный элемент inline element
Живёт внутри строки текста: span, a, strong.
Схлопывание отступов margin collapsing
Соседние вертикальные margin объединяются в один, равный большему.
Сырое значение primitive token
Палитра. Название описывает само значение: --violet-600.
Т
Табличные цифры tabular-nums
Начертание, где все цифры одной ширины.
Тег tag
Пометка в угловых скобках, объясняющая браузеру назначение куска текста.
Текущий цвет currentColor
Ключевое слово, подставляющее значение color родителя.
Тень по силуэту drop-shadow
Тень, повторяющая непрозрачные пиксели, а не рамку элемента.
Тень по форме drop-shadow
Фильтр, обводящий непрозрачные пиксели, а не прямоугольник элемента.
Тип контейнера container-type
За каким размером следить: inline-size — за шириной, size — за обеими сторонами.
Точка остановки color stop
Место в градиенте, где цвет достигает заданного значения.
Точка перелома breakpoint
Ширина, на которой меняется раскладка.
Трансформация transform
Сдвиг, масштаб, поворот или наклон без влияния на раскладку.
У
Утилитарный CSS utility-first CSS
Подход, где каждый класс отвечает за одно свойство, а оформление живёт в разметке.
Ф
Фавикон favicon
Маленькая иконка сайта на вкладке браузера и в закладках.
Фасетный фильтр faceted filter
Набор независимых условий отбора, работающих совместно.
Фильтр filter
Графическая обработка элемента: размытие, обесцвечивание, тень по форме.
Фильтр подложки backdrop-filter
Обработка того, что находится позади элемента.
Флекс-контейнер flex container
Элемент с display: flex. Управляет раскладкой своих детей.
Флекс-элемент flex item
Прямой ребёнок флекс-контейнера.
Фокус focus
Элемент, на котором сейчас находится клавиатура. Его положение обязано быть видимым.
Фокус-ловушка focus trap
Удержание фокуса внутри окна, пока оно открыто.
Форма form
Блок, который собирает введённые данные и отправляет их по адресу из action.
Ц
Цветовая схема color-scheme
Свойство, сообщающее браузеру о поддерживаемых темах. Влияет на системные элементы.
Ш
Шкала отступов spacing scale
Ограниченный набор допустимых расстояний. Обычно кратен четырём или восьми.
Э
Элемент element
Открывающий тег, содержимое и закрывающий тег вместе.