accessBlog

Wochenendbeilage

Die wöchentliche Linkschleuder, diesmal zum Thema CSS:

• Jens Grochtdreis: »CSS-Selektoren und Performance« (weiterführende Literatur dazu und einige grundlegende Regeln, die schon immer galten)
• Dirk Jesse: »YAML CSS-Debugging per Bookmarklet« (mit einem ganz kleinen bißchen EfA-Code)
• Eric Sol: »Faux Absolute Positioning« (mit gewissen Einschränkungen, die am Ende des Artikels angesprochen werden)
• Marco Kuiper: »A parallax optical illusion with CSS: The Horse in Motion« (komplett sinnfreie Demo und gerade deswegen so schön; weitere Beispiele hier)
• Rob Glazebrook: »A Semantic List-Based CSS Calendar« (als ›proof of concept‹ ganz nett, aber eigentlich ist das doch eine Datentabelle, oder?)
• Smashing Magazine: »Block Quotes and Pull Quotes: Examples and Good Practices« und »Applying Divine Proportion To Your Web Designs«
• Jonnotie: »Fix the bad text rendering in Safari« (Warnhinweis: pauschal angewendet führt das in Firefox zu heftigen Performance-Einbußen)
• ALA: »Video: Live at An Event Apart New Orleans, Eric Meyer on Generated Content« (Und womit? Mit Recht!)

Wochenendbeilage: Rasterfahndung

In Klein-Bloggersdorf tobt gerade mal wieder die Aus­einander­setzung pro und contra Grid Layouts (nicht zu verwechseln mit Layout Grids!). Aber lesen Sie selber (und auch die zahllosen Kommentare):

• Dirk Jesse: »Grid-Layouts - sinnvoll umsetzbar mit YAML?« sowie
  »Flexible Layouts vs. Fixe Layouts – 5:0«
• Jens Grochtdreis: »Grid-Layouts – das neue Tabellenlayout?«

Weitere lesenswerte Ressourcen zum Thema Gestaltungsraster:

• Mark Boulton: »Why Use a Grid«, »Feeling Your Way Around Grids« und »5 Simple Steps to Designing Grid Systems« (Part 1, Part 2, Part 3, Part 4, Part 5)
• Khoi Vinh: »Grids Are Good« (PDF)
• Wilson Miner: »Setting Type on the Web to a Baseline Grid«
• David Yeiser: »Using Spreadsheets to Brainstorm Grid Layouts«
• Molly Holzschlag: »Thinking Outside the Grid«
• Position is Everything: »Vertical Grids«
• Michael Angeles: »Cutting and Sewing Grid-Based Design: Working with Other People’s Comps«

Nachtrag: »Flexible Layouts – die Herausforderung der Zukunft«

Neues vom W3C

• XHTML Access Module, Last Call Working Draft vom 26. Mai 2008, Kommentare bitte bis zum 16. Juni abgeben.
• Cascading Style Sheets (CSS) Snapshot 2007, Last Call Working Draft vom 16. Mai 2008, Kommentare bitte bis zum 09. Juni abgeben.

Wochenendbeilage: CSS-Artikelserien

Bei Design Shack gibt es eine Einführung in die vielen nützlichen & schönen Dinge, die CSS3 bringt:

1. Introduction to CSS3 – Part 1: What is it?
2. Introduction to CSS3 – Part 2: Borders
3. Introduction to CSS3 – Part 3: Text Effects
4. Introduction to CSS3 – Part 4: User Interface
5. Introduction to CSS3 – Part 5: Multiple Columns
6. Introduction to CSS3 – Part 6: Backgrounds

Niels Matthijs erklärt Konzept und praktische Umsetzung von:

1. css generated content pt1 / blending the boundaries
2. css generated content pt2 / aftermath
3. css generated content pt3 / finishing up

Kilian Valkhof erklärt Positionierung per CSS:

