IE7 besser als sein Vorgänger? Technikwürze 46

Montag, der 13.11.2006. Mein Name ist David Maciejewski und ich heiße euch herzlich willkommen zur Technikwürze Nummer sechsundvierzig, eurem Design- und Webstandards-Podcast. Dirk Jesse hat für die Webkrauts einen Artikel verfasst über den Internet Explorer 7. Der Titel: „IE7 besser als sein Vorgänger". So haben wir den Artikel hier genannt. Den lese ich euch vor, aber zunächst erst mal gut, dass sie wieder dabei ist: Nadja Müller. Schlagzeilen.

Die Zukunft von HTML. Die Webkrauts folgen dem Auftrag der Hypertext Application Technology Working Group und rufen zur Beteiligung an der Zukunft von HTML auf. Der Aufruf ist eine Reaktion auf die aktuelle Diskussion um die Entwicklung von HTML und XHTML und fordert Fragen, Kommentare, Kritiken, Beschwerden oder Wünsche rund die Markup-Sprache.

Wer selbst seinen Kommentar hinterlassen möchte, kann sich die an die im Webkrauts-Artikel genannten englischsprachigen Seiten wenden oder sich in deutscher Sprache an die Webkrauts, die sich dann um Weiterleitung und Übersetzung kümmern. Linktipps rund um HTML, CSS und Design. In der aktuellen Leseempfehlung geht es um ganz praktische Dinge, die uns in der täglichen Arbeit immer wieder begegnen können. Tommy Olsen führt in siebenunddreißig Schritten zum perfekten Markup.

Jonathan Snook und Roger Johansson geben Tipps für gutes CSS. Einen Exkurs zum Thema Farbe bietet das Digital Web Magazine. Fantastic verrät die Geheimnisse erfolgreicher Designer. Und wie arbeiten eigentlich diverse Screenreader und Lupenprogramme mit dem Internet Explorer 7 zusammen? Microsoft gibt im IE-Blog Antworten.

Die Links dazu im Blog auf Technikwütze DE. Die Hörer kommen zu Wort. So muss das gehen. Die Hörer kommen zu Wort. Das ist die Rubrik, wo ihr, liebe Hörer, zu Wort kommen sollt. Dieses Mal ist Steffen Voss, von der Partie und er hat sich mich gefragt, wie er Bildunterschriften in HTML erstellt und, eventuell 'ne Lösung findet mit CSS. Er hat ein bisschen geforscht und seine Ergebnisse gibt es jetzt.

Wenn ihr auch etwas habt für den Technikwütze-Podcast, wenn ihr 'n Kommentar habt oder ihr habt irgendwelche Fragen, dann bitte ruft uns an: null fünf elf einundzwanzig siebenundzwanzig dreihundert. Steffen Voss kommt jetzt. Moin, moin. Es gibt ein gängiges Problem in Artikeln: Bilder mit Bildunterschriften. Leider bietet HTML dafür keine generische Lösung. Also muss man sich damit rumschlagen, wie man es sonst machen kann.

Zwar gibt es das Alt-Attribut und Long Desk, aber Long Desk ist zum Beispiel nur im Firefox und in Netscape sechs verfügbar. Außerdem sind diese Tags unsichtbar und erfüllen einen anderen Zweck. Zum Beispiel, wenn man ein Bild mit einem Auto drauf hat, soll in dem Alt-Attribut stehen „rotes Auto" und in der Long Description vielleicht so etwas wie „Rotes Auto steht auf dem Sandparkplatz vor einer sommerlichen Meeresszenerie". Die Bildunterschrift soll aber lauten „Hübscher Klimakiller".

Früher war die Sache ganz klar: Da hat man eine Tabelle genommen, eine Spalte, zwei Zeilen, oben das Bild rein und unten den Untertitel. Heutzutage sollte man es nicht mehr so machen, weil man hier die Tabelle nur für Layoutzwecke missbraucht. Sie sorgt hier ja nur dafür, dass die Bildunterschrift unter dem Bild erscheint. Damit ist es semantisch falsch. Eventuell ließe sich das Ganze noch rechtfertigen, wenn man die Zeilen beschriftet und dann per CSS unsichtbar macht.

Eventuell ließe sich das noch rechtfertigen, wenn man die Zeilen beschriftet. Für die obere Zeile Foto und für die untere Untertitel. Das Ganze im TH-Tag und dann mit Scope Row. Oder man benutzt das Caption-Tag und positioniert es per CSS unter dem Bild und hat dann eine Tabelle mit einer Zelle. Aber schlau ist das alles nicht. Schon vor da, vor einiger Zeit gab es dazu auf A List Apart einen Artikel, in dem Bilder und Bildunterschrift in einer Definitionsliste positioniert wurden.

