It's For-IE-day: Week 6
Complementing accelerators, which I talked about last week, Web slices are the other significant end-user feature that you can leverage in your own sites to provide an enhanced experience to IE8 users.
You create a Web slice by demarcating some of the content in your site, typically something that changes periodically and would be of interest to a user, like a stock quote or weather bulletins. End-users can then subscribe to the content (slice) when they visit your page. The site hosting the slice is polled periodically, and when content changes, the item denoting the slice in the Favorites bar “lights up” signifying a change in content. The user can then (or at any time) select the favorites item to view the content, without navigating off of the current page.
Let’s take a look at Web Slices first from the perspective of an end-user and then as a developer who wants to include such functionality on his or her site.
Consuming Web Slices
To subscribe to a Web slice, one has to visit a page that has implemented this functionality. There are a number of them out there, including
Let’s use the Live Search Weather as our example going forward. The Web slice indicator is the green glyph next to the rectangle outlining the content that will appear in the slice.
Selecting the green glyph brings up a dialog (below) to confirm that I want to subscribe to the slice. Note, some of the listings in the gallery point to content that is entirely the markup for the slice (which we’ll look at shortly), so you may be prompted immediately without seeing a page containing the slice.
After adding to my Favorites bar, I now have easy access to the information by simply clicking the down arrow.
When the weather content changes, the favorite will glow orange to indicate the update (and you can optionally play a sound to alert you to the change). Hovering over the Favorites button will provide a tool tip that indicates when the content was last updated (as well as the source of the feed):
You can control this polling interval by modifying the settings at Tools>Internet Options>Content tab>Feeds and Web Slices>Settings as you can 
see to the right. Note that a slice can specify its own update interval which will supersede the global setting here.
This dialog exposes a number of other options as well to indicate how the browser will respond when slices are detected and updated.
And that’s pretty much all the consumer of a web slice needs to do. If the user no longer wants to subscribe to the Web slice, he or she can just delete the item from the Favorites bar.
Creating Web Slices
Now, let’s take a look at this from the developer’s side. A web slice is essentially defined by special markup – actually a microformat – which the browser sniffs out and makes known to the user via the visual feedback of the glyph and green border around the salient content. Using the handy-dandy IE Developer Tools in IE8, lets see how the Live Search Weather Web slice is set up.
I’ve highlighted the significant pieces of mark-up above that indicates this is a Web slice and establishes the behavior of the slice. Specifically,
class="hslice"
signifies that the
<div>, in this case, defines a web slice, with the id of WeatherAnswer. That id must be unique on the page, and if it changes, then subscribers to the slice will no longer get the content.
class="ttl"
is the time-to-live property, which specifies the polling interval in minutes. So this slice only updates every six hours, regardless of the Internet Options setting mentioned above.
class="entry-content"
marks the content displayed in the overlay when the Web slice is accessed from the Favorites bar. There can be multiple
entry-contentelements in a single slice; they will be combined to create the single preview.
class="entry-title"
is name of the slice as exposed in the Favorites bar button. There can actually be multiple instances of this tag, and they will be concatenated to arrive at the final text.
Well, that all sounds good, but if you apply the definitions here, it doesn’t add up. The content marked as entry-content for the slice is everything inside the green box that we saw when we first discovered the slice. But when you display the slice from the Favorites bar, that entire content – namely the four day forecast - isn’t there.
Note the two anchor tags with style=display: none; ? They contain some extra tags that we couldn’t see above due to the length of the URL; here’s the complete text of both lines (with some carriage returns to make it readable):
<a style="display: none;" href="/webslices/answer.aspx?
q=weather Acton MA&a=WeatherAnswer&s=Weather&form=IE8WSV"
rel="entry-content"/>
<a style="display: none;" href="/webslices/answer.aspx?
q=weather Acton MA&a=WeatherAnswer&s=Weather&form=IE8WSR#Weather"
rel="feedurl"/>
These links aren’t shown in the original slice because of the style attribute. The hrefs are almost identical here, and (in my testing) the markup is identical, but there are two different rel attributes.
The first anchor has rel="entry-content", which provides an alternative display source, thus overriding the entry-content class we saw earlier. So if you browse directly to the URL here, you will indeed get the same look-and-feel as you do from clicking on the favorites button to display the Web slice.
The second rel, feedurl, provides the URL that will be polled for updates, overriding the original page content. That, of course, makes sense here, since the original page was search results that serendipitously happened to contain the slice of interest.
So, these two additional anchor tags, which are hidden from the original display in the search results, actually define the behavior of the Web slice when accessed from the Favorites bar. In fact, you can remove the entry-content class designation on the <div> in the original page and the result is identical; the original display markup from the search results is not used at all in rendering the Web slice overlay.
Additional References
It really is *that* simple to create a functional Web slice. Of course, creating one that looks good is a whole different matter. To that end here are some references that should help:
By the way, there’s an add-on for Firefox that will render Web slices as well (called Webchunks there). It doesn’t work with our Live Search Weather example, because it appears the page from search.live.com is generated differently and doesn't include the Web slice markup, presumably based on the browser User-Agent.