CSS3 module: hyperlinks, replaced elements and footnotes

Abstract

Cascading Style Sheets (CSS) is a simple, declarative language to specify the rendering of structured documents, such as those written in HTML or other SGML- and XML-based languages, on various media. This specification is a part (module) of level 3 of CSS, which is itself a modularized and expanded version of level 2.

This module contains the properties that allow a designer to specify how hyperlinks between or within documents are rendered and how they behave when activated. It includes pop-up windows, collapsing/expanding text and footnotes. It also gives the designer explicit control over "replaced elements" (such as images and other objects), which were implicit in CSS level 2.

The style properties in this module do not create links between documents, but they specify whether existing links are hyperlinks, replaced elements, or nothing at all.

Status of this document

[...] Internal draft

Table of contents

Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

• CSS3 module: the box model [[!CSS3BOX]]
• CSS3 module: generated content [[!CSS3GENCON]]
• Selectors [[!SELECT]]
• Cascading and inheritance [[!CSS3CASCADE]]
• CSS3 module: Lists [[!CSS3LIST]]

It has non-normative (informative) references to the following other CSS3 modules:

• Media queries [[MEDIAQ]]
• CSS3 module: basic user interface [[CSS3UI]]

Notations used in this specification

Each property is introduced by a table summarizing its usage. See [where? Introduction?] for an explanation. The values 'inherit' and 'initial' are valid on all properties, but are omitted from the tables for brevity's sake. They are explained in Cascading and inheritance [[!CSS3CASCADE]].

Note that non-normative notes generally start with the word "note" and are rendered like this paragraph.

Introduction

Links from (elements of) a document to other resources can be expressed in various ways, such as by means of href attributes or even externally in a "link sheet" or "external link set" [[XLINK10]], depending on the particular document format. Links normally specify the targets by means of one or more URIs. The properties in this module do not create links, but they determine how the links are rendered, i.e., which of them act as hyperlinks, as footnotes or as replaced elements and which are ignored (at least for the purposes of display).

Note: A transclusion is similar to what CSS calls a replaced element. Like a replaced element, it is presented with a containing document as a single whole, but it also allows the user to view the transclusion in its "original" context, without the containing document. It is recommended that UAs treat replaced elements as transclusions and provide a way for the user to find out where the replaced element comes from. For information on how to style replaced elements, see the 'content' property [in [[!CSS3GENCON]].]

Replaced elements and hyperlinks can be rendered on various media, but hyperlinks only as long as the medium is interactive (although on a non-interactive medium, such as print, they can be approximated, e.g., as footnotes). Most of the properties in this module deal with visual media.

This module doesn't specify how the reader activates hyperlinks. On different devices and different UAs that may be done in different ways. A mouse click is one common method. However, it is assumed that the UA provides at least two different ways, referred to as the primary and secondary activation. (See the UI module [[CSS3UI]] for properties dealing with key presses and other user events.)

The primary activation is assumed to be a method that is very easy for the user, at least as easy as the secondary activation. E.g., the primary activation could be a mouse click with button 1, the secondary could be by means of a menu that pops up on a click of mouse button 2. The primary activation could also be with a certain key and the secondary with the same key plus a modifier key.

The UA should assume that there may be several targets associated with a secondary activation and should be prepared to present a menu of targets in that case. However, CSS3 provides no properties to style that menu.

The properties in the current module do not create links. It is the UA's responsibility to find the links by other means, based on its knowledge of the document format. E.g., if it renders an HTML document, it is supposed to know that the href and src attributes, in combination with the base element, if any, create links. In many cases, as in HTML, the links will be in the form of URI references [[URI]] and the UA is responsible for finding the corresponding URI and retrieving the targeted resources, as necessary.

[Balloonhelp/tooltips are not handled here. They are similar to hyperlinks, in that they require user interaction and result in a very-light-weight pop-up. In practice, their contents seem to be mostly in attributes, though, so maybe the properties can be kept separate: 'img {tooltip: attr(title)}'?]

The link pseudo-classes ':link' and ':visited'

The pseudo-classes ':link' and ':visited' are defined in the Selectors module [[!SELECT]]. This section refines that definition.

