Fragen zu HTML5 & Co beantwortet 5 – Element-Auswahl, Xlink, ARIA und selektive CSS3-Selektoren

Veröffentlicht am 14. Mai 2012

Als Erklärbär für HTML5 und andere Webtechnologien bekomme ich jede Woche neue Fragen rund um Webentwicklung gestellt. Da diese Fragen (und Antworten) viel zu schade sind, um sie in meinem E-Mail-Archiv verrotten zu lassen, hole ich sie im Rahmen der Artikelserie „Fragen zu HTML5 und Co“ regelmäßig ans Tageslicht – denn dumme Fragen gibt es schließlich nicht!

Wann welches Element verwenden?

Wann sollte man <mark> verwenden und wann <strong>, <em>, <b>, und <i>?

Es stimmt, dass all diese Elemente auf den ersten Blick so ziemlich das gleiche zu machen scheinen und es nicht immer ganz einfach, das richtige Element zu wählen. Anhand von Beispielen bekommt man am besten ein Gefühl dafür, was wann richtig ist und die gute Nachricht an dieser Stelle ist: es gibt in den HTML5-Spezifikationen offizielle Beispiele, hier für <em>. Eine der großen Errungenschaften von HTML5 ist nicht zuletzt die Qualität der Spezifikationen. Während man in den offiziellen Dokumenten zu HTML 4.01 nur sehr spärliche Erläuterungen und Beispiele findet (wenn überhaupt) sind die HTML5-Specs voll mit Beispielen, Tutorials und erklärender Prosa.

Wenn man also ein Beispiel oder eine Erklärung sucht, kann der Blick in den offiziellen Standard durchaus lohnen. Wem die offiziellen Specs mit ihrem monströsen Umfang etwas zu abschreckend erscheinen, könnte mit den Web Developer Editions von W3C und WHATWG (ja, davon gibt es gleich zwei, eine von jeder Arbeitsgruppe) glücklich werden.

Um aber die eigentliche Frage zu beantworten:

  • <strong>: Wichtige Textpassagen, deren Wichtigkeit die Bedeutung des betroffenen Satzes nicht verändert.
  • <em>: Betonte Textpassagen, deren Betonung die Bedeutung des betroffenen Satzes verändert.
  • <b> und <i>: Textpassagen, die vom Rest abgesetzt, aber nicht auf- oder abgewertet werden sollen. Beispiele wären Produktnamen in einem Review oder Wörter aus anderen Sprachen. Dabei sollte man <b> verwenden, wenn die typografische Repräsentation der betroffenen Passage üblicherweise fetter Text wäre und <i>, wenn es kursiver Text wäre.
  • <mark>: Hervorhebung von Textpassagen, die in einem nicht aus ihrem Ursprungskontext heraus eine Hervorhebung verdient hätten, sondern die nur aufgrund eines speziellen Umstandes relevant sind – z.B. weil sie ein Keyword sind, nach dem der Nutzer gesucht hat.

XLink und XHTML5

Für XML-basierte Sprachen wie z.B. SVG gibt es doch die Sprache XLink. Wäre es rein theoretisch auch möglich, sie in XHTML5 einzubinden?

XLink kann man theoretisch schon in XHTML verwenden. Es ist schließlich alles nichts weiter als XML und die (X)HTML5-Spezifikationen erlauben die Verwendung des XLink-Namespaces auch ausdrücklich. Das Problem ist nur, dass es meiner Recherche nach so gut wie gar keine Browserunterstützung gibt. Einzig der Firefox scheint Teile von XLink für SVG- und MathML-Dokumente zu implementieren.

<nav> und ARIA

Macht es Sinn, das <nav>-Element und WAI-ARIA in Kombination zu verwenden, also z.B. als <nav role="navigation">? Oder ist das doppelt gemoppelt? Das <nav> macht doch eigentlich schon deutlich, dass es sich um eine Navigation handelt …

Das ist in der Tat zumindest laut Standard doppelt gemoppelt, denn diese ARIA-Role wird Nav-Elementen automatisch zugeteilt. In der Realität sieht die Sache aber schwieriger aus. Wie man dieser Tabelle hier entnehmen kann, haben die wenigsten Browser heutzutage diese ARIA-Mappings auch wirklich standardkonform implementiert.

