Когда дело доходит до разговора о веб-дизайне, многие люди начинают перлы вроде “броузер” или того хуже. Ниже приведен список самых популярных терминов и выражений по фронтэнду, для всеобщего образования. Читаем, учим, говорим правильно!
A
adaptive design
адаптивный дизайн, подход к дизайну сайтов, учитывающий их адаптацию под различные устройства и условия, противопоставляется распространённому «фиксированному» дизайну только для компьютеров.
anchor
ссылка, гиперссылка между двумя документами.
якорь, ссылка на элемент в пределах документа, может быть частью гиперссылки.
animation
анимация, плавное изменение визуальных параметров объекта.
asset
ресурс, обычно вспомогательный, как стили и картинки для страницы, напр. ресурсы сайта — site assets.
assert
проверка, условие, которое проверяется, употр. в тестировании, напр. проверка поля не прошла — field assert has failed.
B
browser
бра́узер
back-end
бэке́нд
область веб-технологий, работающих на сервере.
внутренняя часть серверной системы, занимается обработкой данных.
background
фон, напр. фоновое изображение — background image.
baseline
базовая линия, воображаемая линия в основании букв в строке.
blockquote
блочная цитата, HTML-элемент для выделения цитируемой нестрочной области документа. Может содержать атрибут cite со ссылкой на первоисточник.
border
рамка, внешняя видимая часть блока, напр. рамка слева — border-left.
border-radius
скругление рамки, напр., скругление рамки на 3 пикселя — border-radius:3px, скругление верхнего левого угла — border-top-left-radius, см. также скруглённые углы.
box model
блочная модель, система размерностей блока, состоит из содержимого, отступа и рамки, не включает внешний отступ и обводку.
box-shadow
тень (блока), напр. тень блока красная — box-shadow is red.
breadcrumbs
хлебные кро́шки, вспомогательная навигация на сайте, последовательно отражающая структуру или пройденные шаги.
button
кнопка
элемент интерфейса, при нажатии отправляющий форму или производящий иное действие
элемент формы button или input type="button" (также submit и image).
C
callback
обратный вызов, исполнение кода по завершению работы функции, напр. передай значение в обратном вызове — pass value in a callback.
cell
ячейка
структурная единица таблицы.
элемент таблицы td или th
cellpadding
отступ в ячейках таблицы.
cellspacing
расстояние между ячейками таблицы.
checkbox
чекбо́кс
элемент интерфейса для выбора одного или нескольких вариантов, напр. чекбокс неактивен — checkbox is disabled.
элемент формы input type="checkbox"
clear
очистка (потока)
clear:left — очистка слева
clear:right — очистка справа
clear:both — полная очистка
client-side
клиентсайд, область технологий, работающих в браузере, часто синоним фронтенда.
closure
замыкание, функция, содержащая в теле ссылки на переменные, объявленные в окружающем коде.
code
сущ. код, неисчисл. (как сахар), напр. ошибка в коде — error in code но не ошибка в кодах (неправильно).
гл. писать код, верстать, программировать, напр. верстать сайт — to code a site.
colspan
объединение столбцов, HTML-атрибут для объединения нескольких ячеек таблицы в одной строке.
column
столбец, колонка, вертикальная область в таблице, раскладке или тексте.
content
содержимое
cross-browser
кроссбра́узерный, работающий во всех браузерах, слитно.
cross-platform
кроссплатфо́рменный, работающий во на всех платформах, слитно.
CSS Working Group (CSSWG)
Рабочая группа CSS
D
design
сущ. дизайн, визуальный облик сайта, может включать принципы взаимодействия и архитектурные решения, напр. новый дизайн для сайта — new design for site.
гл. разрабатывать, создавать или проектировать внешний вид и функциональность.
disabled
неактивный, состояние элемента формы, в котором его изменение запрещено, напр. неактивная кнопка — disabled button.
display
вид
display:none — скрытый вид
display:block — блочный вид
display:inline — строчный вид
display:inline-block — вид строчного блока
DOM
объектная модель документа, дом
doctype
докта́йп, конструкция вида DOCTYPE html в начале документа, которая обозначает используемую версию HTML.
dropdown
выпадающее меню, элемент интерфейса, раскрывающий дополнительную информациию при активации.
E
easing
плавность, функция плавности, описывает изменение скорости анимации с помощью ключевых слов или кривых Безье, напр. плавность перехода линейная — transition easing is linear.
em
ем, единица измерения в CSS, которая зависит от размера шрифта родителя, напр. размер шрифта 3 ема — font-size:3em.
enabled
активный, состояние элемента формы, в котором его изменение разрешено, напр. активная кнопка — enabled button.
engine
движок, напр. Сафари работает на движке Вебкит — Safari is based on WebKit engine.
F
fallback
TODO
favicon
фавикон, значок сайта, обычно 16×16 пикселей в формате ICO.
fieldset
группа полей, элемент, объединяющий несколько полей формы, напр. зелёная рамка на группе полей — green border on a fieldset.
figure
фигура, элемент из HTML5, содержащий изображение, видео, таблицу, график или фрагмент кода.
figcaption
заголовок фигуры, заглавие или подпись к фигуре.
float
прил. плавающий, свойство блока, заставляющее последующие блоки обтекать его, напр. раскладка на плавающих блоках — float layout.
гл. обтекать, следовать вплотную к плавающему блоку, напр. текст обтекает справа — text is floating to the right.
гл. прижимать, упираться вправо или влево, обычно из-за плавающих свойств, напр. прижмите блок влево — 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
подвал
характерная визуальная область в конце страницы.
элемент footer — смысловая часть с метаинформацией.
framework
фреймво́рк, набор готовых решений для упрощения разработки.
front-end
фронте́нд
область технологий для разработки веб-интерфейсов, включает вспомогательные инструменты и технологии работающие в браузере или клиентсайд.
внешняя часть серверной системы, отвечающая за приём данных, отправку ответов и генерацию кода для браузера, входит в серверсайд.
full screen
полноэкранный режим, поведение программы или её части, в котором она занимает весь экран целиком.
G
graceful degradation
постепенная деградация, подход, при котором для старых браузеров пишутся костыли, которые приводят внешний вид и поведение сайта в соответствие с новыми браузерами, однако в дальнейшем от старых браузеров и костылей для них отказываются.
gradient
градие́нт, плавный переход от одного цвета к другому.
linear gradient — линейный градиент
radial gradient — радиальный градиент
conical gradient — конический градиент
grid
сетка, способ упорядочить расположение элементов в дизайне с помощью вертикального или горизонтального ритма, напр. модульная сетка — module grid.
H
header
шапка
характерная визуальная область в начале страницы.
элемент header — смысловая озаглавливающая часть.
height
высота
I
implement
внедрять, реализовывать напр. Firefox внедрил поддержку всего — Firefox has implemented support of everything.
inline
строчный
inline block — строчный блок
inline box — элемент строки в строчном форматировани: часть наполнения контейнера строки, к которой непосредственно применяются CSS-правила, напр. анонимный элемент строки — anonymous inline box.
inline element — строчный элемент
inline styles — локальные стили
input
поле (ввода), элемент формы. TODO.
K
kerning
кернинг, расстояние между парами букв, учитывающее их форму для более равномерного набора.
keyframe
ключевой кадр, одна из заданных точек анимации, изменения между которыми происходят автоматически.
keyframe animation
покадровая анимация, способ задания анимации в CSS с помощью ключевых кадров.
L
layout
раскладка, расположение основных блоков на странице, напр. раскладка в 3 столбца — 3 columns layout.
letter-spacing
межбуквенное расстояние, тре́кинг, общее расстояние между буквами в тексте, отличается от кернинга.
line-box
контейнер строки в строчном форматировании: виртуальный контейнер, содержащий в себе все элементы одной строки.
line-height
высота строки, интерлинья́ж, расстояние между базовыми линиями текста.
list
список, последовательное перечисление группы элементов.
ordered list — упорядоченный список, отсортированный по какому-либо принципу.
unordered list — неупорядоченный список, в котором порядок следования не имеет значения.
list-style
стиль списка
M
margin
внешний отступ, напр. нижний отрицательный отступ 10 пикселей — margin-bottom:-10px.
matrix
ма́трица (трансформации), описание трансформации объекта с помощью матрицы.
media queries
медиавыраже́ния, слитно.
mixin
при́месь, набор свойств, расширяющий поведение другой сущности, встречается в CSS-препроцессорах и подходах к JavaScript, напр. примесь очищает поток — mixin is clearing.
mock-up
макет, внешний вид или дизайн сайта различной степени детализации, напр. дизайнер прислал макет страницы — designer sent a page mock-up.
modal
прил. мода́льный, блокирующий интерфейс для выполнения какого-либо действия, напр. модальный диалог — modal dialog.
сущ. модальное окно (диалог), элемент интерфейса, см. модальный.
multiple
множественный, повторённый два и более раз, напр. множественные фоны — multiple backgrounds.
multiple columns
мультиколо́нки, механизм из CSS, позволяющий выстроить текст в несколько колонок, напр. поддержка мультиколонок в IE — multiple columns support in IE. Предпочтительнее, чем громоздкие «множественные колонки».
многоколо́ночный, состоящий из нескольких колонок, напр. многоколоночная раскладка — multiple columns layout.
N
nested
вложенный, находящийся внутри чего-либо, напр. двойная вложенность — double nesting.
node
узел, элемент структуры, напр. дочерний узел — child node.
O
opacity
прозрачность, степень прозрачности, напр. прозрачность 10% — opacity:0.1.
opaque
непрозрачный, степень непрозрачности, напр. непрозрачен на 75% — opaque by 75%, значит прозрачность 25%.
outline
обводка, внешний равномерный контур элемента, не участвующий в блочной модели.
P
package manager
TODO
padding
внутренний отступ, напр. верхний внутренний отступ 10 пикселей — padding-top:10px.
pagination
постраничная навигация, обычно список ссылок с номерами страниц, на которые разбит документ.
разделение на страницы, разделение документа на отдельные страницы для удобства чтения, загрузки или других целей.
pattern
па́ттерн, формализованный подход к написанию кода, напр. паттерны JavaScript — JavaScript patterns.
performance
быстродействие, характеристика скорости загрузки, отрисовки и т.п., напр. быстродействие CSS.
pixel
пи́ксель, единица измерения для экранного дизайна, в мн.ч. пиксели, сокр. пк.
polyfill
полифи́л, скрипт, воссоздающий недостающую функциональность, напр. новый полифил для IE6 — new polyfill for IE6.
popup
всплывающее окно, попа́п, отдельное окно или элемент интерфейса, появляющийся поверх текущего, напр. назойливый попап — annoying popup.
position
позиционирование
position:static — статичное
position:absolute — абсолютное
position:relative — относительное
position:fixed — фиксированное
position:sticky — закреплённое
preprocessor
препроце́ссор, инструмент, преобразующий код из одного синтаксиса в другой, напр. CSS-препроцессор Sass — Sass CSS preprocessor.
promises
про́мисы, способ асинхронного выполнения скриптов, противопоставляется использованию обратных вызовов.
progress bar
индикатор выполнения, элемент интерфейса, отражающий прогресс выполнения операции.
progressive enhancement
прогрессивное улучшение, подход, при котором все браузеры получают базовую функциональность, а большее получают только способные на это, например скруглённые углы, градиенты и тени.
R
radio button
радиокно́пка, элемент формы input type="radio" для выбора одного варианта из нескольких, напр. радиокнопка выбрана — radio button is checked.
rem
рем, единица измерения в CSS, которая зависит от размера шрифта корневого элемента html, напр. размер шрифта 3 рема — font-size:3rem.
reset
сброс, обычно сброс стилей по умолчанию в CSS, напр. файл сброса стилей — style reset file.
responsive design
TODO
Responsive Images Community Group (RICG)
Общественная группа по адаптивным изображениям
rounder corners
скруглённые углы, напр. скруглённые углы вышли из моды — rounded corners are out of fasion, см. также скругление рамки.
row
строка, ряд
горизонтальная область в таблице или раскладке.
элемент таблицы tr
rowspan
объединение строк, HTML-атрибут для объединения нескольких ячеек таблицы в одном столбце.
S
scaffolding
скафо́лдинг, автоматическая генерация кода по описанию, метод метапрограммирования.
scale
сущ. масштаб
гл. масштабировать
script
скрипт, инструкции, описывающие поведение страниц, напр. скрипты пока не подгрузились — scripts are not loaded yet.
semantics
семантика, смысловая нагрузка HTML-элементов, напр. семантическая вёрстка — semantic coding.
server-side
серверсайд, область технологий, работающих на сервере, часто синоним бэкенда.
shadow DOM
теневой DOM, теневая модель документа
shim
шим, код, помогающий унифицировать работу с браузерами, обычно реализует недостающую или нормализует существующую поддержку, напр. HTML5-шим для IE8 — HTML5 shim for IE8.
sidebar
боковая панель, боковая часть сайта со второстепенным содержимым, напр. справа находится боковая панель.
skew
сущ. наклон
гл. наклонять
source maps
карты кода, специальная разметка, позволяющая привести в соответствие исходные файлы и скомпилированный код для отладки.
style
сущ. стили, напр. применить стили к элементу — apply styles to an element, мн.ч. предпочтительнее: стили элемента, а не стиль элемента (неправильно).
гл. оформлять, напр. как оформить селекты — how to style selects. Предпочтительнее, чем двусмысленное «стилизовать».
T
tab
вкладка, один из слоёв интерфейса сайта или программы, который активируется выбором его заголовка, напр. открыть в новой вкладке — open in new tab.
таб, клавиша табуляции, вставляет символ табуляции, переключает фокус на следующий элемент интерфейса, либо дополняет частично набранное слово, напр. нажмите контрол-таб — press Ctrl Tab.
таб, символ табуляции, имеет настраиваемую ширину и используется для отступов в коде, напр. табы лучше пробелов — tabs are better than spaces.
textarea
текстовая область, элемент формы для ввода многострочного текста.
text-align
выравнивание, вы́ключка, ориентация строк текста в определённом направлении, либо равномерно по ширине блока.
text-align:left — влево
text-align:right — вправо
text-align:justify — по ширине
text-shadow
тень (текста), напр. тень текста красная — text-shadow is red.
thumbnail
миниатюра, уменьшенная копия изображения.
title
заголовок, если речь идёт об элементе title, либо о заглавии элемента.
подсказка, если речь идёт об атрибуте title="".
toggle
переключать, переводить из одного состояния в другое, переключить классы — toggle classes.
tooltip
всплывающая подсказка, вспомогательная информация, появляющаяся при наведении на элемент или при его активации, в частности title="".
touch
TODO
transform
трансформация, напр. трансформация масштабированием в 2 раза — transform:scale(2).
transition
переход, напр. линейный переход длительностью 2 секунды — transition:all 2s linear.
translate
перемещать, перемещение объекта с помощью CSS-трансформации, напр. перемещение на X и Y — translate(x, y).
typography
типографика, оформление текста с помощью выбора гарнитуры, параметров строки и других.
U
unit
единица изменения, напр. единица измерения «рем» — rem unit.
utility
утили́та, программа с узким назначением.
V
valid
TODO
validator
TODO
vendor prefix
бра́узерный пре́фикс, приставка к CSS-свойству -webkit- или -moz-, напр. добавьте браузерные префиксы — add vendor prefixes.
vertical-align
вертикальное выравнивание, расположение элементов по вертикали в пределах строки текста или таблицы.
viewport
вьюпо́рт
видимая область документа в рамках экрана.
элемент meta name="viewport", управляющий адаптацией страниц на мобильных устройствах.
W
website, web site
сайт, объединённые под одним адресом страницы, перевод «веб-сайт» избыточен.
World Wide Web Consortium (W3C)
Консорциум всемирной сети, организация, разрабатывающая веб-стандарты. Переводить «web» как «паутину» в XXI веке уже смешно.
web standards
веб-стандарты
width
ширина
word-spacing
межсловный пробел
workaround
обходное решение (приём), способ решения задачи в ограниченных условиях, напр. придумать обходной приём — to figure out workaround.