1. Understanding CSS Positioning part 1
2. Understanding CSS positioning part 2
3. Understanding CSS Positioning part 3

Gesammelte Werke

Was mit CSS:

• Dirk Jesse: »Ein paar Hinweise zu den @-Regeln von CSS«
• Philipe Fatio: »Informationen über Linkziel darstellen« und »Bildeffekte mit ›background-attachment: fixed‹«
• Boris Stumpf: »Definitionslisten, wie sie im Buche stehen«
• Chris Coyier: »How To: Resizeable Background Image«
• Smashing Magazine: »Improving Code Readability With CSS Styleguides«
• Eric Meyer: »line-height: abnormal«
• Paul O’Brien: »Easy Vertical Centering with CSS«
• Linda Chadbourne: »CSS Shorthand, Step by Step How-To«
• Dustin Brewer: »CSS Hack:Getting Safari to behave«
• David Walsh: »Combine Your CSS Media Styles Into One File«
• Bedrich Rios: »How To Zebra-Stripe Tables Using CSS and jQuery«
• Ryan Singer: »Padded link targets for better mousing«
• Will Speak: »Five Star Rating With CSS«
• David Rodriguez: »Simple CSS: Creating More Readable Text«
• Kevin Yank: »CSS Gradients, Transforms, Animations, and Masks«
• Natalie Jost: »Override Inline Styles from the Stylesheet«
• Brian Suda: »Stay on :target«

Wochenendbeilage

Dem Schönen, Wahren, Guten: ganz viel CSS.

• Michael Preidel: »Eigener Lupen-Cursor mit reinem CSS (Update: Cross Browser-Lösung)«
• Nico Wenig: »MoreCSS«
• Matthias Kretschmann: »Text-Shadow Exposed: Make cool and clever text effects with css text-shadow«
• Boris Stumpf: »Definitionslisten, wie sie im Buche stehen«
• Matthew Griffin: »3 Layouts that Handle Screen Resolution with Dignity«
• Niels Matthijs: »border model / the four dots issue«
• Jonathan Snook: »Content Overlay with CSS«
• Fabian van Luyn: »CSS Adjacent-Sibling Selector«
• Chris Coyier: »Fine Use for the Adjacent Sibling (+) Selector«
• John Faulds: »Legends of Style Revised«
• Adriana Palazova: »Links with background images - three simple fixes for IE«
• Rob Glazebrook: »Perma-Closing Message Boxes with JavaScript + CSS«
• Alen Grakalic: »Pure CSS Animated Progress Bar«
• Antonio Lupetti : »Perfect pagination style using CSS«

Und die wöchentlichen Wiedergänger zum Endlosthema »Reset oder nicht?« dürfen natürlich auch nicht fehlen:

• Jonathan Snook: »No CSS Reset
• Eric Meyer: »Crafting Ourselves«

Gesammelte Werke: CSS

Eine Liste mit ganz vielen Listen, die Listen zum Thema CSS beinhalten:

• Alen Grakalic: »8 Premium One Line Css Tips«
• Fabian van Luyn: »12 Articles And Tools For Css Structuring And Optimising«
• Vandelay: »65 Resources for Grid-Based Design«
• admin: »10 Must use CSS and Coding Techniques«
• Tim Wright: »Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know«

Auch gut:

»The Highly Extensible CSS Interface ~ The Series« von Cameron Moll:

• Extensible CSS Interface I: The Foundation,
• Extensible CSS Interface II: CSS Selectors & jQuery,
• Extensible CSS Interface III: Adding Ajax Interactivity
• Extensible CSS Interface IV: Testing for Extensibility

Wünsch dir was

Bis zum heutigen Montag läuft noch die Frist, in der Web-Entwickler ihre Wünsche und Vor­stellungen über die zukünftige Ent­wicklung von CSS3 äussern können. Danach wird der Input gesammelt und Ende März beim nächsten Treffen der CSS-Arbeits­gruppe des W3C diskutiert. Weitere Infos und Kommentar­möglich­keit beim Web Standards Project: Tell the CSS WG what you want from CSS3.

