Zen-Coding

Zen HTML Elements Based on HTML 5 specification draft. Root Element

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> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body></body> </html>

html <html></html> html:xml <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></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> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body></body> </html> html:4s <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body></body> </html> html:xt <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body></body> </html> html:xs <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> http://code.google.com/p/zen-coding/

html:5

head title base link

<!DOCTYPE HTML> <html lang="en-EN"> <head> <title></title> <meta charset="UTF-8"> </head> <body> </body> </html> Document Metadata <head></head> <title></title> <base href=""> <link>

link:css

meta:win <meta http-equiv="Content-Type" content="text/html;charset=Win-1251"> meta:compat <meta http-equiv="X-UA-Compatible" content="IE=7"> style <style type="text/css"></style> Scripting script <script type="text/javascript"></script> script:src <script type="text/javascript" src=""></script> noscript <noscript></noscript> Sections body <body></body> section, sect <section></section> nav <nav></nav> article, art <article></article> aside <aside></aside> h1 <h1></h1> h2 <h2></h2> h3 <h3></h3> h4 <h4></h4> h5 <h5></h5> h6 <h6></h6> hgroup, hgr <hgroup></hgroup> header, hdr <header></header> footer, ftr <footer></footer> address, adr <address></address> div <div></div> Grouping Content p <p></p> hr <hr> br <br> GNU General Public License v3

pre <pre></pre> dialog, dlg <dialog></dialog> blockquote, bq <blockquote></blockquote> ol <ol></ol> ol+ <ol> <li></li> </ol> ul <ul></ul> ul+ <ul> <li></li> </ul> li <li></li> dl <dl></dl> dl+ <dl> <dt></dt> <dd></dd> </dl> dt <dt></dt> dd <dd></dd> Text-level Semantics a <a href=""></a> a:link <a href="http://"></a> a:mail <a href="mailto:"></a> q <q></q> cite <cite></cite> em <em></em> strong, str <strong></strong> small <small></small> mark <mark></mark> dfn <dfn></dfn> abbr <abbr title=""></abbr> http://code.google.com/p/zen-coding/

acronym, acr <acronym title=""></acronym> time <time></time> progress, prog <progress></progress> meter <meter></meter> code <code></code> var <var></var> samp <samp></samp> kbd <kbd></kbd> sub <sub></sub> sup <sup></sup> span <span></span> i <i></i> b <b></b> bdo <bdo dir=""></bdo> bdo:r <bdo dir="rtl"></bdo> bdo:l <bdo dir="ltr"></bdo> ruby <ruby></ruby> rt <rt></rt> rp <rp></rp> Edits ins <ins></ins> del <del></del> Embedded Content figure, fig <figure></figure> img <img src="" alt=""> iframe, ifr <iframe src="" frameborder="0"></iframe> embed, emb <embed src="" type=""> object, obj <object data="" type=""></object> 2

param video audio

<audio src=""></audio> source, src <source> canvas <canvas></canvas> map <map name=""></map> map+ <map name=""> <area shape="" coords="" href="" alt=""> </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=""> Tabular Data table <table></table> table+ <table> <tr> <td></td> </tr> </table> caption, cap <caption></caption> colgroup, colg <colgroup></colgroup> colgroup+, colg+ <colgroup> <col> </colgroup> col <col> tbody <tbody></tbody> thead <thead></thead> tfoot <tfoot></tfoot> tr <tr></tr>

GNU General Public License v3

tr+ <tr> </tr>

th

td

Forms

form form:get

<form action="" method="get"></form> form:post <form action="" method="post"></form> fieldset, fset <fieldset></fieldset> legend, leg <legend></legend> label <label for=""></label> input <input type=""> input:hidden, input:h <input type="hidden" value=""> input:text, input:t <input type="text" value="" id=""> input:search <input type="search" value="" id=""> input:email <input type="email" value="" id=""> input:url <input type="url" value="" id=""> input:password, input:p <input type="password" value="" id=""> input:datetime <input type="datetime" value="" id=""> input:datetime-local <input type="datetime-local" value="" id=""> input:date <input type="date" value="" id=""> input:month <input type="month" value="" id=""> input:week <input type="week" value="" id=""> input:time <input type="time" value="" id=""> input:number <input type="number" value="" id=""> input:range <input type="range" value="" id=""> input:color <input type="color" value="" id="">

http://code.google.com/p/zen-coding/

