Content based CSS: -link-*

This is the 3rd in a series of posts about writing CSS for HTML based on the content of selectors and not just the selectors themselves. As in our first article, we will be discussing how Hitch lets you use ideas currently drafted in CSS Selectors Level 4, right now.

It is frequently the case that we want to style the links in our site according to the level that they correspond to in the URL path – the information architecture.

For example the URL path /2012/05 is important because it represents a month and /2012/05/05 is important because it represents a day. The markup for these is very simple:

<a href="/2012">View 2012</a> 
<a href="/2012/05">View May</a> 
<a href="/2012/05/05">View May 5th</a>

With the current CSS standards there is no way to apply a style based on the path nesting. Today, we attempt to achieve something like this by attaching related classes or impose additional structures. CSS Selectors Level 4 addresses this and once again, Hitch lets you realize the benefit today…

Simply require the hitch and then use it:

 /* add some support for link selectors */ 
@-hitch-requires http://www.hitchjs.com/use/bkardell.links/1.js; 

/* links with /-- should be black */ 
a:-links-local(0) { color: #000000; } 

/* links with /--/-- should be blue */ 
a:-links-local(1) { color: #336699; } 

/* links with /--/--/-- should be gray */ 
a:-links-local(2){ color: #333333; }

With the Link Pseudo Class filters you can specify a style for any number of nested paths and even base the style on fragment identifiers in the URL of the link.

Selectors Level 4 also allows us to select an anchor if it is currently the target in the browser (matches the #hash). Hitch can give you similar capabilities now using the same hitch we already required. To illustrate, given the following markup:

<a name="Summary">View 2012 Summary</a>

You can style it like this:

/* the current target's background should be yellow. */ 
a:-links-target(){ background-color : yellow; }

If the page URL is http://example.com/index.html#Summary then that link’s background would be colored yellow.

The CSS rules are subtly different (but still very standard) while the functionality is extremely new and currently not doable without Hitch.

Doesn’t that feel better? Take a look at Hitch for more expressive CSS!

Note: Hitch is a rather new project. It has amazing potential and also a few things yet to be built. It’s open sourced and available on Github: https://github.com/bkardell/Hitch/. Fork it. Change how CSS works!

Advertisements

2 thoughts on “Content based CSS: -link-*

  1. Maybe I’m missing the point of what you are trying to do, but couldn’t you just use attribute selection? For instance, a[href^=#] would select anchors whose href starts with a “#” character (and is therefore an anchor within the page).

    Your example of nesting is a little trickier as CSS does not currently support full regular expressions (e.g. a[href=\/\d{4}\/?]), but it seems like (in most cases at least) many of those types of links will be automatically generated via a template or other dynamic mens, in which case, classifying the links is not so big of a problem. And if you knew you wanted to style all links to, say, the “about” section of the site a particular way, you could always say a[href^=/about/] and be done with it.

    I can see how this might be useful, but it seems like that would only be in real edge cases to me. Perhaps you have another example that demonstrates the need for a feature like this?

    • Thanks for your comments Aaron, as this article is about one of my hitches, I’ll try to provide some more info.

      The two pseudo classes here are based on selectors which were vetted by W3C and deemed important enough for inclusion in selectors level 4. None of them can be done with existing selectors without modying the tree intentionally in order to style them.

      Local links (note my hitch uses a similar, but different and prefix oriented name like all hitches we have published in order to never conflict and stay withing CSS’ forward compatible rules) and its use cases are best descibed by them on their wiki
      http://wiki.csswg.org/ideas/current-url-selector
      And in the current draft
      http://www.w3.org/TR/selectors4/#local-pseudo

      Likewise, the meaning and use of targets are best descibed in the draft as well http://dev.w3.org/csswg/selectors4/#target-pseudo

      If this requires more, leave a comment and I will add some more explanation or samples.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s