Weblog - kronn.de

Acid2 – meine Lösung

Acid2, der Browsertest des „WaSP“:http://webstandards.org/, ist eigentlich nur an Browserhersteller und -programmierer gerichtet. Er soll Hilfestellung bei der Implementierung der „Standards“:http://w3.org/ geben.

Ich denke aber, dass er auch für Webdesigner eine interessante Hilfestellung sein kann.

Letztlich zeigt uns Acid2 doch die Fehler auf, die Browser derzeit haben. Ich habe mir einige Fehler einmal angesehen und ein darüber nachgedacht, wie ich die Fehler umgehen würde.

Viele Fehler entstehen durch die fehlende Unterstützung für DataURLs. Meine Gedanken dazu kommen in einen gesonderten Eintrag.
Obwohl ich persönlich „Opera“:http://opera.com bevorzuge, habe ich das hier mit Firefox 1.0.3 entwickelt. Wenn es die Möglichkeit, CSS live zu bearbeiten, auch direkt in Opera gäbe, hätte ich mich vermutlich anders entschieden. Außerdem scheint Opera ein größeres Problem mit DataURLs als Firefox zu haben.

h3. Zeile 2: Attribute und Positionierung

In Zeile 2 werden absolute Positionierung und floats über recht komplexe Selektoren getestet.

Dass der IE das nicht kann, ist eine Sache. Diese Attributsselektoren sind dadurch aber in der Praxis noch nicht so verbreitet, wie ich mir das manchmal wünschen würde. Gerade bei Formularelementen wie input, die sich ja nur durch das type-Attribut ausreichend definieren, fehlt diese Unterstützung. Dem begegne ich derzeit mit einer zusätzlichen CSS-Klasse, was zwar in keiner weise elegant, aber eben pragmatisch ist.

Das andere Problem, das diese Zeile zerbrechen lässt, ist, dass die gesamte Zeile absolut positioniert ist. Das funktioniert noch recht gut. In dieser Zeile ist aber noch ein Element enthalten, dass mit der float-Eigenschaft nach rechts geschoben wird. Da die Zeile ohne genau Breitenangabe ausgestattet ist, sollte sie sich eigentlich so klein wie möglich machen.

Macht sie aber nicht. Sie wird so breit wie nötig. Da der float nach ganz rechts will, geht auch die Zeile bis ganz nach rechts, bis an den Bildschirmrand. Eine Lösung dafür, die wieder einmal jeglicher Eleganz entbehrt, ist, eine genau Breite anzugeben.

Im konkreten Falle von Acid2 (line 2) wären das 4em.


[class~=one].first.one { width:4em; }

Voilà! Es wird richtig angezeigt.
Das der Browser sich vorher nicht standardkonform verhalten hat, wird dadurch weder geändert noch besser. Aber es ist immerhin eine Lösung für die Praxis.

Die dritte Betaversion von Opera8 hat diesen Fehler übrigens bereits behoben.

h3. Zeilen 10 – 11: Absolute Postionierung rechts

Ähnliches wie in der zweiten Zeile wird auch hier zum Verhängnis. Im Original wird einem Element die Breite „auto“ zugewiesen. Im Gegensatz zum vorhergehenden erscheint es so, als würde sich das Element so klein wie möglich machen. An sich ist das auch das richtige und erwünschte Verhalten. Es wird nur ein float unrichtig behandelt. Dadurch hat das Grinsen zwar die richtige Breite, diese nimmt aber keinen Platz im darübergelegenen div ein.

Die Lösung, die eigentlich keine ist, sondern nur ein Umgehen von Browserfehlern, sieht wie folgt aus: wir geben dem absolut positionierten Element die richtigen Breite von insgesamt 8em.


.smile div div { position: absolute; top: 0; right: 1em; width: 8em; }

Voilà! Es wird richtig angezeigt. Trotzdem der Disclaimer:
Das der Browser sich vorher nicht standardkonform verhalten hat, wird dadurch weder geändert noch besser.

Das Lachen ist auch noch eine Zeile zu hoch. Dies liegt an einer fehlerhaften Umsetzung der zusammenfallenden Außenabstände. Eine kleine Korrektur der Zahlen führt zur richtigen Darstellung in Firefox. Glücklicherweise würde man solch komplexe Kontrukte in der Webworkpraxis vermeiden. Komplexität führt meist nur zu Problemen. (Au weia, hört sich so richtig nach „Onkel kronn erklärt die Welt“ an… ist nicht so gemeint.)

h3. Weitere Kleinigkeiten

