Emmet для Far Manager

Расширение Emmet-подобных сокращений для встроенного редактора Far Manager. Набираете короткую аббревиатуру, нажимаете Ctrl+E — и получаете готовую HTML-разметку или CSS-свойство.

Поддерживаются HTML/XSL и CSS (свойства, значения, @media и другие @-правила). Движок — чистый Lua, порт оригинального emmet.js.

Содержание

  1. Установка и проверка
  2. Использование
  3. Синтаксис файла
  4. HTML-аббревиатуры
  5. CSS-аббревиатуры
  6. Полный справочник CSS
  7. Полный справочник HTML/XSL
  8. Табстопы (${0})
  9. Встроенные сниппеты
  10. Ограничения
  11. Частые вопросы

Установка и проверка

Скачать архив Emmet: faremmet.7z (страница загрузки — download.php).

  1. Убедитесь, что Far Manager завершён.
  2. Распакуйте архив (нужен 7-Zip) прямо в папку макросов профиля — без подпапок: %APPDATA%\Far Manager\Profile\Macros\scripts\. Или из корня проекта запустите deploy.cmd — он скопирует emmet_far.lua, emmet.lua и snippets.lua в ту же папку.
  3. Запустите Far Manager. При старте не должно быть ошибок (проверьте Alt+F8).

Проверка

  1. Откройте редактор (F4).
  2. Введите ul>li*3 и нажмите Ctrl+E.
  3. Аббревиатура должна раскрыться в структуру <ul> с тремя <li>, а курсор встать внутрь первого элемента. В тексте не должно оставаться никаких маркеров вроде ${0}.
Если вместо этого появилось сообщение «Расширение Emmet не загрузилось» — проверьте, что макрос установлен корректно (шаг 2) и не было ошибок при старте.

Использование

Раскрытие происходит только когда курсор стоит сразу после аббревиатуры (в том числе в середине строки — раскроется только она, всё, что слева, останется на месте).

Куда встанет курсор после раскрытия:

Синтаксис файла

Определяется автоматически по расширению открытого файла:

РасширениеСинтаксис
.html и прочиеhtml
.xml, .xslxsl
.css, .scss, .lesscss

В .html-файлах CSS-аббревиатуры раскрываются и внутри тега <style>…</style>: пока курсор находится в открытом CSS-блоке, используется синтаксис css. Вне <style> — обычный html.

HTML-аббревиатуры

Основные элементы

АббревиатураРезультат
div<div></div> — курсор между тегами
ul>li*3<ul> с тремя <li></li>
div#page.wrap<div id="page" class="wrap">
a[href="#"]<a href="#">
p{Hello}<p>Hello</p>
(h2+p)*2две пары h2+p
ul>li.item$*3нумерация item1..item3
div#x>p|cто же + комментарий <!-- /#x -->
! или html:5каркас HTML5-документа

Операторы

ОператорПримерОписание
>div>spanвложенность (ребёнок)
+h2+pсоседний элемент
^div>p^spanподъём на уровень выше
*li*5умножение
()(h2+p)*2группировка
#div#idатрибут id
.div.clsатрибут class
[]a[href target]атрибуты
{}a{Текст}текстовое содержимое
$li.item$счётчик
|sul>li*3|sфильтр «в одну строку»
|cdiv#x>p|cфильтр «комментарий»

Счётчики

Символ $ в имени, классе или тексте заменяется на порядковый номер. Несколько $$$ — с нулями (.item$$ → item01..item99). Модификаторы: $@- — обратный отсчёт, $@3 — старт с 3. 

ul>li.item$@-*3    →  item3, item2, item1
ul>li.item$@3*2    →  item3, item4

CSS-аббревиатуры

Сокращения работают в .css/.less/.scss файлах и внутри <style> в HTML. Свойство — это короткое имя (см. ниже), значение пишется сразу после него, без пробела.

Значения · Функции · Бордеры · Фон и цвет · Шрифт и текст · Размеры и отступы · Раскладка · Тени, трансформации, анимации · Списки и таблицы · @-правила · Псевдоклассы

Как собрать значение

АббревиатураРезультатПравило
w100width: 100px;число без единицы → px
w12.5width: 12.5em;число с точкой → em
h50p, w10e, w10r, w10x50%, 10em, 10rem, 10exсуффиксы единиц: p→%, e→em, r→rem, x→ex
lh1.5, z10, op.5line-height: 1.5;, z-index: 10;, opacity: .5;без единицы: line-height, z-index, opacity, font-weight, zoom
mt-10margin-top: -10px;минус перед числом — отрицательное значение
m10-20-30-40margin: 10px 20px 30px 40px;несколько значений через дефис
m10-amargin: 10px auto;ключевые слова: a=auto, i=inherit, s=solid, da=dashed, do=dotted, t=transparent
c#f00color: #f00;цвет через #: #ff0000 → #f00, #t → transparent
w100!width: 100px !important;восклицательный знак в конце — !important
Если сокращения нет в словаре, получится заготовка, куда значение вписывается вручную: например, mtf → mtf: ;.

Функции

CSS-функции rgb(), translate(), url() и т.п. — это готовые сниппеты словаря. Аргументы подставляются значениями по умолчанию, которые правятся на месте (курсор встаёт в первую незаполненную позицию):

