Weblog

Schlankerer Framework-Core

Die wichtigste Änderung gleich zu Beginn: YAML besteht nunmehr nur noch aus zwei Kernbausteinen. Die base.css ist das Herzstück des Frameworks und stellt dem Nutzer ein schonendes Browser-Reset, oft benötige CSS-Klassen für die Layouterstellung (Float Clearing, Skiplinks, ect.), die “Subtemplates” als flexible Grid-Bausteine, ein universelles Fallback auf ein dreispaltiges Basislayout und wichtige Vorgaben für eine fehlerfreie Druckausgabe bereit. Über den zweiten Baustein, die iehacks.css werden die älteren Versionen des Internet Explorers 5.x bis 7.0 mit Bugfixes versorgt, die so formuliert sind, dass sie ohne Eingreifen des Anwenders den überwiegenden Teil der CSS-Bugs dieser Browser korrigieren. Der ehemaliige dritte Baustein, die print_base.css ist in der base.css aufgegangen.

Eine Umstrukturierung der medienspezifischen Definitionen innerhalb der base.css ermöglichte weiterhin einige Vereinfachungen der Codebasis, sodass trotz der Erweiterung der Grid-Komponente der gesamte Framework-Core insgesamt fast 600 Byte (ca. 10%) kleiner geworden ist. Mit den Wegfall der print_base.css kann zudem ein HTTP-Request eingespart werden (zumindest, wenn man die finalen Stylesheets nicht zusammenfasst) und in modernen Browsern wie dem Internet Explorer 8, Firefox, Opera, der Safari benötigt der YAML-Core nur noch 2,34 kB (slim_base.css). Ausschließlich die veralteten Versionen des Internet Explorers 5.x – IE 7.0 müssen den vollständige Core mit 5,04 kB laden.

Neue Features & Altlastenentsorgung

Wie mit fast jeder YAML-Version wird auch mit YAML 3.2 der Funktionsumfang des Frameworks leicht erweitert. Die Subtemplates (die Grid-Komponente von YAML) erhält vier weitere Unterteilungen (20%, 40%, 60% und 80%). Selbstverständlich besteht auch hier die Möglichkeit, gleiche Containerhöhen über die Klasse .equalize zu erzwingen. Daneben steht mit einem weiteren Add-on, dem SyncHeight-Plugin für jQuery, eine JavaScript-Alternative für das Erzwingen gleichhoher Container zur Verfügung.

Der Formularbaukasten ist ebenfalls flexibler geworden. So ist die Klasse .yform nicht mehr an das form-Element gebunden, was den Einsatz in Content Management Systemen wie z.B. ExpressionEngine vereinfacht, bei denen der form-Tag automatisch vom CMS generiert wird. Die zusätzliche Darstellungsklasse .full hilft bei Platzproblemen (schmale Formulare) und erzeugt Input-, Select-Felder und Textareas mit voller Breite des umgebenden Elternelementes. Ein neues Layoutbeispiel demonstriert, wie einfach und komfortabel sich mehrspaltige Formulare mit YAML erstellen lassen.

Neben diesen neuen Möglichkeiten, wurden mit diesem Release auch einige Altlasten beseitigt. So wurden die IE-Fixes für die ehemaligen ID’s #page_margins und #page aus der iehacks.css entfernt. Beide ID’s werden seit YAML 3.1 (Januar 2009) in mehrfach verwendbare Klassen umgewidmet. Einen echten Feature-Drop betrifft der Verzicht auf die Möglichkeit, Spaltenhintergründe mit Hilfe der Border-Definition von #col3 zu erzeugen. Zwar ist diese Technik denkbar einfach in der Umsetzung, sie beschwört aber in Verbindung mit den Windows-Kontrastmodi ein Zugänglichkeitsproblem herauf, da in diesen Modi Vordergrund- und Rahmenfarben auf den gleichen Farbwert gesetzt werden, infolgedessen Inhalte mit dahinterliegenden farbigen Rahmen (den simulierten Spaltenhintergründen) z.T. nicht mehr lesbar sind. Erschwerend kam hinzu, dass diese Technik im Internet Explorer ein Anpassung des z-index von #col3 bedurfte, was in seltenen Fällen das Selektieren von Inhalten mit der Maus im Browser blockierte.

