Dokumentation, Standards, Artikel, ... :
...
Bekannte Fehler und Unzulänglichkeiten:
- Flatterhafte Transition bei zeitweise nicht gesetzten CSS-Parametern (Chrome V25):
-
Ist bei z.B. einem <div> keine Angabe für eine Höhe gemacht und soll die Änderung der Höhe per Transition erfolgen, ergibt sich ein "Gezappel" bei der Zuweisung einer Höhenangabe. Der Bereich wird erstmal auf Höhe 0 eingestellt und erst dann auf die neu vorgegebene Höhe.
Eventuelle Abhilfe: Die Höhenbegrenzung kann als (große) Maximalangabe spezifiziert werden, die normalerweise irrelevant ist. Wird die Maximal-Höhe dann auf 0 gesetzt, flattert es nicht mehr. Zu beachten ist, dass die Transitions-Zeit für die gesamte maximale Höhe verwendet wird. Bei kleiner realer Höhe geht die Änderung dann ganz fix. Daher sollte die Maximalhöhe nicht zu üppig gewählt werden.
Tricks und Kniffe:
Mehrere (sich überlagernde) Hintergründe:
Manchmal erscheint es nützlich, dass ein Hintergrund aus mehreren Komponenten besteht. Dazu muss man nicht mehrere HTML-Elemente überlagern, sondern kann einem einzigen Element mehrere Hintergründe zuordnen. Das verarbeitet sogar schon der Internet Explorer ab Version 9 und die anderen wichtigen Browser sowieso schon lange.
Die Parameterwerte zu den überlagernden Hintergründen werden in einer komma-separierten Liste zu den verschiedenen Hintergrund-Parametern angegeben: Also "parametername:Vordergrundwert,Hintergrundwert;". Dabei muss für alle sich unterscheidenden Parameterwerte der Hintergründe eine Werteliste angegeben werden.
Es ist auch möglich, beim "background"-Parameter mehrere Hintergründe anzugeben. Dazu werden die Parameterwerte-Listen zu den Hintergründen mit Kommata getrennt. Beispielsweise "background:url(...) left top, url(...) right bottom;" .
Links:
Rahmen ohne Vergrößerung der Block-Darstellung:
Problem: Wenn man einem Block einen Rahmen verpasst, wird seine Darstellung um die Rahmendicke vergrößert. Das kann diverse Probleme verursachen. Von Unsichtbaren Rahmen-Teilen bis zum verschieben der Anordnungen etc. .
Abhilfe kann ein "Innenrahmen" für den Bock bieten, wenn er mittels "box-shadow" erzeugt wird. Dazu kann man beispielsweise folgendes angeben:
box-shadow: #F00 0px 0px 0px 1px inset;
ergibt einen roten Rahmen ohne Versatz in X- oder Y-Richtung und ohne Verlauf mit der Breite von 1px innerhalb des Blocks.
Irrtümliche Mausklicks verhindern mittels ignorieren /"durchlassen" von Pointer-Ereignissen:
Per CSS kann man mit "pointer-events:none;" HTML-Elemente für Pointer-/Maus-Ereignisse "unsichtbar" bzw. "transparent" machen. Die "Pointer-Events" gehen dann an das übergeordnete (in der Darstellung darunter liegende) HTML-Element weiter.
Wenn sich für die Nutzer unerwartet eine Darstellung über eine andere legt (beispielsweise eine überblendete Nachricht), könnte man sie zunächst relativ transparent und für Maus-Ereignisse durchgängig darstellen, um sie dann etwas später - nachdem die Nutzer genug Zeit für die Wahrnehmung hatten - für Maus-Ereignisse freizugeben und voll "undurchsichtig" darzustellen. Dadurch wird die Gefahr "falscher Klicks" verringert.
- Zentrieren mit CSS:
- "Centering in CSS: A Complete Guide"
- Idee zur Festlegung der Schriftgrößen:
- "Font Size Idea: px at the Root, rem for Components, em for Text Elements"
- Animationen mit CSS:
- "Using CSS animations" von Mozilla und
"What Are CSS3 Animations?" bei w3schools.com - ... :
- ...
- ... :
- ...
... tbd ...
CSS3 WIM-App-Verfahren (techn.) Zu erledigen Problem-Analyse