The pseudo-classes match all elements that the UA knows to be typically displayed as hyperlinks. This depends on the definition of the source document's format, not on any CSS3 style sheets that aply to the document. E.g., in HTML and XHTML, all elements in the body with HREF attributes match either ':link' or ':visited' (but elements in the head with HREF attributes do not).

*:link, *:visited { link: none }

If an element has multiple targets, it matches ':link' as long as there is at least one target not yet in the ':visited' state.

Anything we want to say about links that are the result of an external annotation, such as Annotea or XLink's external link sets make them? The author probably cannot style them, because presumably he doesn't know they exist, but the reader may want to have a style sheet for them...

Rendering "generic" XML

A UA may attempt to display a document in a format of which it knows only that it is based on XML. If there is a CSS style sheet for the document, it should interpret the style sheet as follows:

1. ':link' and ':visited' pseudo-classes apply to elements that have x:href attributes, and either no x:actuate attribute or an x:actuate attribute with the value "onRequest". If the UA doesn't understand XML Namespaces, ':link' and ':visited' do not match any elements. Note that ':link' and ':visited' may match different elements depending on whether the UA reads any associated DTD or schema or not
2. Any attribute X mentioned in a value 'target(X)' or 'target(X,S)' is interpreted as a URI reference [[URI]], with the URI of the document in which the attribute occurs as the base URI. If the UA understands XML Base [[XBASE]] and there is an xml:base attribute in scope, the UA should use that as the base URI.
3. The value 'auto' on 'content', 'link-source' and 'link2-source' is interpreted the same as 'normal', except when the UA understands XLink, in which case there are two exceptions:
   • If the element has (1) an x:href attribute and (2) an x:actuate attribute with value "onLoad" and (3) an x:show attribute with value "embed", then 'content: auto' is interpreted the same as 'content: target(x|href)'.
   • If the element has (1) an x:href attribute and (2) an x:actuate attribute with value "onRequest", then 'link-source: auto' is interpreted the same as 'link-source: target(x|href)'.

In the above, "x" may be replaced by an arbitrary XML Namespace prefix, but it must refer to XLink 1.0 [[XLINK10]].

The 'content' property and the 'target()' notation

[Where should we put the above table? In the Generated content module?]

Note that the initial value of 'content' is changed from CSS2, where it was the empty string. For the 'before' and 'after' pseudo-elements, the only cases where 'content' applied in CSS2, there is no difference in the effect.

The values have the following meaning:

auto

The UA should use its built-in knowledge about a document format to either make elements into replaced elements or display their contents. When applied to the pseudo-elements 'before' and 'after', the value is equivalent to 'none'.

normal

The contents are displayed. This differs from 'auto' in that it overrides any knowledge the UA might have about the element being a replaced element.

none

No contents are displayed. Note that this is in general not the same as 'display: none', except for the 'before' and 'after' pseudo-elements. E.g., there may still be margins, borders, etc.

target(X)

X is the name of an attribute. If the subject element has no such attribute, the effect is the same as 'auto'. Otherwise, the element will be a replaced element and the value of X points to the resource that replaces it. The UA should interpret X as a URI reference, unless the document format has other rules.

target(X,S)

X is the name of an attribute and S is a selector. The selector is rooted at the subject element and the attribute is looked for on the first element that matches that selector. If there is no such element or no such attribute, the effect is as if 'auto' were specified. Otherwise the element is a replaced element and is replaced by the resource identified by the attribute. "Rooted" means that ':root' matches the current subject element and all simple selectors in S match only the current subject or its descendants.

Instead of target(X) we could use attr(X, url), as per Ian's attr() spec (which needs to be enhanced to say that attr(X, url) is relative to the source document, unlike url(), which is relative to the style sheet). But then we have a problem with target(X,S). We need it for WML 1. Or should we just handle that with 'link-source: auto'?

The value may also be a sequence of one or more of the following. In this case, the actual contents of the element in the source are discarded and the property's value is displayed instead:

<string>, <uri>, <counter>...

See the "Generated text" module [[!CSS3GENCON]]

[What if the URL is not an attribute on an element but in the content? We could have a special form 'target(@)']

The value 'auto' exists, because the necessary computation to establish the target of the link cannot always be expressed by rules with 'target()'. But for HTML it can: a UA that displays HTML should treat the following two rules as equivalent:

