Zen: skip empty

Back to Zen homepage

prev next

1. Skip empty tags

Zen autoremoves empty tags from the output. In the past empty tags served as design helpers, but since CSS3 shadow elements such technique can be avoided and should not be used anymore, because it means that design and contents are not well separated.
On the other hand, some tags serve as empty containers that loads the contents later. These must not be removed, which can Zen do by placing {keepempty} note inside such tags. This note is removed during transpiling process and the tags are kept even when they end up empty. Such note is also beneficial for other coders that this tag is kept empty intentionally.
{$tag2 = "tag2 contents"} <div id="tag1">{=$tag1}</div> <div id="tag2">{=$tag2}</div> <output id="tags">{keepempty}</output> <script> function testTag(tag) { return tag + (document.getElementById(tag) ? " found" : " not found"); } tags.innerHTML = testTag("tag1") + "<br>" + testTag("tag2"); </script>

Result

tag2 contents

2. Skip empty attributes

In XML compliant code, every attribute must have a value. Today XHTML is mostly obsolete and HTML5 is used instead, where almost every attribute needs to have a value. The exception are boolean attributes, which are considered true regardless their value (so i.e. required="false" or is the same like required). To set them false, they need to be removed from the tag. Therefore Zen autoremoves attributes with empty values. Such values do not hold any information and should not be used in HTML5. To store information in their very existence is confusing and counterintuitive.
{$bag2 = "highlight"} <div id="bag1" class="{=$bag1}">Bag 1</div> <div id="bag2" class="{=$bag2}">Bag 2</div> <output id="bags">{keepempty}</output> <script> function testBag(tag) { return tag + " " + document.getElementById(tag).outerHTML.replace(/</g,"&lt;"); } bags.innerHTML = testBag("bag1") + "<br>" + testBag("bag2"); </script>

Result

Bag 1
Bag 2

3. Comments

Comments and {keepempty} notes are removed from the HTML output, see the source code below.
{* This comment is not in the output *} <output>{keepempty} This output exists </output>

Result

This output exists