nicht angemeldet
Transition: Besser CSS3 oder Javascript?
suitHi,
ich möchte auf einer Website Kreise, die "onmouseover" ein wenig größer werden. Nun hab ich zwei Fragen zur Umsetzung:
1.) Wenn die Kreise nur als Dekoration oder "Drumherum" für Links dienen, sollte ich dann die Kreise direkt über die a-Tags realisieren?
2.) Sollte ich für den "Größer-Werden-Effekt" besser CSS3 oder Javascript benutzen? Bis auf den IE bis einschließlich Version 9 wird ja Transition unterstützt. IE-User müssten dann bei der CSS3-Umsetzung auf den Effekt verzichten.
Was denkt ihr? Wäre dankbar für jede Hilfe.
Grüße
-
1.) Wenn die Kreise nur als Dekoration oder "Drumherum" für Links dienen, sollte ich dann die Kreise direkt über die a-Tags realisieren?
Warum "drumherum für Links"? Warum wird der Link nicht allgemein größer? Sollte kein problem sein mit position: relative z.B. um 10 Pixel nach links oben verschieben und die höhe und breite um 20 Pixel vergrößern.
2.) Sollte ich für den "Größer-Werden-Effekt" besser CSS3 oder Javascript benutzen? Bis auf den IE bis einschließlich Version 9 wird ja Transition unterstützt. IE-User müssten dann bei der CSS3-Umsetzung auf den Effekt verzichten.
Beides - du kannst mit JavaScript testen ob die 2D-Transformation unterstützt wird, wenn nicht machst du die Animation mit JavaScript oder aber du machst die Animation für alle unterstützenden Browser und der Rest bekommt einen harten Wechsel.
-
Warum "drumherum für Links"? Warum wird der Link nicht allgemein größer? Sollte kein problem sein mit position: relative z.B. um 10 Pixel nach links oben verschieben und die höhe und breite um 20 Pixel vergrößern.
Bisher hab ich die Links in divs drin. Die die divs sind die Kreise und die Links sind mit position:relative mittig positioniert und haben einen schwarzen hintergrund. Hätte ich nur die Links größer gemacht müsste ich in den Link tag noch was um den Text machen für den schwarzen Hintergrund.
Beides - du kannst mit JavaScript testen ob die 2D-Transformation unterstützt wird, wenn nicht machst du die Animation mit JavaScript oder aber du machst die Animation für alle unterstützenden Browser und der Rest bekommt einen harten Wechsel.
Ist CSS3 Performance-mäßig die bessere Variante?
-
Bisher hab ich die Links in divs drin. Die die divs sind die Kreise und die Links sind mit position:relative mittig positioniert und haben einen schwarzen hintergrund. Hätte ich nur die Links größer gemacht müsste ich in den Link tag noch was um den Text machen für den schwarzen Hintergrund.
Du kannst auch mit den pseudo-Elementen ::before oder ::after arbeiten um die Kreise zu erzeugen - Möglichkeiten gibts hier viele, aber das müssen nicht notwendigerweise tatsächlich echte Elemente sein. Das kommt auf die Browser an, die du unterstützen willst oder musst.
Ist CSS3 Performance-mäßig die bessere Variante?
Jein - es gibt sicher Browser bzw. Browserversionen (Achtung: Vermutung!) derern JavaScript-Engine so hochgezüchtet ist (die werden ja seit Jahren optimiert), dass sie im bestimmten Fällen schneller ist als die native CSS3-Variante (die ggf. erst seit ein paar Monaten drin ist).
Das ist aber ein Problem (falls es denn tatsächlich besteht) dass sich selbst löst - es ist also prinzipiell davon auszugehen, dass die native CSS3-Variante schneller ist, zumal diese bei modernen Browsern durchaus auch Hardwarebeschleunigt passiert.
-
Ist CSS3 Performance-mäßig die bessere Variante?
Im Allgemeinen ja.
Jein - es gibt sicher Browser bzw. Browserversionen (Achtung: Vermutung!) derern JavaScript-Engine so hochgezüchtet ist (die werden ja seit Jahren optimiert), dass sie im bestimmten Fällen schneller ist als die native CSS3-Variante (die ggf. erst seit ein paar Monaten drin ist).
JavaScript ist nicht direkt für die Animation zuständig. JavaScript setzt lediglich per Timeout Inline-Styles. Das läuft dann zurück in die in C++ implementierte Rendering-Engine, die auf die Zeichenbibliotheken zugreift. Die Geschwindigkeit der JavaScript-Engine ist da zweitrangig, schließlich wird hier nur .style.prop = 'value' aufgerufen. Bei nativen Transitions fällt die JavaScript-Engine als Mittler komplett weg, es ist also direkt C++-Kompilat verantwortlich.
Das ist aber ein Problem (falls es denn tatsächlich besteht) dass sich selbst löst - es ist also prinzipiell davon auszugehen, dass die native CSS3-Variante schneller ist, zumal diese bei modernen Browsern durchaus auch Hardwarebeschleunigt passiert.
Eben, diese Möglichkeit steht bei klassischen JavaScript-Animationen nur eingeschränkt zur Verfügung (man müsste CSS-Transforms per JS setzen).
Mathias
-
-
-