Neue Browser - aus Sicht der Webentwickler

Teil 2: Internet Explorer 8 und Firefox 3

Farben mit Transparenz

In Firefox 3 gibt es jetzt zwei neue Möglichkeiten, Farbe anzugeben, die im CSS- 3-Farbmodul definiert sind: RGBA und HSLA. RGBA ist eine Erweiterung von RGB: Es kann zusätzlich ein Alphawert und damit die Transparenz festgelegt werden. Der letzte Wert bestimmt die Transparenz: 0 ist durchsichtig, 1 deckend.

.transparent { color: rgba
(0,0,255,0.5) } /* halb
durchsichtiges Blau */

Neben RGBA können Sie die Farben auch über HSLA (Hue-Saturation-Lightness- Alpha) definieren. Diese Art der Farbdefinition wird als intuitiver angesehen, weil Sie beispielsweise eine Farbe direkt aufhellen können, ohne einen Farbwähler in Anspruch nehmen zu müssen. Bei HSLA bestimmen Sie die Farben über Farbton (Wert zwischen 0 und 360), Sättigung (Prozentwert) und Helligkeit (Prozentwert). Der letzte Wert ist wieder der Grad der Transparenz.

.transparent { background-color:
hsla(240,100%,50%,0.5); }

Diese neuen Arten der Farbdefinition werden allerdings ansonsten nur vom Safari- Browser interpretiert. Weitere Neuerungen im Firefox 3 ist die verbesserte Unterstützung von display: Hier sind nun zusätzlich inline-block und inline-table implementiert. Eine bessere Darstellung von Schrift ermöglicht die Eigenschaft font-size-adjust aus CSS 3.

Pagezoom

Wenn einem die Schrift bei einer Webseite zu klein zum angenehmen Lesen ist, hilft nur Vergrößern: Alle Browser stellen eine entsprechende Funktion zur Verfügung. Die Vergrößerung der Schrift kann es eventuell mit sich bringen, dass Layouts zerschossen werden, da die anderen Elemente des Layouts nicht mitwachsen. Das ist bei der zweiten Möglichkeit zu vergrößern anders: dem Pagezoom. Beim Pagezoom wird alles vergrößert, inklusive Bilder. Internet Explorer hat diese Zoomfunktion bereits in Version 7 implementiert - dort aber eher wenig zufriedenstellend, weil zu schnell unerwünschte horizontale Scrollleisten auftreten.

Internet Explorer 8 und Firefox 3

© Archiv

Die Zoomfunktion muss Microsoft nachbessern: Die Webseite von www.456bereastreet.com mit zerschossenem Layout bei 125% Zoom.

Dies ist im Internet Explorer 8 verbessert, Microsoft spricht vom "adaptive zoom", also einer angepassten Zoomfunktion. Ergebnis: Scrollleisten werden deutlich seltener. Der Grund dafür ist, dass relative Einheiten wie Prozent nicht mehr vergrößert werden. Ein Bereich mit 100% Breite wurde beim 1,5 fachen Zoom im Internet Explorer 7 150% breit, bleibt im Internet Explorer 8 auch beim Zoomen bei 100%. Pagezoom ist "in" - auch der Firefox 3 hat diese Funktionalität implementiert. Im Menü Ansicht / Zoom finden sich jetzt die Unterpunkte Vergrößern und Verkleinern. Diese verwenden die neue Zoomfunktion, wohingegen Nur Text zoomen die ursprüngliche ausschließliche Textvergrößerung bewirkt. Die Zoomfunktion ist wie im Internet Explorer 8 eine angepasste Zoomfunktion, sodass prozentuale Bereiche nicht einfach vergrößert werden.

Das bedeutet, dass flüssige Layouts in Prozent auch weiterhin ihre Berechtigung haben. Beim Pagezoom kann man nur hoffen, dass Microsoft noch deutlich nachbessert: Manchmal wird das Layout beim Pagezoom des Internet Explorer 8 Beta derzeit schon bei einer geringen Vergrößerungsstufe zerstört.

Webslices

Der Internet Explorer 8 unterstützt jetzt Webslices. Das sind Teile von Webseiten, die Benutzer ähnlich wie Lesezeichen abonnieren können. Ein klassisches Beispiel wären Informationen über eine aktuell laufende Auktion, die ein Surfer per Mausklick abonnieren kann und wodurch ein Link in der Symbolleiste positioniert wird. Per Klick auf den Link geht ein kleines Vorschaufenster auf, in dem der Surfer den aktuellen Stand abfragen oder zu der Seite wechseln kann.

Internet Explorer 8 und Firefox 3

© Archiv

Über Web Slices kann man einzelne Teile einer Webseite abonnieren und sieht im Vorschaufenster immer den aktuellen Stand.

Es eignen sich natürlich nur bestimmte Teile von Webseiten als Webslices und diese müssen besonders gekennzeichnet werden. Ein Beispiel hierzu:

<div class="hslice" id="nr1"><p class="entry-title">Marken-
Eieruhr</p><p class="entry-content">Höchstes
Gebot derzeit: 90,50 Euro </p><p>Läuft ab am<abbr class="endtime"
title="2008-07-11T11:00:00">11. Juli
2008 um 11.00</p></div>

Das umfassende Element wird mit class="hslice" gekennzeichnet und muss darüber hinaus eine eindeutige id erhalten. Der Titel des Webslices steht dann in einem Element mit class="entry-title" und die eigentliche Information innerhalb eines Elements mit class="entry-content". Hat die Information eine beschränkte Gültigkeit - wie typischerweise bei Auktionen - so kann das Ablaufdatum innerhalb eines abbr-Elements mit class="endtime" angegeben werden. Dabei steht im title- Attribut das Datum in maschinenlesbarem Format, innerhalb des abbr-Elements hingegen schreiben Sie es so, wie es angezeigt werden soll.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".