You can add Zephr’s HTML Feature Rules to your site in two ways – via Comment Tags, or by using CSS Selectors. This guide discusses both options.
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 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.
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:
When published, the registration form will show in place of the content shown above:
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]|