Syntax . . . . . . . . 1 HTML . . . . . . . . 3 CSS . . . . . . . . . 7 XSL

Emmet | Cheat Sheet (2017-03)

Syntax. . . . . . . .1

Child: >. . . . . . . . . . .1

Sibling: + . . . . . . . . . .1

Climb-up: ^ . . . . . . . .1

Grouping: () . . . . . . . .1

Multiplication: * . . . . . .2

Naming and numbering: $ 2

ID and CLASS attributes . .2

Custom attributes . . . . .2

Text: {} . . . . . . . . . . .2

Implicit tag names . . . . .2

HTML . . . . . . . . 3

Form, Input, Button . . . .4

CSS . . . . . . . . . 7

Visual Formatting . . . . .7

Margin & Padding . . . . .9

Box Sizing . . . . . . . . .9

Font . . . . . . . . . . . .9

Text. . . . . . . . . . . .11

Background . . . . . . . 13

Color . . . . . . . . . . . 14

Generated content . . . .14

Outline . . . . . . . . . . 15

Tables . . . . . . . . . . 15

Border . . . . . . . . . . 15

Lists . . . . . . . . . . . 18

Print . . . . . . . . . . . 18

Others . . . . . . . . . . 18

Animation . . . . . . . . 19

Flex. . . . . . . . . . . .20

Transform, Transition . . 21

XSL . . . . . . . . 22

HTML DOCTYPES . 23

http://docs.emmet.io/

SYNTAX

Child: >

nav>ul>li

<nav>

<ul>

</ul>

</nav>

Sibling: +

div+p+bq

<p></p>

Climb-up: ^

div+div>p>span+em^bq

<div>

</div>

div+div>p>span+em^^bq

<div>

</div>

Grouping: ()

div>(header>ul>li*2>a)+footer>p

<div>

<ul>

</ul>

</header>

<p></p>

</footer>

</div>

(div>dl>(dt+dd)*3)+footer>p

<div>

<dl>

</dl>

</div>

<p></p>

</footer>

1

ID and CLASS attributes

#header

.title

form#search.wide

<form id="search" class="wide"></

form>

p.class1.class2.class3

Custom attributes

p[title="Hello world"]

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3"

title=""></td>

[a=‘value1‘ b="value2"]

Text: {}

a{Click me}

<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to

continue</p>

Implicit tag names

.class

em>.class

<em><span class="class"></span></

em>

ul>.class

<ul>

</ul>

table>.row>.col

<table>

</tr>

</table>

Multiplication: *

ul>li*5

<ul>

</ul>

Naming and numbering: $

ul>li.sample$*5

<ul>

</ul>

h$[title=topic$]{Headline $}*3

<h1 title="topic1">Headline 1</h1>

<h2 title="topic2">Headline 2</h2>

<h3 title="topic3">Headline 3</h3>

ul>li.item$$$*5

<ul>

</ul>

ul>li.item$@-*5

<ul>

</ul>

ul>li.item$@3*5

<ul>

</ul>

2

link:rss

type="application/rss+xml"

title="RSS" href="rss.xml" />

link:atom

type="application/atom+xml"

title="Atom" href="atom.xml" />

link:import, link:im

<link rel="import"

href="component.html" />

meta

meta:utf

content="text/html;charset=UTF-8"

/>

meta:win

Type" content="text/

html;charset=windows-1251" />

meta:vp

content="width=device-width, user-

scalable=no, initial-scale=1.0,

maximum-scale=1.0, minimum-

scale=1.0" />

meta:compat

content="IE=7" />

style

script

script:src

img

img:srcset, img:s

img:sizes, img:z

<img sizes="" srcset="" src=""

alt="" />

picture

source, src

source:src, src:sc

HTML

All unknown abbreviations will be transformed to

tag, e.g. foo → <foo></foo>.

a

a:link

a:mail

abbr

acronym, acr

base

