HTML 5, CSS 3

Sinnvolle, bereits jetzt einsetzbare Features, die nicht zu Kompatibilitätsproblemen führen sind:

in HTML5

– neue Elemente/Attribute

  • Aria-Landmarks (Deklaration von Bereichen, z.B.  „role=navigation“/“role=search“)
  • für Formularelemente (<input type=“url“ /> od. <input type=“email“ />) (wird bei Unwissenheit des Browsers auf Standard (=text) zurückgesetzt unddient u. a. der Anpassung der Tastatur beim iPhone)

– bessere Einbindung von JS, Video und anderen Dateien und sogar dem <!DOCTYPE html>

in CSS3 (Einschränkung IE6)

–  neue Selectoren

–  besseres Box Model (box-sizing)

  • Berechnung möglich, z.B. width: calc(100%/3-3*1px);

–   neue Effekte

  • RGBa-Farbangaben zur Erzeugung von Transparenzen, z.B. rgba(0,0,255,0.3)number
  • Schatten zur Erzeugung eines 3D-Effekts (perspektivisch nicht ganz korrekt)
  • Runde Ecken
  • Erweiterung Pseudo Klassen (sinnvolle Erweiterung?)

Kompatibilität IE

–  IE 6 – Support seitens Mircrosoft   bis 04/2014!!!

–  IE 9 wann? Mit IE9 soll HTML5 und CSS3 weitestgehend unterstützt werden, allerdings gibt  es bislang keine Zeitangabe, ab wann dieser verfügbar ist.

Lösungen für IE u. ältere Versionen anderer Browser

–  Modernizr = JS-Library

–  Elemente im IE anmelden, z.B. document.createElement(’section‘);

– mit div und entsprechender id/class umschließen

Viele andere Features sind vor allem wegen des IE nicht einsetzbar. Was der IE9 tatsächlich leisten kann, wird sich zeigen.

Interessante Helfer

– HTML-5- Vorschau unter http://html5demos.com

Hier findet man eine Auflistung der HTML-5-Technologien mit Angabe der jeweiligen Browserunterstützung , inkl. Demo.

– CSS-3-Optionen unter http://www.findmebyip.com

Neben aktuell verwendeter Browser- und IP-Inforamation, erhält man gleich die für den verwendeten Browser entsprechenden CSS-3-Optionen

-          Elemente im IE anmelden, z.B. document.createElement('section');
HTML-Lösung