Letzte Aktualisierung: Do, 23. Apr 2009
Warnung vor optischer Strahlung ;-)
Dies ist eine »Spielwiese« und ein »Test-Labor« für Webseiten. Entsprechend unaufgeräumt geht es hier zu.
Wenn Sie einen Link bedienen und danach auf diese Seite zurück möchten, benutzen Sie bitte den Zurück-Button Ihres Browsers.
So sieht diese Seite in Safari aus (mit CSS3: »border-radius«).
Der Begriff »Laboratorium« bezeichnet einen Ort, an dem Experimente, Prozeß- und Qualitätskontrollen durchgeführt werden. In diesem Sinne probiere und teste ich hier verschiedene Techniken in HTML und CSS.
– Was ist mit den www-Standards möglich?
– Was funktioniert in den Browsern?
– Was ist praktikabel umsetzbar?
Es entstehen Prototypen für eine vielleicht spätere Verwendung. Dabei beschäftige ich mich zunächst mit Transparenzen, Schatten und Kurven per CSS (CSS 3). Die Lösungen funktionieren derzeit nicht in allen Browsern.
Das gilt insbesondere für den Microsoft Internet Explorer. Und damit lande ich bei einem weiteren Punkt dieser Seiten. Dieser »Browser« von Microsoft kostet einfach nur Zeit und Nerven. Der neue IE 8 (seit März 2009) hat zwar gegenüber den veralteten Versionen im Leistungsumfang zugelegt, doch prinzipiell hat sich nicht wirklich etwas verändert. Eine Reihe von Techniken, die z.B. in Safari oder Firefox schon möglich sind, kann der neue Explorer nicht umsetzen. Das betrifft Schatten für Text und Flächen, abgerundete Ränder und Transparenzen u.a.. Für Transparenzen hat der IE zwar eigene Möglichkeiten, doch die sind nicht standardkonform. Es ist weiterhin erforderlich, hier gesondertes (MS-) CSS zu schreiben. Weiter produziert auch der IE 8 immer noch unerwünschte Effekte (Scrollbalken, s.u.), die nicht voraussehbar und kaum eingrenzbar sind. Hinzu kommen neu produzierte Eigenheiten (proprietäre Metatags u.a.), die aus Fehlern resultieren, die mit dem IE6 und IE7 gemacht wurden. All das erhöht den Aufwand bei der Webseiten-Erstellung. Statt mit der Seiten-Entwicklung ist man mit den technischen Unzulänglichkeiten des IEs beschäftigt.
Für einen großen Software-Konzern sollte es eigentlich einfach sein, einen standardkonformen modernen Browser zu entwickeln. Die Konkurrenz macht es vor. Doch offensichtlich will Microsoft das einfach nicht. Der Entwicklung des www ist so ein Verhalten nicht förderlich. Hinzu kommt die teils schlechte Qualität des IEs beim Rendering von Schrift und skalierten Bildern. Allerdings hängt dies auch mit den individuellen Einstellungen unter Windows zusammen (Schriftglättung / »Clear Type«)
Es bleibt nur die Empfehlung, den Internet Explorer nicht zu verwenden, und stattdessen Browser wie Firefox, Safari oder Opera zu nehmen. Tests für Chrome (Google) u.a. stehen auf diesen Seiten noch aus. Und wenn ich einen Browser hier nicht nenne, bedeutet dies nicht, daß er nicht gut sein könnte. So sind mir über browsershots.org einige Browser unter Linux aufgefallen, die wirklich schön rendern.
Werfen Sie doch einmal einen Blick auf diese Browser:
Safari – Mac, Win
Firefox – Win, Mac, Linux
Opera – Win, Mac, Linux u.a.
Und nun zu den verschiedenen Tests.
Dies ist eine Testvorlage, an der abgelesen werden kann, ob ein Browser die CSS-Angaben opacity:, text-shadow:, box-shadow: und border-radius: interpretiert, bzw. welche anderen Angaben er ggfls. dafür braucht. Im Screenshot unten ein Beispiel, wie es in einem Browser angezeigt werden kann. Zur Veranschaulichung habe ich die ausgeführten Angaben auf dem Sreenshot rot markiert. Daneben ein Vergleich zwischen Safari und Firefox.
► Test: Opacity, Shadows, Radius
Der Internet Explorer kann in allen Versionen lediglich Transparenzen (Opacity) umsetzen, und das auch nur in einem nicht standardkonformen Code, der zudem in den IE-Versionen unterschiedlich ist – siehe den folgenden Abschnitt. Es ist unverständlich, warum Microsoft in seinem neuesten IE8 eine neue Schreibweise einführt, statt sich an den CSS-Standard zu halten.
Dieser Entwurf (Test Nr. 6 – siehe unten) ist sehr transparent gedacht. Die Schrift wird erst dann deutlich lesbar, wenn man mit dem Mauszeiger drüber fährt und die Fläche undurchsichtig wird:
Der Hintergrund paßt sich flexibel der Fenstergröße an. Die transparenten Boxen passen sich der Breite des Fensters an.
Unten sind Screenshots von browsershots.org. Welcher Browser es jeweils ist, wird angezeigt, wenn Sie mit dem Mauszeiger über die Vorschaubilder fahren, und nicht sofort klicken. Die teils pixelige Schrift unter Windows dürfte dadurch zu erklären sein, daß dort »Clear Type« deaktiviert war.
CSS-Standard:{ opacity: .50 ; }
Die CSS-Angabe für Transparenz wird vom IE nicht interpretiert. Erkennbar ist auch, daß der IE 8 rechts einen Scrollbalken erzeugt, die anderen Browser jedoch nicht. Das sind so die »Kleinigkeiten«, die aufhalten. Es dürfte 1 bis 2 Stunden kosten, herauszubekommen, wo der IE 8 hier nun seine »Macke« hat.
CSS + MS-CSS:{ opacity: .50 ; filter: Alpha(opacity = 50) ; }
Beide Angaben werden vom IE 8 nicht unterstützt, obwohl filter: Alpha hauseigener Code von MS ist. Es stellte sich heraus, daß der IE 8 eine andere Schreibweise benötigt, nämlich mit Anführungszeichen. Dies sei ein Zugeständnis an die »Standardkonformität«. Der Standard ist allerdings opacity:.
CSS + MS-CSS + MS-CSS für IE8:{ opacity: .50 ; filter: Alpha(opacity = 50) ; filter: "alpha(opacity = 50)" ; }
Screenshots folgen.
Diese Angaben werden nur vom IE 8 umgesetzt, nicht aber vom IE 7 und 6. Der Grund: Die Angaben stehen nicht in der für den IE richtigen Reihenfolge. Hier die Lösung, die schließlich funktioniert:
CSS + MS-CSS + MS-CSS für IE8 in anderer Reihenfolge:{ opacity: .50 ; filter: "alpha(opacity = 50)" ; filter: Alpha(opacity = 50) ; }
Screenshots folgen.
Die Angaben für den IE 8 müssen vor den Angaben für den IE 7 stehen, damit beide Browser die Transparenz umsetzen. Der Code-Aufwand hat sich vervielfacht, allein des IEs wegen.
All das in der Summe herauszubekommen, hat einige Stunden gedauert ... . Dies ist nur ein Beispiel für viele Probleme, die immer wieder mit den Varianten des IE auftauchen.
Ich nehme meine Startseite und probiere damit Positionierungen, Transparenzen, Schatten und Hover-Effekte per CSS / CSS 3. Hier zunächst das HTML der Seite:
– Homepage - HTML ohne CSS
Die Struktur ist einfach: Oben ein Kopfbereich, unten ein Fußbereich. Dazwischen Überschriften als Verweise zu Seiten.
Die Überschriften sind hier frei dimensioniert und positioniert (position: absolute). Sie sind mit Hintergrundbildern versehen. Die entstehenden Flächen sind transparent (opacity) und überlappen einander. Fährt man mit der Maus drüber, rückt das entsprechende Element in den Vordergrund (z-index) und wird undurchsichtig. Bei den oberen beiden erscheinen zugleich zusätzliche PopUp-Fenster (display: none / display: block). Ändert man die Fenstergröße, paßt sich der Inhalt flexibel an.
Hier dasselbe noch einmal, aber mit gerundeten Boxen. border-radius gehört zum künftigen Standard CSS 3. Es funktioniert aktuell nur in Safari (-webkit-border-radius:) und Firefox 3.1 (-moz-border-radius:).
► Homepage - Test 1a
– Weitere Screenshots: Screenshots Test 1a
Sehr schön sind auch diese rautenartigen Boxen:
Hier lediglich eine andere Anordnung der Boxen.
Hier ist eine HTML-Seite per <iframe> eingebunden. Letzterer und damit auch die HTML-Seite werden nur angezeigt, wenn mit dem Mauszeiger über »Browser« gehovert wird. Mit width:- und padding:-Angaben lassen sich die empfindlichen Bereiche definieren, welche die Sache aktivieren.
Die iframe-PopUp-Boxen sehen interessant aus. Im folgenden Beispiel habe ich sie daher vermehrt angewendet.
Die Variante 3a hat weiter Schatten für Text und Boxen erhalten. Per :hover und <iframe> werden andere HTML-Seiten eingebunden und als Vorschau angezeigt. Per Hover lassen sich auch mehrere Elemente zugleich aktivieren, wenn sie verschieden per { position: absolute ; } positioniert wurden.
Der Nachteil: Die iFrames sind natürlich im HTML-Code enthalten, und dort eher störend, wenn die Seite ohne CSS betrachtet wird. Zur Veranschaulichung hier die Seite in HTML ohne CSS: ► Homepage Test 3a - HTML ohne CSS
Diese Variante funktioniert - so wie auf den Screenshots zu sehen - derzeit nur in Safari, Firefox 3.1 und iCab 4.5.
Text folgt.
Text folgt.
Text folgt.
| CSS ► (HTML) |
opacity: |
text-shadow: |
box-shadow: |
border-radius: |
background:anpassen1) |
background:einfärben2) |
position:3) |
<iframe>PopUp4) |
|---|---|---|---|---|---|---|---|---|
| Chrome 1 | Ja | Nein | mangelhaft | mangelhaft | entfällt 1) | ? | Ja | ? |
| Chrome 2 | Ja | Ja | mangelhaft | mangelhaft | entfällt 1) | ? | Ja | ? |
| Firefox 2 | Ja | Nein | Nein | -moz- | Nein | Ja | Ja | Ja |
| Firefox 3 | Ja | Nein | Nein | -moz- | Ja | Ja | Ja | Ja |
| Firefox_3.1 | Ja | Ja | -moz- | -moz- | Ja | Ja | Ja | Ja |
| Opera 9.6 | Ja | Ja | Nein | Nein | entfällt 1) | Ja | Ja | Ja |
| Safari 3 | Ja | Ja | -webkit- | -webkit- | Ja | Ja | Ja | Ja |
| Safari 4 | Test steht aus. | |||||||
| IE 6 | filter:Alpha() | Nein | Nein | Nein | entfällt 1) | Nein | Nein | Nein |
| IE 7 | filter:Alpha() | Nein | Nein | Nein | entfällt 1) | Ja | mit Fehlern | Nein |
| IE 8 | filter:"Alpha()" | Nein | Nein | Nein | entfällt 1) | ? | Ja | ? |
1) Mit »background anpassen« meine ich, ob der Hintergrund entsprechend des border-radius angepaßt wird. Wird kein border-radius ausgeführt, dann entfällt hier die Angabe.
2) Mit »background einfärben« ist eine transparente Farbe gemeint, die über den background gelegt wurde. Sie wird nur bei :hover aktiviert.
3) Hier geht es darum, ob bei { position: absolute ; } die weiteren Angaben wie top:, left:, width:, height: u.a. korrekt ausgeführt werden. Ich beziehe mich dabei allein auf die oben gezeigten Entwürfe.
4) Hier wird es etwas komplexer. Ein Element wird per { position: absolute ; } positioniert. In diesem Element befindet sich ein <iframe>. Um ihn aus dem Eltern-Element heraus zu bekommen, wird er per { position: fixed ; } positioniert. Er wird weiter per { display: none ; } zunächst unsichtbar gemacht. Erst bei :hover über das Elternelement wird er per {display: block ; } sichtbar gemacht. Der IE7 zeigt den <iframe> bei :hover allerdings innerhalb des Elternelements an.
Dies ist ein Test mit der CSS-Eigenschaft { text-shadow: ... }. Zur Anwendung kommen weiter { opacity: ... ; }, { position: relative ; } und { position: absolute ; }, sowie Hintergrundbilder.
Textshadow und Opacity gehören zwar nicht zum aktuellen CSS 2.1, aber sie sind Teil vom kommenden CSS 3, und werden heute schon von vielen Browsern umgesetzt. Hier zunächst der reine HTML-Code:
▶ labor_text_shadow_html.html
Auf dem Mac werden die CSS-Angaben wirklich sehr schön gerendert, deswegen hier jeweils ein Screenshot von Safari 3, Firefox 3.1 (Version 3 kann noch kein text-shadow), Opera 9.6 und iCab 4.5 auf dem Mac.
▶ Test-Seite Text-Shadow (mit CSS)
Da der IE skalierte Grafiken nicht so gut rendert, hier noch einmal die Grafiken als Vollbild:
Safari 3 – Firefox 3.1 – Opera 9.6 – iCab 4.5
CSS ist mittlerweile sehr leistungsfähig geworden. Voraussetzung ist allerdings ein aktueller Browser. Je nach Einstellung im CSS sind mit Text-Shadow viele Effekte möglich. Bislang wurden dafür aufwändig Grafiken in der Bildbearbeitung erstellt, die gesondert geladen werden mußten. Die können nun durch einige Zeilen Code ersetzt werden.
Die Vorteile: Der Text läßt sich einschließlich der Effekte skalieren, sodaß auch Menschen mit Sehbehinderung in den Genuß schöner Seiten kommen können. Text kann – im Gegensatz zu Grafiken – von Suchmaschinen gelesen werden. Markieren und Kopieren des Textes ist ebenfalls möglich.
Es folgt an dieser Stelle noch ein Test über browsershot.org - in einigen Tagen.
Thorsten Reinicke
Freier Webautor
* Seit 1997 *
© Zoom-Bilder: www.cabel.name – FancyZoom 1.1
© 2007-2009
