Re: CSS and XLink

[Note. Due to the subject matter, this has been crossposted to
www-style and the www-xml-linking-comments lists]


On Mon, 12 Apr 1999, Simon St.Laurent wrote in www-style:
> To put it simply, XLink provides three options for show: embed,
> replace, and new. Embed adds the content of the target resource to
> the document (though it remains sort of a visitor), replace replaces
> the resource (document) making the link with the target resource,
> and new displays the target resource in a new window.
> [...]
> The actuate axis provides auto and user as options. Auto means that
> the embed/replace/new activity should take place automatically,
> while user means to wait for 'an explicit external request for
> traveral' - like a mouse click.
> [...]
> What do people think? There's going to be a lot of work to do in
> this field, once the XLink working group gets cranked up again.
> XLink has truckloads of potential, but I'd like to make sure it gets
> implemented right and that its implications for other fields (style
> sheets in particular) are clear.

After studying the situation, it appears to me that all the required
ideas for doing this have already been put forward, and it is actually
only a matter of stitching them together.

I have included below a suggestion which allows the current XLink [1] spec
to have its formatting and behaviour specified by stylesheets and action
sheets. In addition to the DOM [2], ECMAScript [3] and CSS2 [4], this
proposal assumes the adoption of NOTE-AS [5] (with one minor change
mentioned below) and one CSS3 suggestion [6].

[1] http://www.w3.org/TR/WD-xlink 
[2] http://www.w3.org/TR/REC-DOM-Level-1/
    and http://www.w3.org/TR/WD-DOM-Level-2/
[3] http://www.ecma.ch/stand/ECMA-262.htm
[4] http://www.w3.org/TR/REC-CSS2/
[5] http://www.w3.org/TR/NOTE-AS
[6] http://www.bath.ac.uk/%7Epy8ieh/internet/wwwstyle.html#replaced

Small disclaimer: I don't know ECMAScript or the DOM, so the script
one-liners may contain errors.


Formatting Links
----------------

CSS2 already features the ":link" and ":visited" pseudo-classes, which
differentiate between links pointing to visited and as yet unvisited
documents.

To make all links underlined, for example, one can use:

   :link, :visited { text-decoration: underline; }

CSS2 also has three pseudo-classes for addressing the interactivity
issues. For example:

   :hover { color: navy; }
   :active { color: red; }
   :focus { outline: dotted; }


This addresses the formatting and UI issues. 


Implementing X-Link Policies
----------------------------

There are six possible combinations of the show and actuate axes.

1. show=embed actuate=auto
This can be implemented using the replaced content suggestion:

   [xsl\:link][show=embed][actuate=auto] { 
      content: replaced(attr(href)), auto; 
   }


2. show=embed actuate=user
This can be implemented using the Action Sheets proposal:

   [xsl\:link][show=embed][actuate=user] { 
      onclick: "this.style.content = 'replaced(attr(href)), auto'"; 
   }


3. show=replace actuate=auto
This can be implemented using the Action Sheets proposal, if the
proposal is changed to allow the 'onload' event to apply to all
elements:

   [xsl\:link][show=replace][actuate=auto] { 
      onload: "window.location = this.href"; 
   } 


4. show=replace actuate=user
This can be implemented using the Action Sheets proposal:

   [xsl\:link][show=replace][actuate=user] { 
      onclick: "window.location = this.href"; 
   }


5. show=new actuate=auto
This can be implemented using the Action Sheets proposal, if the
proposal is changed to allow the 'onload' event to apply to all
elements:

   [xsl\:link][show=new][actuate=auto] { 
      onload: "window.open(this.href,'','')"; 
   } 


6. show=new actuate=user
This can be implemented using the Action Sheets proposal:

   [xsl\:link][show=new][actuate=user] { 
      onclick: "window.open(this.href,'','')"; 
   }



So, in conclusion, one could implement the XLink policies in a
stylesheet like this:

     :link, :visited { text-decoration: underline; }
     :hover { color: navy; }
     :active { color: red; }
     :focus { outline: dotted; }
     [xsl\:link][show=embed][actuate=auto]
        { content: replaced(attr(href)), auto; }

...and an action sheet like this:

     [xsl\:link][show=embed][actuate=user]
        { onclick: "this.style.content = 'replaced(attr(href)), auto'"; }
     [xsl\:link][show=replace][actuate=auto]
        { onload: "window.location = this.href"; } 
     [xsl\:link][show=replace][actuate=user]
        { onclick: "window.location = this.href"; }
     [xsl\:link][show=new][actuate=auto]
        { onload: "window.open(this.href,'this.title','')"; } 
     [xsl\:link][show=new][actuate=user]
        { onclick: "window.open(this.href,''this.title','')"; }

...using only the following new ideas:

   * New W3C recommendation: Action Sheets.
   * Action Sheets change: 'onload' event applying to all elements.
   * CSS2 additional feature: replaced content idea.

Of course, the action and style sheets presented above are slightly
over simplistic; for example options for keyboard activation should
also be needed (unless onclick already covers that possibility).
However, given the ideas mentioned above (in particular the Action
Sheets proposal), I do not see any obstacles to extending the action
and style sheets to cover these other cases.

-- 
Ian Hickson 
U+2642 U+2651
U+262E U+2603 U+263A

Received on Thursday, 22 April 1999 11:41:47 UTC