kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

WebSlices für den Internet Explorer 8 (IE8) erstellen

WebSlices ermöglichen das Abonnieren von Seiteninhalten ähnlich wie RSS. Diese Funktion ist eine Neuerfindung des bald erscheinenden Internet Explorers 8.
Wird ein WebSlice abonniert, so erscheint ein entsprechender Eintrag in den Favoriten. Per Klick öffnet sich ein kleines Fenster und zeigt die herausgelösten Inhalte an. In diesem Artikel erkläre ich wie Ihr mittels Mikroformaten WebSlices erstellt.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Mikroformate zur Einbettung von WebSlices

WebSlices definieren sich über Microsofts neue Mikroformate "hslice", "entry-title" und "entry-content". Diese drei Formate müssen vorhanden sein um ein WebSlice darzustellen. Ebenso muss das Element dem die Klasse "hslice" zugewiesen wurde über eine ID verfügen.

hslice
Dieses Mikroformat muss die anderen beiden Mikroformate beinhalten. Es bildet den äußeren Rahmen des WebSlices.
entry-title
Dieses Mikroformat muss innerhalb von "hslice" verwendet werden. Es stellt den Titel des WebSlices dar. Dieser erscheint in den Favoriten oder der Lesezeichen-/WebSliceleiste.
entry-content
Dieses Mikroformat beschreibt den Inhalt des Webslices. Es darf mehrfach verwendet werden und kann weitere HTML-Elemente enthalten.

Beispiel zur Verwendung

Folgendermaßen könnten die Mikroformate angewendet werden.


<div class="hslice" id="idname">
 <h1 class="entry-title">Titel des WebSlice in den Favoriten</h1>
 <div class="entry-content">
  <h2>Überschrift</h2>
  <p>Absatz</p>
 </div>
</div>

Bei der Ausgabe des WebSlices wird um das Mikroformat "entry-content" ein BODY generiert. Dieser hat jedoch leider die selben Eigenschaften wie die Mutter-Seite. Demzufolge werden auch per CSS vergebene Attribute angewendet. Microsoft "löst" dieses Problem mit dem Vorschlag dem BODY der Website eine ID zuzuweisen und diese über CSS anzusprechen.

WebSlice ausprobieren

Nach diesem Absatz habe ich einen Test-WebSlice verlinkt. Sofern Ihr den Internet Explorer 8 nutzt, erscheint beim hovern des Bereichs ein entsprechendes Icon. Ein Klick auf dieses Icon abonniert den Inhalt.

WebSlice-Icon deaktivieren

Wie oben veranschaulicht, erscheint ein kleines Icon sofern ein Inhalt als WebSlice erkannt wird. Soll dies nicht geschehen, so kann die Icon-Anzeige über folgenden META-Header deaktiviert werden.

<meta name="slice" scheme="IE" content="off"/>

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Matt

    Verfasst am 19. Dezember 2008 um 10:20 Uhr.

    Interessant. hab das grad mal eingebaut.

    Fragen und Anregungen:
    Wer braucht das bzw. warum nutzt man nicht einfach RSS dazu?
    Wie kann man den Slice abonnieren, wenn das Icon abgeschaltet ist?
    Man muss im CSS möglicherweise ein paar zusätzliche Regeln definieren, da das Slice isoliert aus dem Kontext gerissen wird und dadurch die eigentlich vorhandene Kaskadierung im Stylesheet nicht mehr greift. Ich hatte anfänglich nämlich nur schwarzen Text auf dunkelgrauem Hintergrund, was nicht so toll ist.

  2. Jonas

    Verfasst am 19. Dezember 2008 um 11:34 Uhr.

    @Matt: Wer das braucht kann ich dir nicht sagen. Microsoft brauchte vllt einen pseudo USP um den IE8 besser zu vermarkten. Beworben wird die Funktion mit dem Verfolgen von Wetterberichten und ebay-Auktionen.
    Wenn das Icon deaktiviert wurde erscheint es nicht mehr beim hovern, trotzdem wirst du oben im Browser informiert.
    Zu deiner Anregung mit dem CSS: Wie oben erwähnt ist es sinnvoll eine BODY-ID zu vergeben (der echten Website). Dann musst du nicht das BODY-Tag im CSS ansprechen sondern eben diese ID. Sofern das geschieht, nutzt das WebSlice einen „sauberen“ body. Sprich: Weißer BG und schwarzer Text oder so. Hab ich allerdings aus Lust und Zeitmangel auch noch nicht gemacht.

  3. Kevin Golde

    Verfasst am 25. März 2009 um 15:48 Uhr.

    Hallo,
    mir gefällt dieser Beitrag sehr gut und hat mir viel gebracht nur ein problem habe ich noch…ich bin mir nich ganz sicher welche Inhalte ich darüber anbieten will. :-)

    • Jonas

      Verfasst am 25. März 2009 um 18:17 Uhr.

      @Kevin: Seeehr gut. Das Problem kenne ich :D

  4. Steven

    Verfasst am 14. Juli 2009 um 18:22 Uhr.

    „Diese Funktion ist eine Neuerfindung des bald erscheinenden Internet Explorers 8. “
    Die WebClips von Safari waren allerdings früher da und sehen den Webslices verblüffend ähnlich…

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.