Was tun? Rumprobieren und testen. Es mag zwar falsch sein, role="navigation" zu verwenden, aber wenn das der einzige Weg ist, die Navigation auch für Screenreader als solche auszuzeichnen (und ich weiß nicht, ob das der Fall ist – was machen Browser, die <nav> unterstützen, lesen die dann zwei mal „Navigation“ vor?), dann sollte man sich nicht aufhalten lassen. Regeln sind da, um (nach Kenntnisnahme und gründlichem Nachdenken) gebrochen zu werden.

Selektive Anwendung von CSS-Regeln auf Links

Ich verwende Attributselektoren, um externe Links zu markieren. Hierfür suche ich jetzt eine Erweiterung: Ich habe einen Share-Button von Add this integriert und in der Javascript-Box stören diese Markierungen. Wie kann der Code a[target=_blank]{} erweitert werden, so dass die Regel nicht für eine bestimmte Ziel-URL gilt?

Hier gibt es zwei mögliche Lösungen und jeweils helfen die Attributselektoren für Substrings, die in CSS3 frisch eingeführt wurden. Zum einen kann man eine bestehende Markierung für alle Links, deren href-Attribut mit einer bestimmten URL beginnt, einfach zurücksetzen …

/* Externe Links markieren... */
a[target="_blank"]{
    background: yellow;
}

/* ... und die Markierung wieder zurücksetzen */
a[href^="http://www.facebook.com"]{
    background: none;
}

… oder man greift zur Negations-Pseudoklasse (:not()) und wendet die Markierung gar nicht erst auf Links mit der betreffenden URL an:

/* All-in-one-Lösung */
a[target="_blank"]:not([href^="http://twitter.com"]){
    background: yellow;
}

Beide Lösungen führen zum gleichen Ergebnis, allerdings funktioniert die :not()-Variante im Internet Explorer erst ab Version 9.

Weitere Fragen?

Eure Fragen zu HTML5, JavaScript und anderen Webtechnologien beantworte ich gerne! Einfach eine E-Mail schreiben oder Formspring bemühen und ein bisschen Geduld haben – falls ich gerade unterwegs bin, kann es mit Antwort manchmal etwas dauern, doch früher oder später schreibe ich garantiert zurück.

Trendfarbe Moppelkotze: Trip Report Ubuntu 12.04

Veröffentlicht am 30. April 2012

Das allhalbjährliche Update von Ubuntu ist bei mir sehr glatt gelaufen – alles fluppt und vieles ist sogar sehr viel besser als vorher. Die Performance der gesamten Oberfläche ist bei mir absolut durchs Dach gegangen und das Ganze fühlt sich an, wie eine frische Neuinstallation. Viel Neues gibt es nicht, wobei ich mir durchaus vorstellen könnte, mich an das HUD zu gewöhnen, wenn es schaffe, irgendwie dessen Existenz persistent in meinem Kopf zu verankern. Nur an ganz wenigen Ecken knirscht(e) das System beziehungsweise es ließ meine Zähne knirschen.

Mein größtes Problem war der Unity-Launcher, den ich aus alter Gewohnheit im Autohide-Modus betreibe. Bei Multi-Monitor-Setups wird, selbst wenn auf einem Monitor kein Launcher ist, die Maus an der entsprechenden Bildkante eingefangen. Resultat: man kann nicht mehr ohne weiteres die Maus von einem Monitor auf den nächsten schieben, da sie unterhalb einer gewissen Bewegungsgeschwindigkeit am Rand hängen bleibt. Sehr ekelhaft, aber auch leicht zu reparieren: den CompizConfig Configuration Manager installieren (sudo apt-get install compizconfig-settings-manager) und im Unity-Plugin unter „Experimental“ folgende Einstellungen vornehmen:

  • Launcher Reveal Pressure: 1
  • Launcher Reveal Edge Responsiveness: 8
  • Launcher Capture Mouse: deaktivieren

Mit diesen Einstellungen verhält sich der Launcher bei Multi-Monitor-Setups wieder genau wie vor den Update.

Was ich noch nicht gelöst habe, ist die Hintergrundfarbe vom Dash und vor allem von den Notifications. In 12.04 wird diese ja automatisch aus dem Wallpaper errechnet, was bei mir leider im Farbton „Moppelkotze“ resultiert:

