CSS3 Hyperlink Presentation Module

W3C Working Draft 24 February 2004

This version:
Latest version:
Previous version:
Tantek Çelik <tantekc @microsoft.com>
Bert Bos <bert @w3.org>
Daniel Glazman <danielglazman @easyconnect.fr>


This is the first draft of the CSS3 Hyperlink Presentation Module. It is published to get some early feedback. The properties in it and even the scope of the draft are still very unstable. The draft may be dropped or merged with another.

CSS (Cascading Style Sheets) is a simple language for describing the presentation of documents. This specification is a module of level 3 of CSS and contains the functionality required to describe the presentation of hyperlink source anchors and the effects of hyperlink activation.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede it. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress." Its publication does not imply endorsement by the W3C membership. Implementations for the purpose of experimenting with the specification are welcomed, as long as they are clearly marked as experimental.

This document is a working draft of the CSS Working Group which is part of the style activity (see summary).

Comments on and discussions of this draft can be sent to the (archived) public mailing list www-style@w3.org (see instructions). W3C Members can also send comments directly to the CSS working group.

Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.

This is the first draft in this series ("css3-hyperlinks").

Table of contents

1. Dependencies

This CSS3 module depends on the following other CSS specification(s):

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

2. Requirements and principles

A hyperlink is a combination of a link with the semantic of an external reference, something which is considered outside the content document. This is in contrast to an embed, which is a link with the semantic of an internal reference, something which is considered a part of the document (such as an embedded image). There are also local hyperlinks which simply point to navigation points (anchors) in the current document.

A hyperlink is a combination of a link with a certain behavior: it is a link that is presented in such a way that the user recognizes it as something he can activate quickly and easily (with a mouse click, key press, etc.), and which, on activation causes the target reference of the link to be retrieved and displayed to the user, shortly after activation.

The scope of this CSS module can be summarized with the following list of principles:

  1. Linking semantics and link presentation are separable [TAGLINK20030116]. The task of CSS is presentation.
  2. The aspects of a hyperlink that differ depending on device, platform or user accessibilty [WCAG] requirements are likely to be presentational [TAGLINK20030116].
  3. The presentation of a document should normally be specified separately from its content, and preferably in a CSS style sheet.
  4. Some parts of behavior are presentational; e.g., CSS can say that activation of a hyperlink causes a new window to pop up (but not, e.g., that the activation sends a POST request to a server). The specifiable behaviors include:
  5. CSS is also able to suppress all behavior, thus making it impossible to activate a hyperlink. UAs should always allow the user to disable particular style sheets.
  6. CSS can be used to describe a large class of common hyperlink styles, but not all possible styles.
  7. CSS doesn't rely on specific mark-up in a source document, but is able to style hyperlinks in many different document formats. In particular, it can style HTML [HTML401] and XHTML [XHTML10] documents, documents that use HLink [HLINK], a large part of XML [XML10] documents that use XLink [XLINK10], e.g. SVG [SVG10] and several others.
  8. The boundary between semantics and style is not sharp. For ease of use, CSS sometimes has to allow some aspects of semantics to be expressed in CSS. E.g., CSS style rules may say which attribute of an element that has several is used for the hyperlink. (But CSS is not able to say, e.g., what base to use to resolve relative URLs [RFC1808].)
  9. The previous point notwithstanding, CSS assumes that, in general, the UA has knowledge about the document format from other sources (or hardcoded) and classifies elements as hyperlinks or not. E.g., the CSS pseudo-classes ':link' and ':visited' match only elements that are hyperlinks.

This module does not deal with

  1. Replaced elements, i.e. embeds.
  2. Footnotes.
  3. Event bindings.

Even though replaced elements are represented in many mark-up languages in ways that are syntactically similar to hyperlinks (often an element with an attribute that holds a URI [URI] reference), in terms of both semantics, and typically presentation, they are different. Replaced elements are defined in the CSS3 Content module [CSS3GENCON].

Footnotes often serve similar purposes as hyperlinks, but in non-interactive documents.

Activation of a hyperlink needs an action (event) by the user, e.g., a key press or a mouse click. This module does not define what events activate which links. Some such UI issues (not only for hyperlinks) are dealt with in the CSS3 Basic UI module [CSS3UI].

2.1. Open Issues

The following open issues have been recognized, and are documented here for the purpose of discussion. All issues MUST be resolved before CR.

3. Target properties

These properties specify where the target of a hyperlink is displayed, after activation of the hyperlink. Not all UAs support all values.

3.1. Property summary

3.2. The 'target-name' property

The 'target-name' property defines the name of the target destination, including a few keywords for well known destinations.

Name: target-name
Value: current | root | parent | new | modal | <string>
Initial: current
Applies to: hyperlinks
Inherited: no
Percentages: N/A
Media Group(s): interactive visual
Computed value: specified value

The values mean the following:

The name of the current frame, tab or window where the link resides. This value never causes a new destination to be created.
The name of the current tab (if there is one) or window. This value never causes a new destination to be created.
The name of the parent of the current frame. If the current frame has no parent this value is treated as 'root'. This value never causes a new destination to be created.
A new destination (see 'target-new') is always created.
A new modal window is temporarily created.
The target is displayed in the existing frame, window or tab of that name. If no such named destination exists, a new destination (see 'target-new') is created with that name.