In der abschließenden Zeile wird die display-Eigenschaft getestet, indem aus einer Liste eine Tabelle gemacht wird. Firefox kann dies – wie auch Opera – im Prinzip, hat aber – wie auch Opera – anscheinend ein Problem mit den sog. „anonymen Tabellenzellen“:http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes die laut Spezifikation erstellt werden müssen. Dadurch wird die Zeile doppelt so groß und die korrekt dargestellten Tabellenzellen bedecken nicht das gesamte rot. Mögliche Lösungen sind, diese unvollständige Umsetzung einfach zu umgehen, oder display:table zu display:table-cell zu machen. Ich weiß, ist keine echte Lösung…

Firefox hat weiterhin Probleme mit über object-Tags eingebungende DataURLs. Man könnte das für ein akademisches Problem halten, aber da er prinzipiell mit DataURLs klarkommt (im Gegensatz zu Opera), vermute ich eine unvollständige Implementierung des object-Elements. Mit ein wenig Tricksen ist es aber denoch möglich, das Referenzbild nachzustellen. Leider ist es nur mit BruteForce möglich: Man entfernt die CSS-Deklarationen, die rote Rahmen oder rote Hintergründe darstellen und fügt an passender Stelle die DataURL ein, die für die Augen zuständig ist. Das Hintergrundbild muss dann nurnoch richtig positioniert werden und „fertig ist das Referenzbild“:http://kronn.de/img/acid2-changed-for-firefox.jpg (jpg, 116 KB, 1024×768 -dpi-).

h3. Sinn und Zweck

Die Methoden, die in Acid2 verwendet werden, stoßen absichtlich an Grenzen. Mir ging es nur darum zu zeigen, dass wir bereits recht weit gehen können. Schöner wäre natürlich, für Browser zu coden, die wirklich elegante Lösungen erlauben. Aber mit ein wenig Glück hilft ja Acid2 dabei.

Abgelegt in: Code
Veröffentlicht am 16.04.2005 um 19:47
Dauerhafter Link zu "Acid2 – meine Lösung"

  • Was sind diese DataURLs?

  • DataURLs sind eine sehr spannende Angelegenheit. Deshalb bereite ich bereits einen weiteren Artikel dazu vor.

    Die DataURLs werden in „RFC 2397“:http://www.ietf.org/rfc/rfc2397 näher beschrieben. Kurz gesagt: Statt dem Verweis auf eine Datei gibst du die Datei selbst an.

  • Über den Artikel zum Thema DataURLs freu ich mich schon. Ein ähnliches Prinzip nutzt auch der IE bei der Funktion Webarchiv speichern (Datei -> Seite speichern -> Als Webarchiv, einzelne Datei (*.mht)).

    Zwar Microsoft proprietär, aber vom Prinzip her ähnlich. Gerade bei Offline Dokumenten die Weitergegeben werden finde ich ist das n ziemlich nützliches Feature, da man nicht drauf achten muss ob man auch alle Dateien mit auf die CD oder DVD brennt und sich auch nicht großartig um relative oder falsche absolute Pfade kümmern muss.

    Andere Anwendungsmöglichkeiten fallen mir jetzt allerdings nicht ein. Ich würde es glaube ich beim html schreiben eher nervig finden wenn ich mich durch endlos lange eingebettete Bilder scrollen muss. Wofür waren die DataURLs ursprünglich eingeführt?

  • Ich hab mich verlaufen :|

Diese Internetseite wurde von Wordpress zusammenebastelt und besteht aus geprüftem XHTML und CSS.
Das hat viele Vorteile.

Weitere Seiten mit ähnlichen Vorteilen preisen gutes Webdesign an oder enthalten Texte.
So ist das Leben eben.
© Kronn/2003-2005

Mein Server hat, nebenbei gesagt, 0,298 Sekunden benötigt, das hier zu fabrizieren.
War aber nicht böse gemeint.


Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime() in /var/www/K1054131198/docroot/kronn.de/etc/counter/counter.php:61 Stack trace: #0 /var/www/K1054131198/docroot/kronn.de/weblog/wp-content/themes/kronn/footer.php(19): include() #1 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/template.php(688): require_once('/var/www/K10541...') #2 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/template.php(647): load_template('/var/www/K10541...', true) #3 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/general-template.php(76): locate_template(Array, true) #4 /var/www/K1054131198/docroot/kronn.de/weblog/wp-content/themes/kronn/single.php(31): get_footer() #5 /var/www/K1054131198/docroot/kronn.de/weblog/wp-includes/template-loader.php(74): include('/var/www/K10541...') #6 /var/www/K1054131198/docroot/kronn.de/weblog/wp-blog-header.php(19): require_once('/var/www/K10541...') #7 /var/www/K1054131198/docroot/kronn.de/weblog/index.php(17): require('/var/www/K10541...') #8 {main} in /var/www/K1054131198/docroot/kronn.de/etc/counter/counter.php on line 61