Leider kann ich den Artikel gerade nicht wiederfinden, sonst würde ich ihn natürlich hier auch irgendwie verlinken lassen. Eine Definitionsliste besteht jeweils aus einem Tag, das die Liste öffnet und schließt, sowie aus einem Tag-Paar für das beschriebene Element und das beschreibende Element. In diesem Fall wird es angewendet, um das Bild durch die Bildunterschrift zu beschreiben. Aber definiert die Bildunterschrift „Hübscher Klimakiller" wirklich das Bild, auf dem ein rotes Auto zu sehen ist?

Meiner Meinung nach eher nicht. Gehört die Bildunterschrift nicht trotzdem so eng zu dem Bild, dass sie eigentlich ins Img-Tag selbst gehört? Mein Diskussionsvorschlag wäre, die Bildunterschrift einfach per Title-Attribut ins Img-Tag zu schreiben und dann per CSS auszugeben. CSS 2.0 bietet dafür die Pseudoklassen before und after. Damit müsste es möglich sein, nach dem Image-Tag automatisch den Inhalt des Title-Attributs auszugeben.

Den entsprechenden Codeschnipsel wird David auf seiner Webseite veröffentlichen. Leider beherrscht der Internet Explorer dieses Konstrukt noch nicht und ich hab keine Ahnung, ob das jetzt in, im Internet Explorer 7 zumindest schon gelöst ist. Vielleicht könnt ihr in den Kommentaren bei technikwütze.de eure Meinung dazu abgeben. Mich würde das sehr interessieren. Viel Spaß noch weiterhin mit Technikwütze und ein Gruß von mir. Ich bin auch gespannt.

Hinterlasst eure Kommentare bitte im Kommentarbereich auf technikwütze.de. Schickt eine E-Mail an echo@technikwütze.de oder ruft uns an unter null fünf elf einundzwanzig siebenundzwanzig dreihundert. Und habt keine Angst, das ist keine 0190er-Nummer, wo ihr richtig viel Geld bezahlt. Also null fünf elf einundzwanzig siebenundzwanzig dreihundert. Jetzt kommt erst mal der Internet Explorer 7. Besser als sein Vorgänger? Der Test.

Seit dem achtzehnten Oktober gibt es ihn nun, den Internet Explorer sieben zum Download. Zunächst nur in englischer Sprache, wodurch hierzulande kaum jemand Notiz von Microsoft neuen Browser genommen hat. Doch das hat sich mit dem am ersten November veröffentlichten deutschen Version geändert und Microsoft meint es durchaus ernst. Der Internet Explorer sieben wird auch als hochkritisches Windows Update den Weg auf den heimischen XP Rechner finden. Die Tages des IE sechs sind also gezählt.

Höchste Zeit, sich mit dem neuen Browser eingehend zu beschäftigen. Neues auf der Anwenderseite. Die Benutzeroberfläche scheint sich bereits am neuen Windows Vista-Look zu orientieren und ist mit Sicherheit gewöhnungsbedürftig. Sie zeichnet sich durch eine einfache Zugänglichkeit wichtiger Funktionen, unter anderem Zoom, Druckvorschau, Pop up Blocker und so weiter aus, die mit wenigen Klicks erreichbar sind.

Mit Tablet Browsing führt Microsoft eine Funktion ein, die in der Mozilla Familie, in Safari und beim Opera schon seit vielen Jahren bekannt und beliebt ist. Mit ihr wären mehrere Webseiten als Karteirader innerhalb eines Fensters verwaltet. Die Überfüllung der Windows Taskbar wird so verhindert. Mit RSS Feeds hat sich ein XML Standard etabliert, der eine Nachrichtenabfrage von Webseiten ermöglicht. Solche Feeds können abonniert oder automatisiert abgerufen werden.

So kann der Nutzer in einfacher und unkomplizierter Weise auf Informationen vieler verschiedener Seiten zugreifen. Ein einfacher Feed Reader ist vergleichbar zu anderen Browsern nun im IE sieben bereits integriert. Durch einen integrierten Phishing-Filter soll die Sicherheit vor Betrügern erhöht werden. Mittels Phishing werden Nutzer auf betrügerische Webseiten zur Herausgabe von Passwörtern oder Zugangsdaten animiert. Der Firefox bietet übrigens seit Version zwei eine ähnliche Funktion an.

