Jade with optional tags

Jade with optional tags


It's a W3C's spec: http://www.w3.org/html/wg/drafts/html/master/syntax.html#optional-tags

npm install cutsin/jade
npm install cutsin/jade -g
bash$ jade foo bar --omitTag [safe|radical|unsafe|dangerous]
var jade = require('jade')
var options = {
    omitTag : 'radical' // or 'safe' or 'unsafe' or 'dangerous' 
var fn = jade.compileFile('./foo.jade', options)
var html = fn(locals)
  1. Why we need optional tags

  2. http://moonless.net/demo/optional-tags/

  3. In browser, before HTML minify and after it, the result is different, because browser must be generated implied end tags.

  4. In this w3's essay by Bert Bos, W3C/ERCIM, bert@w3.org, he used vast numbers of omitted tags.

  1. Sync with Jade, only a few changes.

  2. If you using default option: true or 'safe', it's just provide 12 absolutely safe tags, most browsers(IE6+/chrome/safari/Firefox/Opera/...) works perfect.

  3. Actually, it appeared in HTML 4.01, and we used many years on our corp's projects.

  4. In test case, other levels will be fallback to "safe" when using "pretty: true", because it's really unsafe with space character and comment by w3's SPEC.

.a li {display:block}
.b1 li {display:inline-block}
.b2 li {display:inline}
<ul class="a">
<ul class="b1">
<ul class="b2">

In browser, the rendering results are different, because of white-space processing model

In addition, according to omitted tag's implicit rules, we can do a lot of useful things.

Values for Jade, it can be reduce indentationslike this:

Must be: omitTag: 'radical' at least

doctype html
//- `base` is a `head scope` only tag.
p I'm main body.

It can resolve the different rendering results on browser side(white-space processing model) when using pretty: true