Skip to content

Latest commit

 

History

History
1515 lines (850 loc) · 88 KB

dictionary.md

File metadata and controls

1515 lines (850 loc) · 88 KB
Raw

Словарь терминов по фронтенду

Оглавление: 0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

0-9

9-slice scaling

9-дольное масштабирование (неискажающее масштабирование), техника, позволяющая изменять размер объекта без геометрических искажений. Объект делится на 9 долей (3 строки и 3 колонки), каждая из которых масштабируется по собственным правилам: углы не масштабируются совсем, центральная доля масштабируется по высоте и по ширине, оставшиеся доли масштабируются либо только по ширине, либо только по высоте.

A

accessibility, a11y

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

adaptive design

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

almost standards mode

почти стандартный режим, режим интерпретации и отображения страницы браузером, в котором браузер целенаправленно отходит от стандартов (как при режиме совместимости) лишь для отдельных особых случаев, используется для страниц с переходными доктайпами HTML 4 и XHTML 1.

anchor

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

animation

анимация, плавное изменение визуальных параметров объекта.

asset

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

assert

проверка, условие, которое проверяется, употр. в тестировании, напр. field assert has failed — проверка поля не прошла.

at-keyword

ключ директивы, см. директива

at-rule

директива, тип объявления, начинающегося со знака @, напр. @import.

attribute

атрибут, напр. rel="stylesheet".

  • attribute name — название атрибута
  • attribute value — значение атрибута

B

backdrop

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

back-end

бэке́нд

  1. область веб-технологий, работающих на сервере.
  2. внутренняя часть серверной системы, занимается обработкой данных.

background

фон, напр. background image — фоновое изображение.

  • background-color — цвет фона
  • background-position — позиция фона
  • background-size — размер фона
  • background-repeat — повторение фона
  • background-origin — границы фона
  • background-clip — обрезка фона
  • background-attachment — закрепление фона
  • background-image — фоновое изображение

baseline

базовая линия, воображаемая линия в основании букв в строке.

bikeshed

уделять чрезмерное внимание мелочам, (см. закон тривиальности). Устоявшегося русского эквивалента нет, при переводе лучше передавать общий смысл, напр. avoid bikeshedding — не спорить о мелочах.

blending mode

режим наложения, алгоритм смешивания слоёв, применяемый в графических редакторах или прямо в CSS, напр. overlay blending mode — режим наложения перекрытием.

block

  1. блок деклараций, структурная часть объявления. Заключается в фигурные скобки и содержит декларации свойств (или, в случае медиавыражения, блоки стилей).
  2. блочный вид, см. вид

blockquote

блочная цитата, HTML-элемент для выделения цитируемой нестрочной области документа. Может содержать атрибут cite со ссылкой на первоисточник.

border

рамка, внешняя видимая часть блока, напр. border-left — рамка слева.

  • border-collapse — слияние рамки
  • border-color — цвет рамки
  • border-image — графическая рамка
  • border-image-outset — выступ графической рамки
  • border-image-repeat — повторение графической рамки
  • border-image-slice — разбивка графической рамки
  • border-image-source — адрес изображения для графической рамки
  • border-image-width — толщина графической рамки
  • border-radius — скругление рамки
  • border-style — стиль рамки
  • border-width — ширина рамки

border-radius

скругление рамки, напр., border-radius: 3px — скругление рамки на 3 пикселя, border-top-left-radius — скругление верхнего левого угла, см. также скруглённые углы.

bounding box

окаймляющий блок

box model

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

box-shadow

тень (блока), напр. box-shadow is red — тень блока красная.

breadcrumbs

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

breakpoint

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

browser

бра́узер

button

кнопка

  1. элемент интерфейса, при нажатии отправляющий форму или производящий иное действие
  2. элемент формы <button> или <input type="button"> (также submit и image).

C

callback

колбэк, исполнение кода по завершению работы функции, напр. pass value in a callback — передай значение в колбэке.

candidate recommendation (CR)

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

cascade

cascade

каскад, описанная в спецификации CSS схема, определяющая порядок применения к элементу блоков стилей.

cascade layer

каскадный слой, способ группировки и управления порядком применения стилей в рамках одного источника, объявляется с помощью директивы @layer. Напр. rules within a cascade layer cascade together — правила в каскадных слоях каскадируют вместе.

cascade origin

каскадный источник, встроенная в браузеры область описания стилей, порядок источников определяет применение стилей или каскад: от стилей браузера до transition-деклараций. Напр. there are eight cascade origings, including user styles — есть восемь каскадных источников, включая пользовательские стили.

cell

ячейка

  1. структурная единица таблицы.
  2. элемент таблицы <td> или <th>.

cellpadding

отступ в ячейках таблицы.

cellspacing

расстояние между ячейками таблицы.

character reference

символьная подстановка, напр. &nbsp;. Допустим также не совсем точный, но более устоявшийся перевод спецсимвол.

checkbox

чекбо́кс

  1. элемент интерфейса для выбора одного или нескольких вариантов, напр. checkbox is disabled — чекбокс неактивен.
  2. элемент формы <input type="checkbox">.

