How URL Fragments could interact with Selectors, MQ and CSS, incl. Variables

Selectors in URL Fragments
==========================

Selectors could be used in fragment identifiers, i.e. everything after the first hash sign ‘#’ in an URL (or URI or IRI), pointing to marked up documents. They would either match a single node and work like id fragments in HTML do today, or they would match multiple elements which could be treated in a number of ways, e.g.: use the first match as a link target, highlight everything that matches (possibly using ‘:target’), remove everything that doesn’t match.

  foo.ml#select=<selector>
  foo.ml#filter=<selector>
  foo.ml#target=<selector>

  foo.ml#ID ≈ foo.ml#id=ID ≈ foo.ml#select=#ID

Media Fragments URI (MF) defines a key-value syntax, i.e. basically

  ‘#’ <key> ‘=’ [ <unit> ‘:’ ]? [ <position> ]#

and multiple ones separated by ‘&’, as well as some keys and value units. Temporal ‘t’ takes a <start> and optional <end>, spatial ‘xywh’ takes 2D <origin> and <size> both with two parts, and the partial ‘track’ (parallel) and ‘id’ (sequential) just expect some <name>.

Please note that the values in MF cannot contain an ampersand unquoted which is not a problem for Selectors as currently specified, but may be enough reason not to introduce ‘&’ as a combinator (*“E & F”) or within attribute selectors (*“[foo&=bar]”).

As far as I know, MF is the only specification developed at the W3C which deals with the specifics of fragment identifiers for more than one “document” language. I’m not sure it would be the best place to put something like this, but maybe it is. Another option would be Selectors 4, supplementing the ‘:target’ section, or a module of its own that is maintained by the CSS WG.


Meaning of URL Fragments with Stylesheets
=========================================

No CSS module currently defines whether or how the fragment part of the URL the stylesheet was linked from influences the stylesheet. There are several possibilities.


Referencing Embedded Stylesheets
--------------------------------

The HTML specifications don’t seem to specify whether or how a UA may, should or must honor a fragment identifier in the ‘href’ attribute of ‘link’ elements. I would expect 

  <link href=#foo rel=stylesheet>
  <style id=foo>bar {color: green;}</style>

to work (although this minimal example is redundant, of course), i.e. the UA should be able to use HTML documents as stylesheets and it may be restricted to use a certain embedded stylesheet. Note the special cases of

  <link href="#select=style" rel=stylesheet>
  <link href="#select=[style]" rel=stylesheet>

with the new fragment selector syntax proposed above. I would expect the former, but not the latter, to work just fine.


Character Encoding
------------------

Sometimes it helps to be able to explicitly set the character encoding of an external resource, including (cascading) stylesheets, although transfer protocols, such as HTTP, and many document languages, including CSS, already provide means to do so.

  #charset=foo

might therefore be nice to have and would supplement ‘@charset’ and others. In HTML(4) it may conflict with the ‘charset’ attribute, though.


Integrity Check
---------------

I’m also not sure the integrity check features described in RFC 5147 for text/plain would be all that useful for text/css (RFC 2318), too:

  ‘#md5=’ <md5-value> [ ‘,’ <mime-charset> ]?
  ‘#length=’ <number> [ ‘,’ <mime-charset> ]?


Media Queries
-------------

Although Media Queries are intended to make web pages automatically adapt to the physical conditions they’re rendered in, it can be useful to override these conditions in a URL, e.g. for print preview. A new ‘media’ fragment could do the trick.

  ‘#media=’ <media-query>

Note that, in HTML,

  <link href="foo#media=print">

then does something very different than

  <link href="foo" media=print>.


Global Variables
----------------

With the Variables module advancing, it might be a good idea (or maybe a bad one) to be able to specify variables in the linking URL:

  ‘#var=’ <name> ‘:’ <value>
or
  ‘#var-’ <name> ‘=’ <value>

They would probably be equivalent to ones specified for ‘:root’.


Style Sets
----------

Similar to global variables, it could be made possible to switch between color schemes etc. with a new pseudo-class or  at-rule.

  ‘#scheme=’ <ident>

  ‘:scheme(’ <ident> ‘)’
  :scheme(night) { color: green; background: black; }
  :scheme(day)   { color: black; background: white; }

  ‘@scheme ’ <ident> ‘{’ <declaration>* ‘}’
  @scheme night { color: green; background: black; }
  @scheme day   { color: black; background: white; }

