Wichtige Seiten zu HTML5 und CSS3
In meinem letzten Projekt fiel mir genau wie in meiner letzten Schulung auf, dass vielen Kollegen der Überblick über wirklich hilfreiche und wichtige Links fehlt. Insbesondere der Umgang mit CSS3 und HTML5 erfordert das ständige Nachschlagen nach Browsersunterstützung und der Suche nach passenden Alternativen.
Es ist zudem aber auch wichtig, inhaltlich am Ball zu bleiben. Dafür benötigen wir inspirierende und gerne auch informative Artikel. Die gibt es in der gewünschten Güte und Qualität (leider) nur im englischsprachigen Web. Ich gebe hier mal eine Übersicht der mir besonders wichtigen Referenzen und Informationsseiten. Diese Übersicht ist nicht komplett, nur auf das Wesentliche eingedampft. Ich bin überzeugt, dass jeder an moderner Webentwicklung Interessierte diese Auswahl in seinen Bookmarks haben sollte.
Referenzen
- CSS3-Files.com
- HTML5Doctor: in meinen Augen die beste Seite mit Basisinformationen zu HTML5. Mit umfassenden Artikeln und einem hilfreichen Element-Index.
- HTML5: Edition for Web Authors: Wer tatsächlich die Specs lesen möchte sollte diese Version nehmen. Darin sind nur die für uns Entwickler wichtigen Infos notiert, nicht die Hinweise für Browserhersteller.
- Webkit Extensions: Übersicht über alle (?) Webkit-spezifischen CSS-Eigenschaften mit verlinkter Infoseite.
- Mozilla CSS Erweiterungen: Referenz aller mozilla-spezifischen CSS-Eigenschaften mit Erklärung derselben.
Infoseiten
- When Can I use ...: Eine der wichtigsten Übersichtsseiten über die Unterstützung moderner Techniken in den diversen Versionen der Browser.
- HTML5 Please: eine der wichtigsten Seiten zu HTML5 und - entgegen der Namensgebung - CSS3. Sie gibt Infos über alle Techniken, ob deren Einsatz empfehlenswert ist (meist basierend auf der Browserunterstützung) und informiert über eventuelle Polyfills.
- HTML5Doctor: in meinen Augen die beste Seite mit Basisinformationen zu HTML5. Mit umfassenden Artikeln und einem hilfreichen Element-Index.
- HTML5 rocks: Extrem umfangreiches Angebot rund um HTML5 von Google.
- Web Standards Curriculum: Ursprünglich von Opera erstellte Sammlung von Tutorials zu Fragen der Frontenentwicklung. Zur besseren inhaltlichen Pflege wurden die Texte zwischenzeitlich dem W3C übergeben.
Demoseiten
- HTML 5 Demos and Examples
- HTML5 - Information and samples for HTML5 and related APIs
- CSS3 - Information and samples
- DOCTYPEhtml.net: HTML5- und CSS3-Demos
Blogs
- CSS-Tricks: Immer interessantes, englischsprachiges Blog, das sich vor allem mit CSS beschäftigt.
- Smashingmagazine: Immer interessantes, englischsprachiges Blog aus Freiburg, das sich um alle Aspekte moderner Webentwicklung kümmert.
- Chris Heilmann: Chris Heilmann glänzt in seinem Blog mit unterhaltsamen, inspirierenden und teilweise lehrreichen Vorträgen. Doch man sollte auch seine immer wieder eingestreuten nachdenklichen Artikel nicht übersehen. Gerade diese finde ich lesenswert.
Tools
- CSS-Selectors: Diverse Selektoren an einem beispielhaften HTML-Konstrukt austesten.
- CSS3.Mikeplate.com: CSS3-Eigenschaften direkt im Browser manipulieren, den Effekt sehen und den dazugehörigen Quellcode kopieren.
- Colorzilla Gradient Editor: Wie in einem Bildbearbeitungsprogramm einen Verlauf erstellen und den CSS3-Code erzeugen lassen. Dieses Tool gibt auch die vor Kurzem geänderte offizielle Verlaufssyntax aus. Man kann sich neben der passenden IE-Filter auch ein SVG für den IE9 erstellen lassen.
- i2Style: Dieses Tool greift einem visuell bei der Erstellung von Buttons unter die Arme.
- Westciv Animations-Tool: Animationen visuell erstellen, natürlich mit Codeausgabe.
- DataURI-Konverter: aus Bildern Inline-Bilder mittels data-uri erstellen. Funktioniert leider nicht unterhalb des IE8.
- rgab-argb-Konverter: Das Tool konvertiert rgba-Werte in einen Hex-Wert, den man dann in einen IE-Filter einsetzen kann.
Dies ist nur eine grobe Auswahl. Eine umfangreichere Liste, die ich für meine Schulungen und meinen Kurs an der Uni-Mainz (wieder dieses Wintersemester) pflege, findet sich bei github.