child

  1. сущ. потомок, (во мн. ч. children — потомки)
  2. прил. дочерний, напр. child process — дочерний процесс

classitis

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

clear

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

  • clear: left — отмена обтекания слева
  • clear: right — отмена обтекания справа
  • clear: both — отмена обтекания с обеих сторон

clearfix

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

click

клик, нажатие на объект с помощью курсора мыши или подобного устройства, напр. double click is firing event — двойной клик вызывает событие.

client-side

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

clipping path

контур обрезки

closure

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

code

  1. сущ. код, неисчисл. (как сахар), напр. error in code — ошибка в коде, но не ошибка в кодах (неправильно).
  2. гл. писать код, верстать, программировать, напр. to code a site — верстать сайт.

colspan

объединение столбцов, HTML-атрибут для объединения нескольких ячеек таблицы в одной строке.

column

столбец, колонка, вертикальная область в таблице, раскладке или тексте.

color

цвет

combinator

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

  • descendant combinator — комбинатор потомка, (пробел).
  • child combinator — комбинатор непосредственного потомка, >. Также называется дочерним.
  • adjacent sibling combinator — комбинатор непосредственного соседства, +.
  • general sibling combinator — комбинатор соседства, ~.

comment

комментарий, пояснение к коду

component

компоне́нт, (м. р.) составная часть чего-либо. Напр. app components — компоненты приложения

compositing

компо́зитинг

composite layer

композитный слой

compositor

композитор (в знач. «движок композитинга»)

container query

выражение от контейнера, объявление директивы @container с условиями, позволяет применять стили в зависимости от свойств родительского контейнера. Напр. many container query cases can be solved with existing technology — во многих случаях вместо выражений от контейнера можно использовать существующие технологии.

containment

обособление, инструмент оптимизации веб-страницы и разбиения её на функциональные блоки, регулируется свойством contain в CSS.

containing block

содержащий блок — блок, относительно которого рассчитываются размеры и положения данного блока. Упрощенно, содержащий блок — это родитель данного блока не по DOM, а по потоку документа. Напр. containing block isn’t always the content area of the parent — содержащий блок — это не всегда контентная область родителя.

content

содержимое

  • metadata content — метасодержимое
  • flow content — потоковое содержимое
  • sectioning content — структурное содержимое
  • heading content — заголовочное содержимое
  • phrasing content — текстовое содержимое
  • embedded content — внедряемое содержимое
  • interactive content — интерактивное содержимое
  • palpable content — содержимое для вывода
  • script-supporting content — скриптовое содержимое
  • grouping content — группирующее содержимое

continuous integration

непрерывная интеграция, практика частой, автоматизированной сборки, тестирования и развёртывания программного обеспечения

cookie

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

  • access to cookies — доступ к кукам
  • cookie banner — сообщение о куках
  • authorization cookie — авторизационная кука
  • first-party cookies — собственные куки
  • third-party cookies — сторонние куки

cross-browser

кроссбра́узерный, работающий во всех браузерах, слитно.

cross-platform

кроссплатфо́рменный, работающий на всех платформах, слитно.

custom properties

кастомные свойства, CSS-свойства вида --my-property, которые разработчики могут создавать самостоятельно и использовать дальше в коде как переменные с помощью функции var(). Также распространён перевод CSS-переменные, напр. CSS variables, also known as CSS custom properties, are landing in Chrome 49 — CSS-переменные, также известные как кастомные CSS-свойства, появятся в Chrome 49.

CSS Working Group (CSSWG)

Рабочая группа CSS

custom

кастомный (возм. пользовательский)

  • custom element — кастомный элемент.
  • custom attribute — кастомный атрибут.

D

data binding

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

debugger

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

declaration

декларация, объявление свойства и значения.

deep comparison

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

deploy, deployment

деплой, развёртывание, выкладка, выкатка, публикация изменений либо напрямую на публичный сервер (продакшен), либо через промежуточные системы и процессы автоматической сборки.

deprecated

устаре́вший, статус возможности языка, которая не рекомендуется к использованию, поскольку либо уже была заменена, удалена или будет в следующих версиях, напр. this API is a replacement of the deprecated React.addons.cloneWithProps() — этот API замена устаревшему React.addons.cloneWithProps() или <applet> is deprecated in favor of <object> — <applet> помечен устаревшим в пользу <object>.

design

  1. сущ. дизайн, визуальный облик сайта, может включать принципы взаимодействия и архитектурные решения, напр. new design for a site — новый дизайн для сайта.
  2. гл. разрабатывать, создавать или проектировать внешний вид и функциональность.

device pixel ratio

см. pixel ratio

dirty checking

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

disable

деактивировать

disabled

неактивный, состояние элемента формы, в котором его изменение запрещено, напр. disabled button — неактивная кнопка.

display

  1. вид, css-свойство, определяющее тип отображения блока.

    • display: none — скрытый вид
    • display: block — блочный вид
    • display: inline — строчный вид
    • display: inline-block — вид строчного блока
  • display: flex — вид флекс-контейнера (см. flexbox)
  • display: inline-flex — вид строчного флекс-контейнера (см. flexbox)
  1. экран, напр. экран смартфона, разрешение экрана.

