Количество просмотров:

0

Базовый синтаксис плагина EMMET

Сокращение при помощи плагина EMMET, позволяет значительно увеличить скорость верстки за счет комбинации команд и аббревиатур. Как пользоваться emmet подробно разбирали в видео уроке "Плагин EMMET молниеносная верстка", где показывал дополнительно как делать свои аббревиатуры. EMMET прост в установке интегрируется в такие редакторы как PHPStorm, Sublime Text, Adobe Dreamviewer, Notepad++, WebStorm, Aptana, Coda, TextMate, Eclipse, CodeMirror, Brackets, Emacs, HippoEDIT, HTML-Kit и други, полный их перечень найдете на сайте EMMET. В данной статье представлены шпаргалки по часто используемым комбинациям с их аббревиатурами по плагину EMMET.

Emmet основной синтаксис
Сокращение Расшифровка сокращений
Дочерний: >
<!-- nav>ul>li -->
<nav>
    <ul>
        <li></li>
    </ul>
</nav>
Соединение: +
<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>
Поместить выше (в дереве HTML): ^
<!-- div+div>p>span+em^bq -->
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

<!-- div+div>p>span+em^^bq -->
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Группировка: ()
<!-- div>(header>ul>li*2>a)+footer>p -->
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div> 
Умножение: *
<!-- ul>li*3 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul> 
Нумерация: $
<!-- ul>li.item$*3 -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

<!-- h$[title=item$]{Header $}*3 -->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

<!-- ul>li.item$$$*3 -->
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

<!-- ul>li.item$@-*3 -->
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

<!-- ul>li.item$@3*5 -->
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>
id и class
<!-- #header -->
<div id="header"></div>

<!-- .title -->
<div class="title"></div>

<!-- form#search.wide -->
<form id="search" class="wide"></form>

<!-- p.class1.class2.class3 -->
<p class="class1 class2 class3"></p>
Атрибуты: []
<!-- p[title="Hello world"] -->
<p title="Hello world"></p>

<!-- td[rowspan=2 colspan=3 title] -->
<td rowspan="2" colspan="3" title=""></td>

<!-- [a='value1' b="value2"] -->
<div a="value1" b="value2"></div>
Текст: {}
<!-- a{Click me} -->
<a href="">Click me</a>

<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>
Сокращение тегов:
<!-- .class -->
<div class="class"></div>

<!-- em>.class -->
<em><span class="class"></span></em>

<!-- ul>.class -->
<ul>
    <li class="class"></li>
</ul>

<!-- table>.row>.col -->
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table> 
Генератор текста: lorem
<!-- .wrapper>h1{My Text}+p*3>lorem5 -->
<div class="wrapper">
   <h1>My Text</h1>
   <p>Lorem ipsum dolor sit amet.</p>
   <p>Debitis dolorum illo nisi suscipit!</p>
   <p>Animi explicabo libero quis voluptates?</p>
</div>

HTML сокращения в EMMET

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