Ein oft diskutierter Punkt unter vielen Framework-Anwendern war bisher der Workaround zur Vermeidung seitlich springender, zentierter Layouts im Firefox und Safari durch Erzwingen eines vertikalen Scrollbalkens. Mit der Veröffentlichung der neuen Browsergenerationen Internet Explorer 8, Firefox 3.5, Safari 4 und Opera 10 wurde die bisherige Lösung unbrauchbar und deshalb aus dem Core entfernt. An ihre Stelle tritt eine CSS3-basierte Lösung (overflow-y: scroll), welche nunmehr in den Nutzerstylesheets (basemod.css) verankert ist und somit von jedem Anwender bei Nicht-Gefallen einfach deaktiviert/entfernt werden kann.

Ebenfalls ersatzlos gestrichen wurde das Debug-Stylesheet (debug.css), welches mit der Version 3.0 Einzug in das Framework gehalten hatte. Zu sehr litt die Übersicht bei der Vielzahl der gleichzeitig eingeblendeten Informationen. Die fehlende Konfigurierbarkeit und die umständlichen Handhabung waren ebenfalls nicht vorteilhaft. Mit dem bereits im Febuar 2009 veröffentlichten Codeanalyse-Tool YAML Debug steht YAML-Entwicklern eine deutlich bessere und vielseitigere Alternative zur Verfügung, die mit einem einzigen Klick jedes Layout analysiert.

Handwerkszeug für die Barrierefreiheit

Kein Framework, auch nicht YAML, ist ein Garant für barrierefreie Webseiten. Dennoch zeigt sich mehr und mehr, wie sinnvoll und richtig es ist, Webentwicklern das grundlegende Handwerkszeug innerhalb des Frameworks zur Verfügung zu stellen. In YAML 3.2 wird eine neue Darstellungsmöglichkeit für Skiplinks unterstützt, die ein Überlagern des Layouts für die eingeblendeten Skiplinks ermöglicht und dadurch die sonst üblichen Probleme bei deren Integration beseitigt. Zudem wird für Webkit-basierte Browser ein JavaScript-Fix mitgeliefert, um auch Apple’s Safari und Google Chrome dazu zu bewegen, den Focus auf die angesprungene ID zu setzen.

Ein weiterer Schritt ist die konsequente Einbeziehung von WAI-ARIA. Sämtliche bei YAML mitgelieferte Beispiellayouts wurden mit ARIA-Landmarkroles versehen. Zwar handelt es sich hierbei nicht wirklich um ein Feature des Frameworks (die korrekte Auszeichnung sollte der Webentwicklers vornehmen), dennoch halte ich auch diesen Schritt für wichtig, um als Framework-Entwickler trotz der noch fehlenden Validierungsmöglichkeiten im W3C-Validator die positiven Effekte des kommenden Standards hervorzuheben. Schon heute können alle modernen Browser (einschließlich des IE8) mit WAI-ARIA umgehen und ermöglichen somit einen deutlichen Zugewinn an Barrierefreiheit auf Webseiten jeder Komplexitätsstufe.

Das “Accessible Tabs” Plugin von Dirk Ginader wird mit YAML 3.2 als Add-on ein fester Bestandteil des Frameworks. Das dahinter stehende Konzept habe ich zusammen mit Dirk Ginader bereits vor zwei Jahren entwickelt, die Umsetzung im Rahmen dieses Plugins ist mittlerweile ausgereift und umfangreich getestet. Auch dieser Baustein ist weniger als Feature des Frameworks zu sehen. Stattdessen bemühe ich mich darum, zusammen mit YAML sinnvolle Best-Practice-Lösungen zu vermitteln und die Verbreitung dieser Techniken zu fördern.

Zusammenfassung

Neben diesen großen Neuerungen/Verbesserungen stehen zahlreiche kleinere Korrekturen hier und da, über die das Changelog im Detail Ausfunft gibt. Wie mit jedem Release wurde auch die Projektvorlage “Simple Project” auf den aktuellen Stand gebracht.Der YAML Builder beherrscht momentan WAI-ARIA noch nicht und auch die neue Skiplink-Variante ist dort noch nicht implementiert, die Codeausgabe ist aber selbstverständlich kompatibel zu YAML 3.2.

Der Release-Zyklus war diesmal deutlich länger, zudem zwischen v3.1 und v3.2 keine sogenannten Maintenance-Releases eingeschoben wurden. Der Hauptgrund hierfür lag in der eng gestaffelten Veröffentlichung der aktuellen Browsergeneration, angefangen mit dem Internet Explorer 8 im Frühjahr 2009. Gerade bei diesem war es wichtig, die zuverlässige Funktion der Kernfunktionen des Frameworks ohne jegliche Hacks zu überprüfen. Nach nunmehr einem halben Jahr lässt sich dieser Fakt bestätigen. Einzig bei der Darstellung von Formularen benötigt der Internet Explorer 8 noch wenige individuelle Hilfestellung, die notwendigen Anpassungen kennt der Formularbaukasten jedoch.