divitis

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

DOM

объектная модель документа, дом

doctype

докта́йп, конструкция вида <DOCTYPE html> в начале документа, которая обозначает используемую версию HTML. Используется браузерами для выбора режима (стандартного, почти стандартного или совместимости).

drag and drop

драг-н-дроп, перетаскивание, способ взаимодействия с интерфейсом, когда пользователь перемещает объекты из одного места в другое в рамках страницы или за пределами окна браузера, напр. we can sort this list via drag-and-drop — мы можем отсортировать этот список с помощью драг-н-дропа или to upload a file drag and drop it here — чтобы загрузить файл, перетащите его сюда.

dropdown

выпадающее меню, элемент интерфейса, раскрывающий дополнительную информацию при активации.

E

easing

плавность, функция плавности, описывает изменение скорости анимации с помощью ключевых слов или кривых Безье, напр. transition easing is linear — плавность перехода линейная.

editor’s draft (ED)

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

element

элемент

  • void elements — пустые элементы
  • raw text elements — элементы со свободным текстом
  • escapable raw text elements — элементы с экранируемым свободным текстом
  • foreign elements — сторонние элементы
  • normal elements — обычные элементы

em

ем, единица измерения в CSS, которая зависит от размера шрифта родителя, напр. font-size: 3em — размер шрифта 3 ема.

enable

активировать

enabled

активный, состояние элемента формы, в котором его изменение разрешено, напр. enabled button — активная кнопка.

engine

движок, напр. Safari is based on WebKit engine — Сафари работает на движке Вебкит.

F

fallback

фолбэк, запасной вариант, дополнительная реализация на случай отсутствия в браузере нужных возможностей, вроде включённых скриптов или нужных видеокодеков, напр. fallback to a link — сфолбэчить на ссылку.

favicon

фавико́нка, значок сайта, обычно 16×16 пикселей в формате ICO.

feature query

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

fieldset

группа полей, элемент, объединяющий несколько полей формы, напр. green border on a fieldset — зелёная рамка на группе полей.

figure

фигура, элемент из HTML5, содержащий изображение, видео, таблицу, график или фрагмент кода.

figcaption

заголовок фигуры, заглавие или подпись к фигуре.

filter

фильтр

  • filter: brightness — яркость
  • filter: contrast — контрастность
  • filter: grayscale — бесцветность
  • filter: sepia — сепия
  • filter: invert — инверсия
  • filter: saturate — насыщенность
  • filter: hue-rotate — поворот цвета
  • filter: blur — размытость
  • filter: opacity — непрозрачность
  • filter: drop-shadow — тень

flash of…

  • flash of unstyled text, FOUT — мелькание текста без стилей, отображение текста системным шрифтом до загрузки веб-шрифта
  • flash of invisible text, FOIT — мелькание невидимого текста, отсутствие текста на странице до загрузки веб-шрифта
  • flash of faux text, FOFT — мелькание синтезированного текста, отображение начертаний текста изменённым основным шрифтом до загрузки нужных шрифтов

flexbox

флексбокс, механизм раскладки.

  • flex container — флекс-контейнер
  • flex item — флекс-элемент
  • flex-direction — направление главной оси
  • flex-wrap — перенос флекс-элементов, определяет, является ли контейнер однострочным или многострочным
  • flex-basis — базовый размер флекс-элемента по главной оси
  • flex-grow — коэффициент растягивания
  • flex-shrink — коэффициент сжатия
  • main axis — главная ось, направление, в котором флекс-элементы следуют друг за другом в контейнере
  • cross axis — поперечная ось, направление, перпендикулярное главной оси
  • main size — главный размер, размер флекс-элемента по главной оси
  • cross size — поперечный размер, размер флекс-элемента по поперечной оси
  • justify-content — распределение флекс-элементов по главной оси
  • align-items — выравнивание флекс-элементов по поперечной оси
  • align-self — выравнивание флекс-элемента по поперечной оси
  • align-content — выравнивание строк контейнера по поперечной оси
  • order — порядковый номер флекс-элемента

float

  1. прил. плавающий, свойство блока, заставляющее последующие блоки обтекать его, напр. float layout — раскладка на плавающих блоках.
  2. гл. обтекать, следовать вплотную к плавающему блоку, напр. text is floating to the right — текст обтекает справа.
  3. гл. прижимать, упираться вправо или влево, обычно из-за плавающих свойств, напр. float block to the left — прижмите блок влево.

font

шрифт

  • font-weight — насыщенность

    • font-weight: normal — нормальная
    • font-weight: bold — жирная или полужирная (в типографской традиции)
    • font-weight: bolder — жирнее
    • font-weight: lighter — светлее

  • font-style — стиль шрифта

    • font-style: normal — прямой
    • font-style: italic — курси́в
    • font-style: oblique — наклонный

  • font-size — размер шрифта, кегль

  • font-family — семейство шрифта, гарнитура

    • font-family: serif — с засечками
    • font-family: sans-serif — без засечек
    • font-family: monospace — моноширинный

footer

