Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » Kontrollierter Rückfall von CSS3-Eigenschaften – Übergänge (2)

Kontrollierter Rückfall von CSS3-Eigenschaften – Übergänge (2)

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Gastautor
  • 29. April 2010

Inhaltsverzeichnis

Jon Raasch

Auch wenn die neuen Browser-Versionen nach und nach CSS3 unterstützen – es sind noch immer genügend ältere Browser im Einsatz, die CSS3 nicht beherrschen. Wenn Sie neben Ihren Kunden auch sich selbst glücklich machen und CSS3 trotz der Rücksichtnahme auf IE & Co. einsetzen wollen, nutzen Sie diese Tipps, um CSS3-Eigenschaften in älteren Browsern möglichst passend auf andere Art zu ersetzen.

Graceful degradation – oder würdevoller Rückfall – nennt sich dieser Ansatz. In diesem zweiten Teil des Beitrags geht es um Übergänge. Teil 1 behandelte Farbverläufe, RGBa-Transparenz, abgerundete Ecken sowie Box- und Textschatten.

Die CSS3-Creme – Transitions

Übergänge gehören zu den nützlichsten Neuerungen in CSS3. Zudem fallen sie in älteren Browsern recht unproblematisch und von selbst zurück. Verwenden wir Übergänge also gleich einmal, um unsere Schaltfläche zu animieren:

.button {
    width: 200px;
    height: 50px;
    -webkit-transition-property: width, height; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .5s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: width, height; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .5s;
    -moz-transition-timing-function: linear;
    -o-transition-property: width, height; /* for Opera 10.5 */
    -o-transition-duration: .5s;
    -o-transition-timing-function: linear;
}

.button:hover {
    width: 300px;
    height: 75px;
}

Diese Animation funktioniert in Chrome, Safari und Opera, nicht jedoch in IE oder Firefox. In nicht-kompatiblen Browsern fallen die Übergänge jedoch von selbst auf einen einfachen Hover-Status zurück.

Um die Animation auch in IE und Firefox darzustellen, benötigen wir allerdings mehr als schlichtes CSS. Dafür nehmen wir jQuery, was wiederum eine Abfrage erfordert, ob der genutzte Browser Übergänge unterstützt oder nicht.

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// make sure to execute this on page load
$(function() {
    // determine if the browser supports transition
    var thisStyle = document.body.style,
    supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined;
}
</script>

Mit diesem Code prüfen wir das Dokumenttyp-Objekt, um zu sehen, ob Transition unterstützt, beziehungsweise in irgendeinem der Browser-Präfixe genannt wird. Wir hätten natürlich auch das Browser-Objekt von jQuery nutzen können. Das ist jedoch nicht empfehlenswert. Statt dieser Browser-Schnüffelei sollten Sie das Problem der Browser-Abfrage per Feature Detection lösen.

Als Nächstes lassen Sie uns der Schaltfläche, die den animierten Übergang auslöst, ein Hover-Ereignis zufügen:

// make sure to execute this on page load
$(function() {
    // determine if the browser supports transition
    var thisStyle = document.body.style,
    supportsTransition = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined;

    // assign jQuery transition if the browser doesn't support transition
    if ( ! supportsTransition ) {
        var defaultCSS = {
            width: 200,
            height: 50
        },
        hoverCSS = {
            width: 300,
            height: 75
        };

        // loop through each button
        $('.button').each(function() {
            var $thisButton = $(this);

            $thisButton.hover(function() {
                // execute this on mouseover
                $thisButton.css(defaultCSS)
                    .animate(hoverCSS, 500, 'linear' );
            }, function() {
                // execute this on mouseout
                $thisButton.animate(defaultCSS, 500, 'linear' );
            });
        });
    }
});

Hier weisen wir den CSS-Hover- und Normalzustand mithilfe der jQuery animate() API zu. Damit das Ganze der CSS3-Transition entspricht, haben wir die Animationsdauer auf 500 Millisekunden beziehungsweise .5s gesetzt und die Methode „linear“ für einen sanften Übergang gewählt.

Hinweis: Bei Mouseover wenden wir zuerst den CSS-Default-Zustand über die Query css() API zu. Erst danach rufen wir animate() über die CSS-Hover-Eigenschaft ab. Sinn und Zweck: Damit überschreiben wir die zugewiesene :hover-Pseudo-Klasse in unserem CSS-Code.

Damit funktioniert unser CSS-Übergang in allen gängigen Browsern. Dieses Skript können Sie abwandeln, um Übergänge mit jeder beliebigen CSS-Eigenschaft zu erstellen, die von jQuery.animate() unterstützt wird.

Diese Technik ist auf alle CSS-Attribute mit numerischen Angaben wie zum Beispiel Schriftgröße anwendbar. Zudem erweitert jQuery UI die animate()-Funktion, um nicht-numerische Attribute wie die Farbe zu unterstützen.

Ein paar Worte zum Schluss

Wenn auch nicht ganz perfekt, werden CSS3-Eigenschaften nun doch von allen modernen Browsern außer IE unterstützt.

Die Filter des IE nebst .htc-Hacks füllen die meisten dieser Lücken. Allerdings bringen diese Methoden jeweils diverse Nachteile mit sich. Im Allgemeinen sind sie ziemlich eigenwillig und problembehaftet, wenn es darum geht, mehrere Filter miteinander zu verbinden.

Letztendlich sind Hacks für nichtkompatible CSS3-Browser immer etwas suboptimal. Das sollte dennoch nie den Ausschlag dafür geben, Websites in modernen Browsern mit ausgefeilteren Eigenschaften und Funktionen auszustatten.

Einfach gesagt: Websites müssen nicht in jedem Browser exakt gleich aussehen.

(mm), ™

Gastautor

Gastautor

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

360 grad konzept logo werbeagentur hannover.

Werbeagentur Hannover | 360 Grad Konzept

Hannover

WebOptimizer Logo mit der Aufschrift: Erfolgreich im Internet.

WebOptimizer – Webseiten und Online-Marketing der nächsten Generation

München

Homepage Hexxer Logo der Webdesign Agentur aus Balingen.

HOMEPAGE HEXXER

Balingen

werbeagentur held traunstein logo

HELD Werbeagentur

Traunstein

Aeosys Digitalagentur Logo Soest.

aeosys

Soest

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