IE7 Development Details

So als Webdesigner muss man auch einfach mal das Säbelgerassel der Browserwars überhören und nach vorne schauen. Und am Horizont manifestiert sich mehr und mehr Internet Explorer 7. Im IEBlog sind zu dessen Entwicklung immer mal wieder einige Details zu erfahren, Lippenbekenntnisse bis dato, aber das kann schon Hoffnung machen:

  • Support the alpha channel in PNG images. We’ve actually had this on our radar for a long time, and have had it supported in the code for a while now. We have certainly heard the clear feedback from the web design community that per-pixel alpha is a really important feature.
  • Address CSS consistency problems. Our first and most important goal with our Cascading Style Sheet support is to remove the major inconsistencies so that web developers have a consistent set of functionality on which they can rely. For example, we have already checked in the fixes to the peekaboo and guillotine bugs documented at positioniseverything.net so use of floated elements become more consistent.

Chris Wilson – IEBlog

Via: Veerle’s Blog

Die längst überfällige Unterstützung von transparenten PNGs soll also kommen. Das ist ein &emdash; nicht zu unterschätzendes &emdash; Feature, das direkte Auswirkungen auf die Ansehnlichkeit von Webseiten haben kann. Viel zu lange mussten wir mit Blick auf IE<7 auf die intensive Nutzung verzichten.

Die angesagte Beseitigung von floating-bugs freut natürlich auch, man kann alerdings nur hoffen, dass dies in einer Weise geschieht, dass geläufige CSS-Hacks überleben können. Sonst haben alle passionierten Hack-Nutzer ein hässliches Problem. Vielleicht hat ja auch schon mal jemand vom IE-Entwicklungsteam eine standardgemäße Website gebaut und weiss worum es geht (… vielleicht auch nicht).

Eins ist jedoch sicher, wenn IE7 kommt, ist damit noch lange nicht der Webdesignhimmel erreicht. Man überlege nur einmal, wie lange wir schon IE5 unterstützen (würg). Windowsuser sind ja sowas von updatefaul, herrje! Aber vielleicht geht dann IE5 langsam mal ein… IE6 wird uns noch viele viele Jahre nerven. Und wer weiss schon, was IE7 wieder an lustigen Bugs mitbringt…

Floatbreaker

Noch gestern haben Fabian und ich uns über meine mannigfaltigen Benamsungen für CSS-Klassen amüsiert und zwar für solche Konstruktionen:

<div class="floatbreaker">&nbsp;</div>

Ganz klar, hier wird folgender Effekt erzielt: Der Container um zwei Elemente, von denen eines gefloatet ist, wird soweit heruntergezogen, dass er beide Elemente umschliesst. Wichtigste Eigenschaft der Klasse .floatbreaker ist clear: both; im CSS. Das ist nötig, weil das gefloatete Element aus der Blockkonstruktion herausfällt und über den Rand des umschließenden Elementes herausgeht, wenn es länger ist, als der Content des Containers.

Aber schön ist das nicht. Zum einen muss man .floatbreaker seltsame Einstellungen geben, damit es allerhöchstens 1px hoch ist. Das kann man auch noch vermeiden, indem man die Konstruktion so einsetzt:

<div class="floatbreaker"><!-- --></div>

Zum anderen haben wir es hier mit semantisch unsinnigem Code zu tun, der keine inhaltliche Funktion hat —wie auch, ohne Inhalt— und im Grunde ein hässlicher Hilfsanker ist.

Gestern abend nun plötzlich finde ich folgende neue Techniken in der Diskussion, und ehrlich gesagt, die gefallen mir viel besser:

Im Kern haben diese neuen Techniken eine Idee: dem Container-Element wird eine overflow-Eigenschaft zugeordnet. Wer allerdings jetzt dachte, das funktioniert ohne Hacking in allen Browsern… natürlich nicht.

I’m the floatbreaker
the real undertaker

(Traditional)

CSS basteln: Schriftgrösse

Mit der Schrift auf Webseiten, das ist ja so eine Sache. Idiotischerweise ist die allgemeine Standardgrösse der Schrift in den meisten (nicht allen) Webbrowsers 16px (sag ich jetzt mal so, auch wenns auch schon wieder nicht wirklich stimmt, aber das würde schon fast wieder zu weite gehen). Das ist jedenfalls um einiges größer, als alle andere Schrift, die einem so auf dem Desktop des Computers oder in anderen Programmen begegnet. Schwachsinn. Muss also kleiner.

Früher gab es darauf eigentlich nur eine Antwort: Pixel. Das war durchaus eine ganze Zeit üblich: seine Schriftgrössen in Pixeln anzugeben, aber unser aller Lieblingsbrowser (würg) IE kann diese Schrift dann nicht vergrössern (mithilfe des Menüpunktes „Darstellung – Schriftgrösse“). Also null usability.

Da gibt’s dann aber noch ems. Eine relative Schriftgrösse (aus ganz alten Zeiten, als man noch auf Papier druckte ;), genaueres bitte dringend bei Gerrit nachlesen. Problem: wieder IE, alles unter 1em macht er unlesbar klein, warum auch immer. Shit.

Und nun? Ich mache immer folgendes: ich setze die Schriftgrösse für den body im CSS auf 62.5%. Warum jetzt dieses? Nun, dass sind bei einer Ausgangsgrösse von ungefähr 16px widerum ungefähr 10px, was schon ziemlich klein ist, aber noch lesbar. D.h. 1em entspricht 10px. Und oh Wunder, 1.1em entsprechen 11px und so fort. So baue ich die Seite dann erstmal und meistens bleibt es dann auch so. Alle Schriften werden in em angegeben. Wenn dann ein Kunde kommt, und die Schrift in der Standardeinstellung grösser haben will, dann erhöhe ich einfach den Prozentwert des Body-Fonts. Alle Schrift wird grösser.

Das ja genial. Finde ich auch, war aber leider nicht meine Idee. Trotzdem.

  1. body {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 62.5%;
  4. }