подвал

  1. характерная визуальная область в конце страницы.
  2. элемент <footer> — смысловая часть с метаинформацией.

formatting context

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

  • block formatting context, BFC — блочный контекст форматирования, БКФ (напр. element with overflow establishes the new BFC — элемент с oveflow создает новый БКФ)
  • grid formatting context — контекст форматирования гридов (см. grid layout)
  • flexbox formatting context — контекст форматирования флексбоксов (см. flexbox)
  • inline formatting context — строчный контекст форматирования
  • table formatting context — табличный контекст форматирования

forced color mode

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

fragment identifier

идентификатор фрагмента, текст после # в URL, позволяющий сослаться на конкретную часть документа. Используется в основном в спецификациях и при работе с SVG, в HTML устоялся более привычный термин якорь.

framework

фреймво́рк, набор библиотек и компонентов для упрощения разработки. Как правило, представляет собой базовый каркас продукта. Напр., Twitter Bootstrap.

front-end

фронте́нд

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

full screen

полноэкранный режим, поведение программы или её части, в котором она занимает весь экран целиком.

fullstack

фулсте́к

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

Напр., Катерина разобралась с базами данных и исправила в резюме «фронтендер» на «фулстек».

function

функция

  1. в программировании — поименованный фрагмент программного кода (подпрограмма), к которому можно обратиться из другого места программы.
  2. в CSS — может присутствовать в декларации на позиции значения. Напр., url(img/gradient.png).

G

generated content

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

graceful degradation

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

gradient

градие́нт, плавный переход от одного цвета к другому.

  • linear gradient — линейный градиент
  • radial gradient — радиальный градиент
  • conical gradient — конический градиент

grid

  1. сетка, способ упорядочить расположение элементов в дизайне с помощью вертикального или горизонтального ритма, напр. module grid — модульная сетка.
  2. грид, двумерная сетка из рядов и колонок в грид-раскладке.

grid layout

грид-раскладка, механизм раскладки, позволяющий располагать элементы по двумерной сетке — гриду (2).

  • grid container — грид-контейнер
  • grid item — грид-элемент
  • grid track — грид-полоса, собирательный термин для рядов и колонок грида
  • grid cell — грид-ячейка
  • grid line — грид-линия, виртуальная граница между соседними грид-полосами, к которой можно привязывать грид-элементы
  • grid area — грид-область, пространство для размещения грид-элементов, ограниченное четырьмя грид-линиями
  • grid gutter — грид-интервал, промежуток между соседними грид-полосами

H

header

шапка

  1. характерная визуальная область в начале страницы.
  2. элемент <header> — смысловая озаглавливающая часть.

height

высота

I

icon font

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

immutable

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

implement

внедрять, реализовывать напр. Firefox has implemented support of everything — Файрфокс внедрил поддержку всего.

inline

  1. строчный, имеющий строчные свойства.

    • inline block — строчный блок.
    • inline box — элемент строки в строчном форматировании: часть наполнения контейнера строки, к которой непосредственно применяются CSS-правила, напр. anonymous inline box — анонимный элемент строки.
    • inline element — строчный элемент.

  2. встроенный, находящийся внутри строки кода.

    • inline styles — встроенные стили.
    • inline SVG — встроенный SVG.
    • inline script — встроенный скрипт.

input

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

intrinsic dimensions

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

internationalization, i18n

интернационализация, процесс проектирования и разработки интерфейса, позволяющий производить локализацию для различных регионов (различающихся по культуре или языку) без каких-либо технических изменений, напр., Intl.DateTimeFormat - конструктор класса, позволяющий форматировать дату и время с учетом локали.

interoperability

интероперабельность

K

kerning

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

keyframe

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

keyframe animation

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

keyframe selector

селектор ключевого кадра, способ обратится к конкретному кадру. Может быть from, to или проценты перед фигурными скобками с описанием стилей кадра в директиве @keyframes. Допускается говорить просто «селектор кадра», если из контекста понятно, что речь идет об анимациях. Пример: edit every keyframe selector in that animation — исправить каждый селектор кадра в этой анимации.

keyword

ключевое слово

L

label

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

last call (LC)

последний черновик, статус спецификации W3C для последних правок перед статусом кандидата в рекомендации (отменен в 2014 г., встречается только у старых спецификаций).

layout

раскладка, расположение основных блоков на странице, напр. 3 columns layout — раскладка в 3 столбца.

lazy loading

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

legend

легенда, заголовок группы элементов формы, определяется с помощью группы полей

length

длина

letter-spacing

межбуквенное расстояние, тре́кинг, общее расстояние между буквами в тексте, отличается от кернинга.

library

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

line-box

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

line-height

высота строки, интерлинья́ж, расстояние между базовыми линиями текста.

list

список, последовательное перечисление группы элементов.

  • ordered list — упорядоченный список, отсортированный по какому-либо принципу.
  • unordered list — неупорядоченный список, в котором порядок следования не имеет значения.

list-style

стиль списка

localization, l10n

локализация, процесс адаптации интерфейса под языковые и культурные соответствия определённого региона (страны, локали), напр., new Date().toLocaleDateString('en-US') - преобразует дату в ее строковое представление, согласно локали США.