input:checkbox, input:c <input type="checkbox" id=""> input:radio, input:r <input type="radio" id=""> input:file, input:f <input type="file" id=""> input:submit, input:s <input type="submit" value=""> input:image, input:i <input type="image" src="" alt=""> input:reset <input type="reset" value=""> input:button, input:b <input type="button" value=""> button, btn <button></button> select <select id=""></select> select+ <select id=""> <option value=""></option> </select> optgroup, optg <optgroup></optgroup> optgroup+, optg+ <optgroup> <option></option> </optgroup> option, opt <option></option> Interactive Elements datagrid, datag <datagrid></datagrid> datalist, datal <datalist></datalist> textarea, tarea <textarea id="" cols="30" rows="10"></textarea> keygen, kg <keygen> output, out <output></output> details, det <details></details> command, cmd <command> bb <bb></bb> menu <menu></menu> menu:context, menu:c <menu type="context"></menu> menu:toolbar, menu:t <menu type="toolbar"></menu>

3

Comments cc:ie cc:noie

Zen HTML Selectors E#name div#name <div id="name"></div> E.name div.name <div class="name"></div> div.one.two <div class="one two"></div> div#name.one.two <div id="name" class="one two"></div> E>E head>link <head> <link/> </head> table>tr>td <table> <tr> <td></td> </tr> </table> ul#name>li.item <ul id="name"> <li class="item"></li> </ul> E+E p+p <p></p> <p></p> div#name>p.one+p.two <div id="name"> <p class="one"></p> <p class="two"></p> </div>

Zen HTML Aliases E*N

p*3 <p></p> <p></p> <p></p> ul#name>li.item*3 <ul id="name"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>

GNU General Public License v3

E*N$ p.name-$*3 <p class="name-1"></p> <p class="name-2"></p> <p class="name-3"></p> select>option#item-$*3 <select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option> </select> E+ ul+ <ul> <li></li> </ul> table+ <table> <tr> <td></td> </tr> </table> dl+ <dl> <dt></dt> <dd></dd> </dl>

Positioning position:; position:static; position:absolute; position:relative; position:fixed; top:; top:auto; right:; right:auto; bottom:; bottom:auto; left:; left:auto; z-index:; z-index:auto;

Box behavior and properties

Zen CSS properties Based on CSS 3 draft specification Property

Alias

Special Rules @import url(); @media print { } @font-face { font-family:; src:url(); } !important expression ()

Properties Groups Sorting Methods • • • • • • • •

Positioning Box behavior and properties Sizing Color appearance Special content types Text Visual properties Print

http://code.google.com/p/zen-coding/

pos pos:s pos:a pos:r pos:f t t:a r r:a b b:a l l:a z z:a

@i @m @f

! exp

float:; float:none; float:left; float:right; clear:; clear:none; clear:left; clear:right; clear:both; display:; display:none; display:block; display:inline; display:inline-block; display:-moz-inline-box:; display:-moz-inline-stack:; display:list-item; display:run-in; display:compact; display:table; display:inline-table; display:table-caption; display:table-column; display:table-column-group; display:table-header-group; display:table-footer-group; display:table-row; display:table-row-group; display:table-cell; visibility:; visibility:visible; visibility:hidden; visibility:collapse; overflow:; overflow:visible; overflow:hidden;

4

fl fl:n fl:l fl:r cl cl:n cl:l cl:r cl:b d d:n d:b d:i d:ib d:mib d:mis d:li d:ri d:cp d:tb d:itb d:tbcp d:tbcl d:tbclg d:tbhg d:tbfg d:tbr d:tbrg d:tbc v v:v v:h v:c ov ov:v ov:h

Sizing

overflow:scroll; overflow:auto; overflow-x:; overflow-x:visible; overflow-x:hidden; overflow-x:scroll; overflow-x:auto; overflow-y:; overflow-y:visible; overflow-y:hidden; overflow-y:scroll; overflow-y:auto; overflow-style:; overflow-style:auto; overflow-style:scrollbar; overflow-style:panner; overflow-style:move; overflow-style:marquee; zoom:1; clip:; clip:auto; clip:rect(0 0 0 0); box-sizing:; box-sizing:content-box; box-sizing:border-box; box-shadow:; box-shadow:none; box-shadow:0 0 0 #000; -webkit-box-shadow:; -webkit-box-shadow:0 0 0 #000; -moz-box-shadow:; -moz-box-shadow:0 0 0 0 #000;

