W3C home > Mailing lists > Public > www-style@w3.org > February 2009

Re: URL CSS pseudo class

From: Jason CranfordTeague <jason@brighteyemedia.com>
Date: Mon, 9 Feb 2009 10:48:39 -0500
Cc: www-style@w3.org
Message-Id: <6CD2A807-BFF4-4933-AA68-F7359A60D96B@brighteyemedia.com>
To: Charles-André Landemaine <landemaine@gmail.com>
  This is not unlike a pseudo class concept I pitched a while back to  
allow styling based on the current URL for agent. Could this two  
concepts possibly be combined?

CSS 3 Recommendation
Current Link Pseudo-class Selector

Need
Current CSS standards allow for the independent styling of links based  
on the client history using the visited link pseudo-class. This allows  
designers to indicate which links the visitor has been to previously.  
However, visitors need to not only know where they have been, but  
where they are and where they are going as well. Web designers need a  
way to conveniently style a link based on the clients current URI in  
order to create more useful menus and bread-crumb trails as well as  
indicate whether a link is pointing out of the current site.

Solution
In order style links based on the users current location within a site  
and to differentiate internal versus external links, I propose the  
addition of a new “current” link pseudo-class. This pseudo-class  
would not only be used to style a link if it's href matched the  
clients current URI, but also style links based on directory level.

The current link pseudo-class selector would have the following pattern:

E:current(n)

Matches element E if E is the source anchor of a hyperlink of which  
the target matches the clients current URI if no number (n) is  
included or matches up to the directory level indicated by n. A value  
of n=0 compares only the top level domain.

So, given the links:

1- <a href=”http://www.bered.com”>RED</a>
2- <a href=”http://www.bered.com/style>Style</a>
3- <a href=”http://www.bered.com/style/prom.html>Prom Styles</a>


and the styles

1- a:current {}
2- a:current(0) {}
3- a:current(1) {}
4- a:current(2) {}

If the client's current URI is:

http://www.bered.com/style/prom.html

Link 1 would receive style 2
Link 2 would receive style 3
Link 3 would receive style 1 and 3
Style 4 would NOT be applied


Potential Uses

Site Navigation Menus: Site menus could be consistently styled based  
on the visitor's location within the site giving them a quick visual  
representation.

Bread-crumb menus: Levels in a bread-crumb trail can be displayed  
based on the current page URI, eliminating the need to use server-side  
technology, JavaScript, or create separate instance for every page  
within the site.

Internal/External links: Links that point to another domain can be  
styled separately from links that keep the visitor within the domain.  
In addition, once the CSS target attribute is added, this will allow  
designers the ability to always target external links to a new window.






JASON CRANFORD TEAGUE
* jason@brighteyemediacom |  www.brighteyemedia.com




On Feb 9, 2009, at 8:27 AM, Charles-André Landemaine wrote:

>
> Hello,
>
> A new CSS pseudo class to target a specific site would be really
> helpful, especially for user styles. I could imagine a stylesheet that
> uses some code like this one:
>
> head:url(google.com)>body{background:#cf0}
>
> We could allow regular expressions also to match URLs with or without
> the "www." prefix, "http" or "https", etc...
>
> e.g. head:urlmatch(/http:\/\/ad\./)>body{display:none}
>
> This would be easier to carry just one global user stylesheet instead
> of one user style sheet per site (ex. Opera, Firefox Stylish ext.).
> Thanks for your comprehension,
>
> Charles-André Landemaine.
>
Received on Monday, 9 February 2009 15:49:23 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:16 GMT