PHP Entwickler - Kevin Quiatkowski

html4rocks so lautet der Name einer Homepage von Google die über HTML5 und CSS3 aufklärt. Und ich schließe mich der aussage an, denn HTML5 rockt wirklich. Ich habe diese Woche meine erste Homepage mit HTML angefangen und es macht echt Spaß als wenn ich das erste mal eine Webseite entwickle. Dinge die vorher nur mit Photoshop möglich waren kommen nun gänzlich ohne Grafiken aus. Ich möchte euch mit diesem Artikel einen kleinen Einblick in die Welt von HTML5 geben und euch mit links zu weiterführenden Informationen versorgen.

Die erste tolle Neuerung sind die neuen input Felder, während es vorher nur einfachen Text oder ein Passwort gab kann man nun auch direkt angeben ob beispielsweise eine E-Mail oder eine Zahl erwartet wird. Reichen einem die Vorgaben nicht kann man auch einfach einen regulären Ausdruck benutzen. Und nein, das ist nicht JavaScript oder ähnliches sondern pures HTML.
E-Mail: <input type="email"> Telefon: <input type="tel"> Zahlen: <input type="number"> Reguläre Ausdrücke: <input type="text" pattern="[\d]{5}(-[\d]{5})"> Die Browser prüfen dabei die Benutzereingaben direkt auf Plausibilität und verweigern mitunter das absenden des Forumlars bei fehlerhafter Eingabe. Außerdem können mobile Geräte verschiedene Tastaturtypen anbieten. Zudem lassen sie sich über CSS mit :valid und :invalid ansprechen wie man es bereits bei Links mit dem :hover kennt.

Aber auch Pflichtfelder sind jetzt möglich. Während bei den normalen Typbezeichnungen sich das Formular auch absenden lässt wenn die Felder leer sind muss hier zwingend etwas drin stehen.
<input type="text" required>
<input type="number" required>
<input type="text" pattern="[\d]{5}(-[\d]{5})" required>
Eine weitere Sache die bisher immer über Javascript gelöst wurde ist der Platzhalter der verschwindet sobald man in das Feld klickt und wieder kam sobald es im leeren Zustand den Fokus verliert. Den gibt es jetzt auch als HTML
<input type="number" placeholder="123456">

Was ich persönlich sehr interessant finde auch wenn es erstmal keine Auswirkung auf die Darstellung oder Funktionalität hat ist die Semantik die mit HTML5 auch einige Neuerungen bekommt. So gibt es nun unter anderem <header> <footer> <nav> <article> und für scheinbar alle anderen Elemente ist jetzt itemscope dazu gekommen, womit kleine Informationsgruppe zusammengefasst werden können. <div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop="name">Neil</span>.</p>
 <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
 <p>I am <span itemprop="nationality">British</span>.</p>
</div> In den Google Webmastertools taucht dies bereits auf und ermöglicht das in den Suchergebnissen ein Produkt mit Bild und Bewertung angezeigt wird anstatt der typischen Suchergebnisse.

Eigentlich ist diese Liste viel zu lang als das man alles in einen Blog Post unterbringen kann, denn es gibt ja noch die video und audio Elemente sowie das Canvas mit dem es möglich ist Bilder und sogar 3D Animationen zu erzeugen. Das dürfte dann wohl Adobes Flash aufs Abstellgleis stellen.

Nun zu CSS3, nachdem ich wohl die Hälfte der HTML5 Neuerungen vergessen/Übersprungen habe.

Das wichtigste ist denke ich mal die funktion rgba() die man überall dort einsetzen kann wo man vorher die Hexwerte für RGB hingeschrieben hat. Hiermit ist es jetzt möglich die Farbe zusammen mit einem Alphawert anzugeben und so die Dekkraft zu beeinflussen. background: rgba(120, 120, 255, 0.85);

Und dann gibt es da noch die Farbverläufe, die selbstverständlich die einfachen Hexwerte sowie die neue rgba Funktion annehmen. So sind z.b. auch verläufe zu anderen transparentwerten möglich. Außerdem lassen sich Grenzen einstellen um nur die Hälfte eines divs mit einem Verlauf zu füllen und die andere Hälfte mit was anderem. Hier jetzt aber nur die einfachen Varianten background:radial-gradient(center, rgba(255, 255, 255, 0.4), #adf);
background:linear-gradient(bottom right, #000000 0%, #FFFFFF 100%);
background:radial-gradient(right top, ellipse farthest-side, #FFFFFF 0%, #00A3EF 100%);


Und als weiteres gibt es da noch die Schatten, einmal für Texte und einmal für andere Elemente. Die Schatten lassen sich in Dichte, Farbe, Ausbreitung und Härte einstellen. box-shadow: 10px 10px 5px 5px rgba(0, 0, 0, 0.6);
text-shadow: 2px 2px 3px #ab12cd;
Und als letztes möchte ich euch die runden Kanten zeigen border-radius: 5px; oder auch einzeln border-top-left-radius: 5px;
border-top-right-radius: 8px;
border-bottom-right-radius: 10px;


Das waren jetzt ein einige der Neuerungen, hier noch ein paar Links mit weiterführenden Informationen, und demnächst könnt ihr euch auch auf das eine oder andere Tutorial zu diesem Thema einstellen.

Die erste Seite die ich für jemanden in HTML5 gemacht habe. Einfach Quelltext anschauen, ich habe so gut wie möglich kommentiert
The HTML5 Test Hier könnt ihr die HTML5 Fähigkeit eures Browsers auf die Probe stellen
Präsentation/Demo von Google mit Code Besipielen
Demonstration von Microsoft