Relevancy and Context in Web Pages with CSS2 and PHP

    Date: 03/12/05 (Web Development)    Keywords: php, browser, css, html, sql, web

    Hi all. This will be my first post to the community, so before anything I'd just like to say how educational its been reading your posts all this time. Now then, here's my contribution.

    I've recently been playing with what I think is an interesting technique for adding relevancy and context to my pages. Basically, I embed a small, invisible message within the HTML of a page or within the link to that page which is only visible to people who follow special links. This enables me to embed certain so-called "relevancy messages" on the destination page of a link that helps keep visitors oriented when browsing through my site. (This is exceptionally beneficial when back-linking to old blog posts!)

    A much more detailed explanation of what I'm talking about is on my site. A brief explanation of what I first did is this:

    1. When I write links that reference my old pages, I go back to those old pages and insert a named anchor (or tag the element with an id to reference in my link with a fragment identifier).

    2. I add a title to that element so I can hide it within the HTML for visitors who browse normally, but show it to visitors who follow links to that fragment.

    3. I've added a style rule in my pages to display that title text before the fragment only for visitors who follow the special links, specifically, *:target::before { content: attr(title); }

    (See an example in action on my test pages.)

    This means when visitors click on a link to a fragment within a page, they see a clear, short message explaining its relevance. Especially on long pages where my link only references a small part of it, this is an enormous enhancement to usability because it ensures a smooth transition of context between one page and the next. Coupled with helpful title text on the source link itself, it can help create an extremely smooth yet still unobtrusive browsing experience.

    As an extension and major enhancement, I've also been experimenting with "dynamic relevancy messages" as a sort of mini-API to allow anyone to include their own relevancy message into my pages when they link to me. The crux of this technique uses a variable within a GET query-string to plug into the above CSS content-before rule.

    So what do you think about this technique? Useless? Great? Superfluous? All feedback welcome.

    I'd be especially interested to hear from web accessibility gurus who can test the accessibility of this technique and PHP gurus who can help break my site by using XSS attacks for the dynamically generated CSS rule. As I'm somewhat of a novice in that area (that is XSS in the context of CSS, since it's usually an HTML/SQL thing), I'd appreciate it if you can help me fortify my defenses against what is potentially a very obvious attack vector on my site now.

    Thanks for your time. :)

    (Oh yeah, and, um, you gotta use Firefox or another CSS2-compliant browser such as Safari, or a recent version of Netscape, or Mozilla in order for the CSS to work, obviously. It won't work with any version of Internet Explorer or Opera. Sorry.)


« Rollover || i have some questions »

antivirus | apache | asp | blogging | browser | bugtracking | cms | crm | css | database | ebay | ecommerce | google | hosting | html | java | jsp | linux | microsoft | mysql | offshore | offshoring | oscommerce | php | postgresql | programming | rss | security | seo | shopping | software | spam | spyware | sql | technology | templates | tracker | virus | web | xml | yahoo | home