АббревиатураРезультат
c:r, c:racolor: rgb(0, 0, 0);, rgba(0, 0, 0, .5);
bxsh:r, bxsh:rabox-shadow: inset hoff voff blur rgb(…); / rgba(…)
tsh:r, tsh:ratext-shadow: h v blur rgb(…); / rgba(…)
trf:t, trf:tx, trf:tytransform: translate(x, y);, translateX(x);, translateY(y);
trf:r, trf:sc, trf:scx, trf:scytransform: rotate(angle);, scale(x, y);, scaleX(x);, scaleY(y);
trf:skx, trf:skytransform: skewX(angle);, skewY(angle);
animtf:cbanimation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 1.0);
bgi, bg+, @i, @fbackground-image: url();, background: #fff url() 0 0 no-repeat;, @import url();, блок @font-face
cnt:acontent: attr();
hsl()/hsla(), градиенты (lg, lgs, rg, cg), calc(), var(), min()/max() — в словаре нет, пишутся вручную (background: linear-gradient(...)). Если набрать lg, получится заготовка lg: ;.

Бордеры

За bd («border») через дефис идут ширина, стиль и цвет: bd1-s#f00 → border: 1px solid #f00;.

АббревиатураРезультат
bdborder: ; — курсор у значения
bd+border: 1px solid #000; — готовый шаблон
bd1-s#f00border: 1px solid #f00;
bd:nborder: none;
bdw2border-width: 2px;
bds:sborder-style: solid;
bdc#f00border-color: #f00;
bdc:tborder-color: transparent;
bdcl:cborder-collapse: collapse; (таблицы)

Стороны:

СторонаШаблонШиринаСтильЦвет
верх — bdt / btbdt+bdtwbdtsbdtc
право — bdr / brbdr+bdrwbdrstbdrc
низ — bdb / bbbdb+bdbwbdbsbdbc
лево — bdl / blbdl+bdlwbdlsbdlc

Например: bdt1-s#00f → border-top: 1px solid #00f;

Стили: s=solid, dt=dotted, ds=dashed, db=double, g=groove, r=ridge, i=inset, o=outset, h=hidden, n=none. Пример: bds:dt → border-style: dotted;

Скругления: bdrs10 → border-radius: 10px;, bdrs50% → border-radius: 50%;. Углы — bdtlrs, bdtrrs, bdbrrs, bdblrs.

Фон и цвет

АббревиатураРезультат
bg, bg:nbackground: ;, background: none;
bg+background: #fff url() 0 0 no-repeat;
bgc, bgc#f00, bgc:tbackground-color: #fff;, …#f00;, …transparent;
bgi, bgi:nbackground-image: url();, …none;
bgr:n, bgr:x, bgr:ybackground-repeat: no-repeat;, repeat-x;, repeat-y;
bga:f, bga:sbackground-attachment: fixed;, scroll;
bgp, bgp10-20background-position: 0 0;, …10px 20px;
bgsz:cv, bgsz:ctbackground-size: cover;, contain;
bgcp:bb, bgcp:pb, bgcp:cbbackground-clip: border-box;, padding-box;, content-box;
c, c#f00color: #000;, color: #f00;
c:r, c:racolor: rgb(0, 0, 0);, rgba(0, 0, 0, .5);

Шрифт и текст

АббревиатураРезультат
fz14, fz1.2e, fz13pfont-size: 14px;, 1.2em;, 13%;
fw:b, fw:nfont-weight: bold;, normal;
fs:i, fsfont-style: italic; (без значения — italic)
ff:ss, ff:s, ff:mfont-family: sans-serif;, serif;, monospace;
f+font: 1em Arial,sans-serif;
lh1.5, lh2line-height: 1.5;, 2;
lts, wosletter-spacing: ;, word-spacing: ;
ta:c, ta:r, ta:jtext-align: center;, right;, justify;
td:u, td:o, td:l, td:ntext-decoration: underline;, overline;, line-through;, none;
tt:u, tt:c, tt:ltext-transform: uppercase;, capitalize;, lowercase;
ti:-text-indent: -9999px;
tov:e, tov:ctext-overflow: ellipsis;, clip;
tsh, tsh+, tsh:ntext-shadow: hoff voff blur #000;, 0 0 0 #000;, none;
va:m, va:t, va:b, va:supvertical-align: middle;, top;, bottom;, super;
whs:nw, whs:pwhite-space: nowrap;, pre;
wow:b, wob:baword-wrap: break-word;, word-break: break-all;
cntcontent: '…'; — курсор в кавычках

Размеры и отступы

АббревиатураРезультат
m10, m10-20-30-40, m10-a, m:amargin: 10px;, 10px 20px 30px 40px;, 10px auto;, auto;
mt, mr, mb, mlmargin-top/right/bottom/left: ; (и с числом: mt10, mt-10)
p0, p0-a, p10-20padding: 0;, 0 auto;, 10px 20px;
pt, pr, pb, plpadding-top/right/bottom/left: ;
w100, h50%, h:a, w:awidth: 100px;, height: 50%;, auto;
maw, mah, miw, mihmax-width/height: ;, min-width/height: ;
bxz, bxz:cbbox-sizing: border-box;, content-box;

Раскладка

АббревиатураРезультат
d:n, d:b, d:i, d:ib, d:tb, d:tbcdisplay: none;, block;, inline;, inline-block;, table;, table-cell;
pos:a, pos:r, pos:f, pos:sposition: absolute;, relative;, fixed;, static;
t, r, b, ltop/right/bottom/left: ; — с числом t10 → top: 10px;, t:a → auto;
z10z-index: 10;
fl:l, fl:r, fl:nfloat: left;, right;, none;
cl:b, cl:l, cl:r, cl:nclear: both;, left;, right;, none;
v:h, v:v, v:cvisibility: hidden;, visible;, collapse;
ov:h, ov:a, ov:s, ov:voverflow: hidden;, auto;, scroll;, visible;
ovx:h, ovy:aoverflow-x: hidden;, overflow-y: auto;
rsz:n, rsz:h, rsz:v, rsz:bresize: none;, horizontal;, vertical;, both;
cur:p, cur:m, cur:t, cur:ccursor: pointer;, move;, text;, crosshair;
op.5, zooopacity: .5;, zoom: 1;

