In a nutshell, webslices are an IE8 specific feature that allows the web designer to tag part of a webpage as a ‘webslice’. By tagging sections of a web page, users of IE8 can then subscribe to it, much in the same way that they can subscribe to an RSS feed.

… I should also mention that when the webslice is updated, the user/subscriber of the webslice will be notified. This is Microsoft’s explanation of it:

WebSlices is a new feature for websites that enables users to subscribe to content directly within a webpage. WebSlices behave just like feeds in that users can subscribe to them and receive update notifications when the content changes. Websites are polled at user-defined intervals, similar to the way RSS feeds are polled. Website operators may also define a minimum wait time between polls to minimize requests.

Developers can mark parts of webpages as “WebSlices” and enable users to monitor information they rely on as they move about the web. With a click in the Favorites bar, users see rich “WebSlice” visuals and developers establish a valuable, persistent end-user connection.

OK, sounds like RSS feeds to me … but I figure I’d give it go. So on the IE8 beta webslices page, they give you a few links to websites that support webslices. Of course, the MSN page doesn’t seem to work – all I can find is the RSS feed.

Thankfully the stumbleupon.com webslice link seems to work and so I subscribe to the webslice …

Webslice subscribe window:

Whenever you come across a web page with a webslice in it, you get this nifty little icon appearing in the IE8 toolbar.

The webslice ‘alert’ icon:

Now that we’ve subscribed to the stumbleupon.com webslice, a corresponding button appears in our Favorites bar that when clicked, displays this snapshot of the content that is there now.

Webslice current view:

As the image above shows, it does offer something a little extra over an RSS feed … one less click, I suppose.

Creating your own webslices in your web pages

It seems pretty simple; you just have to wrap whatever content that you want to become a webslice in a div tag, and then just tag the div with the class of ‘hslice’.

There are a few sub elements that you can use to further define the webslice: ‘entry-title’ and ‘entry-content’ … among others.

Here is a simple example:

1
2
3
4

<div class="hslice" id="1">
      <p class="entry-title">Item - $66.00</p> 
      <div class="entry-content">high bidder: buyer1 … </div> 
</div>

Webslices can be decorated with a few other bits of information:

• Expiration date – when the webslice expires.
• Time to Live – how often it refreshes.

Here is the same webslice example with the ‘time-to-live’ attribute set:

1
2
3
4
5
6

<div class="hslice" id="1">
  <p class="entry-title">Item - $66.00</p>
   <div class="entry-content">high bidder: buyer1 … 
     <p>This clip updates every <span class="ttl">15</span> minutes </p> 
   </div> 
</div>

In the above code snippet, it is the ‘class=”ttl”‘ that sets the interval for the webslice.

Conclusion:

At first glance, I wasn’t too impressed. But now that I’ve used them a little, I can see webslices as being a nice little feature.

Links of Interest:

1. webslices guide in PDF format … from Microsoft.

2. Using webslices video

3. You can learn more about webslices at the IE8 beta webslices page.

-

Thanks for reading,

Stefan Mischook

www.killersites.com
www.killerphp.com

Maybe. IE8 is becoming CSS 2.1 compliant. The beta release also fixes many of the browser inconsistencies and more closely supports the HTML 4.01 Specification. One notable change is the elimination of the problematic haslayout functionality.

IE8 departs from earlier versions in how it displays form controls. Chris Hester created a demo showing how various browsers handle form buttons.

Since beta releases can be buggy, it is probably too early to target IE8 with conditional comments. But, knowing your options will keep you ahead of the pack.

Two methods to work with differences found in IE8:

1. Internet Explorer Conditional Comments.
2. The Emulate IE7 Meta Tag.

1. Designers can use Conditional Comments to target Internet Explorer 8 with alternate content or CSS rules. The typical conditional comment to target IE8 is:

1
2
3

<!--[if IE 8] >
[[ Alternative content here ]]
<![endif]-->

2. Microsoft introduced a new meta tag to control the display of your web page in IE8. The meta tag will tell IE8 to render the page using IE7’s rendering engine. To Emulate IE7, add this inside the <head></head> of your web document:

1

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This will allow a site to use the new features of IE8 while using IE7’s rendering engine.

More information can be found here: Update your site to render in IE7 Mode.

Methods to test your site in IE8:

• Download the current IE8 beta release for Windows XP SP2, Windows Vista, and Windows Server 2003/2008.
• Don’t want to install a beta product? Then download a standalone application that supports IE versions 5.5 through the current IE8 beta release. Try the IETester by the makers of DebugBar.
• Another alternative is to use the VNC remote access options offered by BrowserCam which allow you to test websites virtually.

Microsoft’s Internet Explorer is still the de facto standard for businesses and consumers but never captured the hearts of web designers and developers. IE8 is poised to change that sentiment with its intuitive new features and respect for web standards. Here are additional resources to get ready for IE8:

• Internet Explorer Developer Center
• Internet Explorer 8 Readiness Toolkit
• CSS Compatibility and Internet Explorer