Wochenendbeilage

Mal wieder was mit Design und wie man's hinbekommt:

• Alexandra Labudda: »YAML 3 und der YAML Builder«
• Björn Seibert: »Nicht nur (r)eine Designfrage«
• Kevin Scoresby: »How to design a system that everybody hates«
• Paul Burke: »Designing for Disagreement«
• Paul Graham: »Six Principles for Making New Things«
• Jeff Parks: »Using Design Visuals To Communicate Ideas«
• Andrew Hinton: »Personas and the Role of Design Documentation«
• Kevin Hale: »Visualizing Fitts’s Law«
• Andy Rutledge: »On Creativity«
• Naz Hamid: »Design is in the Details«
• Paul Annett: »How to recreate Silverback’s Parallax«
• Roger Johansson: »Specify a maximum width for em-based layouts«
• Steven Clark: »Elastic Layouts Still Have Issues«
• Rob Glazebrook: »Create a Microsoft Word-Style Outline with CSS«
• Trevor Davis: »PNGs, the AlphaImageLoader Filter, and hasLayout«
• Kevin Yank: »Table-Based Layout Is The Next Big Thing«

Neues vom W3C

CSS Namespaces Module, W3C Last Call Working Draft vom 15. Februar 2008.

Passend dazu auch die Wunsch­liste eines gewissen David Walsh: »My CSS Wishlist«.

Ebenfalls neu war uns diese Idee aus dem zurzeit noch in der Entwicklung befindlichen CSS 3: »›Say-Instead‹ Part of CSS3«.

Gesammelte Werke

Wo wir gerade beim Thema CSS sind:

• Gerrit van Aaken: »Unterstreichungen in Screendesigns«
• Dejan Cancarevic: »10 best CSS hacks« (Nr. 6 kannten wir auch noch nicht, bzw. der Fehler war uns zwar schon mal begegnet, aber der Workaround noch nicht)
• Alen Grakalic: »Custom Double Solid Borders for Images« und »Create Resizing Thumbnails Using Overflow Property«
• Noupe: »101 CSS Techniques Of All Time«
• Smashing Magazine: »Powerful CSS-Techniques For Effective Coding«

Auch cool: CSS Type Set

Gesammelte Werke

• Eric Eggert: »Wozu braucht man eigentlich ein 12-Spalten-Grid?«
• Björn Seibert: »Nicht nur (r)eine Designfrage«
• David Pogue: »Designing What’s Right for Consumers«
• Tim Kadlec: »Detailed Look at Stacking in CSS«
• Jon Tan: »The Incredible Em & Elastic Layouts with CSS«
• Peter Gasston: »Image Replacement in CSS3«
• Rob Glazebrook: »Book-style Chapter Introductions Using Pure CSS«
• Fredrik Wärnsberg: »Cross-browser transparent columns«
• Paul Chaplin: »CSS reset and quirky quotes«
• Peter Paul Koch: »W3C DOM CSS compatibility table updated«
• Alen Grakalic: »Create Resizing Thumbnails Using Overflow Property«

Gesammelte Werke

• Markus Wäger: »Was wiegt eine Überschrift?«
• Brian Suda: »Stay on :target«
• Cameron Moll: »Overcoming blankcanvasphobia«
• John Ferrara: »Search Behavior Patterns«
• Design Council: »Eleven lessons: managing design in eleven global brands« (PDF)
• Verne Ho: »Vertically center content with CSS«
• Dejan Cancarevic: »Vertical align div«
• Eric Wendelin: »CSS Adjacent Sibling Selectors«
• Alen Grakalic: »Pure Css Data Chart«
• Alex Bischoff: »Keeping Your Elements’ Kids in Line with Offspring«
• Niels Matthijs: »come on my selector pt2«
• Stephanie Sullivan: »Scaling Fonts using em units«