ov:s ov:a ovx ovx:v ovx:h ovx:s ovx:a ovy ovy:v ovy:h ovy:s ovy:a ovs ovs:a ovs:s ovs:p ovs:m ovs:mq zoo cp cp:a cp:r bxz bxz:cb bxz:bb bxsh bxsh:n bxsh+ bxsh:w bxsh:w+ bxsh:m bxsh:m+

margin:; margin:auto; margin:0; margin:0 0; margin:0 0 0; margin:0 0 0 0; margin-top:; margin-top:auto; margin-right:; margin-right:auto; margin-bottom:; margin-bottom:auto; margin-left:; margin-left:auto; padding:; padding:0; padding:0 0; padding:0 0 0; padding:0 0 0 0; padding-top:; padding-right:;

m m:a m:0 m:2 m:3 m:4 mt mt:a mr mr:a mb mb:a ml ml:a p p:0 p:2 p:3 p:4 pt pr GNU General Public License v3

padding-bottom:; padding-left:; width:; width:auto; height:; height:auto; max-width:; max-width:none; max-height:; max-height:none; min-width:; min-height:;

Color appearance

pb pl w w:a h h:a maw maw:n mah mah:n miw mih

outline:; o outline:none; o:n outline:1px solid #000; o+ outline-offset:; oo outline-width:; ow outline-style:; os outline-color:#000; oc outline-color:invert; oc:i border:; bd border:none; bd:n border:1px solid #000; bd+ border-break:; bdbk border-break:close; bdbk:c border-collapse:; bdcl border-collapse:collapse; bdcl:c border-collapse:separate; bdcl:s border-color:#000; bdc border-image:url(); bdi border-image:none; bdi:n -webkit-border-image:; bdi:w -webkit-border-image:url() 0 0 0 0 stretch stretch; bdi:w+ -moz-border-image:; bdi:m -moz-border-image:url() 0 0 0 0 stretch stretch; bdi:m+ border-top-image:url(); bdti border-top-image:none; bdti:n border-right-image:url(); bdri border-right-image:none; bdri:n border-bottom-image:url(); bdbi border-bottom-image:none; bdbi:n border-left-image:url(); bdli border-left-image:none; bdli:n border-corner-image:url(); bdci border-corner-image:none; bdci:n border-corner-image:continue; bdci:c border-top-left-image:url(); bdtli border-top-left-image:none; bdtli:n border-top-left-image:continue; bdtli:c border-top-right-image:url(); bdtri border-top-right-image:none; bdtri:n http://code.google.com/p/zen-coding/

border-top-right-image:continue; border-bottom-right-image:url(); border-bottom-right-image:none; border-bottom-right-image:continue; border-bottom-left-image:url(); border-bottom-left-image:none; border-bottom-left-image:continue; border-fit:; border-fit:clip; border-fit:repeat; border-fit:scale; border-fit:stretch; border-fit:overwrite; border-fit:overflow; border-fit:space; border-length:; border-length:auto; border-spacing:; border-style:; border-style:none; border-style:hidden; border-style:dotted; border-style:dashed; border-style:solid; border-style:double; border-style:dot-dash; border-style:dot-dot-dash; border-style:wave; border-style:groove; border-style:ridge; border-style:inset; border-style:outset; border-width:; border-top:; border-top:none; border-top:1px solid #000; border-top-width:; border-top-style:; border-top-style:none; border-top-color:#000; border-right:; border-right:none; border-right:1px solid #000; border-right-width:; border-right-style:; border-right-style:none; border-right-color:#000; border-bottom:; border-bottom:none; border-bottom:1px solid #000; border-bottom-width:; border-bottom-style:; border-bottom-style:none; border-bottom-color:#000; 5

bdtri:c bdbri bdbri:n bdbri:c bdbli bdbli:n bdbli:c bdf bdf:c bdf:r bdf:sc bdf:st bdf:ow bdf:of bdf:sp bdlt bdlt:a bdsp bds bds:n bds:h bds:dt bds:ds bds:s bds:db bds:dtds bds:dtdtds bds:w bds:g bds:r bds:i bds:o bdw bdt bdt:n bdt+ bdtw bdts bdts:n bdtc bdr bdr:n bdr+ bdrw bdrs bdrs:n bdrc bdb bdb:n bdb+ bdbw bdbs bdbs:n bdbc

