HTML5-Elemente im IE ohne Javascript

Bei Peter Kröner steht’s schon, aber ich trage das hier mal der Vollständigkeit halber mal nach: im WHATWG Blog gibt es eine Anleitung, wie man die neuen HTML5-Elemente für den IE stylen kann, wenn Javascript abgeschaltet ist. (Wie es mit JS hatten wir schon.)

Simon Pieters schlägt einen Dreischritt vor:

  1. Know what the DOM looks like and target other elements than the new elements for styling.
  2. Use the universal selector (*) to target the right element.
  3. Use noscript.

Dabei ist das Kernstück folgender CSS-Regeltrick: statt dieses schönen Konstruktes für Browser, die die Elemente stylen können…

article + header + h1 + p { font-weight:bold }

… schreibt man, speziell auf IE zugeschnitten…

body > * + * + h1 + p { font-weight:bold }

… ersetzt also die unbekannten Elemente durch den universellen Selektor. Naja…

Ggf. auftretende Nebenwirkungen lassen sich vermeiden, in dem man sowas in ein Stylesheet nur für IEs ohne Javascript packt (das ist allerdings lustig):

<head>
    <!--[if IE]>
        <noscript><link rel="stylesheet" href="ie-noscript.css"></noscript>
    <![endif]-->

Darauf muss man nun wieder erstmal kommen. Im ganzen ziemlich großer Aufwand noch, aber immerhin, eine Möglichkeit.

The above techniques might not be very scalable or might well impact maintanence, but the point of this article is to show that it is possible to use the new elements while still supporting IE with scripting disabled.

Jetzt schon HTML5 nutzen!

Die 3. Antwort auf die Frage, ob man HTML5 bereits jetzt produktiv einsetzen sollte. Jetzt mit Gewalt.

Mir reicht’s aber auch irgendwie: über drei Einträge hab ich nun Gründe gefunden, warum man HTML5 nicht einsetzen sollte – das wurmt mich ein wenig. Denn möglicherweise gibt es Gründe, warum man es einsetzen will. Zum Beispiel aus politische; oder, weil man vorrausschauend arbeiten will; oder es gibt doch Features, die man jetzt schon nutzen will.

Future

It’s our future?
Foto: Mike Licht @ flickr/CC Lizenz

Machen wir es also mal umgekehrt und sagen JA! zu HTML5, auch im produktiven Einsatz! Was geht dann?

Jetzt schon HTML5 nutzen! weiterlesen

HTML5: Wie war das mit Firefox 2?

Die 2. Antwort auf die Frage, ob man HTML5 bereits jetzt produktiv einsetzen sollte. Es wird nicht besser.

Wie schon in der letzten Antwort demonstriert, kann man den IEs mit ein wenig Javascript jedes Element beibiegen, es landet korrekt im DOM, es lässt sich mit CSS stylen. Auch schon angemerkt: Firefox 2 bereitet da mehr Probleme.

HTML5: Wie war das mit Firefox 2? weiterlesen

Neue HTML5-Elemente

Dies ist die 1. Antwort auf die Frage, ob man HTML5 bereits jetzt produktiv einsetzen sollte.

Einerseits bildet HTML5 den Ist-Zustand dessen, was man mit Webbrowsern heute machen kann ab, ist also ziemlich kompatibel. Allerdings bringt HTML5 auch jede Menge neue Elemente mit (abbr, article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, mark, menu, meter, nav, output, progress, section, time, video), die zunächst mal nur mangelhaft in Browsern implementiert sind.

Tagsoup

Etwas mehr Tagsoup gefällig?
Foto: daisybush@flickr/CC Lizenz

Wie Peter im Kommentar hier schon angedeutet hat, kann man die verschiedenen Internet Explorer durch einen Javascript-Trick dazu bewegen, für sie unbekannte HTML-Tags richtig zu erkennen und ins DOM zu rendern. Der Trick ist altbekannt, wird aber auch nochmal im WhatWG-Blog ausführlich beschrieben. Um den <section> im IE bekannt zu machen, reicht folgende Zeile Javascript: document.createElement("section");. Hier gibt’s ein Script, das alle neuen Elemente aktiviert, einzubinden über conditional comments.

Die anderen gängigen Browser parsen auch unbekannte Tags, fressen HTML5 also eher… dummerweise hat nun gerade Firefox 2 dabei ein paar Probleme, die aber seit Version 3 behoben sind. Firefoxnutzer sind sicherlich updatefreudiger als IE-Anhänger, wenn aber in der Liste der zu unterstützenden Browser Firefox 2+ steht, dann muss man die Einsatzfähigkeit von HTML5 zunächst verneinen. In diesem Fall lautet die Antwort diesmal: nein.

Doctype html

Eine der Sachen, die mir an HTML5 so gefallen ist, dass man sich den Doctype endlich mal merken kann:

<!DOCTYPE html>

Dieser Doctype ist bei vielen Browsern natürlich unbekannt. Aber das macht nichts, die Browser schalten in diesem Fall in den Standard- oder Strictmode. Gewünschtes Verhalten. Natürlich funktionieren noch nicht alle neuen HTML5 Features, im Gegenteil.

Im Grunde kann es losgehen.

Structural Tags in HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in. Danke, Oliver.

HTML5 im produktiven Einsatz?

Eric Meyer hat An Event Apart in HTL5 umgesetzt.

So as Bruce discovered, pretty much all browsers will already let you wrap a elements around other stuff, so it got added to HTML 5. And when I tried it, it worked, clickably speaking. That is, all the elements I wrapped became part of one big hyperlink, which is what I wanted.

[…]

I was happy to get the layout problems sorted out, obviously. Only, at that point, I wasn’t doing anything that required HTML 5.

Dabei nennt er einige Gründe schon jetzt HTML5 zu nutzen, die ich für ziemlich sexy halte, widerlegt sich aber leider ein wenig selbst. Preisfrage: ist HTML5 schon reif für den Produktiveinsatz?

Was sind die Vorteile? Wo sind die Stolpersrähte? Welche Browsersupportliste bekommt man damit hin?

HTML5 im produktiven Einsatz? weiterlesen

The section element

Mark Pilgrim: Welcome to a new semi-regular column, „The Road to HTML 5,“ where I’ll try to explain some of the new elements, attributes, and other features in the upcoming HTML 5 specification. The element of the day is the <section> element.