Mittwoch23. September 2009

Zu lesen gibts hier im Moment ja nicht allzuviel, deshalb will ich wenigstens kurz eine Statusmeldung geben, was für die nächsten 2..3 Monate so geplant ist.

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.


Freitag04. September 2009

Transparenz-Effekte können – wenn man sie gezielt einsetzt – ein äußerst attraktives Stilmittel innerhalb des Layouts sein. Die Eigenschaft opacity beschreibt die Deckkraft eines Elementes und ist deshalb neben alphatransparenten PNGs oder den alphatransparenten RGBa-Farben von CSS3 eine der drei möglichen Grundtechniken, um Transparenz-Effekte zu erzeugen. Also, was soll man nun nehmen?

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.


Dienstag25. August 2009

Seit der Version 2.8 bringt Wordpress das neues Template-Tag body_class mit, womit sich verschiedenste Abhängigkeiten und Statusinformationen des CMS als CSS-Klassen an das <body> Element heften lassen, um mittels CSS im Layout darauf reagieren zu können.

<body <?php body_class(); ?>>

Leider ist die Implementation dieser interessanten und nützlichen Funktion in Wordpress eher unglücklich gelöst. Die Jungs von WPEngineer haben bereits im Februar vorbildlich darüber informiert, welche Klassennamen das Tag ins Markup rendert. Darunter befinden sich zahlreiche allgemein gebräuchliche Klassenbezeichnungen wie:

  • archive
  • author
  • blog
  • category
  • date
  • home
  • page
  • search
  • tag

Das Problem bei der Verwendung derart gebräuchlichen Bezeichnungen sind fast zwangsläufig Kollisionen bei der Implementation bestehender CSS-Layouts in Wordpress. Gerade heute habe ich eine Mail zu diesem Thema bekommen:

Man kann sich ja mittlerweile im BODY-Tag CSS-Klassen einfügen lassen je nachdem welcher Typ von Seite aktuelle von WordPress ausgegeben wird. Dabei gibt es auch die Klasse “page” für die Seiten in WordPress. Resultat ist, dass sich das dann mit der Klasse “page” aus YAML überschneidet.

Ich kann im Moment froh sein, dass es nur eine CSS-Klasse von YAML trifft. Schon innerhalb dieses Bloglayouts hier – würde dieses Blog mit Wordpress laufen – würden weitere Klassenbezeichnungen kollidieren, denn ich verwende in meinem Bloglayout auch Klassenbezeichnungen wie “date” oder “category”. Nur sind diese Klassen in meinem Layout nicht dafür gedacht, an das body-Element geheftet zu werden. Nun könnte ich mein CSS-Framework YAML in einer nächsten Version natürlich anpassen, um der Kollision aus dem Wege zu gehen, aber ich halte dies für den falschen Weg, denn die Welt dreht sich nicht um Wordpress und YAML ist nicht allein von diesem Problem betroffen. Wordpress als Blogtool oder CMS sollte eigenständig kein Markup generieren (soweit die graue Theorie) und es sollte ebenso die Implementation bestehender Layouts nicht durch die Kollision von Klassennamen unnötig erschweren.

Ein relativ einfacher und unkomplizierter Lösungsweg heisst: Namespacing. Wordpress könnte allen dynamisch ins Markup generierten CSS-Klassen das Kürzel “wp-” voranstellen (oder dieses sogar im Backend konfigurierbar machen). Bei anderen Content Management Systemen (Bsp: TYPO3) kommt dieses Verfahren bei den meisten Extensions zum Einsatz. Auf diese Weise ließen sich die angedeuteten Probleme leicht vermeiden, während die durchaus sinnvolle Funktionalität weiterhin uneingeschränkt verfügbar bleibt. Leider bin ich selbst zu wenig bewandert in PHP und auch nur ein Gelegenheitsnutzer von Wordpress, dennoch hoffe ich, dass diese Idee auf irgendeinem Kanal an das Entwicklerteam herangetragen wird.

 


Freitag14. August 2009

Es folgt mal wieder eine Bug-Beschreibung. Firefox hat aktuell ein ausgesprochen hässliches Problem in Verbindung mit CSS Tabellen und JavaScript. Die Kombination der beiden führt in einigen Fällen zu groben Renderingfehlern wobei einzelne Zellen einer Tabellenzeile scheinbar willkürlich in eine neue Zeile umgebrochen werden.

Das Rendering der CSS-Tabellen funktioniert prinzipiell, es ist also kein einfacher CSS-Bug. Ich verwende diese Technik in YAML zur Erstellung gleichhoher Container per CSS. Das eigentlich perverse an diesem Bug - er ist extrem schwer nachvollziehbar. Ich habe die CSS-Tabellen mittlerweile in mehreren Real-Live-Situationen ausprobiert und dabei bereits im Winter erstmals Bekanntschaft mit diesem Bug gemacht. Allerdings war die Fehldarstellung meist nach einem Reload oder auch nur dem Versuch eines Elementchecks mit Firebug verschwunden. Die Ursachenfindung hat das extrem erschwert. Erst vor einigen Wochen hat dann im YAML-Forum ein User einen weiteren Tipp beigesteuert, der letztlich einen Testcase ermöglichte.

Gestern Abend habe ich mich nochmals hingesetzt und endlich einen - zumindest bei mir - funktionierenden Testcase erstellt, sowie den Bug bei Bugzilla gemeldet (Bug 510350) . Die Einzelheiten zum Wie und Warum sind übrigens im Testcase ausführlich beschrieben.

Im Testcase wird der Bug durch eine fast leere Script-Node getriggert, wobei diese hier direkt im HTML-Code der Tabelle steht. Es ist die einzige halbwegs verlässliche Möglichkeit, den Bug zu erzwingen, die ich kenne. In meinen Real-Life-Layouts reichte meist schon die pure Anwesenheit von JavaScript in Form von jQuery oder sonstigem.

Und abschließend: Dieser Bug ist derart fies, dass sein Auftreten auf wundersame Weise sogar vom Dateinamen des Testcases beeinflusst wird. Auf meinem lokalen Rechner tritt der Bug - genau wie in der Netzversion - sporadisch auf. Wenn ich den Testcase jedoch in “index.html” umbenenne, wird er plötzlich permanent getriggert. Das verstehe wer will. Ich hoffe daher, die Mozilla-Jungs finden und eleminieren die Ursache möglichst schnell.


Donnerstag06. August 2009

Im Verlauf der letzten Wochen habe ich mir mal die Mühe gemacht, die über die vergangenen Jahre angehäuften Links zu YAML-basierten Entwicklertemplates, Online-Tutorials ect. zu sichten, um demnächst den Community-Bereich auf YAML.de etwas auffrischen zu können. Und bei der Zusammenstellung der nachfolgenden Liste ist mir dann auch aufgefallen, dass es mittlerweile für 23 Content-Management-Systeme fertige Implementationen oder zumindest Hilfestellungen durch Onlinetutorials gibt.

Deshalb an dieser Stelle ein ganz dickes Dankeschön an alle Autoren. Ich veröffentliche diese “kleine Ressourcensammlung” zunächst hier in meinem Weblog mit der Bitte, sie bei Unvollständigkeit über die Kommentare weiter zu ergänzen. Vielleicht habe ich ja doch die eine oder andere Arbeit übersehen das soll der Aufnahme in diese Liste nicht im Wege stehen. Mit dem nächsten Release werde ich die Ressourcensammlung dann auch direkt auf YAML.de verfügbar machen.

Templates / Themes / Online-Tutorials

Entwicklertools


Seite 10 von 44 Seiten

« Erste  <  8 9 10 11 12 >  Letzte »