img {content: auto}
img {content: target(src)}

Note that 'target(X)' is equivalent to 'target(X, *:root)'.

p {content: target(src, img)}

If a document format uses XLink (and the UA knows that, i.e., it is not trying to display the document as some other type), the value 'auto' should cause elements to be replaced if they have a link with attribute "show" set to "embed" and "actuate" to "onLoad".

Note: the 'content' property only applies when the element is not collapsed: see 'link' below.

@media print {
    a[href]::after { content: attr(href); display: footnote }
}

The 'link-source' and 'link2-source' properties

The 'link-source' and 'link2-source' properties make an element into a hyperlink.

auto

The value 'auto', which is the initial value, causes the UA to use its built-in knowledge about the document format (which may include XLink, HLink, CLink or other systems) to determine if this element is a hyperlink.

none

The value 'none' means the element is not a hyperlink.

target(X), target(X,S)

The values 'target(X)' and 'target(X,S)' mean that the element is a hyperlink, if it has an attribute X or if the element that matches selector S has an attribute X. If no matching attribute X is found, the property is treated the same as for 'none'. (See under 'content' for the definition of 'target()')

xy

If 'target()' is accompanied by the keyword 'xy', the UA will append coordinates to the URL when the link is activated, as described in HTML [[!HTML401]].

map(X)

The 'map(X)' value is an indirection. It says that the attribute X points to a resource (probably another element in the current document) that holds the actual pointer or pointers. It works recursively: the intermediate resource (or its children) may itself also have a 'link: map()' pointing to another intermediate resource with more links. Its typical use is for client-side image maps. The intermediate resource is normally not displayed (it may have 'display: none'), but all the links found in it or in its children are taken as links on the current element. If there is more than one, all except one must apply to a subpart of the current element only, such as a region given by coordinates. [Should there be properties to map the "shape" and "coords" attributes? Or is that magic?]

<string>, <uri>...

The other values on 'link' make the element into a collapsed element. The value specifies what is displayed, exactly as for the 'content' property, which is not used in this case. The element is a hyperlink and can be activated. On activation, the value is no longer displayed, but is replaced by what 'content' specifies (controlled by 'link-target', actually). The element is then said to be in its expanded state. It is no longer a hyperlink (unless it also has a 'link2' that makes it into a hyperlink).

If we adopt something like ':mode' below for collapsed text, then we don't need 'link-source' to do it, and its value could reduce to: auto | none | target(X) || xy | target(X,S) || xy | map(X).

The target of the hyperlink given by 'target(X)' or 'target(X,S)' is the resource that is identified by attribute X. The UA should interpret the value of X as defined by the document format. Typically it is a URI reference.

Note that any relative URL in X will be relative to the source document or some base specified by the source document, not to the style sheet.

ul { link-source: url(arrow) " " attr(title)
     link-target: embed }

Note that any relative URL in X will normally be relative to the source document or some base specified by the source document, not to the style sheet.

[What if the URL is not an attribute on an element but in the content? We could have a keyword 'content', but maybe 'auto' is enough in practice.]

The differences between 'link' and 'link2' are as follows:

• 'Link' accepts exactly one value, 'link2' accepts one or more, comma-separated values.
• 'Link' provides the "primary" hyperlink, the one that is most easily activated by the user. 'Link2' provides secondary links. E.g., in a mouse-based interface, a single click with the first mouse button may activate the primary hyperlink, while a click with the second mouse button, or a shift-click combination, may pop up a menu with all the targets in 'link2'. What is shown in that menu is not specified here.
• Only 'link' can be used to create collapsed elements.

blockquote { link2-source: target(cite) }

blockquote[cite][href] {
    link-source: target(cite);
    link2-source: target(href) }

img { content: attr(alt); link-source: target(src) }

