Neue Browser - aus Sicht der Webentwickler
Teil 2: Internet Explorer 8 und Firefox 3
- Internet Explorer 8 und Firefox 3
- Teil 2: Internet Explorer 8 und Firefox 3
- Teil 3: 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.
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.
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.