Тени, трансформации, анимации

АббревиатураРезультат
bxsh, bxsh:nbox-shadow: inset hoff voff blur color;, none;
trf:r, trf:sc, trf:tx, trf:ty, trf:skx, trf:skytransform: rotate(…);, scale(…);, translateX/Y(…);, skewX/Y(…);
trfs, trfotransform-style: preserve-3d;, transform-origin: ;
trs, trsdu1s, trsde.2s, trsp, trstftransition: prop time;, transition-duration: 1s;, transition-delay: .2s; и др.
anim, anim-animation: ; / полный шаблон: имя, длительность, тайминг, задержка…
animn, animdur2s, animdel1s, animic:ianimation-name: none;, animation-duration: 2s;, animation-delay: 1s;, animation-iteration-count: infinite;
animdir:r, animtf:e, animfm:f, animps:panimation-direction: reverse;, animation-timing-function: ease;, animation-fill-mode: forwards;, animation-play-state: paused;

Списки и таблицы

АббревиатураРезультат
list, list:n, list:s, list:d, list:dclist-style-type: ;, none;, square;, disc;, decimal;
lisp:i, lisp:o, lisi:n, lislist-style-position: inside;, outside;, list-style-image: none;, list-style: ;
tbl, tbl:f, cps:t, ec:htable-layout: ;, fixed;, caption-side: top;, empty-cells: hide;

@-правила и служебные

АббревиатураРезультат
@m@media screen { … } — курсор в теле (можно заменить screen)
@i@import url(); — курсор в скобках
@f, @f+блок @font-face (краткий / полный со шрифтовыми форматами)
@kfблок @keyframes с вендорными префиксами
cm/* … */ — комментарий
!!important

Псевдоклассы и псевдоэлементы

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

АббревиатураРезультат
:h, :a, :fo, :v, :li, :t:hover, :active, :focus, :visited, :link, :target
:fc, :lc, :oc, :ec:first-child, :last-child, :only-child, :empty
:ch, :d, :e, :r, :i, :va, :ro:checked, :disabled, :enabled, :required, :invalid, :valid, :root
:n, :n2, :nodd, :neven, :n2n:nth-child(), :nth-child(2), :nth-child(odd), :nth-child(even), :nth-child(2n)
:no, :noinput:not(), :not(input)
:b, ::b, :af::before, ::before, ::after — двойное двоеточие не обязательно
:pl, :se, :m, :fl, :fe::placeholder, ::selection, ::marker, ::first-line, ::first-letter
Полные имена проходят как есть: :hover, ::before, :nth-child(2n+1), :not(.disabled), :has(...). Одиночное двоеточие у псевдоэлемента приводится к двойному: :before → ::before. Селектор с псевдоклассом тоже не трогается: div:hover, .a::after остаются как напечатаны. Всё работает в .css-файлах и внутри <style>. Нюанс: если в выражении есть + (:nth-child(2n+1)), наберите его полным именем — при раскрытии аббревиатура заканчивается на символе +.

Табстопы (${0})

В выводах Emmet и в примерах этой справки встречаются маркеры ${0}, ${1:default}, ${2}. Это стандарт emmet.js: в редакторах с поддержкой Emmet они невидимы, а по Tab курсор перескакивает между ними.

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

Встроенные сниппеты

Помимо сокращений работают готовые фрагменты: ! / html:5 (каркас HTML5), link:css, script:src, img, br, bq → <blockquote> и другие. Полный словарь — в файле snippets.lua рядом с движком.

Ограничения

Частые вопросы

Что за ${0} и ${1:default}?

Это маркеры позиций ввода из оригинального Emmet (там они невидимы, и по Tab можно переходить между ними). У нас навигации нет, поэтому при раскрытии маркеры удаляются: на месте ${0} встаёт курсор, а ${1:default} превращается в текст по умолчанию. В документ маркеры не записываются.

Нажимаю Ctrl+E — ничего не происходит

Скорее всего курсор стоит не сразу после аббревиатуры или после неё есть пробел. Аббревиатура должна заканчиваться ровно на позиции курсора.

Появляется сообщение «Расширение Emmet не загрузилось»

Макрос не установлен или упал при старте. Повторите deploy.cmd и проверьте журнал ошибок (Alt+F8).

Хочу раскрывать CSS в .less/.scss

Поддерживается: эти расширения уже отнесены к синтаксису css.

Полный справочник CSS

Все 566 сокращений из словаря snippets.lua (сгенерировано движком). В таблицах — результат, который попадёт в документ (маркеры уже убраны). Раскройте раздел по категории.