Wochenendbeilage

Auch wenn CSS manchmal wirklich saugt, Spaß macht es trotzdem:

• James Whittaker: »Em based layouts - Vertical rhythm calculator«
• Alex Walker: »Stretchy Images with HTML and CSS«
• Paul O’Brien: »What CSS Did We Learn in 2007«
• Eric Meyer: »Resetting Again«
• John Resig: »Sub-Pixel Problems in CSS«
• Chris Coyier: »Links Inside of Larger Clickable Areas«
• Chris Coyier: »Better Email Links: Featuring CSS Attribute Selectors«
• Alen Grakalic: »CSS Text Gradients«
• Alen Grakalic: »Style Your Image Links«
• Damjan Mozetič: »5 CSS Tips to Make IE (You) Happy«

Auch cool: die neue CSS Reference bei sitepoint von Tommy Olsson und Paul O’Brien.

Niemand hat die Absicht eine Mauer zu bauen …

Kaum ist man mal einen Tag nicht da, weil in Sachen BIENE 2008 unterwegs, schon bricht die Hölle los. Weil wir das alles erstmal selbst lesen und verdauen müssen gibt's nur eine Linkschleuder zur neuesten Sau, die gerade durch's Dorf Web getrieben wird:

Ursache:

• Chris Wilson: »Compatibility and IE8«
• Aaron Gustafson: »Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8«
• Aaron Gustafson: »Opting-in to standards support«

Wirkung:

Weiterlesen …

• Drew McLellan: »Microsoft’s Version Targeting Proposal«
• Eric Meyer: »From Switches to Targets: A Standardista's Journey«
• Jeffrey Zeldman: »Not your father’s standards switch«
• Jeffrey Zeldman: »In defense of version targeting«
• Karl Dubost: »IE8 and opt-in versioning mechanism«
• Anne van Kesteren: »The Internet Explorer lock-in«
• Andy Budd: »Has Internet Explorer Just Shot Itself in the Foot?«
• John Dowdell: »Specs vs capabilities«
• Erin Lynch: »That Red-headed Monster Next to You? Yeah, that’s Anger.«
• Mike Davies: »End of line Internet Explorer«
• Maciej Stachowiak: »Versioning, Compatibility and Standards«
• Peter Paul Koch: »The versioning switch is not a browser detect«
• Jeremy Keith: »Broken«
• Roger Johansson: »Standards mode is the new quirks mode«
• Rachel Andrew: »IE8 and the future of the web«
• Gareth Rushgrove: »Who loses out to X-UA-Compatible?«
• Eric Eggert: »Microsoft attempts to break the web …just again!«
• Jens Grochtdreis: »Ein neuer Meta-Tag für den IE8«
• Ian Hickson: »Mistakes, Sadness, Regret«
• John Resig: »Meta Madness«
• Jonathan Snook: »IE8 to include version targeting«
• Ethan Marcotte: »Code Happy«
• David Andersson: »On X-UA-Compatible«
• Lachlan Hardy: »X-UA-Compatible: Moving past thoughts of the children«
• Shelley Powers: »Bobbing Heads and the IE8 Meta Tag«
• Mark Pilgrim: »Microsoft koan«
• Thomas Schwecherl: »Das Babel der Webstandards-Kompatibilität«
• David Maciejewski: »Microsoft spaltet mit neuem Vorschlag die Webentwickler«
• Kate Bolin: »X-UA-Lemur-Compatible«
• Chris Heilmann: »IE8 - Would somebody please think of the children the broken web?«
• Drew McLellan: »Version Targeting and JavaScript Libraries«
• Jeremy Keith: »Still broken«
• Bruce Lawson: »Microsoft versioning: accessibility implications«
• Jeff Croft: »The war within Web standards: pragmatists versus purists«
• Molly Holzschlag: »Me, IE8 and Microsoft Versioning«
• Anne van Kesteren: »Rendering Modes«
• Eric Meyer: »Almost Target«
• Jeffrey Zeldman: »What does anyone at The WaSP do?«
• Ethan Marcotte: »Sound and Fury«
• James Bennett: »Legacy«
• Mike Davies: »Internet Explorer Reality«
• Peter Paul Koch: »The versioning switch's default is correct«
• Ben Buchanan: »X-UA-Compatible: let sleeping intranets lie?«
• Chris Casciano: »What Does X-UA-Compatible Mean For Me?«