</body>
</html>
!!!
<!DOCTYPE html>
a
<a href=""></a>
a:link
<a href="http://"></a> 
a:mail
<a href="mailto:"></a>
br
<br />
frame
<frame />
link
<link rel="stylesheet" href="" />
link:css
<link rel="stylesheet" href="style.css" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
meta
<meta />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
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:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
img
<img src="" alt="" />
img:srcset, img:s 
<img srcset="" src="" alt="" />
img:sizes, img:z 
<img sizes="" srcset="" src="" alt="" />
map
<map name=""></map>
form
<form action=""></form>
label
<label for=""></label>
input
<input type="text" /> 
inp
<input type="text" name="" id="" />
input:text, input:t
<input type="text" name="" id="" />
input:search
<input type="search" name="" id="" />
input:email
<input type="email" name="" id="" />
input:url
<input type="url" name="" id="" />
input:password, input:p
<input type="password" name="" id="" /> 
input:datetime
<input type="datetime" name="" id="" />
input:date
<input type="date" name="" id="" />
input:time
<input type="time" name="" id="" />
input:tel
<input type="tel" name="" id="" />
input:number
<input type="number" name="" id="" />
input:color
<input type="color" name="" id="" />
input:checkbox, input:c
<input type="checkbox" name="" id="" />
input:radio, input:r
<input type="radio" name="" id="" />
input:range
<input type="range" name="" id="" />
input:file, input:f
<input type="file" name="" id="" /> 
input:submit, input:s
<input type="submit" value="" />
input:image, input:i
<input type="image" src="" alt="" />
input:button, input:b
<input type="button" value="" />
input:reset
<input type="reset" value="" />
select
<select name="" id=""></select>
select:disabled, select:d 
<select name="" id="" disabled="disabled"></select>
option, opt
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
marquee
<marquee behavior="" direction=""></marquee>
menu:context, menu:c
<menu type="context"></menu>
menu:toolbar, menu:t
<menu type="toolbar"></menu>
video
<video src=""></video>
audio
<audio src=""></audio>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
keygen
<keygen />
command
<command />
button:submit, button:s, btn:s
<button type="submit"></button>
button:reset, button:r, btn:r
<button type="reset"></button>
button:disabled, button:d, btn:d
<button disabled="disabled"></button>
bq
<blockquote></blockquote> 
fig
<figure></figure>
figc
<figcaption></figcaption>
pic
<picture></picture>
ifr 
<iframe src="" frameborder="0"></iframe>
emb 
<embed src="" type="" />
obj 
<object data="" type=""></object>
cap 
<caption></caption>
colg 
<colgroup></colgroup>
fst, fset 
<fieldset></fieldset>
btn 
<button></button>
optg 
<optgroup></optgroup>
tarea 
<textarea name="" id="" cols="30" rows="10"></textarea>
leg 
<legend></legend>
sect
<section></section>
art 
<article></article>
hdr 
<header></header>
ftr 
<footer></footer>
adr 
<address></address>
dlg 
<dialog></dialog>
str 
<strong></strong>
prog 
<progress></progress>
mn 
<main></main>
tem 
<template></template>
datag 
<datagrid></datagrid>
datal 
<datalist></datalist>
kg 
<keygen />
out 
<output></output>
det 
<details></details>
cmd 
<command />
ol+ 
<ol>
    <li></li>
</ol>
ul+ 
<ul>
    <li></li>
</ul>
dl+ 
<dl>
    <dt></dt>
    <dd></dd>
</dl>
map+ 
<map name="">
    <area shape="" coords="" href="" alt="" />
</map>
table+ 
<table>
    <tr>
        <td></td>
    </tr>
</table>
colgroup+, colg+ 
<colgroup>
    <col />
</colgroup>
tr+
<tr>
    <td></td>
</tr>
select+ 
<select name="" id="">
    <option value=""></option>
</select>
optgroup+, optg+ 
<optgroup>
    <option value=""></option>
</optgroup>
pic+ 
<picture>
    <source srcset="" />
    <img src="" alt="" />
</picture>

CSS сокращения в EMMET