Бордеры и контуры (109)
АббревиатураРезультат
bbborder-bottom: ;
bdborder: ;
bd+border: 1px solid #000;
bd:nborder: none;
bdbborder-bottom: ;
bdb+border-bottom: 1px solid #000;
bdb:nborder-bottom: none;
bdbcborder-bottom-color: #000;
bdbc:tborder-bottom-color: transparent;
bdbiborder-bottom-image: url();
bdbi:nborder-bottom-image: none;
bdbkborder-break: close;
bdbk:cborder-break: close;
bdbliborder-bottom-left-image: url();
bdbli:cborder-bottom-left-image: continue;
bdbli:nborder-bottom-left-image: none;
bdblrsborder-bottom-left-radius: ;
bdbriborder-bottom-right-image: url();
bdbri:cborder-bottom-right-image: continue;
bdbri:nborder-bottom-right-image: none;
bdbrrsborder-bottom-right-radius: ;
bdbsborder-bottom-style: ;
bdbs:nborder-bottom-style: none;
bdbwborder-bottom-width: ;
bdcborder-color: #000;
bdc:tborder-color: transparent;
bdciborder-corner-image: url();
bdci:cborder-corner-image: continue;
bdci:nborder-corner-image: none;
bdclborder-collapse: ;
bdcl:cborder-collapse: collapse;
bdcl:sborder-collapse: separate;
bdfborder-fit: repeat;
bdf:cborder-fit: clip;
bdf:ofborder-fit: overflow;
bdf:owborder-fit: overwrite;
bdf:rborder-fit: repeat;
bdf:scborder-fit: scale;
bdf:spborder-fit: space;
bdf:stborder-fit: stretch;
bdiborder-image: url();
bdi:nborder-image: none;
bdlborder-left: ;
bdl+border-left: 1px solid #000;
bdl:nborder-left: none;
bdlcborder-left-color: #000;
bdlc:tborder-left-color: transparent;
bdlenborder-length: ;
bdlen:aborder-length: auto;
bdliborder-left-image: url();
bdli:nborder-left-image: none;
bdlsborder-left-style: ;
bdls:nborder-left-style: none;
bdlwborder-left-width: ;
bdrborder-right: ;
bdr+border-right: 1px solid #000;
bdr:nborder-right: none;
bdrcborder-right-color: #000;
bdrc:tborder-right-color: transparent;
bdriborder-right-image: url();
bdri:nborder-right-image: none;
bdrsborder-radius: ;
bdrstborder-right-style: ;
bdrst:nborder-right-style: none;
bdrwborder-right-width: ;
bdsborder-style: ;
bds:dbborder-style: double;
bds:dsborder-style: dashed;
bds:dtborder-style: dotted;
bds:dtdsborder-style: dot-dash;
bds:dtdtdsborder-style: dot-dot-dash;
bds:gborder-style: groove;
bds:hborder-style: hidden;
bds:iborder-style: inset;
bds:nborder-style: none;
bds:oborder-style: outset;
bds:rborder-style: ridge;
bds:sborder-style: solid;
bds:wborder-style: wave;
bdspborder-spacing: ;
bdtborder-top: ;
bdt+border-top: 1px solid #000;
bdt:nborder-top: none;
bdtcborder-top-color: #000;
bdtc:tborder-top-color: transparent;
bdtiborder-top-image: url();
bdti:nborder-top-image: none;
bdtliborder-top-left-image: url();
bdtli:cborder-top-left-image: continue;
bdtli:nborder-top-left-image: none;
bdtlrsborder-top-left-radius: ;
bdtriborder-top-right-image: url();
bdtri:cborder-top-right-image: continue;
bdtri:nborder-top-right-image: none;
bdtrrsborder-top-right-radius: ;
bdtsborder-top-style: ;
bdts:nborder-top-style: none;
bdtwborder-top-width: ;
bdwborder-width: ;
blborder-left: ;
brborder-right: ;
btborder-top: ;
oloutline: ;
ol:noutline: none;
olcoutline-color: #000;
olc:ioutline-color: invert;
olooutline-offset: ;
olsoutline-style: ;
olwoutline-width: ;
Фон, цвет и эффекты (44)
АббревиатураРезультат
apappearance: none;
bgbackground: ;
bg+background: #fff url() 0 0 no-repeat;
bg:iefilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');
bg:nbackground: none;
bgabackground-attachment: ;
bga:fbackground-attachment: fixed;
bga:sbackground-attachment: scroll;
bgbkbackground-break: ;
bgbk:bbbackground-break: bounding-box;
bgbk:cbackground-break: continuous;
bgbk:ebbackground-break: each-box;
bgcbackground-color: #fff;
bgc:tbackground-color: transparent;
bgcpbackground-clip: padding-box;
bgcp:bbbackground-clip: border-box;
bgcp:cbbackground-clip: content-box;
bgcp:ncbackground-clip: no-clip;
bgcp:pbbackground-clip: padding-box;
bgibackground-image: url();
bgi:nbackground-image: none;
bgobackground-origin: ;
bgo:bbbackground-origin: border-box;
bgo:cbbackground-origin: content-box;
bgo:pbbackground-origin: padding-box;
bgpbackground-position: 0 0;
bgpxbackground-position-x: ;
bgpybackground-position-y: ;
bgrbackground-repeat: ;
bgr:nbackground-repeat: no-repeat;
bgr:rdbackground-repeat: round;
bgr:spbackground-repeat: space;
bgr:xbackground-repeat: repeat-x;
bgr:ybackground-repeat: repeat-y;
bgszbackground-size: ;
bgsz:abackground-size: auto;
bgsz:ctbackground-size: contain;
bgsz:cvbackground-size: cover;
ccolor: #000;
c:rcolor: rgb(0, 0, 0);
c:racolor: rgba(0, 0, 0, .5);
lgbackground-image: linear-gradient();
opopacity: ;
op:iefilter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
Размеры и отступы (40)
АббревиатураРезультат
bxzbox-sizing: border-box;
bxz:bbbox-sizing: border-box;
bxz:cbbox-sizing: content-box;
cpclip: ;
cp:aclip: auto;
cp:rclip: rect(top right bottom left);
hheight: ;
h:aheight: auto;
mmargin: ;
m:amargin: auto;
mahmax-height: ;
mah:nmax-height: none;
marmax-resolution: res;
mawmax-width: ;
maw:nmax-width: none;
mbmargin-bottom: ;
mb:amargin-bottom: auto;
mihmin-height: ;
mirmin-resolution: res;
miwmin-width: ;
mlmargin-left: ;
ml:amargin-left: auto;
mrmargin-right: ;
mr:amargin-right: auto;
mtmargin-top: ;
mt:amargin-top: auto;
ppadding: ;
pbpadding-bottom: ;
plpadding-left: ;
prpadding-right: ;
ptpadding-top: ;
rszresize: ;
rsz:bresize: both;
rsz:hresize: horizontal;
rsz:nresize: none;
rsz:vresize: vertical;
wwidth: ;
w:awidth: auto;
zmzoom: 1;
zoozoom: 1;
Раскладка (76)
АббревиатураРезультат
cgcolumn-gap: ;
clclear: both;
cl:bclear: both;
cl:lclear: left;
cl:nclear: none;
cl:rclear: right;
colmcolumns: ;
colmccolumn-count: ;
colmfcolumn-fill: ;
colmgcolumn-gap: ;
colmrcolumn-rule: ;
colmrccolumn-rule-color: ;
colmrscolumn-rule-style: ;
colmrwcolumn-rule-width: ;
colmscolumn-span: ;
colmwcolumn-width: ;
ddisplay: block;
d:bdisplay: block;
d:cpdisplay: compact;
d:idisplay: inline;
d:ibdisplay: inline-block;
d:itbdisplay: inline-table;
d:lidisplay: list-item;
d:ndisplay: none;
d:rbdisplay: ruby;
d:rbbdisplay: ruby-base;
d:rbbgdisplay: ruby-base-group;
d:rbtdisplay: ruby-text;
d:rbtgdisplay: ruby-text-group;
d:ridisplay: run-in;
d:tbdisplay: table;
d:tbcdisplay: table-cell;
d:tbcldisplay: table-column;
d:tbclgdisplay: table-column-group;
d:tbcpdisplay: table-caption;
d:tbfgdisplay: table-footer-group;
d:tbhgdisplay: table-header-group;
d:tbrdisplay: table-row;
d:tbrgdisplay: table-row-group;
flfloat: left;
fl:lfloat: left;
fl:nfloat: none;
fl:rfloat: right;
ovoverflow: hidden;
ov:aoverflow: auto;
ov:hoverflow: hidden;
ov:soverflow: scroll;
ov:voverflow: visible;
ovsoverflow-style: scrollbar;
ovs:aoverflow-style: auto;
ovs:moverflow-style: move;
ovs:mqoverflow-style: marquee;
ovs:poverflow-style: panner;
ovs:soverflow-style: scrollbar;
ovxoverflow-x: hidden;
ovx:aoverflow-x: auto;
ovx:hoverflow-x: hidden;
ovx:soverflow-x: scroll;
ovx:voverflow-x: visible;
ovyoverflow-y: hidden;
ovy:aoverflow-y: auto;
ovy:hoverflow-y: hidden;
ovy:soverflow-y: scroll;
ovy:voverflow-y: visible;
posposition: relative;
pos:aposition: absolute;
pos:fposition: fixed;
pos:rposition: relative;
pos:sposition: static;
ususer-select: none;
vvisibility: hidden;
v:cvisibility: collapse;
v:hvisibility: hidden;
v:vvisibility: visible;
zz-index: ;
z:az-index: auto;
Текст и шрифт (198)
АббревиатураРезультат
cntcontent: '';
cnt:acontent: attr();
cnt:ccontent: counter();
cnt:cqcontent: close-quote;
cnt:cscontent: counters();
cnt:ncontent: normal;
cnt:ncqcontent: no-close-quote;
cnt:noqcontent: no-open-quote;
cnt:oqcontent: open-quote;
coicounter-increment: ;
corcounter-reset: ;
ctcontent: ;
ct:acontent: attr();
ct:ccontent: counter();
ct:cqcontent: close-quote;
ct:cscontent: counters();
ct:ncontent: normal;
ct:ncqcontent: no-close-quote;
ct:noqcontent: no-open-quote;
ct:oqcontent: open-quote;
curcursor: pointer;
cur:acursor: auto;
cur:ccursor: crosshair;
cur:dcursor: default;
cur:hacursor: hand;
cur:hecursor: help;
cur:mcursor: move;
cur:pcursor: pointer;
cur:tcursor: text;
ffont: ;
f+font: 1em Arial,sans-serif;
feffont-effect: ;
fef:ebfont-effect: emboss;
fef:egfont-effect: engrave;
fef:nfont-effect: none;
fef:ofont-effect: outline;
femfont-emphasize: ;
fempfont-emphasize-position: ;
femp:afont-emphasize-position: after;
femp:bfont-emphasize-position: before;
femsfont-emphasize-style: ;
fems:acfont-emphasize-style: accent;
fems:cfont-emphasize-style: circle;
fems:dsfont-emphasize-style: disc;
fems:dtfont-emphasize-style: dot;
fems:nfont-emphasize-style: none;
fffont-family: ;
ff:cfont-family: cursive;
ff:ffont-family: fantasy;
ff:mfont-family: monospace;
ff:sfont-family: serif;
ff:ssfont-family: sans-serif;
fsfont-style: italic;
fs:ifont-style: italic;
fs:nfont-style: normal;
fs:ofont-style: oblique;
fsmfont-smooth: ;
fsm:afont-smooth: auto;
fsm:awfont-smooth: always;
fsm:nfont-smooth: never;
fstfont-stretch: ;
fst:cfont-stretch: condensed;
fst:efont-stretch: expanded;
fst:ecfont-stretch: extra-condensed;
fst:eefont-stretch: extra-expanded;
fst:nfont-stretch: normal;
fst:scfont-stretch: semi-condensed;
fst:sefont-stretch: semi-expanded;
fst:ucfont-stretch: ultra-condensed;
fst:uefont-stretch: ultra-expanded;
fvfont-variant: ;
fv:nfont-variant: normal;
fv:scfont-variant: small-caps;
fwfont-weight: ;
fw:bfont-weight: bold;
fw:brfont-weight: bolder;
fw:lrfont-weight: lighter;
fw:nfont-weight: normal;
fzfont-size: ;
fzafont-size-adjust: ;
fza:nfont-size-adjust: none;
lhline-height: ;
lislist-style: ;
lis:nlist-style: none;
lisilist-style-image: ;
lisi:nlist-style-image: none;
lisplist-style-position: ;
lisp:ilist-style-position: inside;
lisp:olist-style-position: outside;
listlist-style-type: ;
list:clist-style-type: circle;
list:dlist-style-type: disc;
list:dclist-style-type: decimal;
list:dclzlist-style-type: decimal-leading-zero;
list:lrlist-style-type: lower-roman;
list:nlist-style-type: none;
list:slist-style-type: square;
list:urlist-style-type: upper-roman;
ltsletter-spacing: ;
qquotes: ;
q:enquotes: '\201C' '\201D' '\2018' '\2019';
q:nquotes: none;
q:ruquotes: '\00AB' '\00BB' '\201E' '\201C';
tatext-align: left;
ta-lsttext-align-last: ;
ta:ctext-align: center;
ta:jtext-align: justify;
ta:ltext-align: left;
ta:rtext-align: right;
tal:atext-align-last: auto;
tal:ctext-align-last: center;
tal:ltext-align-last: left;
tal:rtext-align-last: right;
tdtext-decoration: none;
td:ltext-decoration: line-through;
td:ntext-decoration: none;
td:otext-decoration: overline;
td:utext-decoration: underline;
tetext-emphasis: ;
te:atext-emphasis: after;
te:actext-emphasis: accent;
te:btext-emphasis: before;
te:ctext-emphasis: circle;
te:dstext-emphasis: disc;
te:dttext-emphasis: dot;
te:ntext-emphasis: none;
thtext-height: ;
th:atext-height: auto;
th:ftext-height: font-size;
th:mtext-height: max-size;
th:ttext-height: text-size;
titext-indent: ;
ti:-text-indent: -9999px;
tjtext-justify: ;
tj:atext-justify: auto;
tj:dtext-justify: distribute;
tj:ictext-justify: inter-cluster;
tj:iitext-justify: inter-ideograph;
tj:iwtext-justify: inter-word;
tj:ktext-justify: kashida;
tj:ttext-justify: tibetan;
totext-outline: ;
to+text-outline: 0 0 #000;
to:ntext-outline: none;
tovtext-overflow: ellipsis;
tov:ctext-overflow: clip;
tov:etext-overflow: ellipsis;
trtext-replace: ;
tr:ntext-replace: none;
tshtext-shadow: hoff voff blur #000;
tsh+text-shadow: 0 0 0 #000;
tsh:ntext-shadow: none;
tsh:rtext-shadow: h v blur rgb(0, 0, 0);
tsh:ratext-shadow: h v blur rgba(0, 0, 0, .5);
tttext-transform: uppercase;
tt:ctext-transform: capitalize;
tt:ltext-transform: lowercase;
tt:ntext-transform: none;
tt:utext-transform: uppercase;
twtext-wrap: ;
tw:ntext-wrap: normal;
tw:notext-wrap: none;
tw:stext-wrap: suppress;
tw:utext-wrap: unrestricted;
vavertical-align: top;
va:bvertical-align: bottom;
va:blvertical-align: baseline;
va:mvertical-align: middle;
va:subvertical-align: sub;
va:supvertical-align: super;
va:tvertical-align: top;
va:tbvertical-align: text-bottom;
va:ttvertical-align: text-top;
whswhite-space: ;
whs:nwhite-space: normal;
whs:nwwhite-space: nowrap;
whs:pwhite-space: pre;
whs:plwhite-space: pre-line;
whs:pwwhite-space: pre-wrap;
whscwhite-space-collapse: ;
whsc:bawhite-space-collapse: break-all;
whsc:bswhite-space-collapse: break-strict;
whsc:kwhite-space-collapse: keep-all;
whsc:lwhite-space-collapse: loose;
whsc:nwhite-space-collapse: normal;
wobword-break: ;
wob:baword-break: break-all;
wob:bsword-break: break-strict;
wob:kword-break: keep-all;
wob:lword-break: loose;
wob:nword-break: normal;
wosword-spacing: ;
wowword-wrap: ;
wow:bword-wrap: break-word;
wow:nword-wrap: none;
wow:nmword-wrap: normal;
wow:sword-wrap: suppress;
wow:uword-wrap: unrestricted;
Списки и таблицы (9)
АббревиатураРезультат
cpscaption-side: ;
cps:bcaption-side: bottom;
cps:tcaption-side: top;
ecempty-cells: ;
ec:hempty-cells: hide;
ec:sempty-cells: show;
tbltable-layout: ;
tbl:atable-layout: auto;
tbl:ftable-layout: fixed;
Анимации, трансформации, тени (48)
АббревиатураРезультат
animanimation: ;
anim-animation: name duration timing-function delay iteration-count direction fill-mode;
animdelanimation-delay: time;
animdiranimation-direction: normal;
animdir:aanimation-direction: alternate;
animdir:aranimation-direction: alternate-reverse;
animdir:nanimation-direction: normal;
animdir:ranimation-direction: reverse;
animduranimation-duration: 0s;
animfmanimation-fill-mode: both;
animfm:banimation-fill-mode: backwards;
animfm:bhanimation-fill-mode: both;
animfm:btanimation-fill-mode: both;
animfm:fanimation-fill-mode: forwards;
animicanimation-iteration-count: 1;
animic:ianimation-iteration-count: infinite;
animnanimation-name: none;
animpsanimation-play-state: running;
animps:panimation-play-state: paused;
animps:ranimation-play-state: running;
animtfanimation-timing-function: linear;
animtf:cbanimation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animtf:eanimation-timing-function: ease;
animtf:eianimation-timing-function: ease-in;
animtf:eioanimation-timing-function: ease-in-out;
animtf:eoanimation-timing-function: ease-out;
animtf:lanimation-timing-function: linear;
bxshbox-shadow: inset hoff voff blur color;
bxsh:nbox-shadow: none;
bxsh:rbox-shadow: inset hoff voff blur spread rgb(0, 0, 0);
bxsh:rabox-shadow: inset h v blur spread rgba(0, 0, 0, .5);
trftransform: ;
trf:rtransform: rotate(angle);
trf:sctransform: scale(x, y);
trf:scxtransform: scaleX(x);
trf:scytransform: scaleY(y);
trf:skxtransform: skewX(angle);
trf:skytransform: skewY(angle);
trf:ttransform: translate(x, y);
trf:txtransform: translateX(x);
trf:tytransform: translateY(y);
trfotransform-origin: ;
trfstransform-style: preserve-3d;
trstransition: prop time;
trsdetransition-delay: time;
trsdutransition-duration: time;
trsptransition-property: prop;
trstftransition-timing-function: tfunc;
@-правила (7)
АббревиатураРезультат
@f@font-face {
font-family:;
src:url();
}
@f+@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
@i@import url();
@import@import url();
@kf@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}
@m@media screen {

}
@media@media screen {

}
Печать (15)
АббревиатураРезультат
orporphans: ;
pgbapage-break-after: ;
pgba:alpage-break-after: always;
pgba:aupage-break-after: auto;
pgba:lpage-break-after: left;
pgba:rpage-break-after: right;
pgbbpage-break-before: ;
pgbb:alpage-break-before: always;
pgbb:aupage-break-before: auto;
pgbb:lpage-break-before: left;
pgbb:rpage-break-before: right;
pgbipage-break-inside: ;
pgbi:aupage-break-inside: auto;
pgbi:avpage-break-inside: avoid;
widwidows: ;
Прочее (20)
АббревиатураРезультат
!!important
bbottom: ;
b:abottom: auto;
cm/* child */
lleft: ;
l:aleft: auto;
op:ms-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
oriorientation: ;
ori:lorientation: landscape;
ori:porientation: portrait;
rright: ;
r:aright: auto;
rgrow-gap: ;
ttop: ;
t:atop: auto;
wfsm-webkit-font-smoothing: antialiased;
wfsm:a-webkit-font-smoothing: antialiased;
wfsm:n-webkit-font-smoothing: none;
wfsm:s-webkit-font-smoothing: subpixel-antialiased;
wfsm:sa-webkit-font-smoothing: subpixel-antialiased;