Note: Do not confuse 'link: target(href)' (make a hyperlink pointing to what href points to) and 'link: attr(href)' (show the href as a string in place of the element's content).

How is explicit content negotiation handled, such as for the OBJECT and SWITCH elements, of which only one alternative link should be processed, based on UA capabilities and availability of the target?

Should there be a way to associate titles with secondary links, so that the menu of links is more meaningful?, E.g.: 'link2: target(link1) "First link", target(desc) attr(desctitle)' gives a menu with two entries, one labeled "First link" and one labeled with the contents of the "desctitle" attribute.

The 'link-target' and 'link2-target' properties

The 'link-target' property specifies where any target resource will be displayed. 'Link-target' applies to primary targets, 'link2-target' to secondary ones. The keywords specify the way in which the target is displayed when the hyperlink is traversed:

normal

replace the current document

pop-up

in a temporary window (described below)

embed

in the current document replacing the subject element

Some types of hyperlinks in some UAs may have behavior that is independent of the 'link-target' property. For example, a link with the protocol "mailto" might start an external mail user agent, rather than be handled by the UA itself.

A temporary window is one that disappears as soon as a link in it is activated, unless that link is a collapsed element or one whose target is to be displayed inline ('embed'). The targets of other hyperlinks should be displayed as if they had been activated in the original window from which this one popped up.

The window should also be decorated in a way that makes it clear that the window is temporary, e.g., no menu, no toolbar, thinner borders, etc. The temporary window is typically also smaller than a normal window. The UA may shrink-wrap the temporary window around its contents, if that makes the window smaller.

The temporary window may be modal or non-modal, but it should stay in front of the window from which it popped up (if the UA is capable of that). If it is non-modal (i.e., the user can interact with the original window even while the temporary window is shown), any link activation in the original window should cause the temporary window to disappear again.

The target of a collapsed element is the element itself, as it would be displayed with the 'content' property rather than the 'link' property applied.

a.gloss {link-target: pop-up}

ul {link-source: "click here";
    link-target: pop-up}

img {
    content: "click to show image";
    link: target(src) pop-up }

Open issues: should there be a way to say that a hyperlink neither replaces the current document nor expands it, but is opened in a new, full-blown window (if the UA has windows)? A keyword 'window'? It's bad UI design, but it is used...

Issue: should the target attribute of HTML be supported? If so, how are targets identified? (It doesn't exist in XLink.)

The 'link' and 'link2' shorthand properties

'Link' is a shorthand. It sets both 'link-source' and 'link-target'. It allows to define an element as a hyperlink and specify the way it is displayed at the same time.

'Link2' is a shorthand for 'link2-source' and 'link2-target'.

a[href] {
    link: target(href) normal;
    link2: target(href) pop-up }

[Should 'link2' allow this syntax with multiple link targets 'link2: target(a) embed, target(b) pop-up?]'

The ':expanded' pseudo-class

An element that is collapsed may need a different style once it is expanded. The ':expanded' pseudo-class applies to elements in their expanded state.

ul {
  link: attr(title);
  display: inline;
  color: red
}
ul:expanded {
  display: block;
  color: black
}

[This is not backward compatible with CSS2 UAs, as they will ignore 'link' and apply 'display: inline'. On the other hand, ':collapsed' instead of ':expanded' is harder to use, and the list in the example above will be displayed as a block in CSS2 implementations anyway, because the LIs are blocks.]

Multi-mode elements

The pseudo-class ':mode(n)' (where n is an <integer>) matches an element which is in mode n. All elements have an infinite number of modes, from minus infinity to plus infinity. In each mode, the element has a full set of CSS properties (but in most modes the properties will have exactly the same values).

p:mode(7) { color: red }

Initially, all elements are in mode 0. Interactive UAs should provide a way to change the element from its current mode to the next (and optionally to the previous) mode. This could, e.g., be done with a mouse click. The change must skip modes that cause no change in the rendering and when it reaches infinity is should wrap round to minus infinity.

Note that it may be computationally intensive to determine if a mode is different from another. A UA may approximate by counting the number of different selectors instead. E.g.,

p:mode(0) em {color: red}
p.mode(1) em {color: red}

should define two different states for "p" (0 and 2, because 1 is skipped, since is the same as 0), but it is acceptable to count the number of different mode numbers for "p" that appear in the rules and add one (which makes three in this case: 0, 1 and 2).

Note also that these rules, despite looking the same, actually define four states (0, 1, 2 and 3):

p:mode(1) {color: red}
p:mode(3) {color: red}

The user event that causes the change to the next mode should effect one element at a time. E.g., if the change is effected by a mouse click, it should change an element under the cursor that has another mode to change to, but none of its ancestor elements or any other element "behind" it (in 'z-index' order).

Note that the selectors 'p' and 'p:mode(0)' are not the same. They differ in their specificity and the former applies to "p" elements in any mode, the latter only to "p" elements in mode 0.

div:mode(0) {content: attr(title)}
div:mode(1) > * > ul {display: none}

ol:mode(1) {content: url(listicon.png)}

ol:mode(1) {icon: url(listicon.png)}

ol {icon: url(listicon.png)
ol:mode(1) {content: icon}

ul {position: pop-up}
ul:mode(0) {content: "click here"}

ul:mode(0) li + li {display: none}

li:mode(0) + li {display: none}

body > section:mode(0) + section {display: none}
body > section:mode(1) {display: none}

"Back" button

A UA should have a function to go back to a previous state: go back to the document before activating a hyperlink, including going back to the document as it was before expanding a collapsed element.

Nested hyperlinks

When a primary hyperlink is activated, it is always the smallest enclosing hyperlink element that is used. When "tabbing" through all links in a document, the enclosing element comes before the enclosed element in the tabbing order.

It is recommended that the menu offered for secondary hyperlinks also contains all primary and secondary links from enclosing elements.

Footnotes

Footnotes could be regarded as hyperlinks, since a good way to display them in interactive, visual media is as a pop-up, but it seems more intuitive to treat them separately. One reason is that the most typical mark-up for footnotes (see the first example below) does not specify unambiguously what the footnote applies to, although for humans it is usually clear enough. As a result, the rendering requires a generated footnote marker to act as the source anchor, since the real source cannot be determined.

Two kinds of rendering are supported: footnotes and endnotes; and two kinds of source documents: inline footnotes and linked footnotes. In all cases, the 'display' property is used to turn an element into a footnote or endnote.

<p>... some notion<fn>The word is used here in the sense of
  the German philosopher B. Ratwurst, not that of the
  French anthropologist M.A. Gret-de-Canard</fn> ...

fn {display: footnote}

<p>... some <a href="fn1.html" class="fn">notion</a>...

a.fn:after {content: target(href); display: footnote}

An element with 'display: footnote' generates three boxes. The first one is called the "trace." It is an inline box containing the footnote counter and it is inserted in the normal flow at the place of the element in the source document. It is an inline element (as if it had 'display: inline', but 'display' doesn not apply to it). It can be addressed by the 'trace' pseudo-element. If there is no counter (e.g., because of 'footnote-style: none'), there is no trace box either.

The second and third boxes are formatted the same way as the boxes of a list item: a principal box with the contents of the footnote and an associated marker box. This marker box contains the same marker as the first marker box, although it may be styled differently. It can be addressed with the 'marker' pseudo-element.

The principal box and its marker box are taken out of the flow and put in the area set aside for footnotes or endnotes. See the Paged media module [[CSS3PAGE]]. If necessary, the principal box can be addressed with the 'footnote' pseudo-element. Indeed, if the 'display' property of the ':footnote' box is changed from the default 'list-item', there will not be a marker box.

The ':trace' and the ':footnote' elements inherit from the element, the ':marker' inherits from the ':footnote'.

We need more properties, e.g., whether there is a rule between the footnotes and the body text.

@media print {
  fn {display: footnote}
}
@media screen {
  fn {link: "*"; link-target: pop-up}
}  

The 'footnote-style' properties

This property specifies the appearance of the counter for a footnote. See 'list-style-type' for the possible values. Note that the initial value is different from that of 'list-style-type'.

[We're missing the * ** § † ‡... numbering style]

This property sets the image that will be used instead of the footnote counter. When the image is available, it will replace the counter set with the 'footnote-style-type' property.

This property specifies the position of the marker relative to the footnote's principal box. It only influences the marker next to the footnote, not the trace in the main flow. See 'list-style-position' for the definition.

This property specifies whether the numbering of the footnote markers is automatically reset for each page or not. It only affects paged media.

[The Paged media module has page-based counters: @page {counter-reset: footnote} }]

The 'footnote-style' property is a shorthand for setting 'footnote-style-position', 'footnote-style-type', 'footnote-style-image' and 'footnote-style-reset' properties at the same place in the style sheet.

*:root {footnote-style: page}

*:root {footnote-style: decimal outside none page}

The 'footnote' counter and the 'trace' & 'marker' pseudo-elements

['marker' might be renamed to something else; see the Lists module]

The 'trace' pseudo-element selects the trace box of a footnote. It can be used to set the style of the trace.

footnote::trace {vertical-align: sup; font-size: smaller}

The 'marker' pseudo-element selects the marker of a footnote See Lists module [[!CSS3LIST]] for a full definition.

*::marker {
    font-weight: bold;
    color: red;
    background: yellow;
    width: 6em
}

If a 'marker' or 'trace' pseudo-element has its 'content' property set to 'auto', the following algorithm should be used to generate the computed value of that property.

Note that there being a computed value of the 'content' property is not enough for the 'marker' or 'trace' pseudo-element to be rendered. See the 'list-style-position' property.

1. If 'footnote-style-image' is not 'none', and if the image is valid, then the content is the value of the 'list-style-image' property.
2. Otherwise, if the 'list-style-type' property is not 'none', then the computed value of the 'content' property is 'counter(footnote, <list-style-type>)', where <list-style-type> is the computed value of the 'footnote-style-type' property.
3. Otherwise the computed value is 'none'. (Note: This is not the same as the empty string.)

*::marker, *::trace {content: "[" counter(footnote) "]"}

More examples

a {link: target(href)}

img {content: target(src)}

img {link2: target(longdesc); link-target: pop-up}

img[usemap] {link: map(usemap)}
area {link: target(href)}

a:subject > img[ismap] {link: target(href) xy}

object {content: target(data)}

blockquote {link2: target(cite)}

Description {link2: target(about)}
*[resource] {link: target(resource)}

Security and privacy

When a UA loads a document, the style sheet may cause other documents to be loaded automatically, such as background images and replaced elements. When HTTP is the protocol, these will always be GET request. Nevertheless, a server may watch for such extra downloads and infer certain things about the reader's environment. E.g., as a minimum it may infer that the reader has a CSS-capable browser. But depending on the style sheet, it may also find out other things:

• If the style sheet uses selectors such as ':link' and ':visited' [[!SELECT]], the server could find out whether the reader has visited certain pages recently or not.
• If the style sheet contains media queries [[MEDIAQ]], the server could find out certain characteristics of the reader's UA or hardware.

It is recommended that UAs follow the guidelines of P3P [[P3P1.0]]. The risks outlined above are similar to the risks of the HTTP "referer" (sic) header.

Glossary

link

A relation between a source and a target. Links are usually expressed by means of a URI, but need not be. Some of the functionality of the current module is only available if the source document has an explicit URI (or a URI reference that can be resolved to a URI by the UA).

hyperlink

A hyperlink is a "live" link from the currently displayed document to some associated information. The display shows what part of the current document the information is related to. The user can "traverse" the link, i.e., cause the associated information to be displayed. A single, short action should suffice for that (e.g., a mouse click, a key press, a gesture) and the linked information should be available quickly, on the order of three seconds or less. In practice, of course, many factors outside the UA's control may influence the speed with which the linked information may become available.

replaced element

A replaced element is an element that is replaced by something else, which then acts like a "black box" of which the CSS renderer only needs to know the intrinsic dimensions. In CSS2, the UA determined, based on its knowledge of the document format, what elements were replaced. In CSS3, the style sheet writer uses the 'content' property to make elements into replaced elements explicitly. E.g., the img element of HTML is typically replaced by the image it points to.

intrinsic dimensions

The width and height an element has "naturally." See the Box model [[!CSS3BOX]] for the definition.

subject element

The current element, the element to which a property applies. See Selectors [[!SELECT]]

UA

"User Agent." The program that applies the style sheet to a document on behalf of a user. Often this is a browser, but it may be a batch tool, an editor, or other program.

Profiles

This module defines no profiles.

Conformance

[...]

Acknowledgments

[...]

References

Normative references

Other references

Index

Property index

The following properties are mentioned in this module, but are defined elsewhere:

• display, see the Box model [[!CSS3BOX]]
• list-style-image, list-style-position, list-style-type, see the Lists module [[!CSS3LIST]]