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 are available to be run in two ways – using the Zephr CDN as a Transformation Layer, or Browser-Side, using our In-Browser HTML Rules.
With that in mind, the following guides are available for running HTML Feature Rules with Zephr:
- HTML Features with the CDN Transformation Layer
- Browser-Side HTML Features with the CDN
- Browser-Side HTML Features without the CDN
HTML Features can be integrated in two ways – by using Zephr Comment Tags, or by using CSS Selectors. If a rule is being run in-browser, you will only have the CSS Selectors option.
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 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.
For example, the following image shows an area of a demo site using
div.article-content around its body copy.
When creating an HTML Feature Rule, setting the Site Integeration Type to CSS Selector, then input the relevant selector in the field that displays.
Once saved, complete your rule as normal.
The following Selectors are supported by Zephr:
|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.