Eine neue komfortable Druckvorschau vereinfacht das Drucken von Webseiten. Layouts werden automatisch auf Webseitenbreite skaliert, Seitenränder lassen sich schnell und unkompliziert anpassen, Kopf- und Fußzeilen können auf Wunsch ausgeblendet werden. Ebenso wie der Firefox lässt sich der Internet Explorer sieben durch Add ons in Funktionsumfang erweitern.

Die Darstellungsqualität von Webseiten beziehungsweise die Lesbarkeit von Texten wird durch das standardmäßig aktivierte Kantenglättungsverfahren Clear Type verbessert. Statt des bisher üblichen Textzooms, bei dem lediglich die Schriftgröße von Texten vergrößert wird, bietet der IE sieben einen sogenannten Seitenzoom. Dabei werden neben der Schriftgröße auch alle anderen Elemente der Webseite, Grafiken, Abstände und Spaltenbreiten skaliert.

Ein ähnliches Verfahren ist bereits vom Opera Browser bekannt. Der praktische Umgang mit dem neuen Browser geht nach einer kurzen Eingewöhnungsphase gut von der Hand. Auf der Anwenderseite ist der Browser damit endlich auf der Höhe der Zeit und bietet zu Firefox, Safari und Opera und Co. einen vergleichbaren Funktionsumfang und Komfort. Durch den integrierten Phishing-Filter steigt zudem das Sicherheitsniveau.

Der erste Eindruck ist daher durchaus positiv, obwohl nicht alle Details optimal gelöst sind. Seitenzoom: Ärger vorprogrammiert. Eine der gravierendsten, jedoch bisher am wenigsten bekannten Änderungen ist das neue Zoomverhalten. Dabei betrachtet der Browser das Ergebnis des Rendering-Prozesses wie ein beschriebenes Blatt Papier, das anschließend als Ganzes vergrößert oder verkleinert werden kann.

Dabei werden nicht nur mehr Schriftgrößen skaliert, sondern das gesamte Layout einschließlich aller Abstände, Größenangaben, Bildern und Grafiken. Dieses Zoomverhalten ist Opera-Nutzern seit der Version acht vertraut. Allerdings berücksichtigt der Opera dabei sowohl flexible Layoutbreiten als auch eine Zentrierung des Layouts. Der IE sieben tut dies nicht. Was auf den ersten Blick Vorteil hat und sinnvoll erscheint, erweist sich in der Umsetzung bei näherer Betrachtung als Zeitbombe.

Durch das neue Zoomverhalten wird im IE sieben ab sofort jedes Layout skalierbar, egal ob es als fixes oder flexibles Layout entworfen wurde. Da die Mehrzahl der Layouts im Internet auf fixe Breiten optimiert ist, ergibt das hieraus theoretisch ein Zugewinnen an Zugänglichkeit. Praktisch führt dieses Verhalten jedoch zu massiven Problemen. Beispielsweise funktionieren flexible Layouts nur noch eingeschränkt, da die eigentliche flexible Breitenvorgabe nur beim initialen Rendering betrachtet wird.

Skaliert wird anschließend, als ob es sich um ein fixes Layout handeln würde. Es wird also einfach alles größer, was bei einhundert Prozent Breitenlayouts umgehend zu horizontalen Scrollbalken führt. Auch die Zentrierung eines Layouts wird durch den Seitenzoom zerstört. Die seitliche Außenabstände werden unsinnigerweise mitskaliert. Sollte sich dieses Zoomverhalten durchsetzen, stellt dies den Sinn flexibler Layouts generell infrage. Änderungen in der Rendering Engine.

Für Webentwickler war der Internet Explorer sechs aufgrund seiner zahlreichen CSS Bugs und der für die heutigen Verhältnisse mäßigen Unterstützung des CSS zwei Standards eine nie versiegende Quelle für Darstellungsprobleme und Frust unter Webdesignern. Daher werden auch die Änderungen im Bereich des Renderingverhaltens über Erfolg und Misserfolg des IE sieben entscheiden.

In bisher beispielloser Offenheit hat Microsoft Webentwickler im Verlauf der letzten zwölf Monate am Reifeprozess des Internet Explorer sieben teilnehmen lassen. Über insgesamt drei Betaphasen und einen Release Kandidat konnten die Fortschritte des Browsers im Bereich des Renderings zeitnah mitverfolgen und Umfragen mitbestimmen.

Der Schwerpunkt der ersten neuen IE-Version nach nunmehr fünf Jahren lag dabei weniger auf der Erweiterung der CSS2 Unterstützung, sondern viel mehr auf der Beseitigung der zahlreichen Bugs. Weniger CSS und Parser Bugs. Die Liste der CSS Änderungen im IE Blog ist erfreulicherweise lang, denn durch die zahlreichen Fehlerkorrekturen wird die Layoutentwicklung spürbar einfacher. Ich beschränke mich im Rahmen dieses Artikels auf eine Zusammenfassung der wichtigsten Änderungen.