P.S.: Liebe Browser-Hersteller: Ihr nervt.

Gesammelte Werke: Heute mal was mit Webstandards

Aktuelle Regel №1 beim Thema Web-Standards: ›Optimismus basiert auf einem Mangel an Erfahrung‹. In diesem Sinne:

• Bruce Lawson: »Tell the CSS WG what you want from CSS3«
• Jens Grochtdreis: »CSS Working-Group«
• Eric Eggert: »Welche Standards wollt ihr eigentlich?!??«

Daneben gab es natürlich auch noch unterhaltsames und lehrreiches, so wie dieses von Karl Dubost: »HTML 5, one vocabulary, two serializations«; nicht ganz so brauchbares wie dieses von Frank M. Palinkas: »Creating Accessible Data Tables« (Tipp: das meiste davon interessiert den durchschnittlichen Screenreader ü ber haupt nicht); und diese interessante Auflistung von gängigen Praktiken beim HTML-generieren -schreiben von Philip Taylor: »HTML statistics«.

Wochenendbeilage

Alles was der moderne Web-Entwickler so wissen muss:

• David Walsh: »Advanced CSS Printing — Using CSS Page Breaks«
• Niels Matthijs: »cross-browser underliningthe difficulty of drawing a line«
• Brian Suda: »CSS Not([hacks])«
• Molly Holzschlag: »Best Bets for Browser Bug Bashing«
• Dean Edwards: »IE7.js version 2.0 (beta)«
• Alen Grakalic: »Style Your Website's Search Field with JS/CSS«
• Matt Berseth: »Creating a Google Suggest Style Filter with the AutoComplete Control«
• Ca Phun Ung: »Unobtrusive, Accessible and Standards Compliant Numeric Stepper (revisited)«
• Nikola Kocic: »Spellify - An Automatic Text Field Spell Checker«
• David Smith: »WebKit gets Native getElementsByClassName«
• Simon Bates: »Getting, setting, and removing tabindex values with JavaScript«
• Finn Rudolph: »ImageFlow 0.8«
• Tobias Wetzel: »MooFlow 0.1 - Using MooTools 1.2«
• Christian Heilmann: »Generating charts from accessible data tables and vice versa using the Google Charts API«
• Christian Heilmann: »An attempt for a more accessible edit-in-place solution«

Gesammelte Werke

Zum Design im Allgemeinen und zur Umsetzung per CSS im Speziellen:

• Jon Henshaw: »Implementing Contextual Feedback and Help to Improve the Usability of Web Applications«
• Richard F. Cecil: »Documenting the Design of Rich Internet Applications: A Visual Language for State«
• Ivan Pepelnjak: »Enhance Your AJAX Applications with Visual Cues«
• Jeff Croft: »Typography: Beyond the Font« (PDF, ca. 3 MB)
• Collis: »9 Essential Principles for Good Web Design«
• Eric Meyer: »Diagnostic Styling«
• Brian Oberkirch: »A Gift Idea For Your Users: Respect, Yo«
• Tino: »CSS: Automatically Marked And Accessible External Links«
• Chris Coyier: »ID Your Body For Greater CSS Control and Specificity«
• Alex Walker: »Stretchy Images with HTML and CSS«
• Apple Developer Connection: »Introduction to Safari CSS Reference« (auch als PDF)
• Nils Pooker: »Transparenzeffekte mit PNG-24 und CSS«