3.3. The 'target-new' property

The 'target-new' property determines what new target destination (if any) is created.

Name: target-new
Value: window | tab | none
Initial: window
Applies to: hyperlinks
Inherited: no
Percentages: N/A
Media Group(s): interactive visual
Computed value: specified value
The target is displayed in a new window.
The target is displayed in a new tab of an existing window.
No new destination is created. The target is not displayed.

If a user wanted to have new windows open in new tabs instead, she could use the following user style sheet to do so:

* { target-new: tab ! important }

3.4. The 'target-position' property

The 'target-position' property indicates where a new destination (if any) is created.

Name: target-position
Value: above | behind | front | back
Initial: above
Applies to: hyperlinks
Inherited: no
Percentages: N/A
Media Group(s): interactive visual
Computed value: specified value
The new destination tab (window) is placed above the current tab (window) respectively.
The new destination tab (window) is placed behind the current tab (window) respectively.
The new destination tab (window) is placed above all other tabs (windows) respectively.
The new destination tab (window) is placed behind all other tabs (windows) respectively.

Both 'target-position' and 'target-new' only apply if due to the value of 'target-name', a new tab (or window) is being created. Neither 'target-position' nor 'target-new' can actually cause a new destination to be created. They just determine what is created and where.

3.5. The 'target' property

Name: target
Value: <target-name> || <target-new> || <target-position>
Initial: see individual properties
Applies to: hyperlinks
Inherited: no
Percentages: N/A
Media Group(s): interactive visual
Computed value: see individual properties

The 'target' property is a shorthand property for setting the individual target properties (i.e., 'target-name', 'target-new' and 'target-position') at the same place in the style sheet.

Given a valid declaration, the 'target' property first sets all the individual target properties to their initial values, then assigns explicit values given in the declaration.

4. Conformance

There will be a test suite.




Normative references

Bert Bos; Tantek Çelik; Ian Hickson; Håkon Wium Lie. Cascading Style Sheets, level 2 revision 1. 15 September 2003. W3C Working Draft. (Work in progress) URL: http://www.w3.org/TR/2003/WD-CSS21-20030915
David Baron. CSS3 module: syntax. (forthcoming). W3C working draft. (Work in progress.)
Håkon Wium Lie; Chris Lilley. CSS3 Values and Units Module. 13 Jul 2003. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2001/WD-css3-values-20010713

Other references

Håkon Wium Lie; Ian Hickson. CSS3 module: generated text. (forthcoming). W3C working draft. (Work in progress.)
Tantek Çelik. CSS3 Basic User Interface Module. 3 Jul 2003. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2003/WD-css3-ui-20030703
Steven Pemberton; Masayasu Ishikawa. Link recognition for the XHTML Family. 2002. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2002/WD-hlink-20020913/
Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.01 Specification. Dec 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
R. Fielding. Relative Uniform Resource Locators. June 1995. Internet RFC 1808. URL: http://www.ietf.org/rfc/rfc1808.txt
Various. Scalable Vector Graphics (SVG) 1.0 Specification. Sep 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904
Ian Jacobs (Scribe). Minutes of 16 Jan 2003 discussion on Linking in XML Documents. 2003. W3C TAG archives. URL: http://www.w3.org/2003/01/16-tag-xlink
T. Berners-Lee; R. Fielding; L. Masinter. Uniform Resource Identifiers (URI): generic syntax. August 1998. Internet RFC 2396. URL: http://www.isi.edu/in-notes/rfc2396.txt
Wendy Chisholm; Gregg Vanderheiden; Ian Jacobs. Web Content Accessibility Guidelines 1.0. 5-May-1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505
Steven Pemberton; et al. XHTML 1.0: The Extensible HyperText Markup Language. Jan 2000. W3C Recommendation. URL: http://www.w3.org/TR/2000/REC-xhtml1-20000126
DeRose, Steve; Maler, Eve; Orchard, David. XML Linking Language (XLink) Version 1.0. Jun 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-xlink-20010627
Tim Bray; Jean Paoli; C. M. Sperberg-McQueen; Eve Maler. Extensible Markup Language (XML) 1.0 (Second Edition). Oct 2000. W3C Recommendation. URL: http://www.w3.org/TR/2000/REC-xml-20001006

Default style sheet

This section is informative, only provides a few example rules, and is not intended to comprehensively describe the HTML4/XHTML/XLink "target" behaviors.

@namespace xlink url(http://www.w3.org/1999/xlink);

  { target: attr(target,string) }
  { target: new }
  { target: current }

  { target: parent }
  { target: root }

  { target-name: new }
  { target-name: current }


Property index

Property Values Initial Applies to Inh. Percentages Media
target <target-name> || <target-new> || <target-position> see individual properties hyperlinks no N/A interactive visual
target-name current | root | parent | new | modal | <string> current hyperlinks no N/A interactive visual
target-new window | tab | none window hyperlinks no N/A interactive visual
target-position above | behind | front | back above hyperlinks no N/A interactive visual