Adding an HTML Feature to your site

Zephr Comment Tags

Zephr comment tags are relevant to the Feature / Rules you have created. Generally, you will use different Zephr tags for different types of content or different features of your site. Site features are parts of an HTML document (like an article body, a video, a data table, etc.) which are annotated with HTML comments. For example, you may have a Feature rule for Article Pages, and a different Feature rule for Login. These would have separate Zephr tags.

To find your Zephr tags, navigate to, or create, the relevant Feature. Select the HTML Rule type, and choose Comment Tag as your Target Type. The Zephr tags will populate below, based upon your Rule Name and slug.

You will need to wrap the features on your site in Zephr tags in order for the transformation to take place.

Consider the following HTML:

<html>
<head>…
</head>
<body>
    <h1>A site!</h1>
    <nav>…
    </nav>
    <div class="page-wrapper">
       <h2>Something interesting</h2>
       <article class="article-body">
          <p>…</p>
          <img>
          <p>…</p>
       </article>
       <ul class="related-reading">…
       </ul>
    </div>
</body>

In this case, you might want to make decisions about whether a visitor can assess the article body. To do that, you would wrap the following comments, in orange below, around the article. Usually, these comments would be implemented in a CMS template, but can also be done on a per article basis.

<head>…
</head>
<body>
    <h1>A site!</h1>
    <nav>…
    </nav>
    <div class="page-wrapper">
       <h2>Something interesting</h2>
       <!-- BLAIZE_FEATURE article-body -->
       <article class="article-body">
          <p>…</p>
          <img>
          <p>…</p>
       </article>
       <!-- BLAIZE_FEATURE_END article-body -->
       <ul class="related-reading">…
       </ul>
    </div>
</body>

If this document were to be served through the Zephr CDN, the Zephr Feature comment would be picked up and Zephr would look for a corresponding feature rule to decide how to handle that part of the content.

Zephr Feature comments are used under the hood to break a document into a tree, which Zephr will traverse in real-time to manipulate the content. Zephr Feature comments can be nested but do need to be balanced, in terms of their opening and closing, much like HTML tags.

Please ensure that you do not use the same Feature Tags for multiple rules, as this will cause confusion regarding which rule to run.

CSS Selectors

CSS Selectors allow you to target Zephr’s HTML Feature Rules to your site without the need to add Zephr Comment Tags. This can be easier for teams with more limited access to their website’s CMS and will work on any page of your site where your chosen CSS Selector is present.

When CSS Selectors are in use, Zephr will target HTML Feature Rules based upon the CSS Selector you have chosen. Please ensure you don’t use the same CSS Selectors for multiple rules as it can cause confusion as to which rule should be used. We also do not recommend nesting CSS Selector based Feature Rules, or using multiple rules targeting CSS within each other.

For example, the following image shows an area of a demo site using div.article-content around its body copy.

Screen-Shot-2020-04-20-at-12.44.39-PM-1.png

When creating an HTML Feature Rule, setting the Target Type to CSS Selector, and CSS Selector to div.article-content, we can transform this content to display a Zephr registration form instead. This is what the rule looks like:

Screen-Shot-2020-04-20-at-12.59.58-PM.png

When published, the registration form will show in place of the content shown above:

Screen-Shot-2020-04-20-at-1.08.00-PM.png

Supported Selectors

The following Selectors are supported by Zephr:

Pattern	Matches	Example
*	any element	*
tag	elements with the given tag name	div
*\|E	elements of type E in any namespace ns	*\|name finds <fb:name> elements
ns\|E	elements of type E in the namespace ns	fb\|name finds <fb:name> elements
#id	elements with attribute ID of “id”	div#wrap, #logo
.class	elements with a class name of “class”	div.left, .result
[attr]	elements with an attribute named “attr” (with any value)	a[href], [title]
[^attrPrefix]	elements with an attribute name starting with “attrPrefix”. Use to find elements with HTML5 datasets	[^data-], div[^data-]
[attr=val]	elements with an attribute named “attr”, and value equal to “val”	img[width=500], a[rel=nofollow]
[attr=”val”]	elements with an attribute named “attr”, and value equal to “val”	span[hello=”Cleveland”][goodbye=”Columbus”], a[rel=”nofollow”]
[attr^=valPrefix]	elements with an attribute named “attr”, and value starting with “valPrefix”	a[href^=http:]
[attr$=valSuffix]	elements with an attribute named “attr”, and value ending with “valSuffix”	img[src$=.png]
[attr*=valContaining]	elements with an attribute named “attr”, and value containing “valContaining”	a[href*=/search/]
[attr~=regex]	elements with an attribute named “attr”, and value matching the regular expression	img[src~=(?i)\\.(png\|jpe?g)]
	The above may be combined in any order	div.header[title]