Post Archive
› November 10, 2004
:target and conditional text display
This blog entry is a small experiment with how the :target pseudo-class and the ^ substring matching attribute selector can make browsing better. For this CSS3 experiment, you'll need to open up your brand new copy of Firefox 1.0 or another :target and ^ aware browser.
A lot of blogs use links with a # character followed by a fragment identifier (an anchor reference). That's a good thing - instead of dropping you off at the top of a webpage, the part after the # makes your browser scroll to exactly the hot spot you're interested in. That hot spot can be a paragraph, a footnote, a navigation element, etc.
An example. This Fictitious weblog has links with and without fragment identifiers. The first link, for example, has no fragment identifier - clicking it will lead you to the top of another page (the permalink page in this case). The 3 comments link on the other hand, does have a fragment identifier. Click it and you'll arrive at the comment section of the permalink page. Nothing special so far.
The problem however is that, just because # links nicely lead you to a well-defined spot in a webpage, they skip over a lot of otherwise useful context. I often find myself scrolling up again, in order to verify, for example, whether this is really the blog entry I want to comment on, or else, to see to which blog entry a certain comment belongs.
Of course, the title bar (which shows what is between the title tags of a webpage) may help me out in certain circumstances. However, if we want people to find their way at first sight (and not at second), we need to add context inside the browser window. It is here the CSS3 selectors come in.
Have a look at this improved example and click around a littlebit (with a decent browser of course). See the difference?
Firstly, the :target pseudo-class allowed me to add a background color to the substring that was addressed (that's nothing new); secondly, helped by :target and the ^ selector, # links trigger the visibility of explanatory text strings for just the substring that is addressed. Have a look at the source of the page to find out how it is done.
Instead of only seeing Comments (Comments on what??) when you click on the 3 comments link, you see Comments on the blog entry "DRM systems don't work". Going back to the frontpage, and clicking on sam then brings me to sam's comment, while displaying the title of the blog post on which sam commented. Note that these extra explanations are not visible when you view the page without fragment identifier - no cluttered layout or navigation.
What about other browsers? IE users won't notice anything - for them, the improved version is not different from the original one - the same for screen reader software and the like. If you really want screen readers to read all extra explanations out loud though, you have to use another method for hiding text than display: none. And mobile browser users? They are happier: scrolling is tedious with a small screen device and title display often non-existant. Every extra navigation help is welcome there.
Feedback and improvements welcome.
Comments
1. November 10, 2004 03:21 PM
2. November 10, 2004 03:31 PM
Blake Scarbrough Posted…
Very useful stuff Andreas, great examples. CSS is getting more powerful every time.
3. November 10, 2004 03:44 PM
Roger Johansson Posted…
I’ve used the :target attribute for similar purposes, but it hadn't crossed my mind to take a close look at the substring matching attribute selectors. Guess I'll have to do that now ;)
4. November 10, 2004 04:30 PM
5. November 10, 2004 05:50 PM
liorean Posted…
Reminds me of this little tabbed interface experiment I did some time back. If you have a browser that support :target and :not() you can if you turn off JavaScript see conditional rendering based on fragment identifier, similar to this experiment with substring matching selectors.
6. November 11, 2004 04:32 AM
Mike P. Posted…
Very nice, can't wait for the day that this exists in the "standard" browser ;-]
7. November 11, 2004 06:57 AM
David House Posted…
Brilliant! Such an innovative use of CSS, and so genuinely useful!
8. November 12, 2004 02:37 AM
Jimmy Cerra Posted…
Why not use the attr("title") function to provide content with the attribute tag instead of the hidden span element? Then all you need are the simple rules:
#comments:target {
background-color: #ff9;
}
#comments:target:after {
content: attr(title);
}Simple Simple Simple.
9. November 12, 2004 02:39 AM
10. November 12, 2004 09:35 AM
Andreas Posted…
Thanks everybody. :-)
Jimmy, I'm afraid your idea cannot be implemented... According to the CSS 2.1 spec attr(X) "returns as a string the value of attribute X for the subject of the selector". This means that attr() only returns the attribute value of a tag's attributes, and not what is between an opening and a closing tag. In other words, rendering the stuff that is between <title> and </title> is only possible when you use something like title {display: block} - the attr() function is not relevant here. However, displaying the title after e.g. "Comments", "Post a comment", etc. is not possible, as far as I know.
11. November 12, 2004 11:48 AM
Jimmy Cerra Posted…
Andreas, I was thinking of markup such as:
<h3 id="comments"
title="on the blog entry "e;DRM systems don't work"e;"
>Comments</h3>
Instead of using the sematically iffy span element. That's why I used the attr(title) function.
12. November 15, 2004 05:43 PM
Bjoern Graf Posted…
Nice :) And for some weird reason (maybe because I use something similar for the comment form?) I felt the need to create a script for browsers that do not meet the requirements…
13. November 19, 2004 09:03 AM
Andreas Posted…
Bjoern, thanks for that script. Awesome :-) (and sorry for my late reaction).
14. November 22, 2004 07:08 PM
Phil Wilson Posted…
I think I've got to say it, but I prefer Jimmy's solution - sheer elegance!
15. November 24, 2004 01:26 AM
Mark Posted…
Jimmy, one problem with your approach is that the title attribute contains a fragment of a sentence which may not make sense when used/read in a different way.
16. December 26, 2004 04:16 PM
tom sherman Posted…
Hey, I love this. Thanks, Andreas.
I wrote this up on my site and added a bit to the discussion. If you're curious, please take a look and feel free to leave a comment.
Jimmy, I love the elegance of attr(title), but ultimately I wouldn't implement it because of the browser behavior of displaying the title attribute of any element when it's mousedOver. I find that highly annoying for anything but an anchor, so I wouldn't put it in a hX element.
As you can see in my post, I do like the idea of stacking :target and :after, but I would only do this by generating specific text, not the title attribute using content. I would keep my H1/H2/etc. clean. This requires easy access to the <head>, which I don't have in my current MT setup, so I'm sticking with display:none ...
17. January 29, 2005 02:13 PM
don crowley Posted…
keep meaning to say how great this is. gets my vote as most useful new insight in the last twelve months. I never even knew the target attribute existed
Nate Posted…
This is really awesome. Dramatic ease-of-use benefits kept cleanly in CSS, and degradable.