M

margin

внешний отступ, напр. margin-bottom: -10px — нижний отрицательный отступ 10 пикселей.

margin box

внешние отступы чего-л.

matrix

ма́трица (трансформации), описание трансформации объекта с помощью матрицы.

media query

медиавыраже́ние, объявление директивы @media с некими условиями, позволяет применять стили в зависимости от возможностей устройства. Вариант перевода «медиазапросы» менее точно отражает суть работы.

media query list

условия медиавыражения, список условий, определяющих, в каких случаях будут применяться объявления внутри директивы @media. Напр., only screen and (min-width: 35em).

media type

медиати́п (тип устройства), может быть условием медиавыражения. Указывает, для какого способа вывода предназначены стили (напр. screen — на экран, print — на печать, speech — для синтезатора речи).

media feature

медиафи́ча (характеристика устройства), может быть условием медиавыражения. Определяет характеристику устройства. Напр., min-width.

mixin

при́месь, набор свойств, расширяющий поведение другой сущности, встречается в CSS-препроцессорах и паттернах JavaScript, напр. mixin is clearing — примесь очищает поток.

mobile first

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

mock object

фиктивный объект

mock-up

макет, внешний вид или дизайн сайта различной степени детализации, напр. designer has sent a page mock-up — дизайнер прислал макет страницы.

modal

  1. прил. мода́льный, блокирующий интерфейс для выполнения какого-либо действия, напр. modal dialog — модальный диалог.
  2. сущ. модальное окно (диалог), элемент интерфейса, см. модальный.

multiple

множественный, повторённый два и более раз, напр. multiple backgrounds — множественные фоны.

multiple columns

  1. мультиколо́нки, механизм из CSS, позволяющий выстроить текст в несколько колонок, напр. multiple columns support in IE — поддержка мультиколонок в IE. Предпочтительнее, чем громоздкие «множественные колонки».
  2. многоколо́ночный, состоящий из нескольких колонок, напр. multiple columns layout — многоколоночная раскладка.

N

nested

вложенный, находящийся внутри чего-либо, напр. double nesting — двойная вложенность.

node

узел, элемент структуры, напр. child node — дочерний узел.

number

число, числовой тип

O

opacity

непрозрачность, степень непрозрачности, напр. opacity: 0.1 — непрозрачность 10%. Часто ошибочно называется прозрачностью.

opaque

непрозрачный, степень непрозрачности, напр. opaque by 75% — непрозрачен на 75%, значит прозрачность 25%.

origin colors

начальные цвета, цвета до применения к ним встроенных в CSS изменений (см. relative colors).

outline

обводка, внешний равномерный контур элемента, не участвующий в блочной модели.

P

package manager

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

padding

внутренний отступ, напр. padding-top: 10px — верхний внутренний отступ 10 пикселей.

pagination

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

pattern

па́ттерн, формализованный подход к написанию кода, напр. JavaScript patterns — паттерны JavaScript.

parent

родитель

percentage

процентное значение, проценты

performance

быстродействие, характеристика скорости загрузки, отрисовки и т.п., напр. CSS performance — быстродействие CSS.

performance budget

бюджет на быстродействие, максимально допустимые показатели быстродействия веб-приложения. Выход за рамки такого бюджета означает спад быстродействия. Напр. Performance Budget Metrics — показатели бюджета на быстродействие.

persistent data structures

постоянные структуры данных

pinch

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

pixel

пи́ксель, единица измерения для экранного дизайна, в мн.ч. пиксели, сокр. пк.

  • physical pixel — физический пиксель, ячейка на матрице, единица разрешения дисплея устройства.
  • device independent pixel (dip) — виртуальный пиксель, независимый от устройства пиксель, может быть больше, меньше или равен физическому.
  • bitmap pixel — растровый пиксель.

pixel density

плотность пикселей, количество пикселей, которое помещается в единицу линейного размера экрана, напр. pixel density of the screen is 326 ppi — плотность пикселей экрана 326 пикселей на дюйм.

pixel ratio

пиксельное соотношение, отношение физического пикселя к виртуальному, напр. screen has pixel ratio of 2 — пиксельное соотношение экрана равно 2.

placeholder

  1. заглушка, временный заменитель картинки, текста и т.п. Напр.: Вместо портрета президента вставь пока заглушку с котиками.
  2. подсказка поля, атрибут текстового поля, предназначен для подсказки о том, как это поле заполнять. Чаще всего представляет собой пример заполнения. Напр.: placeholder="+7 (999) 123-12-13".

ppi (pixel per inch)

пикселей на дюйм, единица измерения плотности пикселей (см. pixel density).

plugin

TODO

polyfill

полифи́л, скрипт, воссоздающий недостающую функциональность, напр. new polyfill for IE6 — новый полифил для IE6.

progressive web metrics

