Frontendentwicklung ist facettenreich

Frontendentwicklung ist weit mehr, als nur ein wenig HTML und CSS so zu kombinieren, daß das Endergebnis so aussieht wie die Photoshopvorlage. Manchmal dreht es sich dabei um kleine Details mit großer Wirkung. Welche Gedanken man sich machen kann und zu welch ungewöhnlichen Ergebnissen man kommen kann, wenn man nur genügend Hintergrundwissen hat, zeigt Ingo Chao in seinem Beitrag für das XING-Blog. Er nutzt “inline-block” zur Performancesteigerung. Ich wünsche mir noch eine Aufarbeitung des genutzten Codes für uns Entwickler. Ich finde Ingos Beitrag jedenfalls sehr inspirierend.

Kommentare und Trackbacks sind nicht möglich

Ein Kommentar zu “Frontendentwicklung ist facettenreich”

  1. Aufarbeitung: Prinzipiell so, wie Corina und ich es in unserem Buch beschrieben haben. http://tinyurl.com/c2q2sy
    Das eigentliche Problem ist Firefox 2 und nicht der IE.

    Fx2 benötigt drei Wrapper: Auf dem äußeren steht display: -moz-inline-stack (was dann für normale Browser von inline-block überschrieben wird), auf dem mittleren ist display:table, auf dem inneren sind dann width: xyz und position:relative.

    Der Grund hierfür ist die fehlende Stabilität, wenn man ohne den mittleren und inneren Wrapper arbeitet. Die bekannten Artikel mit Workarounds für Fx2 sind nicht ernsthaft auf Production einsetzbar, weil sie unzureichend getestet wurden mit wirklich variablen (=unbekanntem) Content.

    Da die anderen Browser position und width auf dem äußeren Wrapper erwarten, muss man diese Werte leider für Fx2 auf den inneren Wrapper übertragen, d.h. es ist ein gemischter Hack auf der Präsentations- und strukturellen Ebene. Wenn man so will, Divitis (was das JS für drag&drop nicht gerade einfacher macht).

    Und IE < 8 will statt display:inline-block bekanntlich zoom: 1 + display:inline, bei uns per Conditional Comment.

    Das Hauptaugenmerk sollte man vielleicht nicht auf das Wie setzen, sondern auf die Tatsache an sich, dass man zeitkritisches JS in einigen Fällen per CSS optimieren kann, wenn JSler+CSSler ihre Köpfe zusammenstecken.

    Ingo Chao    |   30.April 2009
« »