rel attributeWithin the main <nav> container – and in one case within the <leeloo> element – Take Five! is responsive to the rel attributes given to links. These generate labels and navigation buttons according to the following table:
rel attribute |
Declared as | Label | Button |
|---|---|---|---|
"index" |
article.slide > nav:first-of-type a[rel~="index"] |
“Index” | ⌂ |
"first" |
article.slide > nav:first-of-type a[rel~="first"] |
“First slide” | ⏮ |
"next" |
article.slide > nav:first-of-type a[rel~="next"] |
“Next slide” | ❯ |
"prev" |
article.slide > nav:first-of-type a[rel~="prev"] |
“Previous slide” | ❮ |
"last" |
article.slide > nav:first-of-type a[rel~="last"] |
“Last slide” | ⏭ |
"attachment" |
article.slide > nav:first-of-type a[rel~="attachment"] |
“Download” | 📎 |
"bookmark" |
article.slide > nav:first-of-type a[rel~="bookmark"] |
“Share it!” | 🔗 |
"author" |
article.slide > nav:first-of-type a[rel~="author"] |
“Author” | ✉️ |
"discussion" |
article.slide > nav:first-of-type a[rel~="discussion"] |
“Comments” | 🗨 |
"parent" |
article.slide > nav:first-of-type a[rel~="parent"] |
“Back to” when not empty or “Click to exit” when empty | × |
"child" |
article.slide > nav:first-of-type a[rel~="child"] |
“More” | None |
"tag" |
article.slide > nav:first-of-type a[rel~="tag"] |
“Tagged content” | None |
article.slide a[rel~="tag"] |
“★” |
a[rel="parent"] should be present in order to give the possibility to exit from the slide), and all of them can cohabitate together.rel attributes that generate buttons occur only once for each slide, or the button will be generated twice in the same position. Setting a "no-rel" class on the links will prevent the creation of buttons, thus allowing duplications – a typical case is the duplication of a[rel~="author"] in slides with more than one author (but consider to use a dedicated slide for listing more than one author). Links that do not generate buttons may occur more the once within the main <nav> (for example, a[rel="archives"], or a[rel="child"], or a[rel="tag"]). Moreover, additional duplications of links that possess one of the rel attributes in the table above, but placed elsewhere, are irrelevant for this CSS (e.g.: article.slide > div a[rel="next"]).<a> elements not listed above inside the main <nav> will be accompanied by a label containing their rel attribute. Links without a rel attribute will be accompanied by a “See also” label instead. Outside the main <nav>, tag links placed anywhere else within the slide (i.e., article.slide a[rel="tag"]) will be styled with a star preceding the text.rel attribute, or replace default labels in links with a rel attribute, by setting a data-label attribute on the link – as in <a href="#my-sweetheart" data-label="Thanks to">Carla</a> or <a href="#my-sweetheart" rel="sweetheart" data-label="Thanks to">Carla</a>. The data-label attribute can also be used to replace tags' stars or add a custom label to any link within a slide."no-label" class to it – as in: <a href="#sample-photo" rel="next" class="no-label">Sample photo</a>.a[rel~="parent"] elementIn order to exit from the viewport the a[rel~="parent"] element is used (see above). Normally this links to any unexisting hash (in our examples we used the "#nowhere" hash link, although a simple "#" can be enough), but in the case of nested galleries it can optionally link to the parent gallery.
The special link a[rel~="parent"] complies with the following rule:
<nav> ⇒ it will be shown on the top right corner; a transparent, clickable, full-screen layer will be created.<nav> ⇒ it will be ignored by this CSS and displayed as a normal link.rel attributeIt is syntactically and semantically valid to assign more than one token to the rel attribute. As explained in the W3C Recommendation 28 October 2014,
The attribute's value must be a set of space-separated tokens.
In this case, within the main <nav>, the CSS will choose the most significant token according to the following order (the more down in the list the less significant):
"parent""child""next""prev""first""last""index""attachment""bookmark""author""discussion""tag"For instance, <a href="#hello-world" rel="index prev">Hello world</a> will be styled as if it contained just the token "prev", while <a href="#hello-world" rel="prev parent">Hello world</a> will be styled as if it contained just the token "parent", and so on. The "child" token used together with one of the tokens 3-11 listed above will preserve the button generated by the latter.
Possible values for the rel attribute are several (it can be worth to have a look at the HTML Living Standard and the IANA link relation registry), and you are free to use the keywords that best suit your needs. Furthermore:
Extensions to the predefined set of link types may be registered in the microformats wiki existing-rel-values page.