CSS3 und Browser-Unterstützung

Der aktuelle Stand der Standards für Web-Browser-Unterstützung für CSS3 Effekte und Transformationen ist im Fluss. Wahrscheinlich im Laufe der Zeit die Kräfte-that-sein in der Browser-Welt - diejenigen, die Internet Explorer, Safari, Firefox und Chrome (und andere) veröffentlichen - kommt zu einem gewissen gegenseitigen Einvernehmen darüber, wie für CSS3 Effekte zu codieren.

Aber gerade jetzt, sie haben sich nicht auf eine solche Vereinbarung. Das bedeutet, dass zumindest in diesem Schreiben, diese coole neue Effekte für verschiedene Browser separat definiert werden.

Hier ist, was Sie über CSS3 und Browser-Unterstützung wissen müssen:

  • CSS3 Effekte und Transformationen werden unterstützt in Strom Versionen von allen gängigen Browsern, aber Safari, Firefox und Opera erfordern unterschiedliche Code Präfixe CSS3 Effekte und verwandelt Arbeit in ihren Browsern zu machen.

  • Dreidimensionale (3D) Transformationen sind von Browsern außer Safari und Chrome unterstützt wird, und weil sie sich drehen Objekte entlang der x-Achse (horizontal) oder y-Achse (vertikal), sie tun viel nicht ohne zusätzliche javascript, sie zu animieren. Das heißt, die Welt von CSS3 verwandelt ist in ständiger Bewegung und Entwicklung und 3D-Transformationen gewinnen können breitere Unterstützung und immer besser zugänglich für Entwickler.

  • CSS3 Effekte und Transformationen funktionieren gut in jedem modernen Browser-Umgebung. Sie müssen nur redundante Versionen der einzelnen Effekte mit unterschiedlichen Browser-Präfixe, um aufzunehmen, um sie in jedem Browser zu arbeiten.

  • Einige veraltete Browsern nicht unterstützt CSS3 Effekte und verwandelt sich überhaupt nicht.

    Verwenden Sie CSS3 Effekte und verwandelt sich in einer Weise, dass selbst wenn ein Browser nicht CSS3 unterstützt, der Seiteninhalt nicht beschädigt ist. Die folgende Abbildung zeigt einen abgerundeten Rechteck-Effekt. Auf der rechten Seite unterstützt der Browser CSS3 Effekte, und auf der linken Seite, wird der Browser unterstützt sie nicht. In beiden Umgebungen können Sie den Inhalt, und einige Design-Effekte, wie die Box und Schriftfarbe, werden unterstützt lesen.

    bild0.jpg

    Da jedes digitale Gerät mit Copy-and-Paste-Tools kommt, beinhaltet das Workflow ein Effekt oder transform-Eigenschaft zu schaffen, und dann eine Reihe von Kopien mit verschiedenen Präfixen zu schaffen.

Im Folgenden ist CSS3-Code, der schiefe Text erzeugt. Beachten Sie, dass fünf Zeilen CSS erforderlich, um den gleichen Effekt Skew für Firefox, Safari, Opera, Internet Explorer und eine generische Version zu definieren. (Die Leute, die Browser scheinen in Richtung auf die generische Version abzuschwächen, aber dies ist nicht allgemein angenommen.)

.Skew {background-color: # 999-height: 300px; width: 300px; -moz-transform: Skew (12 Grad, 0 Grad) - Webkit-transform: Skew (12 Grad, 0 Grad) - ms-transform: Skew (12 Grad, 0deg) - o-transform: Skew (12 Grad, 0 Grad) -Transform: Skew (12 Grad, 0 Grad) -Farbe: weiß-padding: 15px; float: right; margin-top: 6px; margin-right: 100px; margin unten: 6px; margin-left: 6px;}

Vier dieser Variationen der CSS3-Transformation haben Präfixe (-moz, -webkit, -Frau, und -O) - Die generische Version hat kein Präfix. Jedes Präfix gilt für andere zugrunde liegenden Motoren in diesen Browsern:

  • Das -moz-Transformations-Skew Code gilt für Mozilla Firefox.

  • Das -Webkit-Transformations-Skew Code gilt für Safari und andere Browser, die auf dem WebKit-Standard entsprechen (die den Dreamweaver CS5 Live-Ansicht enthält).

  • Die generische Transformation: Skew-Code gilt für # 147-alle anderen, # 148- darunter die meisten Wiederholungen von Internet Explorer 9, die kein Browser-Präfix benötigt diese (oder andere) Effekte zu interpretieren. Jedoch erfordern einige Versionen von IE9 die -Frau Präfix. So ist es eine gute Idee, umfassen die -Frau Präfix nur für den Fall.

  • Das -o-border-radius Code gilt für den Opera Browser.

Ähnliche

Menü