basefont

br

<br />

frame

hr

<hr />

bdo

bdo:r

bdo:l

col

<col />

link

link:css

href="style.css" />

link:print

href="print.css" media="print" />

link:favicon

type="image/x-icon" href="favicon.

ico" />

link:touch

href="favicon.png" />

3

Form, Input, Button

form

form:get

<form action="" method="get"></

form>

form:post

<form action="" method="post"></

form>

label

input

inp

<input type="text" name="" id=""

/>

input:hidden, input:h

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:password, input:p

<input type="password" name=""

id="" />

input:datetime

<input type="datetime" name=""

id="" />

input:date

<input type="date" name="" id=""

/>

input:datetime-local

<input type="datetime-local"

name="" id="" />

input:month

<input type="month" name="" id=""

/>

input:week

<input type="week" name="" id=""

/>

input:time

<input type="time" name="" id=""

/>

source:srcset, src:s

source:media, src:m

<source media="(min-width: )"

srcset="" />

source:type, src:t

source:sizes, src:z

source:media:type, src:mt

<source media="(min-width: )"

srcset="" type="image/" />

source:media:sizes, src:mz

<source media="(min-width: )"

sizes="" srcset="" />

source:sizes:type, src:zt

<source sizes="" srcset=""

type="image/" />

iframe

iframe>

embed

object

param

map

area

<area shape="" coords="" href=""

alt="" />

area:d

<area shape="default" href=""

alt="" />

area:c

<area shape="circle" coords=""

href="" alt="" />

area:r

<area shape="rect" coords=""

href="" alt="" />

area:p

<area shape="poly" coords=""

href="" alt="" />

4

audio

html:xml

<html xmlns="http://www.

w3.org/1999/xhtml"></html>

keygen

command

button:submit, button:s, btn:s

button:reset, button:r, btn:r

button:disabled, button:d, btn:d

<button disabled="disabled"></

button>

eldset:disabled,

eldset:d, fset:d, fst:d

<eldset disabled="disabled"></

eldset>

bq

fig

<gure></gure>

figc

<gcaption></gcaption>

pic

ifr

iframe>

emb

obj

cap

colg

fst, fset

<eldset></eldset>

btn

optg

tarea

<textarea name="" id="" cols="30"

rows="10"></textarea>

input:tel

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:le, input:f

input:submit, input:s

input:image, input:i

<input type="image" src="" alt=""

/>

input:button, input:b

isindex

input:reset

select

select:disabled, select:d

<select name="" id=""

disabled="disabled"></select>

option, opt

textarea

<textarea name="" id="" cols="30"

rows="10"></textarea>

marquee

<marquee behavior=""

direction=""></marquee>

menu:context, menu:c

menu:toolbar, menu:t

video

5

ri:type, ri:t

<source srcset="" type="image/"

/>

</picture>

ol+

<ol>

</ol>

ul+

<ul>

</ul>

dl+

<dl>

</dl>

map+

<area shape="" coords=""

href="" alt="" />

</map>

table+

<table>

<tr>

</tr>

</table>

colgroup+, colg+

<col />

</colgroup>

tr+

<tr>

</tr>

select+

</select>

optgroup+, optg+

</optgroup>

pic+

</picture>

leg

sect

art

hdr

ftr

adr

dlg

str

prog

mn

tem

datag

datal

kg

out

det

cmd

ri:dpr, ri:d

ri:viewport, ri:v

<img sizes="" srcset="" src=""

alt="" />

ri:art, ri:a

<source media="(min-width: )"

srcset="" />

</picture>

6

fl:r

oat: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:ex;

d:if

display:inline-ex;

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;

CSS

CSS module uses fuzzy search to ﬁnd unknown abb-

reviations, e.g. ov:h == ov-h == ovh == oh.

If abbreviation wasn’t found, it is transformed into

property name: foo-bar → foo-bar: |;