прогрессивные веб-метрики, набор метрик страницы, связанных с быстродействием.

  • first paint — первая отрисовка
  • first contentful paint (FCP) — первая существенная отрисовка
  • first meaningful paint — первая значимая отрисовка
  • visually ready — визуальная готовность
  • visually complete — визуальная завершённость
  • first interactive — первая интерактивность
  • estimated input latency — ожидаемая задержка ввода
  • time to interactive (TTI) — время до первой интерактивности
  • time to first consistently interactive — время до стабильной интерактивности
  • largest contentful paint (LCP) — наибольшая существенная отрисовка
  • cumulative layout shift (CLS) — совокупное изменение раскладки
  • total blocking time (TBT) — суммарное время блокировки
  • first input delay (FID) — время отклика на первое взаимодействие

prolyfill

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

popover

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

popup

всплывающее окно, попа́п, отдельное окно или элемент интерфейса, появляющийся поверх текущего, напр. annoying popup — назойливый попап.

position

позиционирование

  • position: static — статичное
  • position: absolute — абсолютное
  • position: relative — относительное
  • position: fixed — фиксированное
  • position: sticky — закреплённое

preprocessor

препроце́ссор, инструмент, преобразующий код из одного синтаксиса в другой, напр. Sass CSS preprocessor — CSS-препроцессор Sass.

progress bar

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

progressive enhancement

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

Progressive Web App (PWA)

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

promises

про́мисы, способ асинхронного выполнения скриптов, противопоставляется использованию обратных вызовов.

property

свойство, напр. CSS-свойство.

proposed recommendation (PR)

предложенная рекомендация, статус спецификации W3C, вероятный кандидат в рекомендацию.

pseudo-element

псевдоэлемент, дополнительный внутренний элемент, созданный с помощью CSS и ::before или ::after.

pseudo-class

псевдокласс, используется для привязки декларации к определенному состоянию элемента DOM. Отделяется от селектора знаком двоеточия :. Напр., декларация блока правил с селектором .item:hover применится, когда на .item наведут курсор.

Q

quirks mode

режим совместимости, режим интерпретации и отображения страницы браузером, в котором браузер целенаправленно отходит от стандартов ради отображения документов, созданных до начала 2000-х гг. и полагавшихся на ошибки и особенности браузеров того времени. Используется для страниц без доктайпа и с устаревшими доктайпами (напр. HTML 3.2).

R

radio button

радиокно́пка, элемент формы <input type="radio"> для выбора одного варианта из нескольких, напр. radio button is checked — радиокнопка выбрана.

recalculate

перерасчет

recommendation (REC)

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

registry

реестр, место для хранения пакетов, напр. GitHub Package Registry — реестр пакетов Гитхаба. Калька «регистр» является неудачным переводом, поскольку конфликтует с употребимым во фронтенде значением регистр букв.

reflow

перекомпоновка

relative colors

производные цвета, изменение цвета, встроенное в CSS, напр. added OKLCH relative color syntax example — добавлен пример синтаксиса производного цвета в OKLCH. Появляются в спецификации CSS Color Module Level 5.

rem

рем, единица измерения в CSS, которая зависит от размера шрифта корневого элемента <html>, напр. font-size: 3rem — размер шрифта 3 рема.

render

отрисовка

repaint

перерисовка

reset

сброс, обычно сброс стилей по умолчанию в CSS, напр. style reset file — файл сброса стилей.

resolution

разрешение, количество физических пикселей на экране устройства, напр. screen resolution is 1024×768 pixels — разрешение экрана 1024×768 пикселей.

responsive design

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

Responsive Images Community Group (RICG)

Общественная группа по адаптивным изображениям

rest parameters

остаточные параметры, (также оставшиеся параметры, разг. рест-параметры) синтаксис в JavaScript, позволяющий представить неименованные параметры функции в виде массива.

root

корень

rounded corners

скруглённые углы, напр. rounded corners are out of fashion — скруглённые углы вышли из моды, см. также скругление рамки.

row

строка, ряд

  • горизонтальная область в таблице или раскладке.
  • элемент таблицы <tr>.

rowspan

объединение строк, HTML-атрибут для объединения нескольких ячеек таблицы в одном столбце.

rule-set

блок стилей элемента, состоит из селектора (или медиавыражения) и блока деклараций.

S

shallow comparison

поверхностное сравнение, сравнение, при котором проверяется, ссылаются ли две переменные на один и тот же объект в памяти.

scaffolding

скафо́лдинг, автоматическая генерация кода по описанию, метод метапрограммирования.

scale

  1. сущ. масштаб
  2. гл. масштабировать

scope

область видимости, ограниченная часть программной структуры, в которой доступна объявленная переменная, либо применяются <style scoped> стили.

screen reader

скринри́дер, программа, озвучивающая информацию с экрана устройства, один из видов вспомогательных технологий. Их используют зрячие люди, которым проще воспринимать информацию на слух, люди с дислексией, слепые или слабовидящие. Напр. they use screen reader to navigate the web — для навигации в сети они используют скринридер, screen reader will say “image cat” — скринридер прочитает «изображение кошка».

script

скрипт, инструкции, описывающие поведение страниц, напр. scripts are not loaded yet — скрипты пока не подгрузились.

scroll

  1. прокрутка, элемент интерфейса для перемещения скрытой части страницы или блока, является признаком того, что вложенный элемент больше родительского, напр. horizontal scroll is disabled — горизонтальная прокрутка запрещена.
  2. прокручивать, перемещать скрытую часть страницы или блока.