Полный справочник HTML и XSL

HTML (154)
АббревиатураРезультат
!<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
a<a href=""></a>
a:link<a href="http://"></a>
a:mail<a href="mailto:"></a>
abbr<abbr title=""></abbr>
acr<acronym title=""></acronym>
acronym<acronym title=""></acronym>
adr<address></address>
area<area shape="" coords="" href="" alt="" />
area:c<area shape="circle" coords="" href="" alt="" />
area:d<area shape="default" href="" alt="" />
area:p<area shape="poly" coords="" href="" alt="" />
area:r<area shape="rect" coords="" href="" alt="" />
art<article></article>
audio<audio src=""></audio>
base<base href="" />
basefont<basefont />
bdo<bdo dir=""></bdo>
bdo:l<bdo dir="ltr"></bdo>
bdo:r<bdo dir="rtl"></bdo>
bq<blockquote></blockquote>
br<br />
btn<button></button>
btn:b<button type="button"></button>
btn:r<button type="reset"></button>
btn:s<button type="submit"></button>
cap<caption></caption>
cmd<command />
col<col />
colg<colgroup></colgroup>
colg+<colgroup>
<col />
</colgroup>
colgroup+<colgroup>
<col />
</colgroup>
command<command />
datag<datagrid></datagrid>
datal<datalist></datalist>
det<details></details>
dl+<dl>
<dt></dt>
<dd></dd>
</dl>
dlg<dialog></dialog>
doc<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
doc4<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
emb<embed src="" type="" />
embed<embed src="" type="" />
fig<figure></figure>
figc<figcaption></figcaption>
form<form action=""></form>
form:get<form action="" method="get"></form>
form:post<form action="" method="post"></form>
frame<frame />
fset<fieldset></fieldset>
fst<fieldset></fieldset>
ftr<footer></footer>
hdr<header></header>
hr<hr />
html:4s<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
html:4t<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
html:5<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
html:xml<html xmlns="http://www.w3.org/1999/xhtml"></html>
html:xs<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
html:xt<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
html:xxs<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>
ifr<iframe src="" frameborder="0"></iframe>
iframe<iframe src="" frameborder="0"></iframe>
img<img src="" alt="" />
inp<input type="text" name="" id="" />
input<input type="text" />
input:b<input type="button" value="" />
input:button<input type="button" value="" />
input:c<input type="checkbox" name="" id="" />
input:checkbox<input type="checkbox" name="" id="" />
input:color<input type="color" name="" id="" />
input:date<input type="date" name="" id="" />
input:datetime<input type="datetime" name="" id="" />
input:datetime-local<input type="datetime-local" name="" id="" />
input:email<input type="email" name="" id="" />
input:f<input type="file" name="" id="" />
input:file<input type="file" name="" id="" />
input:h<input type="hidden" name="" />
input:hidden<input type="hidden" name="" />
input:i<input type="image" src="" alt="" />
input:image<input type="image" src="" alt="" />
input:month<input type="month" name="" id="" />
input:number<input type="number" name="" id="" />
input:p<input type="password" name="" id="" />
input:password<input type="password" name="" id="" />
input:r<input type="radio" name="" id="" />
input:radio<input type="radio" name="" id="" />
input:range<input type="range" name="" id="" />
input:reset<input type="reset" value="" />
input:s<input type="submit" value="" />
input:search<input type="search" name="" id="" />
input:submit<input type="submit" value="" />
input:t<input type="text" name="" id="" />
input:text<input type="text" name="" id="" />
input:time<input type="time" name="" id="" />
input:url<input type="url" name="" id="" />
input:week<input type="week" name="" id="" />
isindex<isindex />
keygen<keygen />
kg<keygen />
label<label for=""></label>
leg<legend></legend>
link<link rel="stylesheet" href="" />
link:atom<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
link:css<link rel="stylesheet" href="style.css" />
link:favicon<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:print<link rel="stylesheet" href="print.css" media="print" />
link:rss<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
link:touch<link rel="apple-touch-icon" href="favicon.png" />
map<map name=""></map>
map+<map name="">
<area shape="" coords="" href="" alt="" />
</map>
menu:c<menu type="context"></menu>
menu:context<menu type="context"></menu>
menu:t<menu type="toolbar"></menu>
menu:toolbar<menu type="toolbar"></menu>
meta<meta />
meta:compat<meta http-equiv="X-UA-Compatible" content="IE=7" />
meta:utf<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:vp<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:win<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
obj<object data="" type=""></object>
object<object data="" type=""></object>
ol+<ol>
<li></li>
</ol>
opt<option value=""></option>
optg<optgroup></optgroup>
optg+<optgroup>
<option value=""></option>
</optgroup>
optgroup+<optgroup>
<option value=""></option>
</optgroup>
option<option value=""></option>
out<output></output>
param<param name="" value="" />
prog<progress></progress>
script<script></script>
script:src<script src=""></script>
sect<section></section>
select<select name="" id=""></select>
select+<select name="" id="">
<option value=""></option>
</select>
src<source></source>
str<strong></strong>
style<style></style>
table+<table>
<tr>
<td></td>
</tr>
</table>
tarea<textarea name="" id="" cols="30" rows="10"></textarea>
textarea<textarea name="" id="" cols="30" rows="10"></textarea>
tr+<tr>
<td></td>
</tr>
ul+<ul>
<li></li>
</ul>
video<video src=""></video>
!!!<!doctype html>
!!!4s<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
!!!4t<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
!!!xs<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
!!!xt<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
!!!xxs<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
c<!-- -->
cc:ie<!--[if IE]>

