Copyright © 2004 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
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.
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").
This CSS3 module depends on the following other CSS specification(s):
It has non-normative (informative) references to the following other CSS3 modules:
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:
This module does not deal with
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].
The following open issues have been recognized, and are documented here for the purpose of discussion. All issues MUST be resolved before CR.
These properties specify where the target of a hyperlink is displayed, after activation of the hyperlink. Not all UAs support all values.
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 '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 |
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 }
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 |
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.
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.
There will be a test suite.
[acknowledgments]
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);
a[target],
area[target],
form[target]
{ target: attr(target,string) }
a[target="_blank"],
area[target="_blank"],
form[target="_blank"]
{ target: new }
a[target="_self"],
area[target="_self"],
form[target="_self"]
{ target: current }
a[target="_parent"],
area[target="_parent"],
form[target="_parent"]
{ target: parent }
a[target="_top"],
area[target="_top"],
form[target="_top"]
{ target: root }
*[xlink|show="new"]
{ target-name: new }
*[xlink|show="replace"]
{ target-name: current }
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 |