Die kleine Browserbastelecke

Die gute Nachricht zum Jahres­ausklang nach all dem Theater: der kommende Internet Explorer 8 wird nochmals wichtige Schritte in Richtung einer voll­ständigen Unter­stützung von Web-Standards machen. Mittler­weile war es ja schon überall zu lesen: interne Versionen unter­stützen nun den Acid2-Test des Web Standards Project.

Wir dürfen uns also auf display:table freuen und damit dem Weg­fall der aller­letzten Ausrede pro Layout-Tabellen. Wenn der Test tat­säch­lich bestanden wird, dann müssten auch eine ganze Reihe weiterer Bugs wie zum Beispiel bei relativer Positio­nierung von Inhalten, der Verwen­dung von sog. ›Generated Content‹, dem OBJECT-Element usw. behoben sein.

Weitere Infos dazu im IEBlog: »Internet Explorer 8 and Acid2: A Milestone« und als Audio oder als unbe­dingt sehens­wertes Video bei channel9.msdn.com: »IE 8: On the Path to Web Standards Compliance - ACID 2 Test Pass Complete«. Ebenfalls freuen dürfen wir uns auf den Weg­fall der uner­klär­lichen und auch uner­klärbaren hasLayout-Eigenschaft: Markus Mielke vom Internet Explorer-Team hat auf der Mailing­liste der W3C CSS-Arbeits­gruppe verraten, dass dieses mit dem IE 8 Geschichte sein wird: I do not think I am disclosing too much by saying that HasLayout will be history with IE8 (it was an internal data-structure to begin with and should have never been exposed). See http://msdn2.microsoft.com/[…] for more details.

Vom Marktführer zum Zweit­platzierten:
die zweite Beta-Version von Firefox 3 ist draussen. Ganz oben auf der Prio­ritäten­liste stand die bessere Performance, denn während die Vor­gänger-Versionen schon­mal gerne bei einfachsten Dingen den gesamten Arbeits­speicher voll­müllten, fühlt sich die neue Version nun wesentlich schneller an. Zudem sieht der Browser nun auf den verschiedenen Platt­formen wie Windows, MacOS oder Linux so aus, wie Anwen­dungen auf der jeweiligen Platt­form aussehen sollten. Mehr dazu bei den Verdrahteten Nach­richten: »Firefox 3 beta 2 Arrives with More Speed and Fewer Bugs« und in der Packungsbeilage.

Für Nutzer mit Behin­derungen besonders interessant sind die vielen Ver­besserungen im Bereich der Zugäng­lich­keit des Browsers selbst und der ange­zeigten Inhalte, nach­zu­lesen bei »New Accessibility features in Firefox 3«. Aller­dings setzen viele dieser Ver­besserung eine Unter­stützung von modernen Accessibility-Schnitt­stellen wie IAccessible2 oder ATK/AT-SPI voraus, die in ver­breiteten Hilfs­mitteln bisher nur lücken­haft bis gar nicht umge­setzt sind.

Oops, wo bin ich?

In den Richtlinien zur Barriere­freiheit finden sich viele Vorgaben zur geräte­unab­hängigen Bedienung. Üblicher­weise wird darunter die Bedienung ohne Maus, also per Tastatur oder anderen Eingabe­geräten verstanden. Dabei geht es hier nicht nur um tech­nische Aspekte, sondern auch um die Gestal­tung der Inter­aktion und das visuelle Feedback für den Nutzer.

In einem neuen Artikel möchten wir einige Lösungen zeigen, mit denen Sie mit ein­fachsten Mitteln und im Ideal­fall ohne Eingriff in den HTML-Code einer Site ein ›mehr‹ an Zugäng­lich­keit für Nutzer mit motorischen Behin­derungen erreichen können:

»›Oops, wo bin ich?‹ – Ein Herz für Tastaturnutzer«.