What are we facing?

I want to briefly highlight a specific section of my page once it loads. I may have a page with lots of pieces of news, or segments. Users may land to one of those pieces with a properly crafted URL. How do I do highlight without using JavaScript?

The Solution

Using the CSS3 pseudo selector called ":target". Keep in mind that this pseudo selector is currently only supported by the latest versions of Firefox, Safari and Opera.

I will follow the enlightening steps for yellow fade of Emil Stenström.

OK, each section, or piece of news can be inside a HTML block element (a “p” or “div” for instance) which will have a unique “id” attribute. Now, to see how this magic starts to happen, append “/#” plus that “id” to your site URL, if you tell the browser to navigate to this newly crafted URL, it will load the page, and will set the view starting in the block using that “id”, scrolling is already done.

In this Capsule I have implemented those steps: the preceding paragraph is a “p” element with an “id=’fade’”. To do the fading, I just added the following CSS code:

        :target
        {
            background: url( "fading-with-yellow.gif" );
        }

Test it!Here you can download the image fading-with-yellow.gif which is a copy of Emil’s.

Some external references

• Ajax: The “Yellow Fade” Technique
• Web Interface Design Tip: The Yellow Fade Technique

What are we facing?

Internet Explorer 8’s Webslices are becoming popular in media. The magic relays on the fact that they seem to be an evolution of RSS and it is based on hAtom microformat.  Given the potential big acceptance of webslices, is there any other browser beyond Internet Explorer implementing Webslices? Is there some help for constructing Webslices?

The Solution

Firefox 3 now has an extension for supporting Webslices by means of an Add-on called WebChunks. The nice thing about WebChuncks is that it works on pages originally intended for IE8 WebSlices, for instance ebay and  StumbleUpon. We are yet to see this kind of support in other browsers, and to see if Firefox is going to support it natively, but there good precedents for it.

On the other hand, how do you a Webslice? 

Let’s say you identify that the next piece of code is going to be of the interest of the user to get updates of its changes:

<div class="myClass">
  <p class="content" id="title">    
    Content
  </p>
</div>

Using Aggiorno, you can get the following code in the Webslice format:

<div class="hslice myClass" id="myID">
 <span class="entry-title" style="display: none">Web Slice to display</span>
 <span class="entry-content">
  <p class="content" id="title">
     Content 
  </p>
 </span>
</div>
 

Voila! You get a simple webslice! You are done by adding 

• a unique id for the block element
• the “hslice” class for telling the browser that this block element is a Webslice
• a block element with “entry-title” class and the title inside
• a wrapper block element for the content

There are more attribures to make it more powerful, take a look at the IE8 reference.

Some external references

• Webchunks extension for Firefox 3 Tutorial
• Galzblog on Webchunks
• Aggiorno for creating Webslices