You can preﬁx abbreviations with hyphen to produce

vendor-preﬁxed properties: -foo

Visual Formatting

pos

position:relative;

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:xed;

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

oat:left;

fl:n

oat:none;

fl:l

oat:left;

7

ovx:a

overow-x:auto;

ovy

overow-y:hidden;

ovy:v

overow-y:visible;

ovy:h

overow-y:hidden;

ovy:s

overow-y:scroll;

ovy:a

overow-y:auto;

ovs

overow-style:scrollbar;

ovs:a

overow-style:auto;

ovs:s

overow-style:scrollbar;

ovs:p

overow-style:panner;

ovs:m

overow-style:move;

ovs:mq

overow-style:marquee;

zoo, zm

zoom:1;

cp

clip:;

cp:a

clip:auto;

cp:r

clip:rect(top right bottom left);

rsz

resize:;

rsz:n

resize:none;

rsz:b

resize:both;

rsz:h

resize:horizontal;

rsz:v

resize:vertical;

cur

cursor:${pointer};

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

overow:hidden;

ov:v

overow:visible;

ov:h

overow:hidden;

ov:s

overow:scroll;

ov:a

overow:auto;

ovx

overow-x:hidden;

ovx:v

overow-x:visible;

ovx:h

overow-x:hidden;

ovx:s

overow-x:scroll;

8

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 rgb(0, 0, 0);

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:;

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:;

9

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;

fem

font-emphasize:;

femp

font-emphasize-position:;

femp:b

font-emphasize-position:before;

femp:a

font-emphasize-position:after;

fems

font-emphasize-style:;

fems:n

font-emphasize-style:none;

fems:ac

font-emphasize-style:accent;

fems:dt

font-emphasize-style:dot;

fems:c

font-emphasize-style:circle;

fems:ds

font-emphasize-style:disc;

fsm

font-smooth:;

fsm:a

font-smooth:auto;

fsm:n

font-smooth:never;

fsm:aw

font-smooth:always;

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, fs:i

font-style:italic;

fs:n

font-style:normal;

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;

10

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;

fst

font-stretch:;

fst:n

font-stretch:normal;

fst:uc

font-stretch:ultra-condensed;

fst:ec

font-stretch:extra-condensed;

fst:c

font-stretch:condensed;

fst:sc

font-stretch:semi-condensed;

fst:se

font-stretch:semi-expanded;

fst:e

font-stretch:expanded;

fst:ee

font-stretch:extra-expanded;

fst:ue

font-stretch:ultra-expanded;

Text

va

vertical-align:top;

va:sup

vertical-align:super;

va:t

vertical-align:top;

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;

11

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 rgb(0, 0, 0);

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;

whs:p

white-space:pre;

whs:nw

white-space:nowrap;

whs:pw

white-space:pre-wrap;

whs:pl

white-space:pre-line;

whsc

white-space-collapse:;

whsc:n

white-space-collapse:normal;

whsc:k

white-space-collapse:keep-all;

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;

12

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:xed;

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;

whsc:l

white-space-collapse:loose;

whsc:bs

white-space-collapse:break-strict;

whsc:ba

white-space-collapse:break-all;

wob

word-break:;

wob:n

word-break:normal;

wob:k

word-break:keep-all;

wob:ba

word-break:break-all;

wos

word-spacing:;

wow

word-wrap:;

wow:nm

word-wrap:normal;

wow:n

word-wrap:none;

wow:u

word-wrap:unrestricted;

wow:s

word-wrap:suppress;

wow:b

word-wrap:break-word;

13

Color

c

color:#000;

c:r

color:rgb(0, 0, 0);

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:;

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;

14

Tables

tbl

table-layout:;

tbl:a

table-layout:auto;

tbl:f

table-layout:xed;

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

border-break:close;

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;

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;

15

bdbli:c

border-bottom-left-image:continue;

bdf

border-t:repeat;