With some trickery something like this is already possible, of course, when the fragment is used with the HTML document:

  <html id=night><body id=day>…</body></html>

  #night:target * { color: green; background: black; }
  #day:target *   { color: black; background: white; }


Annex: Other Languages
======================

SVG Fragment Identifiers
------------------------

<http://www.w3.org/TR/SVG/linking.html>
The Scalable Vector Graphics specification supports two variants of fragment identifiers:

  ‘#’ <ID>
  ‘#svgView(’ <view> ‘)’

Both are used for views and the former, simpler variant is also used extensively for cloning parts of SVGs (and other documents), e.g.

  <use xlink:href="#foo"/>

Since CSS is not based upon XML it cannot reuse resources in the same way SVG does, but whatever (if anything) is specified for CSS should be compatible with SVG fragment identifiers.

Regarding views also see the PDF section.


PDF Open Parameters
-------------------

Portable Document Format files support several fragment identifiers, called “open parameters” there. Most are not applicable to CSS files. <http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf>

  ‘#nameddest=’ <id>

This basically works like MF’s ‘#id=’ or HTML’s ‘#’.

  ‘#page=’ <number> 
     [ ‘&view=Fit’ [‘B’]? [ [ ‘V’ | ‘H’ ] [‘,’ <number> ]? ]? ]?
     [ ‘&viewrect=’ <number> ‘,’ <number> ‘,’ <number> ‘,’ <number> ]?
     [ ‘&highlight=’ <number> ‘,’ <number> ‘,’ <number> ‘,’ <number> ]?

The logical integer page number, defaulting to 1, can be amended with several parameters that adjust the page zoom or highlight a part of it. The automatic fit (‘view’) works either in the vertical (‘V’) or horizontal (‘H’) direction and takes an optional left or top offset to use when fit in the other dimension; by default it scales to fit both, also two-page spread (‘B’, “book”) can be specified, where odd pages are always on the righthand side. Similar to MF’s spatial ‘#xywh’, a rectangular area within a page can be specified by origin (left, top) and size (width, height) to fill the viewport (‘viewrect’). Highlighting a rectangular area on a page (‘highlight’), however, uses a different syntax with distances from left, right, top and bottom page edges.

Although pages don’t make sense in stylesheets themselves, it is helpful to note that authors may find it useful to target a visual page or arbitrary 2D area instead of structural IDs (or selectors). I wonder whether a new concept of “pseudo-region”, e.g. ‘:::target’, or a normal pseudo-element, e.g. ‘::target’, would better fit this case.

Maybe it makes sense to have a separate Zoom or Fit module which specifies how the general viewport zoom factor can be derived from the fixed dimensions of a certain box. This would have to take the usual GUI and URL fragments like this into account – it could even specify them itself, although that may be considered out of scope for CSS.

  ‘#zoom=’ <number> [ ‘,’ <number> ‘,’ <number> ]?
 *‘#scroll=’ <number>, <number>

In web pages the zoom is usually user-set, but in PDFs it can be preset with optional left-top origin the document viewer should automatically scroll to. Although the ‘scroll’ parameter is not defined on its own, it’s easily imaginable other specifications would support something like it.

  ‘#search=’ [ ‘"’ <string ‘"’ | ‘'’ <string ‘'’ ]

If any markup language that CSS may be used with ever offered some search facility in the URL like this, Selectors or the UI module probably should make sure that if a pseudo-element, e.g. ‘::match’, was available for user-initiated search matches it worked with this kind of URL fragment as well.

  ‘#pagemode=’ [ ‘none’ | ‘thumbs’ | ‘bookmarks’ ]

PDF also has some other parameters to turn on and off several document viewer chrome elements (‘scrollbar’, ‘toolbar’, ‘statusbar’, ‘messages’, ‘navpanes’) that don’t make much sense for webpages, although ‘window.open’ has similar features. 
This probably applies even more to the form (‘fdf’), comment (‘comment’) and collaboration (‘collab’) parameters.


Script State
------------

Javascript can access the value of the fragment identifier with ‘location.hash’ and then can do basically anything with it, which is common in AJAX. It has been proposed to prefix a script state with the exclamation mark, as in “#!state”. If stylesheets ever became stateful this convention would probably be useful to a adopt.


PS: Please CC me if you don’t reply to www-style.

Received on Tuesday, 29 May 2012 11:54:35 UTC