Ausgangsbasis für die Beseitigung der CSS Bugs war offensichtlich die hervorragende Bugdokumentation auf Position is everything punkt net. Fast alle auf der Seite aufgeführten CSS Bugs des Internet Explorer fünf und sechs wurden behoben. Hervorzuheben sind dabei in erster Linie der Peekaboo und der Guillotine Bug, mit denen sicherlich fast jeder Homepage Bastler schon einmal Bekanntschaft gemacht hat.

Springende und oder teilweise verschwindende Inhalte bei Hovereffekten und bei Hyperlinks waren das Ergebnis. Das sogenannte Expanding Box Problem des IE sieben und sechs, das automatische Einschließen von Elementen innerhalb einer Box, bereitete insbesondere in der Layoutentwicklung Kopfzerbrechen. Etwas umständlich ist, warum der letzte verbliebene Bug auf der Liste der Escaping Flows Bug nicht ebenfalls behoben wurde.

Nach fünf Jahren Entwicklungspause hätte ich mir von Microsoft mehr Ehrgeiz und Konsequenz gewünscht. Hinzu kommt: Die Liste auf Position is everything punkt net enthält nicht alle CSS Bugs der älteren Browserversion, sondern lediglich die bekanntesten Exemplare. Der IE sieben ist daher trotz der zahlreichen Bugfixes nicht gänzlich fehlerfrei.

Ich habe den Entwicklungsprozess durch meine Arbeit an Jaml kontinuierlich verfolgt und eine kleine Sammlung an CSS Bugs zusammengestellt, die nicht beseitigt beziehungsweise neu hinzugekommen sind. Neben den zahlreichen CSS Bugs wurde auch der überwiegende Teil der Parser Bugs behoben. Parser Bugs sind Fehler beim Lesen von CSS. Sie ermöglichen bei gezielter Ausnutzung sogenannter Parser Hacks das Verstecken von einzelnen CSS Definitionen vor dem Internet Explorer.

Alternativ kann man dafür für den IE sieben lesbare Anweisungen formulieren. Parser Hacks werden daher in der Vergangenheit ein beliebtes Mittel zur Korrektur von CSS Bugs. Webseiten, die massiv auf solche Parser Hacks bauen, werden jedoch unter Umständen vermehrt mit Darstellungsfehlern im IE sieben zu kämpfen haben. Kritisch sind hier insbesondere Situationen, in denen der zu fixende CSS Bug noch aktiv ist, der Parser Bug samt Bugfix jedoch nicht mehr funktioniert.

Der beste und auch von Microsoft empfohlene Weg, um den Internet Explorer sieben mit speziellen Stilanweisungen zu versorgen, sind daher die Conditional Comments. In der Summe verhält sich der Internet Explorer sieben damit deutlich standardkonformer als sein Vorgänger. Durch die zahlreichen behobenen Bugs können CSS Layouts im IE sieben in der Regel ohne nennenswerte Anpassungsaufwand gegenüber anderen Browsern erstellt werden. Schwieriger sieht die Lage bei der Browserunterstützung aus.

Da der IE sieben ausschließlich für Windows XP mit installiertem Service Pack zwei und für das kommende Windows Vista zur Verfügung steht, wird er den Internet Explorer sechs sicherlich nicht ganz von der Bühne verdrängen können. Nutzer älterer Windows Version oder Windows XP ohne installiertes Service Pack zwei schauen hingegen in die Röhre. Für Webdesigner wird es damit nicht gerade einfacher, denn sie müssen auch noch eine dritte Browsergeneration unterstützen.

Erweiterung der CSS Unterstützung. Wie bereits angesprochen, lag der Schwerpunkt der Arbeiten nicht auf einer Erweiterung der CSS Fähigkeiten des Browsers. Es ist daher wenig verwunderlich, dass sich in diesem Bereich relativ wenig getan hat. Dennoch gibt es einige interessante und wichtige Neuerungen zu vermelden. Die Pseudoklasse Hover kann nun mit allen HTML Elementen verwendet werden und ist nicht mehr auf Hyperlinks beschränkt.

Ab sofort werden die CSS Eigenschaften Min Width, Max Width sowie Min Height und Max Height unterstützt. Die CSS Eigenschaft Position Fixed wird unterstützt. Die Übergabe mehrerer CSS Klassen in der Form Class gleich Klasse eins, Klasse zwei funktioniert jetzt fehlerfrei. Der IE sieben bringt endlich die vollständige Unterstützung von PNG Grafiken einschließlich der Alpha Transparent mit, wodurch sich für den Webdesigner zahlreiche neue Möglichkeiten der Layoutgestaltung ergeben.