border-left:; bdl border-left:none; bdl:n border-left:1px solid #000; bdl+ border-left-width:; bdlw border-left-style:; bdls border-left-style:none; bdls:n border-left-color:#000; bdlc border-radius:; bdrz -webkit-border-radius:; bdrz:w -moz-border-radius:; bdrz:m border-top-right-radius:; bdtrrz border-top-left-radius:; bdtlrz border-bottom-right-radius:; bdbrrz border-bottom-left-radius:; bdblrz background:; bg background:none; bg:n background:#FFF url() 0 0 no-repeat; bg+ filter:progid:DXImageTransform.Microsoft.AlphaImage Loader(src='',sizingMethod='crop'); bg:ie background-color:#FFF; bgc background-color:transparent; bgc:t background-image:url(); bgi background-image:none; bgi:n background-repeat:; bgr background-repeat:repeat; bgr:r background-repeat:repeat-x; bgr:x background-repeat:repeat-y; bgr:y background-repeat:no-repeat; bgr:n background-attachment:; bga background-attachment:fixed; bga:f background-attachment:scroll; bga:s background-position:0 0; bgp background-position-x:; bgpx background-position-y:; bgpy background-break:; bgbk background-break:bounding-box; bgbk:bb background-break:each-box; bgbk:eb background-break:continuous; bgbk:c background-clip:; bgcp background-clip:border-box; bgcp:bb background-clip:padding-box; bgcp:pb background-clip:content-box; bgcp:cb background-clip:no-clip; bgcp:nc background-origin:; bgo background-origin:padding-box; bgo:pb background-origin:border-box; bgo:bb background-origin:content-box; bgo:cb background-size:; bgz background-size:auto; bgz:a background-size:contain; bgz:ct background-size:cover; bgz:cv color:#000; c

GNU General Public License v3

Special content types table-layout:; table-layout:auto; table-layout:fixed; caption-side:; caption-side:top; caption-side:bottom; empty-cells:; empty-cells:show; empty-cells:hide; list-style:; list-style:none; list-style-position:; list-style-position:inside; list-style-position:outside; list-style-type:; list-style-type:none; list-style-type:disc; list-style-type:circle; list-style-type:square; list-style-type:decimal; list-style-type:decimal-leading-zero; list-style-type:lower-roman; list-style-type:upper-roman; list-style-image:; list-style-image:none; quotes:; quotes:none; quotes:'\00AB' '\00BB' '\201E' '\201C'; quotes:'\201C' '\201D' '\2018' '\2019'; content:; content:normal; content:open-quote; content:no-open-quote; content:close-quote; content:no-close-quote; content:attr(); content:counter(); content:counters(); counter-increment:; counter-reset:;

tbl tbl:a tbl:f cps cps:t cps:b ec ec:s ec:h lis lis:n lisp lisp:i lisp:o list list:n list:d list:c list:s list:dc list:dclz list:lr list:ur lisi lisi:n q q:n q:ru q:en ct ct:n ct:oq ct:noq ct:cq ct:ncq ct:a ct:c ct:cs coi cor

vertical-align:; vertical-align:super; vertical-align:top; vertical-align:text-top; vertical-align:middle; vertical-align:baseline; vertical-align:bottom; vertical-align:text-bottom; vertical-align:sub; text-align:; text-align:left;

va va:sup va:t va:tt va:m va:bl va:b va:tb va:sub ta ta:l

Text

http://code.google.com/p/zen-coding/

text-align:center; text-align:right; text-align:justify; text-align-last:; text-align-last:auto; text-align-last:left; text-align-last:center; text-align-last:right; text-decoration:; text-decoration:none; text-decoration:overline; text-decoration:line-through; text-decoration:underline; text-emphasis:; text-emphasis:none; text-emphasis:accent; text-emphasis:dot; text-emphasis:circle; text-emphasis:disc; text-emphasis:before; text-emphasis:after; text-height:; text-height:auto; text-height:font-size; text-height:text-size; text-height:max-size; text-indent:; text-indent:-9999px; text-justify:; text-justify:auto; text-justify:inter-word; text-justify:inter-ideograph; text-justify:inter-cluster; text-justify:distribute; text-justify:kashida; text-justify:tibetan; text-outline:; text-outline:none; text-outline:0 0 #000; text-replace:; text-replace:none; text-transform:; text-transform:none; text-transform:uppercase; text-transform:capitalize; text-transform:lowercase; text-wrap:; text-wrap:normal; text-wrap:none; text-wrap:unrestricted; text-wrap:suppress; text-shadow:; text-shadow:none; text-shadow:0 0 0 #000; 6

