/CSS/ Enhance internal page links
18/05/2009 | Filed under Develop > CSS
Craig Grannell shows you how to use a couple of nifty CSS3 tricks to improve the usability of internal page links on your websites
Back in issue 178, we spent a happy few pages looking at the very real benefits CSS3 is likely to bring in the not-too-distant future. Several of them were primarily visual – adding drop shadows, rounded corners and so on – but this issue’s tutorial checks out a pseudo-class that can provide some handy usability aids to your web pages, :target.
On target
If you’ve dabbled in CSS, you’ll almost certainly be used to working with pseudo-classes already. They provide styles relating to a selector’s state and, sometimes, to conceptual document components. The most obvious examples are links – :link, :visited, :active and :hover are all pseudo-classes that are used extremely frequently. The :target pseudo-class is also related to links, but instead of styling links, it’s used to style link targets.
You might wonder how such a thing can be useful, but with a little lateral thinking you should be able to find various uses for this nifty piece of CSS. In this tutorial, we’ll cover two examples that enhance internal page links in very different ways.
First, we’ll look at a fairly typical web page FAQ – the kind that has a bunch of questions with answers further down the page – and enable you, via links, to rapidly navigate back and forth between queries and solutions. While this kind of design can be efficient from a coding and maintenance standpoint, it typically leads to usability problems – especially for inexperienced users.
Using anchors to link to elements with specific id values is common in such circumstances, but the web page ‘snaps’ to its target when a link is clicked and it can be difficult to know where to focus. For newcomers, the jolt on such pages can be particularly fierce, and the problem is only compounded if there’s not much vertical space between the bottom target and the end of the page. If there’s plenty of space, the target appears at the top of the browser view area; if not, it could appear anywhere within the browser window.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Favourite crisp flavour Bacon & Brown Sauce Seabrook
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
HB / 19/05/2009 / 03:50 / http://arguments.callee.info/
Excellent :target tip, especially about implementing it in IE.
Ayo Adigun / 21/05/2009 / 22:03 / http://blog.ayoadigun.com
Excellent article, very well written. Ive always struggled to implement the newer features of CSS3!
Pete Campbell / 17/06/2009 / 09:05 / http://www.crearedesign.co.uk
Fantastic little tutorial, I think the :target tag will be a very effective way of increasing usability within a website that is text-heavy. I can't wait for the day when CSS3 is the standard across all browsers.
Fabio Sestu / 20/08/2009 / 08:42 / http://www.stylewebdesign.it
Excellent article, this is fantastic!
will / 17/01/2010 / 16:54 / http://www,glasgoweb.co.uk
css3 is much easyer than before , but we need more tuts on the subject, the only issue it next to no web browsers are using it right now
Eugene Donaghy / 29/03/2010 / 21:14
Is there an easy way to tweet these internal links
Eugene