Daneben stellt das 3.2-Release für mich eine weitere Schärfung des Profils von YAML hinsichtlich des modularen Aufbaus auf Basis eines sehr schlanken Kerns und der Focussierung auf flexible, barrierefreie Webseiten dar. Und die Entwicklung geht weiter ...

Im Grunde ist der Umstieg auf Adobe AIR nicht weiter schwer und so bringt die AIR Applikation gleich mehrere Vorteile mit sich. Zum einen ist kein Flash-Plugin mehr erforderlich denn AIR bringt eine native Unterstützung zur Befütterung des Clipboards mit. Zum zweiten – und das dürfte der interessantere Punkt sein – hat man in einer Adobe AIR Applikation Zugriff auf das lokale Filesystem. Und drittens benötigen AIR Applikationen keinen Browser und auch keine Internetanbindung mehr, womit sich auch die Anwenderfreundlichkeit weiter erhöhen dürfte.

Der Screenshot des experimentellen YAML Builders unter AIR zeigt deshalb bereits ein neues Feature, den vollständigen Exports des YAML-Projekts in ein lokales Nutzerverzeichnis. Die copy & paste Orgien könnten damit der Vergangenheit angehören. Der vom Builder generierte Code kann mit einem Klick lokal gesichert werden als indiviudell konfiguriertes “Simple Project”. Parallel steht die Clipboard-Ausgabe einzelner Files weiterhin zur Verfügung.

Das ist zunächt einmal ein Testbalon – zu einer stabilen Version ist noch ein Stückchen hin. Im nächsten Schritt werde ich mir anschauen müssen, wie unter AIR die Versionsverwaltung und automatische Updates funktionieren, sonst macht eine solche Applikation auf Dauer keinen Sinn. Das ist der Vorteil eines Online-Dienstes, hier hat man immer volle Versionskontrolle.

Natürlich schreibe ich diesen Blogbeitrag nicht grundlos. Ich möchte Feedback zu dieser Idee an sich und weitere Tipps für kleine Änderungen, welche bei dieser Gelegenheit gegebenenfalls am Builder vorgenommen werden könnten/sollten. Falls jemand der Mitlesenden bereits Erfahrungen mit Adobe AIR gesammelt hat wäre ich ebenfalls dankbar, wenn ich gelegentlich die eine oder andere Frage loswerden könnte, die sich sicherlich noch auftun wird.

Zum Thema CSS-Sprites gibt es weiterhin eine kleine Demo von David, welche er soeben online bereit gestellt hat.

Weitere Vorträge im Netz:

• Jan Eric Hellbusch, “WCAG 2.0 und BITV2 für Einsteiger”
• Jens Meiert: HTML5: Barrierefreiheit, Performance, Wartbarkeit
• Christian Heilmann: Barrierefreiheit im Datennetz

Veranstaltungen & Vorträge

Heute Nachmittag geht mein Flieger nach Düsseldorf, wo morgen zum Dritten Mal das “Best of Accessibility” Symposium stattfinden wird. Veranstalter des Symposiums sind wie immer die Herren Ansgar Hein und Jörg Morsbach von Anatom5.

Zusammen mit David Maciejewski (Mr. Technikwürze) werde ich dort einen Vortrag zum Thema “Performance-Optimierung: Barrierefreiheit beginnt mit Ladezeiten” halten. Ich freue mich bereits riesig darauf, genauso wie darauf, endlich mal Chris Heilmann persönlich kennenzulernen und natürlich auch das eine oder andere bisher unbekannte Gesicht aus der Blog- und Twitterwelt. Die Folien unseres Vortrages wird es natürlich im Anschluss auch hier im Weblog bzw. bei Slideshares geben.

Im November gehts weiter mit gleich zwei Veranstaltungen. Am 12.11.2009 werde ich in Dresden beim “World Usability Day” einen Vortrag zu den Herausforderungen moderner Webentwicklung halten. Eine Woche später gehts nach Karlsruhe zur Webtech 2009. Dort wird es mich gleich zweimal geben. Zum einen werde ich einen Ausblick über die Zukunft von CSS-Frameworks im professionellen Alltag wagen, zum anderen werden Nocolai Schwarz und ich im “Webstandards Day” Track (dem inoffiziellen Webkrauts-Track) gemeinsam über “Best Practices in JavaScript und CSS” vortragen.

YAML & Friends