Визуальное форматирование
pos
position:relative;
pos:s
position:static;
pos:a 
position:absolute;
pos:r 
position:relative;
pos:f 
position:fixed;
t
top:;
t:a
top:auto;
r 
right:; 
r:a 
right:auto;
b 
bottom:;
b:a 
bottom:auto;
l 
left:;
l:a 
left:auto;
z 
z-index:; 
z:a 
z-index:auto;
fl 
float:left;
fl:n 
float:none;
fl:l 
float:left;
fl:r 
float:right;
cl 
clear:both;
cl:n 
clear:none;
cl:l 
clear:left;
cl:r 
clear:right;
cl:b 
clear:both;
d
display:block; 
d:n
display:none;
d:b
display:block;
d:f
display:flex;
d:if
display:inline-flex;
d:i
display:inline;
d:ib
display:inline-block;
d:li
display:list-item;
d:ri
display:run-in;
d:cp
display:compact;
d:tb
display:table;
d:itb
display:inline-table;
d:tbcp
display:table-caption;
d:tbcl
display:table-column;
d:tbclg
display:table-column-group;
d:tbhg
display:table-header-group;
d:tbfg
display:table-footer-group;
d:tbr
display:table-row;
d:tbrg
display:table-row-group;
d:tbc
display:table-cell;
d:rb
display:ruby;
d:rbb
display:ruby-base;
d:rbbg
display:ruby-base-group;
d:rbt
display:ruby-text;
d:rbtg
display:ruby-text-group;
v
visibility:hidden;
v:v
visibility:visible;
v:h
visibility:hidden;
v:c
visibility:collapse;
ov
overflow:hidden;
ov:v
overflow:visible;
ov:h
overflow:hidden;
ov:s
overflow:scroll;
ov:a
overflow:auto;
zoo, zm
zoom:1;
cp
clip:;
cp:a
clip:auto;
cp:r
clip:rect(top right bottom left);
rsz
resize:;
rsz:n
resize:none;
cur
cursor:${pointer};
cur:a
cursor:auto;
cur:d
cursor:default;
cur:c
cursor:crosshair;
cur:ha
cursor:hand;
cur:he
cursor:help;
cur:m
cursor:move;
cur:p
cursor:pointer;
cur:t
cursor:text;
Margin и Padding
m
margin:;
m:a
margin:auto;
mt
margin-top:;
mt:a
margin-top:auto;
mr
margin-right:;
mr:a
margin-right:auto;
mb
margin-bottom:;
mb:a
margin-bottom:auto;
ml
margin-left:;
ml:a
margin-left:auto;
p
padding:;
pt
padding-top:;
pr
padding-right:;
pb
padding-bottom:;
m:a
padding-bottom:;
pl
padding-left:;
Box Sizing
bxz
box-sizing:border-box;
bxz:cb
box-sizing:content-box;
bxz:bb
box-sizing:border-box;
bxsh
box-shadow:inset hoff voff blur color;
bxsh:r
box-shadow:inset hoff voff blur spread #000000;
bxsh:ra
box-shadow:inset h v blur spread rgba(0, 0, 0, .5);
bxsh:n
box-shadow:none;
w
width:;
w:a
width:auto;
h
height:;
h:a
height:auto;
maw
max-width:;
maw:n
max-width:none;
mah
max-height:;
mah:n
max-height:none;
miw
min-width:;
mih
min-height:;
Font
f
font:;
f+
font:1em Arial,sans-serif;
fw
font-weight:;
fw:n
font-weight:normal;
fw:b
font-weight:bold;
fw:br
font-weight:bolder;
fw:lr
font-weight:lighter;
fs
font-style:${italic};
fs:n
font-style:normal;
fs:i
font-style:italic;
fs:o
font-style:oblique;
fv
font-variant:;
fv:n
font-variant:normal;
fv:sc
font-variant:small-caps;
fz
font-size:;
fza
font-size-adjust:;
fza:n
font-size-adjust:none;
ff
font-family:;
ff:s
font-family:serif;
ff:ss
font-family:sans-serif;
ff:c
font-family:cursive;
ff:f
font-family:fantasy;
ff:m
font-family:monospace;
ff:a
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
ff:t
font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
ff:v
font-family: Verdana, Geneva, sans-serif;
fef
font-effect:;
fef:n
font-effect:none;
fef:eg
font-effect:engrave;
fef:eb
font-effect:emboss;
fef:o
font-effect:outline;
Text
va, va:t
vertical-align:top;
va:sup
vertical-align:super;
va:tt
vertical-align:text-top;
va:m
vertical-align:middle;
va:bl
vertical-align:baseline;
va:b
vertical-align:bottom;
va:tb
vertical-align:text-bottom;
va:sub
vertical-align:sub;
ta, ta:l
text-align:left;
ta:c
text-align:center;
ta:r
text-align:right;
ta:j
text-align:justify;
ta-lst
text-align-last:;
tal:a
text-align-last:auto;
tal:l
text-align-last:left;
tal:c
text-align-last:center;
tal:r
text-align-last:right;
td, td:n
text-decoration:none;
td:u
text-decoration:underline;
td:o
text-decoration:overline;
td:l
text-decoration:line-through;
te
text-emphasis:;
te:n
text-emphasis:none;
te:ac
text-emphasis:accent;
te:dt
text-emphasis:dot;
te:c
text-emphasis:circle;
te:ds
text-emphasis:disc;
te:b
text-emphasis:before;
te:a
text-emphasis:after;
th
text-height:;
th:a
text-height:auto;
th:f
text-height:font-size;
th:t
text-height:text-size;
th:m
text-height:max-size;
ti
text-indent:;
ti:-
text-indent:-9999px;
tj
text-justify:;
tj:a
text-justify:auto;
tj:iw
text-justify:inter-word;
tj:ii
text-justify:inter-ideograph;
tj:ic
text-justify:inter-cluster;
tj:d
text-justify:distribute;
tj:k
text-justify:kashida;
tj:t
text-justify:tibetan;
to
text-outline:;
to+
text-outline:0 0 #000;
to:n
text-outline:none;
tr
text-replace:;
tr:n
text-replace:none;
tt
text-transform:uppercase;
tt:n
text-transform:none;
tt:c
text-transform:capitalize;
tt:u
text-transform:uppercase;
tt:l
text-transform:lowercase;
tw
text-wrap:;
tw:n
text-wrap:normal;
tw:no
text-wrap:none;
tw:u
text-wrap:unrestricted;
tw:s
text-wrap:suppress;
tsh
text-shadow:hoff voff blur #000;
tsh:r
text-shadow:h v blur #000000;
tsh:ra
text-shadow:h v blur rgba(0, 0, 0, .5);
tsh+
text-shadow:0 0 0 #000;
tsh:n
text-shadow:none;
lh
line-height:;
lts
letter-spacing:;
lts-n
letter-spacing:normal;
whs
white-space:;
whs:n
white-space:normal;
wob
word-break:;
wob:n
word-break:normal;
wos
word-spacing:;
wow
word-wrap:;
wow:nm
word-wrap:normal;
wow:n
word-wrap:none
Background
bg
background:#000;
bg+
background:#fff url() 0 0 no-repeat;
bg:n
background:none;
bgc
background-color:#fff;
bgc:t
background-color:transparent;
bgi
background-image:url();
bgi:n
background-image:none;
bgr
background-repeat:;
bgr:n
background-repeat:no-repeat;
bgr:x
background-repeat:repeat-x;
bgr:y
background-repeat:repeat-y;
bgr:sp
background-repeat:space;
bgr:rd
background-repeat:round;
bga
background-attachment:;
bga:f
background-attachment:fixed;
bga:s
background-attachment:scroll;
bgp
background-position:0 0;
bgpx
background-position-x:;
bgpy
background-position-y:;
bgbk
background-break:;
bgbk:bb
background-break:bounding-box;
bgbk:eb
background-break:each-box;
bgbk:c
background-break:continuous;
bgcp
background-clip:padding-box;
bgcp:bb
background-clip:border-box;
bgcp:pb
background-clip:padding-box;
bgcp:cb
background-clip:content-box;
bgcp:nc
background-clip:no-clip;
bgo
background-origin:;
bgo:pb
background-origin:padding-box;
bgo:bb
background-origin:border-box;
bgo:cb
background-origin:content-box;
bgsz
background-size:;
bgsz:a
background-size:auto;
bgsz:ct
background-size:contain;
bgsz:cv
background-size:cover;
Color
c
color:#000;
c:r
color:#000000;
c:ra
color:rgba(0, 0, 0, .5);
op
opacity:;
Generated content
cnt
content:'';
cnt:n, ct:n
content:normal;
cnt:oq, ct:oq
content:open-quote;
cnt:noq, ct:noq
content:no-open-quote;
cnt:cq, ct:cq
content:close-quote;
cnt:ncq, ct:ncq
content:no-close-quote;
cnt:a, ct:a
content:attr();
cnt:c, ct:c
content:counter();
cnt:cs, ct:cs
content:counters();
ct
content:;
q
quotes:;
q:n
quotes:none;
q:ru
quotes:'\00AB' '\00BB' '\201E' '\201C';
q:en
quotes:'\201C' '\201D' '\2018' '\2019';
coi
counter-increment:;
cor
counter-reset:;
Outline
ol
outline:;
ol:n
outline:none;
olo
outline-offset:;
olw
outline-width:;
olw:tn
outline-width:thin;
olw:m
outline-width:medium;
olw:tc
outline-width:thick;
ols
outline-style:;
ols:n
outline-style:none;
ols:dt
outline-style:dotted;
ols:ds
outline-style:dashed;
ols:s
outline-style:solid;
ols:db
outline-style:double;
ols:g
outline-style:groove;
ols:r
outline-style:ridge;
ols:i
outline-style:inset;
ols:o
outline-style:outset;
olc
outline-color:#000;
olc:i
outline-color:invert;
Tables
tbl
table-layout:;
tbl:a
table-layout:auto;
tbl:f
table-layout:fixed;
cps
caption-side:;
cps:t
caption-side:top;
cps:b
caption-side:bottom;
ec
empty-cells:;
ec:s
empty-cells:show;
ec:h
empty-cells:hide;
Border
bd
border:;
bd+
border:1px solid #000;
bd:n
border:none;
bdbk, bdbk:c
border-break:close;
bdcl
border-collapse:;
bdcl:c
border-collapse:collapse;
bdcl:s
border-collapse:separate;
bdc
border-color:#000;
bdc:t
border-color:transparent;
bdi
border-image:url();
bdi:n
border-image:none;
bdti
border-top-image:url();
bdti:n
border-top-image:none;
bdri
border-right-image:url();
bdri:n
border-right-image:none;
bdbi
border-bottom-image:url();
bdbi:n
border-bottom-image:none;
bdli
border-left-image:url();
bdli:n
border-left-image:none;
bdci
border-corner-image:url();
bdci:n
border-corner-image:none;
bdci:c
border-corner-image:continue;
bdtli
border-top-left-image:url();
bdtli:n
border-top-left-image:none;
bdtli:c
border-top-left-image:continue;
bdtri
border-top-right-image:url();
bdtri:n
border-top-right-image:none;
bdtri:c
border-top-right-image:continue;
bdbri
border-bottom-right-image:url();
bdbri:n
border-bottom-right-image:none;
bdbri:c
border-bottom-right-image:continue;
bdbli
border-bottom-left-image:url();
bdbli:n
border-bottom-left-image:none;
bdbli:c
border-bottom-left-image:continue;
bdf
border-fit:repeat;
bdf:c
border-fit:clip;
bdf:r
border-fit:repeat;
bdf:sc
border-fit:scale;
bdf:st
border-fit:stretch;
bdf:ow
border-fit:overwrite;
bdf:of
border-fit:overflow;
bdf:sp
border-fit:space;
bdlen
border-length:;
bdlen:a
border-length:auto;
bdsp
border-spacing:;
bds
border-style:;
bds:n
border-style:none;
bds:h
border-style:hidden;
bds:dt
border-style:dotted;
bds:ds
border-style:dashed;
bds:s
border-style:solid;
bds:db
border-style:double;
bds:dtds
border-style:dot-dash;
bds:dtdtds
border-style:dot-dot-dash;
bds:w
border-style:wave;
bds:g
border-style:groove;
bds:r
border-style:ridge;
bds:i
border-style:inset;
bds:o
border-style:outset;
bdw
border-width:;
bdt, bt
border-top:;
bdt+
border-top:1px solid #000;
bdt:n
border-top:none;
bdtw
border-top-width:;
bdts
border-top-style:;
bdts:n
border-top-style:none;
bdtc
border-top-color:#000;
bdtc:t
border-top-color:transparent;
bdr, br
border-right:;
bdr+
border-right:1px solid #000;
bdr:n
border-right:none;
bdrw
border-right-width:;
bdrst
border-right-style:;
bdrst:n
border-right-style:none;
bdrc
border-right-color:#000;
bdrc:t
border-right-color:transparent;
bdb, bb
border-bottom:;
bdb+
border-bottom:1px solid #000;
bdb:n
border-bottom:none;
bdbw
border-bottom-width:;
bdbs
border-bottom-style:;
bdbs:n
border-bottom-style:none;
bdbc
border-bottom-color:#000;
bdbc:t
border-bottom-color:transparent;
bdl, bl
border-left:;
bdl+
border-left:1px solid #000;
bdl:n
border-left:none;
bdlw
border-left-width:;
bdls
border-left-style:;
bdls:n
border-left-style:none;
bdlc
border-left-color:#000;
bdlc:t
border-left-color:transparent;
bdrs
border-radius:;
bdtrrs
border-top-right-radius:;
bdtlrs
border-top-left-radius:;
bdbrrs
border-bottom-right-radius:;
bdblrs
border-bottom-left-radius:;
Lists
lis
list-style:;
lis:n
list-style:none;
lisp
list-style-position:;
lisp:i
list-style-position:inside;
lisp:o
list-style-position:outside;
list
list-style-type:;
list:n
list-style-type:none;
list:d
list-style-type:disc;
list:c
list-style-type:circle;
list:s
list-style-type:square;
list:dc
list-style-type:decimal;
list:dclz
list-style-type:decimal-leading-zero;
list:lr
list-style-type:lower-roman;
list:ur
list-style-type:upper-roman;
lisi
list-style-image:;
lisi:n
list-style-image:none;
Print
pgbb
page-break-before:;
pgbb:au
page-break-before:auto;
pgbb:al
page-break-before:always;
pgbb:l
page-break-before:left;
pgbb:r
page-break-before:right;
pgbi
page-break-inside:;
pgbi:au
page-break-inside:auto;
pgbi:av
page-break-inside:avoid;
pgba
page-break-after:;
pgba:au
page-break-after:auto;
pgba:al
page-break-after:always;
pgba:l
page-break-after:left;
pgba:r
page-break-after:right;
orp
orphans:;
wid
widows:;
Align
ac
align-content:;
ac:c
align-content:center;
ac:fe
align-content:flex-end;
ac:fs
align-content:flex-start;
ac:s
align-content:stretch;
ac:sa
align-content:space-around;
ac:sb
align-content:space-between;
ai
align-items:;
ai:b
align-items:baseline;
ai:c
align-items:center;
ai:fe
align-items:flex-end;
ai:fs
align-items:flex-start;
ai:s
align-items:stretch;
Animation
anim
animation:;
anim-
animation:name duration timing-function delay iteration-count direction fill-mode;
animdel
animation-delay:time;
animdir
animation-direction:normal;
animdir:a
animation-direction:alternate;
animdir:ar
animation-direction:alternate-reverse;
animdir:n
animation-direction:normal;
animdir:r
animation-direction:reverse;
animdur
animation-duration:0s;
animfm
animation-fill-mode:both;
animfm:b
animation-fill-mode:backwards;
animfm:bt, animfm:bh
animation-fill-mode:both;
animfm:f
animation-fill-mode:forwards;
animic
animation-iteration-count:1;
animic:i
animation-iteration-count:infinite;
animn
animation-name:none;
animps
animation-play-state:running;
animps:p
animation-play-state:paused;
animps:r
animation-play-state:running;
animtf
animation-timing-function:linear;
animtf:cb
animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
animtf:e
animation-timing-function:ease;
animtf:ei
animation-timing-function:ease-in;
animtf:eio
animation-timing-function:ease-in-out;
animtf:eo
animation-timing-function:ease-out;
animtf:l
animation-timing-function:linear;
Flex
fx
flex:;
fxb
flex-basis:;
fxd
flex-direction:;
fxd:c
flex-direction:column;
fxd:cr
flex-direction:column-reverse;
fxd:r
flex-direction:row;
fxd:rr
flex-direction:row-reverse;
fxf
flex-flow:;
fxg
flex-grow:;
fxsh
flex-shrink:;
fxw
flex-wrap: ;
fxw:n
flex-wrap:nowrap;
fxw:w
flex-wrap:wrap;
fxw:wr
flex-wrap:wrap-reverse;
Transform
trf
transform:;
trf:r
transform: rotate(angle);
trf:rx
transform: rotateX(angle);
trf:ry
transform: rotateY(angle);
trf:rz
transform: rotateZ(angle);
trf:sc
transform: scale(x, y);
trf:sc3
transform: scale3d(x, y, z);
trf:scx
transform: scaleX(x);
trf:scy
transform: scaleY(y);
trf:scz
transform: scaleZ(z);
trf:skx
transform: skewX(angle);
trf:sky
transform: skewY(angle);
trf:t
transform: translate(x, y);
trf:t3
transform: translate3d(tx, ty, tz);
trf:tx
transform: translateX(x);
trf:ty
transform: translateY(y);
trf:tz
transform: translateZ(z);
trfo
transform-origin:;
trfs
transform-style:preserve-3d;
trs
transition:prop time;
trsde
transition-delay:time;
trsdu
transition-duration:time;
trsp
transition-property:prop;
trstf
transition-timing-function:tfunc;
Дополнительные сокращения
!
!important
@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
@import url();
@kf
@-webkit-keyframes identifier {
    from {  }
    to {  }
}

@-o-keyframes identifier {
    from {  }
    to {  }
}

@-moz-keyframes identifier {
    from {  }
    to {  }
}

@keyframes identifier {
    from {  }
    to {  }
}
@m, @media
@media screen {

}
jc
justify-content:;
jc:c
justify-content:center;
jc:fe
justify-content:flex-end;
jc:fs
justify-content:flex-start;
jc:sa
justify-content:space-around;
jc:sb
justify-content:space-between;
op+
opacity: ;
filter: alpha(opacity=)
tov
text-overflow:${ellipsis};
tov:c
text-overflow:clip;
tov:e
text-overflow:ellipsis;
Загрузка...