<![endif]-->
cc:ie6<!--[if lte IE 6]>

<![endif]-->
cc:noie<!--[if !IE]><!-->

<!--<![endif]-->
XSL (40)
АббревиатураРезультат
ap<xsl:apply-templates select="" mode=""/>
api<xsl:apply-imports/>
attr<xsl:attribute name=""></xsl:attribute>
attrs<xsl:attribute-set name=""></xsl:attribute-set>
call<xsl:call-template name=""/>
ch<xsl:choose></xsl:choose>
choose+<xsl:choose>
<xsl:when test=""></xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
co<xsl:copy-of select=""/>
com<xsl:comment></xsl:comment>
cp<xsl:copy select=""/>
each<xsl:for-each select=""></xsl:for-each>
elem<xsl:element name=""></xsl:element>
fall<xsl:fallback></xsl:fallback>
for<xsl:for-each select=""></xsl:for-each>
if<xsl:if test=""></xsl:if>
imp<xsl:import href=""/>
inc<xsl:include href=""/>
key<xsl:key name="" match="" use=""/>
msg<xsl:message terminate="no"></xsl:message>
nam<namespace-alias stylesheet-prefix="" result-prefix=""/>
num<xsl:number value=""/>
ot<xsl:otherwise></xsl:otherwise>
par<xsl:param name=""></xsl:param>
pare<xsl:param name="" select=""/>
pres<xsl:preserve-space elements=""/>
proc<xsl:processing-instruction name=""></xsl:processing-instruction>
sort<xsl:sort select="" order=""/>
strip<xsl:strip-space elements=""/>
tex<xsl:text></xsl:text>
tm<xsl:template match="" mode=""></xsl:template>
tmatch<xsl:template match="" mode=""></xsl:template>
tn<xsl:template name=""></xsl:template>
tname<xsl:template name=""></xsl:template>
val<xsl:value-of select=""/>
var<xsl:variable name=""></xsl:variable>
vare<xsl:variable name="" select=""/>
wh<xsl:when test=""></xsl:when>
wp<xsl:with-param name="" select=""/>
xsl<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

</xsl:stylesheet>
xsl:when<xsl:when test=""></xsl:when>

Главная страница — index.html: Emmet, JS-дополнение. Открыть любой из файлов можно двойным щелчком в браузере.