Zephr Beta User Guide

HTML Features

0 views 0

Zephr has many ways of integrating Feature rules into your site. The most common way of doing this is through the use of HTML Features.

HTML Features can be integrated in two ways – by using Zephr Comment Tags, or by using CSS Selectors.

Zephr Comment Tags

Zephr Comment Tags look at specific features of your website, wrapped in HTML feature tags, which are then interpreted by the Zephr CDN.

Site features are parts of an HTML document (like an article body, a video, a data table, etc.) which are annotated with HTML comments.

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 around the article. Usually, these comments would be implemented in a CMS template.

<head>…
</head>
<body>
    <h1>A site!</h1>
    <nav>…
    </nav>
    <div class="page-wrapper">
       <h2>Something interesting</h2>
       <!-- ZEPHR_FEATURE article-body -->
       <article class="article-body">
          <p>…</p>
          <img>
          <p>…</p>
       </article>
       <!-- ZEPHR_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 and repeated but do need to be balanced, in terms of their opening and closing, much like HTML tags.

When tagging your site for Zephr you can decide to add the tags directly to your site, then name your Features accordingly, or create each Feature within the Zephr Admin Console and then add the tags as they appear in the Developer Interface section of your Feature. Provided the tags match the Feature name, both options will work correctly.

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. For example, the following image shows an area of a demo site using div.article-content around its body copy.

CSS Selector - div class example

When creating an HTML Feature Rule, setting the Site Integeration Type to CSS Selector, then input the relevant selector in the field that displays.

CSS Selector Example

Once saved, complete your rule as normal.

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]

Looking for a different way to integrate Zephr Feature Rules? Read our guide on SDK Features too.