Eric Eggert hat in seinem Webblog bereits vor einigen Wochen die aus seiner Sicht zehn wichtigsten Neuerungen des IE sieben zusammengefasst. In Sachen CSS2 Unterstützung ist der Sprung nach vorn nicht so groß wie bei der Windows Verträglichkeit. Als Webdesigner habe ich daher gemischte Gefühle. Einerseits freue ich mich über die beseitigten CSS Bugs, andererseits hätte die Liste durchaus vollständiger ausfallen können. In erster Linie wurden bekannte und gut dokumentierte Bugs beseitigt.

Eine vollständige Überarbeitung der Rendering Engine, bei der man sicherlich zahlreichen weiteren Bugs auf die Schliche gekommen wäre, gab es hingegen nicht. Wenig erfreulich ist auch die geringe Erweiterung der CSS2 Fähigkeiten. Die Unterstützung von minimalen und maximalen Breiten oder auch die Implementierung der fixen Positionierung sind erfreulich, aber auch längst überfällig und zugleich nur ein Tropfen auf den heißen Stein.

Die Methoden der Layoutentwicklung haben sich seit 2001 signifikant weiterentwickelt. Stichwort Easy Clear. Die fehlende Unterstützung erweiterter CSS2 Selektoren, zum Beispiel Pseudoklassen after und before, ist daher umso bedauerlicher, zwingt sie die Webentwickler doch auch weiterhin zu speziellen Anpassungen für den Internet Explorer 7 und schränkt die Einsatzmöglichkeiten dieser interessanten Gestaltungselemente von CSS2 auch weiterhin ein.

Der Internet Explorer 7 ist in Sachen CSS daher eher ein IE6 mit weniger Bugs. Für die Zukunft hat Microsoft jedoch Besserung gelobt. In jährlichen Updates soll der Browser weiterentwickelt werden. Nachdem der Schwerpunkt der aktuellen Version auf einer verbesserten Sicherheit bei Nutzerfreundlichkeit lag, soll in zukünftigen Versionen die CSS-Unterstützung erweitert werden. Fazit: Der neue Browser ist da und er darf nicht ignoriert werden.

Über die automatische Verbreitung per Windows Update wird er sich sicherlich vermutlich bereits binnen weniger Monate als neuen Marktführer etablieren. Höchste Zeit also, sich mit ihm vertraut zu machen. In Bezug auf die Unterstützung von Standards ist es auf alle Fälle ein Schritt nach vorn. Ob Microsoft mit dem IE7 der große Wurf gelungen ist, bleibt jedoch abzuwarten. Die Entwicklung geht auf jeden Fall in die richtige Richtung, daher fällt mein Fazit für den Moment positiv aus.

Der neue Browser muss sich aber erst seine Spuren verdienen und Stabilität beweisen. Ob die Anzahl der CSS-Bugs wirklich zurückgegangen ist oder ob neue Bugs auftauchen, wird erst die Praxis zeigen. Der Text stammt von Dirk Jesse und wurde veröffentlicht auf Webkrauts.de. Die Links und den Text dazu auf Technikwürze.de. Musik präsentiert von Podsave Music Network.

Zum Ausklang des Technikwürze Podcast Nummer sechsundvierzig von Montag, den 13.11.2006, hab ich toll auswendig gelernt, ne, gibt es für euch Dorian Spencer mit New Mexico. Das wollt's von hier gewe-- das, ha, das soll's von hier gewesen sein. Ich würde mich freuen, wenn ihr auch nächste Woche Montag mit ganz interessanten Themen wieder einschalten würdet, wenn es wieder heißt Technikwürze. Ich sag bis dahin, ich halt jetzt mal den Mund.

Time passes and years bring change. People grow and memories remain. Love shines in different ways. When you're thinking of the good old days. Like a dream I had and want to have again. Someday I'll go back and do what I did then. In New Mexico, where my soul was free. In the land of enchantments and wood stoves and juniper trees. A distant view, far as I could see. Of tipis and hot springs and pictures by Georgia O'Keeffe. Oh yeah. Rich land in bright sunshine. Flash floods and old coal mines.

Ghost towns in silent nights. Paper bags with candle lights. Adobe homes and old dirt roads. All I can think of now is New Mexico. I say New, New, New, New Mexico. Oh yeah. Oh. Oh yeah. I say New, New, New, New Mexico. Oh yeah. Oh. Oh. Time passes and years bring change. People grow, oh, and memories remain. Memories remain. Memories remain. Yes, they do.