Ungünstig gefärbte Notification Bubbles in Ubuntu 12.04

Die diversen Konfigurations-Tools, die vorgeben dies ändern zu können (Ubuntu Tweak, Unity-Plugin im CCSM) scheinen alle keinen Effekt zu haben. Weiß jemand von euch vielleicht wie oder ob man das hinkriegt? Denn bis auf diesen Schönheitsfehler finde ich nicht viel zu meckern: alles läuft und das nach nur minimalem Gefrickel sogar besser als vorher. Gefällt mir!

Weitere Fragen zu HTML5 und Co beantwortet

Veröffentlicht am 16. April 2012

In den letzten Wochen und Monaten habe ich wie gewohnt via E-Mail, Twitter, Formspring und andere Kanäle Fragen zu HTML5 gestellt bekommen und beantwortet. Da wie immer gilt, dass es keine dummen Fragen, aber sehr viel öffentliches Interesse gibt, präsentiere ich hiermit einen weitereren Teil der allseits beliebten Serie „Fragen zu HTML5 und Co“ mit den neuesten Fragen und Antworten rund um unser liebstes Hype-Thema und den diversen dazugehörigen Webtechnologien.

Section-Elemente in Header-Elementen?

Ein Section-Element kann ja ein Header- oder ein Footer-Element beinhalten. Geht es aber auch anders herum? Im konkreten Fall geht es um ein Header-Element mit einem Warenkorb- und Kundenbewertungsbereich. Wäre es semantisch korrekt dafür ein Section-Element zu verwenden?

Erlaubt es eine solche Konstruktion auf jeden Fall – ob sie auch semantisch korrekt ist, hängt vom betroffenen Inhalt ab, aber ich denke im genannten Fall passt es. Generell gilt: Header- und Footer-Elemente dürfen jedweden Flow-Content enthalten, der selbst kein Header- oder Footer-Element ist. Flow-Content umfasst dabei so ziemlich alles, was es für Content bestimmten HTML-Elementen so gibt.

Wie baut man große JavaScript-Apps?

Da ich viel mit Actionscript gearbeitet habe, habe ich immer noch nicht den Sprung zu JS gewagt, da ich immer noch das Gefühl habe, das JS mehr dieses Prototyping-Dingsda macht statt mit Klassen zu arbeiten. In AS und PHP zB. habe ich meine Klasse mit Constructor und den Methoden und Eigenschaften und kann das ganze schön in eine Datei packen und KlasseA nennen.

Wie sieht denn ein allgemeiner Workflow in JS aus? Ich sehe immer nur irgendwelche Codschnipsel, aber ich habe noch nicht wirklich begriffen, wie man komplexere Programme in JS wirklich umsetzen kann (z.B. nach MVC), also dass man die einzelnen Funktions- und Logikeinheiten sinnvoll organisiert.

Das „Prototyping-Dingsda“ in JS (prototypische Vererbung) ist eigentlich simpler und mächtiger als Veerbung via Klassen. Objekte erben direkt von anderen Objekten und die Zwischenkonstruktion „Klasse“ fällt einfach weg. Und das beste: Klassensysteme kann man via Prototypen implementieren. Wenn du also unbedingt möchtest, kannst du problemlos Klassen in JavaScript bekommen. Links:

Was App-Struktur angeht, kommt es drauf an, was du genau in JS machen möchtest. Serverseitige Umgebungen wie Node bieten z.B. ein Modulsystem. Ansonsten gibt es auch für den Browser viele fertige Lösungen aus der Dose. Diesen Artikel über RequireJS in Zusammenarbeit mit AMD (asynchronous module definition) würde ich mal exemplarisch durchlesen. Was MVCeske Konstruktionen angeht, gibt es auch mehrere Lösungen. Unter anderem diese hier sind empfehlenswert:

Für große Apps allgemein würde ich mir mal diese drei kurzen Talks reinziehen, die alle Themen rund um große JavaScript-Apps streifen.

Webcam-Chat mit HTML5?

Ich suche eine Möglichkeit, mit HTML5 Webcam-Chats zwischen bis zu vier Personen zu verwirklichen. Ich habe dabei die jQuery Webcam-API entdeckt, aber es erscheint mir, als ob es hier lediglich um die Möglichkeit geht die Webcam anzusprechen und es nicht möglich ist das Bild auch irgendwie an andere zu übertragen. Ist es nicht möglich, Webcam-Daten zu kopieren und vor allem an andere übertragen?