ta:c ta:r ta:j tal tal:a tal:l tal:c tal:r td td:n td:o td:l td:u te te:n te:ac te:dt te:c te:ds te:b te:a th th:a th:f th:t th:m ti ti:tj tj:a tj:iw tj:ii tj:ic tj:d tj:k tj:t to to:n to+ tr tr:n tt tt:n tt:u tt:c tt:l tw tw:n tw:no tw:u tw:s tsh tsh:n tsh+

line-height:; lh white-space:; whs white-space:normal; whs:n white-space:pre; whs:p white-space:nowrap; whs:nw white-space:pre-wrap; whs:pw white-space:pre-line; whs:pl white-space-collapse:; whsc white-space-collapse:normal; whsc:n white-space-collapse:keep-all; whsc:k white-space-collapse:loose; whsc:l white-space-collapse:break-strict; whsc:bs white-space-collapse:break-all; whsc:ba word-break:; wob word-break:normal; wob:n word-break:keep-all; wob:k word-break:loose; wob:l word-break:break-strict; wob:bs word-break:break-all; wob:ba word-spacing:; wos word-wrap:; wow word-wrap:normal; wow:n word-wrap:none; wow:no word-wrap:unrestricted; wow:u word-wrap:suppress; wow:s letter-spacing:; lts font:; f font:1em Arial,sans-serif; f+ font-weight:; fw font-weight:normal; fw:n font-weight:bold; fw:b font-weight:bolder; fw:br font-weight:lighter; fw:lr font-style:; fs font-style:normal; fs:n font-style:italic; fs:i font-style:oblique; fs:o font-variant:; fv font-variant:normal; fv:n font-variant:small-caps; fv:sc font-size:; fz font-size-adjust:; fza font-size-adjust:none; fza:n font-family:; ff font-family:Georgia,'Times New Roman',serif; ff:s font-family:Helvetica,Arial,sans-serif; ff:ss font-family:'Monotype Corsiva','Comic Sans MS',cursive; ff:c font-family:Capitals,Impact,fantasy; ff:f font-family:Monaco,'Courier New',monospace; ff:m font-effect:; fef font-effect:none; fef:n font-effect:engrave; fef:eg font-effect:emboss; fef:eb GNU General Public License v3

font-effect:outline; font-emphasize:; font-emphasize-position:; font-emphasize-position:before; font-emphasize-position:after; font-emphasize-style:; font-emphasize-style:none; font-emphasize-style:accent; font-emphasize-style:dot; font-emphasize-style:circle; font-emphasize-style:disc; font-smooth:; font-smooth:auto; font-smooth:never; font-smooth:always; font-stretch:; font-stretch:normal; font-stretch:ultra-condensed; font-stretch:extra-condensed; font-stretch:condensed; font-stretch:semi-condensed; font-stretch:semi-expanded; font-stretch:expanded; font-stretch:extra-expanded; font-stretch:ultra-expanded;

Visual properties

fef:o fem femp femp:b femp:a fems fems:n fems:ac fems:dt fems:c fems:ds fsm fsm:a fsm:n fsm:aw fst fst:n fst:uc fst:ec fst:c fst:sc fst:se fst:e fst:ee fst:ue

page-break-inside:auto; page-break-inside:avoid; page-break-after:; page-break-after:auto; page-break-after:always; page-break-after:left; page-break-after:right; orphans:; widows:;

pgbi:a pgbi:av pgba pgba:a pgba:aw pgba:l pgba:r orp wid

opacity:; op filter:progid:DXImageTransform.Microsoft.Alpha (Opacity=100); op:ie -ms-filter:'progid:DXImageTransform.Microsoft.Alpha (Opacity=100)'; op:ms resize:; rz resize:none; rz:n resize:both; rz:b resize:horizontal; rz:h resize:vertical; rz:v cursor:; cur cursor:auto; cur:a cursor:default; cur:d cursor:crosshair; cur:c cursor:hand; cur:ha cursor:help; cur:he cursor:move; cur:m cursor:pointer; cur:p cursor:text; cur:t

Print page-break-before:; page-break-before:auto; page-break-before:always; page-break-before:left; page-break-before:right; page-break-inside:; http://code.google.com/p/zen-coding/

pgbb pgbb:a pgbb:aw pgbb:l pgbb:r pgbi

.: PDF version by Shayanlinux â&#x20AC;&#x201C; Compiled in OpenOffice.org Writer :.

7

GNU General Public License v3

Turn static files into dynamic content formats.

Create a flipbook