scrollbar

полоса прокрутки, формальное название прокрутки, напр. system scrollbars — системные полосы прокрутки.

sectioning roots

структурные основы

semantics

семантика, смысловая нагрузка HTML-элементов, напр. semantic coding — семантическая вёрстка.

selector

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

  • simple selector — простой селектор, может быть псевдоклассом или одним из следующих типов:
    • type selector — селектор по типу, обращается к тегу, напр. ul, input и др.
    • universal selector — универсальный селектор, «звездочка»: *.
    • ID selector — селектор по идентификатору, напр. #content.
    • class selector — селектор по классу, напр. .item.
    • attribute selector — селектор по атрибуту, напр. [type=submit].
  • compound selector (др. sequence of simple selectors) — составной селектор, цепочка простых селекторов, не разделенных комбинаторами, напр. input[type=submit]:focus.
  • complex selector — сложный селектор, несколько простых и/или составных селекторов, разделенных комбинаторами:
    • descendant selector — селектор потомка, напр. ul li.
    • child selector — селектор непосредственного потомка, напр. #buttons > *. Также часто называется дочерним.
    • adjacent sibling selector — селектор непосредственного соседства, напр. .item + .item. Также часто называется соседским.
    • general sibling selector — селектор соседства, напр. .item ~ .item.

server-side

серверсайд, область технологий, работающих на сервере, часто синоним бэкенда.

shadow DOM

теневой DOM, теневая модель документа

shapes

фигуры, CSS-фигуры

shared

  1. прил. разделяемый, напр. shared memory — разделяемая память
  2. прил. общий, напр. shared folder — общая папка, shared access — общий доступ

short-circuit evaluation

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

shim

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

sibling

сосед (в знач. «соседний элемент»).

sidebar

боковая панель, боковая часть сайта со второстепенным содержимым, напр. sidebar is on the right side — справа находится боковая панель.

skew

  1. сущ. наклон
  2. гл. наклонять

source maps

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

specification, spec

спецификация, документация по технологии для разработчиков и производителей браузеров, обычно в одном из статусов: от предложенной до утверждённой W3C, напр. specification draft — черновик спецификации.

spread

расширение, оператор в JavaScript, расширяющий выражения в тех местах, где предусмотрено использование нескольких аргументов при вызовах функций doSomething(...array), ожидается несколько элементов в массивах [1, 2, ...array]) и добавление или перезапись полей в объектах { ...object, field: 'value' }.

specificity

специфичность, характеристика CSS-селектора, определяющая его приоритет в каскаде. Складывается из веса каждого простого селектора в его составе.

stacking context

контекст наложения, элемент визуальной структуры страницы, ограничивающий действие свойства z-index его потомков и размещаемый по оси z как единое целое (либо целиком поверх, либо целиком под любым другим элементом). Напр. elements with opacity create new stacking context — элементы с полупрозрачностью образуют новый контекст наложения.

staging server

отладочный сервер, сервер, на котором продукт проходит тестирование и отладку.

standards mode, standards compliance mode

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

statement

объявление, структурный элемент CSS. Это может быть блок стилей элемента, директива импорта, медиавыражение и т.д.

string

  1. строковый тип, в программировании — тип данных, значениями которого является произвольная последовательность (строка) символов алфавита.
  2. строка, в CSS — строковое значение директивы или свойства. Напр., в content: "\201d" строкой является "\201d".

stub object

заглушка

style

  1. сущ. стили, напр. apply styles to an element — применить стили к элементу, мн.ч. предпочтительнее: стили элемента, а не стиль элемента (неправильно).
  2. гл. оформлять, напр. how to style selects — как оформить селекты, предпочтительнее, чем двусмысленное «стилизовать».

style guide

руководство по стилю, напр. project code style guide — руководство по стилю кода проекта.

stylesheet

таблица стилей, напр. таблица стилей документа.

swipe

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

submit

отправка, напр. отправка формы.

T

tab

  1. вкладка, один из слоёв интерфейса сайта или программы, который активируется выбором его заголовка, напр. open in new tab — открыть в новой вкладке.
  2. таб, клавиша табуляции, вставляет символ табуляции, переключает фокус на следующий элемент интерфейса, либо дополняет частично набранное слово, напр. press Ctrl Tab — нажмите контрол-таб.
  3. таб, символ табуляции, имеет настраиваемую ширину и используется для отступов в коде, напр. tabs are better than spaces — табы лучше пробелов.

tag

  1. тег, обозначение элемента в HTML, существуют открывающие, закрывающие и одиночные теги. Напр. закрывающий тег отсутствует — closing tag is missing.
    • tag name — название тега
    • start tag — открывающий тег
    • end tag — закрывающий тег
  2. метка, маркер содержимого, обычно короткое слово.

tap

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

text

текст

textarea

текстовая область, элемент формы для ввода многострочного текста.

text-align

выравнивание, вы́ключка, ориентация строк текста в определённом направлении, либо равномерно по ширине блока.

  • text-align: left — влево
  • text-align: right — вправо
  • text-align: justify — по ширине

