Codecandies

Das Weblog von Nico Brünjes.

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.

blog.whatwg.org

3 Kommentare

  1. aber stylen kann man »article«, »header« usw. deswegen immer noch nicht, oder?

  2. Völlig richtig. Man würde in diesem Fall um die neuen Tags sozusagen herumcoden und nur deren Inhalte stylen.

  3. hab mir erst vor kurzem wieder einen abgebrochen dem IE6 ein eigenes drupal theme schmackhaft zu machen. angesichts dessen, und wenn jetzt noch html 5 kommt und irgendwann sicher auch noch css 7, 8 oder 9 (uebertreib), und dann trotzdem alles abwaertskompatibel zum ie6 bleiben soll, dann weiss ich nicht.. irgendwann sehen css stylesheets dann noch so aus wie perl code. nur haarausfall ist noch sicherer ;)

    PS: Schoenes Rechencaptcha, so haelt man sich sicher schon mal die ganzen BILD-Leser vom Hals *fg