Was Webcam-Chats angeht, habe ich eine gute Nachricht und eine schlechte Nachricht. Die Gute ist, dass Webcam-Chat (inklusive Sound, d.h. Skype-klonen) tatsächlich bei den klugen Köpfen rund um HTML5 eine Rolle spielt. Es wird aktiv daran gearbeitet und das Ganze läuft unter dem Titel WebRTC. Die schlechte Nachricht ist, dass WebRTC noch eine in einer sehr frühen Phase steckt und noch nicht ernsthaft benutzbar ist – außer in Chrome-Nightlies läuft die API noch nirgendwo und ich möchte wetten, dass die ganze Technologie noch einige größere Änderungen vor sich hat. Da hilft, fürchte ich, erst mal nur Geduld.

Warum kein new Array() in JavaScript?

In diesem Artikel und dem besprochenen Buch heißt es Finger weg von new Array(). Wieso?

Neue Arrays macht man in JavaScript am einfachsten (weil am kürzesten) mit dem Literal []. Es gibt keinen Grund, sich mit new Array() einen Wolf zu tippen, denn das bringt gegenüber [] keine Vorteile. Im Gegenteil: new Array() macht, je nachdem wie viele Argumente man ihm mitgibt, sehr unterschiedliche und teils verwirrende Dinge:

var a = new Array(3);     // Leeres Array mit length = 3
var b = new Array(3, 14); // Array [3, 14]
var c = new Array(3.14);  // RangeError: Invalid array length

All den Stress hat man mit [] nicht – da kommt einfach ein Array mit genau den Elementen heraus, die man hineingesteckt hat.

Weitere Fragen?

Eure Fragen zu HTML5, JavaScript und anderen Webtechnologien beantworte ich gerne! Einfach eine E-Mail schreiben oder Formspring bemühen und ein bisschen Geduld haben – falls ich gerade unterwegs bin, kann es mit Antwort manchmal etwas dauern, doch früher oder später schreibe ich garantiert zurück.

Die Karte des HTML5-Universums

Veröffentlicht am 10. April 2012

Ich habe glaube ich noch keinen einzigen Talk über HTML5 gehalten, in dem ich nicht auf diese Karte des HTML5-Universums zurückgegriffen habe:

Die Karte des HTML5-Universums

Man kann unter Zuhilfenahme dieses Bildchens sehr anschaulich und vor allem zeiteffektiv ein paar wichtige Dinge über HTML5 erklären. Zum Beispiel sieht man sehr schön

  • das Verhältnis der beiden HTML5-Spezifikationen nebst den jeweiligen Web Developer Editions zueinander sowie zum Alltagsbegriff „HTML5“ (alles Teilmengen voneinander),
  • dass neben W3C (blaue Kreise) und WHATWG (grün) noch viele weitere Parteien das Web aufmischen (orange) und dass HTML5 nicht alles ist, was das Web Neues zu bieten hat,
  • den schieren Umfang des ganzen neuen Zeugs (jeder Kreis repräsentiert ein eigenes, unter Umständen sehr umfangreiches Spezifikationsdokument),
  • dass es richtig komplizierte Sonderfälle in diesem ganzen Web-Zirkus gibt (die eingestellte Web SQL Database, die aus einer API und einem Protokoll bestehenden Web Sockets),
  • und dass jQuery und Node.js wirklich nichts mit HTML5 zu tun haben und das auch bei CSS3 eine eher problematische Einordnung ist.

Da ich mindestens zwei mal pro Monat eine E-Mail bekomme, in der gefragt wird, wo man denn diese Grafik herkriegen kann und ob man sie in Slides/Büchern/Abschlussarbeiten verwenden darf, steht das gute Stück ab jetzt offiziell unter einer Creative Commons Namensnennung 3.0 Deutschland Lizenz und hat ein ein Github-Repository für Bugreports und Weiterentwicklung. Es gibt (mit Inkscape gebaute) SVGs sowie PNGs und jeweils eine Variante mit weißem und eine mit schwarzem Hintergrund. Macht damit was ihr wollt!