CSS lernen – Grundlagen
Die Essentials
Für den Einstieg und zum Nachschlagen empfiehlt sich das deutschsprachige SELFHTML-Projekt, das neben dem SELF-Wiki (hier darf jeder gerne mit seinem Wissen beitragen) ein angeschlossenes SELF-Forum hat, wo sich tiefergehende Fragen klären lassen. Grundsatzartikel, Meinungen zu aktuellen Ereignissen, Web-Politik und vieles mehr finden Sie im SELF-Blog.
Informationen für Entwickler von Entwicklern findet man in der MDN-Web-Dokumentation. Hier beteiligen sich deutlich mehr Menschen an der Bereitstellung von Informationen, was man schon am Umfang des Mozilla Developer Network im Vergleich zu SELFHTML merkt. Allerdings sind noch längst nicht alle Inhalte eingedeutscht. Trotzdem ist das MDN immer einen Besuch wert, wenn SELFHTML mal nicht weiter hilft. Zur Not beißt man sich dann durch die englische Version. Das ist immer noch besser als keine Informationen.
Die Seite CSS4you ist ein toller Platz zum Nachschlagen und wenn Sie CSS lernen wollen. Die Seite ist nicht nur eine fast vollständige Referenz für CSS; sie bietet auch etwas, was man auf den meisten CSS-Seiten vermisst: zu den Eigenschaften gibt es die Standardwerte. Wichtig um zu verstehen, warum man sieht, was man sieht, wenn man noch gar kein eigenes CSS geschrieben hat oder um vererbte Eigenschaften bei einem Nachfahren wieder auf den Standard-Wehrt zurück zu setzen (Spoiler: initial geht immer)
Referenz
CSS3-Referenz auf Webkompetenz
des bekannten Autors und Gründers von SelfHTML Stefan Münz
Browser-Kompatibilität
- Can I use (Was geht in welchem Browser – englisch)?
- CSS3 Support in Windows Internet Explorer 9
- Transparent Borders with background-clip (FF3.6, Safari 5, Opera 10, IE 9)
- http://maddesigns.de/css3/css3-im-praktischen-einsatz.html#1 CSS3 – was heute schon funktioniert (ohne viel Erklärungen, einfach zum Ausprobieren)
- CSS3Please! – CSS3 sofort einsetzen (Browserunterstützung dokumentiert)
Selektoren
- The 30 CSS-Selectors you must memorize – Nicht alle Selektoren, aber viele wichtige
- Elemente abhängig von der Zahl der Geschwister formatieren von Lea Verou
Einheiten
- Übersicht über wenig bekannte CSS-Einheiten
- Die Einheit ‚ex‘ eignet sich übrigens zum Erstellen einer Schreibmaschinen-Animation für Text (so als würde der Text erst geschrieben, wenn die Seite aufgerufen wird).
CSS generated Content (Inhalte, die per CSS generiert werden)
Übrigens: CSS-generierte Inhalte werden entgegen der allgemeinen Meinung von Screenreadern vorgelesen. Daher ist es sinnvoll, diese auch dann zu verwenden, wenn Screenreader-Nutzer Zugang zu diesen Inhalten haben sollen. Wenn Sie Informationen vor Screenreader-Nutzern verbergen wollen, sind generierte Inhalte natürliche keine gute Idee – beachten Sie auch die gewünschte Trennung von Inhalt und Layout. CSS-generierte Inhalte sollen kein HTML ersetzen!
CSS Grid
- A complete Guide to css grid (Schöne Übersicht: kurz, aber vollständig, dank zahlreicher Bilder leicht verständlich)
- Video (Youtube – englisch) von Rachel Andrew: Was ist CSS Grid und wie wird es verwendet? – Großartige Einführung, hier die Begleitmaterialien zum Vortrag (englisch)
- Viele Beispiele (Code und mehr Videos von Rachel Andrews) um CSS Grids zu verstehen, alle auch auf Codepen verfügbar für eigenes weiteres Probieren
- Weitere dokumentierte und erläuterte Beispiele von Jen Simmons, teilweise auf CodePen für eigenes weiteres Experimentieren verfügbar
- Liste von Problemen bei der Verwendung von Grid: Gridbugs
- Die Spezifikation CSS Grid Layout Module Level 1
Flexboxen
- A complete Guide to flexbox (Schöne Übersicht: kurz, aber vollständig, dank zahlreicher Bilder leicht verständlich)
- Ganz ähnlicher „Guide to flexbox„, ohne Erläuterungen, aber zum Mitmachen (gefunden bei Jens Grochtdreis)
- Liste von Problemen bei der Verwendung von Flexboxen: Flexbugs
- Die Spezifikation: CSS Flexible Layout Module Level 1
Meistens dürfte aber auch so was reichen (von Heydon Pickering: „Writing Less Damn Code“)
.grid {
display: flex;
flex-flow: row wrap;
}
.grid > * {
flex-basis: 10em;
flex-grow: 1;
}Animationen
Transitions
Den zeitlichen Ablauf von Transitions zu schreiben ist unbequem, um es mal vorsichtig zu formulieren.
Eine gute Hilfe ist die Seite cubic-bezier.com. Super ist aber auch die grafische Hilfe, die einem der kostenlose Frontend-Editor Brackets von Adobe bietet: geben Sie einfach irgendein Schlüsselwort an (z. B. ease). Klicken Sie es dann mit rechts an und wählen Sie aus dem Kontext-Menü „schnell bearbeiten“. Voilá! Eine grafische Darstellung des Effektes erscheint und Sie können die animating-timing-function (so der Name der entsprechenden CSS-Eigenschaft) mit der Maus beeinflussen. Abschließend empfiehlt sich u. U. noch ein wenig rechnerisches Finetuning für die so ermittelten Werte (z. B. Für optimierte Relationen oder Runden der Ergebnisse).
Interessante Lösungen
Ein Element teilweise verstecken und beim Überfahren mit der Maus wieder sichtbar machen:
- How to Build a CSS3 Sliding Menu (englisch)
- Animate CSS (englisch)
- Sweet CSS3-Buttons
- CSS styled slider (range-Element)
To be continued…