CSS lernen

Es gibt zahlreiche Informationen, Tutorials, Hilfsangebote und mehr für CSS. Hier sind einige zu finden, die mir selber hilfreich scheinen. Allen vorweg natürlich SELFHTML und das Mozilla Developer Netzwerk (MDN).

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

Die W3C-Spezifikation

CSS3-Referenz auf Webkompetenz
des bekannten Autors und Gründers von SelfHTML Stefan Münz

Browser-Kompatibilität

Selektoren

Einheiten

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

Flexboxen

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:

To be continued…

Defekte Links melden, bitte!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.