IE8 introduced a new element called webslices, it is a microformat that allows the visitor of a page to subscribe to a certain portion of the page. It’s different to an rss since there are no posts or xml involved, only “one time” html, but it shares the concept of “subscription”.

The way to implement that is the same as all the microformats, by using specifically named classes in the html elements of an standard page.

The most basic webslice html looks like this:

<div class="hslice" id="1">
            <p class="entry-title">
                This is the title of the webslice</p>
            <div class="entry-content">
                This is the content of the webslice </div>

</div>

And when rendered, IE applies a “smart tag like” format when you hoover it, and a green icon appears:

If you click over the green icons you can add the slice, so a new item appears in your favorites bar:

In the window that opens you can see two icons: and arrow and the refresh.

The arrow opens the page the slice came from, but be aware: not from the server, but from the request IE took the slice the last time it was refreshed, so you’ll get an old version. I tried it by putting a <%=DateTime.Now.ToString()%> in the slice code.

IE simply requests the page and uses the slice’s html portion inside the “entry-content” div and the headers. The styles inherited from parent elements of the hslice div are not applied and the tags you place outside the entry content are used, but not displayed in the popup, so it is a good place to put the content expiration, references and refreshing tags.

The refresh sign makes a request to the server and gets the results.

Referencing another page

If you want to have only a “pointer” to the slide in your page and reference another page which shows the actual slide content, you can use this tag, this is very useful:

<a rel="entry-content" href=”http://blogs.renacimiento.com/eblanco”></a>

AutoRefresh

You can make the slide autorefresh automatically so your visitors have always fresh info.

You can add an span or div with class “ttl” and content equal to the number of minutes to refresh:

<span class="ttl">45</span>

Or to visually hide this you can use this alternative approach:

<abbr class="ttl" title="45">

The refresh tag does not work as I expected because the minimum refresh time is 15 minutes, it has some sense (imagine having 20 slides refreshing once a minute), but it would be cool if you could override this setting when you add the webslide.

Expiration

You can set an expiration time for an specific webslide, for example if its an alert, an auction. What you must do is to include something like this:

<abbr class="endtime" title="2009-04-25T13:09:00+01:00">Expires on 4/25/2009</abbr>

When the item is about to expire, you get notified: the name of the slice gets bold and italic and when you expand the slice there is a warning icon on the bottom of the window:

When the slide expires, IE will mark the slide as expired (in gray) when that time is reached, and an error sign appears on the bottom of the window.:

Misc

It seems that the slices are rendered using quirks mode, not IE8 standards mode. I haven’t confirmed it yet :(

It seems that you cannot execute scripts inside the window unless you specify the “entry-content” class: That is, when you show only a portion of the page, javascript does not work.

You can use NTLM authentication with it, so you can add them to your enterprise apps if you need so. It can be very useful in an intranet-extranet environment, Doron Goldberg has already created a control adapter for MOSS so you can subscribe to any web part in your intranet. Off-topic: Also check the IE search providers for MOSS, they are cool.

A very good article on the topic is Subscribing to Content with Web Slices

There is a Firefox plug-in called WebChunks that implements webslices. I’ve not tried it, but exists.