text-shadow

тень (текста), напр. text-shadow is red — тень текста красная.

throttling

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

thumb

  1. Сокращение от thumbnail.
  2. ползунок, элемент управления полосой прокрутки.

thumbnail

миниатюра, уменьшенная копия изображения.

title

  1. заголовок, если речь идёт об элементе <title>, либо о заглавии элемента.
  2. подсказка, если речь идёт об атрибуте title="".

toggle

переключать, переводить из одного состояния в другое, переключить классы — toggle classes.

tooltip

всплывающая подсказка, вспомогательная информация, появляющаяся при наведении на элемент или при его активации, в частности title="".

touch interface

сенсорный интерфейс

transform

трансформация, напр. transform: scale(2) — трансформация масштабированием в 2 раза.

transition

переход, напр. transition: all 2s linear — линейный переход длительностью 2 секунды.

translate

перемещать, перемещение объекта с помощью CSS-трансформации, напр. translate(x, y) — перемещение на X и Y.

transpiler

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

typography

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

typographic mode

типографический режим, концепция, отличающая вертикальный набор текста от горизонтального набора с поворотом. Может быть горизонтальным (horizontal typographic mode) или вертикальным (vertical typographic mode).

U

unit

единица изменения, напр. rem unit — единица измерения «рем».

unit testing

модульное тестирование

URI

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

URL

  1. разг. адрес. Значение рекомендовано к использованию при переводах статей.

  2. унифицированный указатель ресурса, URI, который предоставляет ещё и информацию о местонахождении этого ресурса, напр. background: url("http://www.example.com/picture.png")

user experience (UX)

пользовательский опыт, совокупность ощущений от взаимодействия с чем-л. (интерфейсом, девайсом, продуктом). В контексте области знаний рекомендуется употреблять аббревиатуру UX (напр., UX-специалист).

user interface (UI)

пользовательский интерфейс, в прозрачном контексте рекомендуется употреблять просто «интерфейс».

utility

утили́та, программа с узким назначением.

V

valid

валидный, соответствующий стандарту, спецификации или другому нормативу, напр. valid markup — валидная разметка.

validator

валидатор, средство проверки соответствия стандарту, спецификации или другому нормативу (см. valid), напр. W3C markup validator — валидатор разметки W3C.

value

значение, напр. значение CSS-свойства.

variable units

переменные единицы измерения, — кастомные свойства, которые можно использовать как единицы измерения в CSS. Допустимо использование в сокращённом виде, без слова «измерения», напр. variable units make this easier to write — переменные единицы делают эту запись проще.

vendor prefix

бра́узерный пре́фикс, приставка к CSS-свойству -webkit- или -moz-, напр. add vendor prefixes — добавьте браузерные префиксы.

vendor files

сторонние файлы, стили, скрипты и другие ресурсы (зависимости) других авторов, использующиеся в проекте, напр. tons of vendor scripts included in the code — куча сторонних скриптов подключены в коде.

vertical-align

вертикальное выравнивание, расположение элементов по вертикали в пределах строки текста или таблицы.

viewport

вьюпо́рт

  1. видимая область документа в рамках экрана.
  2. элемент <meta name="viewport">, управляющий адаптацией страниц на мобильных устройствах.

W

website, web site

сайт, объединённые под одним адресом страницы, перевод «веб-сайт» избыточен.

worker

воркер, интерфейс в JavaScript, позволяющий выполнить скрипт не в основном потоке.

  • web worker — веб-воркер
  • service worker — сервис-воркер
  • shared worker — общий воркер

working draft (WD)

рабочий черновик, ранний статус спецификации W3C.

worklet

во́рклет, класс в JavaScript, обладающий заранее известными методами с определённой сигнатурой, дающий доступ к различным браузерным API. Проект Гудини предусматривает следующие виды ворклетов:

  • paint worklet — ворклет отрисовки
  • compositor worklet — ворклет композитинга
  • layout worklet — ворклет раскладки

World Wide Web Consortium (W3C)

Консорциум всемирной сети, организация, разрабатывающая веб-стандарты. Переводить «web» как «паутину» в XXI веке уже смешно.

web standards

веб-стандарты

whitespace

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

  • space — пробел.
  • em space широкий пробел, em-пробел.
  • en space — короткий пробел, en-пробел.
  • thin space — узкий пробел, тонкий пробел.
  • hair space — волосяной пробел.
  • figure space — цифровой пробел, используется для выравнивания чисел, неразрывный.
  • mathematical space — математический пробел, используется для разделения математических символов.
  • zero-width space — пробел нулевой ширины.
  • no-break space — неразрывный пробел.
  • narrow no-break space — узкий неразрывный пробел.
  • zero width no-break space — неразрывный пробел нулевой ширины.
  • word joiner — объединяющий символ, непробел. Устоявшегося перевода нет, обычно оставляют непереведенным.

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

width

ширина

word-spacing

межсловный пробел

workaround

обходное решение (приём), способ решения задачи в ограниченных условиях, напр. to figure out workaround — придумать обходной приём.

Распространяется по лицензии CC-BY-SA 4.0.