Auch bei YAML ist kein Stillstand. Zwar sind die Release-Zyklen etwas länger geworden, doch das sollte bei der Reife des Frameworks nicht weiter stören. Im Verlauf des letzten halben Jahres hat sich die Browserwelt deutlich verändert. Der Internet Explorer 8 ist ebenso in seiner finalen Fassung erschienen wie der Firefox 3.5, Safari 4 und kürzlich Opera 10. Auf die neuen Browsergenerationen gilt es zu reagieren und demzufolge wird es einige Anpassungen des Frameworks geben, die zum Teil bereits im YAML-Forum diskutiert wurden. Daneben gibts mit YAML 3.2 weitere Verbesserungen und Erweiterungen des Frameworks, unter anderem:

• Einen deutlich schlankeren Framework-Core
• Verbesserungen beim Formularbaukasten
• Eine neue und komfortablere Skiplink-Lösung

Natürlich ist das nicht alles, mehr Informationen wird es geben, sobald der Releasetermin für YAML 3.2 in Sichtweite rückt. Über den schlankeren Core habe ich ja bereits in einem früheren Blogbeitrag kurz ein paar Worte verloren. Daneben wurden auch die “Begleitprojekte”, der YAML Builder und YAML Debug im letzten halben Jahr still und leise weiter verfeinert. So steht seit einigen Wochen im YAML Builder die seit Veröffentlichung von Flash 10 von vielen Nutzern schmerzlich vermisste “Copy to Clipboard” Funktionalität wieder zur Verfügung und auch YAML Debug nähert sicht nach zahlreichen Bugfixes und kleinen Verbesserungen unter der Haube langsam der Version 1.0 und dem Verlassen des Beta-Status. Besonders freut mich, dass YAML Debug im Mozillas Open Web Tool Directory gelistet ist.

Soweit die Infos zu YAML, die Veröffentlichung der Version 3.2 ist für den Oktober anvisiert.

Geheimniskrämerei

Und abschließend folgt jetzt noch eine Grund für die Ruhe der vergangenen Monate hier im Blog, die vermutlich auch noch bis zum Ende des Jahres (mit gelegentlichen Wortmeldungen) anhalten wird. Ich arbeite seit ca. 4 Monaten intensiv an einen neuen Großprojekt (aktueller Stand: ca. 5500 Zeilen Code) welches – wenn es planmäßig weiter geht – im Spätherbst die ersten ausgesuchten Betatester empfangen wird. Mehr Infos gibt es momentan nicht.

So, das war’s für heute. An alle BOA-Besucher, wir sehen uns morgen.

Alphatransparente PNG Grafiken sind der wohl einfachste Weg, denn es muss lediglich eine entsprechende Grafik erstellen und einbinden. Der grafische Ansatz hat den Vorteil, dass sich jeder erdenkliche Transparenzverlauf erstellen lässt. Nachteilig ist jedoch: dem Internet Explorer muss der fehlerfreie Umgang mit transparenten PNGs erst durch performanceraubende Hacks (PNG Fix) beigebracht werden. Zudem ist hier immer eine Grafik im Spiel, was schnelle Änderungen unnötig verkompliziert.

Geht es lediglich um einfarbige transparente Flächen oder Hintergründe, so stehen RGBa-Farben und die opacity-Eigenschaft als reine CSS-Alternativen zur Verfügung. Doch auch hier geht es nicht ohne Stolpersteine weiter. RGBa ist Bestandteil von CSS3 und wird momentan nur von den aktuellen Versionen des Firefox sowie den Webkit-Browsern Safari und Chrome unterstützt. Weder Opera, noch der Internet Explorer spielen mit. Für den Internet Explorer gibt es - einmal mehr - einen proprietären Kniff, womit wir der Lösung schonmal einen großen Schritt näher währen. Allerdings gibt es für Opera keine Lösung, es an dieser Stelle mit RGBa momentan noch nicht weiter geht.

Verbleibt also nur noch die CSS-Eigenschaft opacity. Opera unterstützt diese Eigenschaft und beim Internet Explorer sind wir mit dem eben bereits erwähnten Filter-Tricks dabei. Als Ausgangsbasis haben wir somit erst einmal alle Browser mit an Bord. Dummerweise wirkt opacity jedoch nicht nur auf den Hintergrund eines Elementes, sondern Vordergrund UND Hintergrund, einschließlich der eingeschlossenen Child-Elemente sind von den gewählten Transparenz-Einstellungen betroffen. Um einen transparenten Hintergrund zu erzeugen, vor dem dennoch nicht-transparente - und damit gut lesbare - Inhalte platziert werden können, muss daher noch eine kleine CSS-Krücke bemüht werden - ein absolut positioniertes Hilfselement.