bdf:c

border-t:clip;

bdf:r

border-t:repeat;

bdf:sc

border-t:scale;

bdf:st

border-t:stretch;

bdf:ow

border-t:overwrite;

bdf:of

border-t:overow;

bdf:sp

border-t: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;

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;

16

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:;

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:;

17

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:;

Others

!

!important

@f

@font-face {

font-family:;

src:url(|);

}

@f+

@font-face {

font-family: ‚FontName‘;

src: url(‚FileName.eot‘);

src: url(‚FileName.eot?#iex‘)

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;

}

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;

18

Animation

anim

animation:;

anim-

animation:name duration timing-

function delay iteration-count

direction ll-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-ll-mode:both;

animfm:b

animation-ll-mode:backwards;

animfm:bt, animfm:bh

animation-ll-mode:both;

animfm:f

animation-ll-mode:forwards;

animic

animation-iteration-count:1;

animic:i

animation-iteration-count:innite;

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;

@i, @import

@import url();

@kf

@-webkit-keyframes identier {

from { }

to { }

}

@-o-keyframes identier {

from { }

to { }

}

@-moz-keyframes identier {

from { }

to { }

}

@keyframes identier {

from { }

to { }

}

@m, @media

@media screen { }

ac

align-content:;

ac:c

align-content:center;

ac:fe

align-content:ex-end;

ac:fs

align-content:ex-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:ex-end;

ai:fs

align-items:ex-start;

ai:s

align-items:stretch;

19

colmf

column-ll:;

colmg

column-gap:;

colmr

column-rule:;

colmrc

column-rule-color:;

colmrs

column-rule-style:;

colmrw

column-rule-width:;

colms

column-span:;

colmw

column-width:;

d:ib+

display: inline-block;

*display: inline;

*zoom: 1;

Flex

fx

ex:;

fxb

ex-basis:;

fxd

ex-direction:;

fxd:c

ex-direction:column;

fxd:cr

ex-direction:column-reverse;

fxd:r

ex-direction:row;

fxd:rr

ex-direction:row-reverse;

fxf

ex-ow:;

fxg

ex-grow:;

fxsh

ex-shrink:;

fxw

ex-wrap: ;

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;

ap

appearance:${none};

as

align-self:;

as:a

align-self:auto;

as:b

align-self:baseline;

as:c

align-self:center;

as:fe

align-self:ex-end;

as:fs

align-self:ex-start;

as:s

align-self:stretch;

bfv

backface-visibility:;

bfv:h

backface-visibility:hidden;

bfv:v

backface-visibility:visible;

bg:ie

lter:progid:DXImageTransform.

Microsoft.AlphaImageLoader(src=‘x.

png‘,sizingMethod=‘crop‘);

cm

/* ${child} */

colm

columns:;

colmc

column-count:;

20

Transform, Transition

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;

fxw:n

ex-wrap:nowrap;

fxw:w

ex-wrap:wrap;

fxw:wr

ex-wrap:wrap-reverse;

jc

justify-content:;

jc:c

justify-content:center;

jc:fe

justify-content:ex-end;

jc:fs

justify-content:ex-start;

jc:sa

justify-content:space-around;

jc:sb

justify-content:space-between;

mar

max-resolution:res;

mir

min-resolution:res;

op+

opacity: ;

lter: alpha(opacity=);

op:ie

lter:progid:DXImageTransform.

Microsoft.Alpha(Opacity=100);

op:ms

-ms-lter:‘progid:DXImageTransform.

Microsoft.Alpha(Opacity=100)‘;

ord

order:;

ori

orientation:;

ori:l

orientation:landscape;

ori:p

orientation:portrait;

tov

text-overow:${ellipsis};

tov:c

text-overow:clip;

tov:e

text-overow:ellipsis;

21

XSL

tmatch, tm

<xsl:template match="" mode=""></

xsl:template>

tname, tn

<xsl:template name=""></

xsl:template>

call

<xsl:call-template name="" />

ap

<xsl:apply-templates select=""

mode="" />

api

<xsl:apply-imports />

imp

<xsl:import href="" />

inc

<xsl:include href="" />

ch

<xsl:choose></xsl:choose>

xsl:when, wh

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

ot

<xsl:otherwise></xsl:otherwise>

if

<xsl:if test=""></xsl:if>

par

<xsl:param name=""></xsl:param>

pare

<xsl:param name="" select="" />

var

<xsl:variable name=""></

xsl:variable>

vare

<xsl:variable name="" select="" />

wp

<xsl:with-param name="" select="" />

key

<xsl:key name="" match="" use="" />

elem

<xsl:element name=""></xsl:element>

attr

<xsl:attribute name=""></

xsl:attribute>

attrs

<xsl:attribute-set name=""></

xsl:attribute-set>

cp

<xsl:copy select="" />

trsdu

transition-duration:time;

trsp

transition-property:prop;

trstf

transition-timing-function:tfunc;

us

user-select:${none};

wfsm

-webkit-font-

smoothing:${antialiased};

wfsm:a

-webkit-font-smoothing:antialiased;

wfsm:n

-webkit-font-smoothing:none;

wfsm:s, wfsm:sa

-webkit-font-smoothing:subpixel-

antialiased;

wm

writing-mode:lr-tb;

wm:btl

writing-mode:bt-lr;

wm:btr

writing-mode:bt-rl;

wm:lrb

writing-mode:lr-bt;

wm:lrt

writing-mode:lr-tb;

wm:rlb

writing-mode:rl-bt;

wm:rlt

writing-mode:rl-tb;

wm:tbl

writing-mode:tb-lr;

wm:tbr

writing-mode:tb-rl;

22

HTML DOCTYPES

!, html:5

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

doc

<html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

doc4

<html>

<head>

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">

<head>

content="text/html;charset=UTF-8"

/>

<title>Document</title>

</head>

<body>

</body>

</html>

co

<xsl:copy-of select="" />

val

<xsl:value-of select="" />

each, for

<xsl:for-each select=""></

xsl:for-each>

tex

<xsl:text></xsl:text>

com

<xsl:comment></xsl:comment>

msg

<xsl:message terminate="no"></

xsl:message>

fall

<xsl:fallback></xsl:fallback>

num

<xsl:number value="" />

nam

<namespace-alias stylesheet-prex=""

result-prex="" />

pres

<xsl:preserve-space elements="" />

strip

<xsl:strip-space elements="" />

proc

<xsl:processing-

instruction name=""></

xsl:processing-instruction>

sort

<xsl:sort select="" order="" />

choose+

<xsl:choose>

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

<xsl:otherwise></xsl:otherwise>

</xsl:choose>

xsl

|}

<?xml version="1.0"

encoding="UTF-8"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/

XSL/Transform"></xsl:stylesheet>

!!!

<?xml version="1.0"

encoding="UTF-8"?>

23

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>

content="text/html;charset=UTF-8"

/>

<title>Document</title>

</head>

<body>

</body>

</html>

!!!

<!DOCTYPE html>

!!!4t

<!DOCTYPE HTML PUBLIC "-//W3C//

DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.

dtd">

!!!4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

!!!xt

<!DOCTYPE html PUBLIC "-//W3C//

DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/

xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN" "http://www.

w3.org/TR/xhtml1/DTD/xhtml1-strict.

dtd">

!!!xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.1//EN" "http://www.w3.org/

TR/xhtml11/DTD/xhtml11.dtd">

http://docs.emmet.io/

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

<head>

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>

content="text/html;charset=UTF-8"

/>

<title>Document</title>

</head>

<body>

</body>

</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>

content="text/html;charset=UTF-8"

/>

<title>Document</title>

</head>

<body>

</body>

</html>

24