<div class="parent colorA">
<p>Container A hat einen einfarbigen Hintergrund.</p>
</div>

<div class="parent opacity-wrapper" style="top: -130px; left: 150px;">
  <div class="colorB opacity"></div>
  <p>Container B hat einen alphatransparenten Hintergrund.</p>
  <div class="child">Child-Container ohne Transparenz</div>
</div>

Der Container .parent erhält die gewünschte Geometrie, jedoch keinen, bzw. einen volltransparenten Hintergrund ( background: transparent; ). Die eigentliche Hintergrundfarbe oder -grafik wird an den Childcontainer mit der Klasse .opacity vergeben. Dieser wird innerhalb von .parent absolut positioniert und erhält sinnvollerweise relative Dimensionen (width: 100% und height: 100%), damit das Spielchen unabhängig von der Größe des Elternelementes immer funktioniert. Damit die absolute Positionierung auch greift, muss das Elternelement (.parent) ebenfalls positioniert sein. Über die Klasse .opacity-wrapper wird dem Elternelement daher die Eigenschaft position:relative zugewiesen.

Damit das Hilfselement auch wirklich hinter den eigentlichen Inhalten gerendert wird, muss es VOR den Inhaltselementen im HTML Code erscheinen, demzufolge steht es an erster Stelle. Alternativ könnte man es per z-index in den Hintergrund rücken. Gäbe es den Internet Explorer 6 nicht, wären wir fertig. Dummerweise hat dieser Browser gerade bei positionierten Elementen ein Problem mit der korrekten Berechnung der Elementbreite des .opacity Elements. - die prozentualen Angaben für width und height werden falsch berechnet, sobald Randabstände oder definierte Höhen im Spiel sind. Hier hilft leider wirklich nur die Brechstange, deshalb weise dem Container eine fiktive Dimension von 2000px in Höhe und Breite zu, was eigentlich auch in jedem Fall groß genug sein dürfte. Damit die so provozierte Übergröße am Bildschirm nicht zum Problem wird, wird die Klasse .opacity-wrapper durch die Eigenschaft overflow:hidden erweitert. Damit sind wir fertig, hier das vollständige CSS:

.parent { 
  color: #fff;
  height: 200px;
  width: 50%;
  padding: 20px;
  margin-right: 10px;
}

.child { 
  background: #ff0; 
  color: #000; 
  height: 50px; 
  padding: 10px;
}

.colorA { background: #88a; }
.colorB { background: #668; }


/* partial opacity hack: configuration */
.opacity { 
	opacity: 0.5;		/* modern browser */
	-moz-opacity: 0.5;	/* older Mozilla browser */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 in Standard Compliant Mode */
	filter:alpha(opacity=50); /* IE5.x -7.0 */
} 

/* partial opacity hack, part I: Don't change the following properties! */
.opacity-wrapper,
.opacity-wrapper * {
	position:relative;
}

.opacity { 
	/* partial opacity hack, part II: Don't change the following properties! */
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
} 

/* partial opacity hack, part III: IE6 support */
* html .opacity-wrapper { 
	overflow:hidden;
}
* html .opacity { 
	width: 2000px; 
	height: 2000px;
} 

Ich habe im CSS die Farbklassen (.colorA, .colorB)  und den technischen Teil (.opacity, .opacity_wrapper) bewusst als unabhängige CSS-Klassen formuliert, denn so lässt sich diese Technik ohne Änderungen auf jede beliebige Geometrie und mit jeder Hintergrundfarbe oder -bild ohne Änderungen wiederverwenden.

Das vollständige Beispiel mit flexibler Containerbreite kann man sich dieser Demoseite ansehen.

Update: Drüben Yatil.de stellt Eric Eggert eine deutlich schlankere Alternative vor, die auf RGBa basiert und mit mit dem soeben erschienenen Opera 10 nun auch endlich auch im letzten wichtigen Browser funktioniert. Wer keine älteren Browserversionen unterstützen muss (Opera 9 oder Firefox 1.x) kann bedenkenlos zugreifen. Ich verwende diese Technik ebenfalls bereits einige Zeit in YAML-Debug und kann sie daher guten Herzens empfehlen.

Die hier vorgestellte opacity-Lösung bietet sich demzufolge für ältere Browser an oder wenn man anstatt einer Hintergrundfarbe ein teiltransparentes grafisches Muster hinterlegen will, ohne auf PNG’s und die dafür notwendigen JS-Fixes zurückgreifen zu müssen.