einige css elemente nur in bestimmten browsern anzeigen?

[LamaGeli]

Hallo,

ich hab nun das erstmals eine Website in Html5 gestaltet, die einige keyframe animationen enthält.
Bis jetzt funktionieren diese Animationen aber nur in Firefox und IE 9+10.

Jetzt weiß ich zwar, wie man bestimmte Browser ausschließt, aber geht es auch umgekehrt, dass man praktisch sagt: dieses div nur in Firefox und IE ab 9 anzeigen?

Danke schon mal
Geli

Achja, wer die Website anschauen will:

 

[randacek_pro]

AW: einige css elemente nur in bestimmten browsern anzeigen?

aber geht es auch umgekehrt, dass man praktisch sagt: dieses div nur in Firefox und IE ab 9 anzeigen?

Warum das?
Geht es dir nicht eigentlich darum, die Animationen (ich nehme mal an, du meinst zB. den fliegenden Ballon?) auch in anderen Browsern, als dem FF und dem IE ab 9 anzuzeigen?

Mann kann zwar über Conditional Comments bestimmte Passagen (also auch DIVs) nur für den IE zugänglich machen, oder über Browserweichen mittels PHP für jeden Browser eine getrennte Version ausliefern lassen. Das wäre aber nicht gerade die eleganteste Lösung.

Ich gehe jetzt darauf erst mal nicht intensiver ein, da ich mir noch nicht sicher bin, dass ich dein Anliegen wirklich richtig verstehe, denn wie gesagt, m.E. geht es doch darum, dass die Animationen überall laufen, oder?

Lieber Gruß

 

[LamaGeli]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Warum das?
Geht es dir nicht eigentlich darum, die Animationen (ich nehme mal an, du meinst zB. den fliegenden Ballon?) auch in anderen Browsern, als dem FF und dem IE ab 9 anzuzeigen?

..............................

Das Problem ist ja, dass sie (der fliegende Ballon, die Fische) auch in anderen Browsern angezeigt werden, aber nicht fliegen, sondern an Stellen stehen bleiben, wo Sie teilweise Text oder Links überdecken.

Ich könnte die Animationen ja auch mit scripten machen, wie bei dem Flugzeug, aber ich hab mir gedacht, ich warte einfach ab, bis alle Browser CSS Animationen können.
Nur sind es halt viel mehr, die es noch nicht können, als die die es können.

Und z.B. Chrome und Safari werden ja doch sehr häufig benutzt, so dass ich lieber in diesen Browsern vorerst auf die Animationen verzichte, als auf die Funktionalität der Website für diese Browser.

Gruß
Geli

 

[Myhar]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Viel bessere Lösung: Du musst die Animation dort beginnen lassen, wo sie keinen stört. Wer weiß, vielleicht kommt ja mal die Möglichkeit, dass man Animationen in Browsern (vllt auch FF, IE,...) abschalten kann. Du musst immer vom schlechtesten Fall ausgehen und die Seite dann entsprechend deinen Wünschen verbessern

Auch solltest du die Seite mal in mehreren Browsern testen, Opera hat zB ein merkwürdiges Verhalten beim scrollen.
Auch im IE7 sieht die Seite nicht benutzbar aus.

 

[LamaGeli]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Viel bessere Lösung: Du musst die Animation dort beginnen lassen, wo sie keinen stört.

Die Animationen fangen am Rand des Bilschirms an, wenn dieser eine Auflösung von 2560px Breite hat. Also Außerhalb der meisten "normalen" Bildschirme.

Auch solltest du die Seite mal in mehreren Browsern testen, Opera hat zB ein merkwürdiges Verhalten beim scrollen.
Auch im IE7 sieht die Seite nicht benutzbar aus.

Hab ich ja getestet und festgestellt, dass sie außer in Firefox (ab welcher Version muss ich noch prüfen) und IE 9+10 nicht funktioniert.
Deshalb ja meine Frage nach einem Code für: nur in ..... anzeigen.

Ist halt ein Experiment.
Für irgendwas müssen diese neue Funktionen in CSS3 und Html5 doch in der Praxis gut sein.

Gruß
Geli

 

[ArcaJeth]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Über JavaScript "navigator.appName" kannst du den verwendeten Browser herausfinden und dann könntest du das div nur in den gewünschten Browsern anzeigen (eine Klasse "sichtbar" hinzufügen oder sowas in der Art) ... rein über CSS fällt mir sonst nichts ein.

 

[Myhar]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Die Animationen fangen am Rand des Bilschirms an, wenn dieser eine Auflösung von 2560px Breite hat. Also Außerhalb der meisten "normalen" Bildschirme.

[...]

Ist halt ein Experiment.
Für irgendwas müssen diese neue Funktionen in CSS3 und Html5 doch in der Praxis gut sein.

Wenn du deine Elemente mit Bedacht platziert hast, dann treten deine Probleme nicht auf.
Die "neuen Funktionen" sind sehr wohl für etwas gut, nur setzt du sie verkehrt herum ein. Du gehst davon aus, dass du sie "irgendwo" einsetzen kannst und in nicht unterstützten Browsern versteckst.
Sinnvoller ist es, den umgekehrten Ansatz zu wählen: Zuerst machst du deine Seite so, dass sie gänzlich ohne Animationen funktioniert. Ist dieser Zustand erreicht, dann erst pflegst du passende Animationen ein. Das hat den Vorteil, dass du dich nicht darum kümmern musst, welche Browser welche Funktion unterstützen.

 

[LamaGeli]

AW: einige css elemente nur in bestimmten browsern anzeigen?

..............Zuerst machst du deine Seite so, dass sie gänzlich ohne Animationen funktioniert. Ist dieser Zustand erreicht, dann erst pflegst du passende Animationen ein. Das hat den Vorteil, dass du dich nicht darum kümmern musst, welche Browser welche Funktion unterstützen.

So hab ich es ja auch gemacht. Ohne Animationen funktioniert die Seite überall, selbst in alten IE Browsern. Ist ja sonst auch nicht viel dran an der Seite.

Ich werd wohl ein weiteres kleines Layout vorschalten, so dass der Besucher entscheiden kann, ob ers in bunt und bewegt oder in schlicht, langweilig und graphikkartenschonend sehen will

Über JavaScript "navigator.appName" kannst du den verwendeten Browser herausfinden und dann könntest du das div nur in den gewünschten Browsern anzeigen (eine Klasse "sichtbar" hinzufügen oder sowas in der Art) ... rein über CSS fällt mir sonst nichts ein.

aber vorher probier ich das noch aus, Danke

Gruß
Geli

 

[patrick_l]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Sinnvoller ist es, den umgekehrten Ansatz zu wählen: Zuerst machst du deine Seite so, dass sie gänzlich ohne Animationen funktioniert. Ist dieser Zustand erreicht, dann erst pflegst du passende Animationen ein.

+1

So, und nicht anders. Das gilt im übrigen auch für alle anderen Spielereien mit JS und Co. Erst einmal eine gute Basis für alle Browser schaffen. Danach wie Myhar es schon richtig sagte, Animationen und Co einfügen.

Ich werd wohl ein weiteres kleines Layout vorschalten, so dass der Besucher entscheiden kann, ob [...]

Aber bitte fürs Layout keine eigene Landingpage. Gestalte den Weg zu den eigentlichen Inhalten so kurz wie eben möglich. Wenn du mit den Animationen arbeiten möchtest, würde ich es ähnlich wie auf PSD-Tutorials mit einem Icon zum "Switchen" lösen.

Für irgendwas müssen diese neue Funktionen in CSS3 und Html5 doch in der Praxis gut sein.

Nur weil etwas da ist, heißt es ja nicht das es auch produktiv eingesetzt werden kann oder sollte. Es wird auch noch eine Zeit lang dauern, bis wirklich alles in "allen" Browsers implementiert ist.

Liebe Grüße, Patrick

 

[Myhar]

AW: einige css elemente nur in bestimmten browsern anzeigen?

So hab ich es ja auch gemacht. Ohne Animationen funktioniert die Seite überall, selbst in alten IE Browsern. Ist ja sonst auch nicht viel dran an der Seite.

Das widerspricht deiner vorigen Aussage:

Das Problem ist ja, dass sie (der fliegende Ballon, die Fische) auch in anderen Browsern angezeigt werden, aber nicht fliegen, sondern an Stellen stehen bleiben, wo Sie teilweise Text oder Links überdecken.

Also bevor du mit Javascript oder einer "Landigpage" arbeitest, erstelle erst einmal eine Seite, welche auch wirklich ohne Probleme ohne Animationen in allen Browsern angezeigt wird.

 

[Curanai]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Nur weil etwas da ist, heißt es ja nicht das es auch produktiv eingesetzt werden kann oder sollte.

+1

... gilt nicht nur hier.

 

[LamaGeli]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Das widerspricht deiner vorigen Aussage:

Entschuldige, da hab ich mich tatsächlich falsch ausgedrückt. Es müsste heißen:

Das Problem ist ja, dass sie (der fliegende Ballon, die Fische) auch in anderen Browsern angezeigt werden, zwar losfliegen, aber dann an Stellen stehen bleiben, wo Sie teilweise Text oder Links überdecken.

Nur weil etwas da ist, heißt es ja nicht das es auch produktiv eingesetzt werden kann oder sollte.

Es wird auch noch eine Zeit lang dauern, bis wirklich alles in "allen" Browsers implementiert ist.

Ja seufz, aber grad weil das Thema Animation so spannend ist, wollte ich es gleich verwirklichen.

Naja, wahrscheinlich bewahrt mich das "nicht funktionieren in den meisten Browsern" davor, dauernd solche etwas zu lustigen Webseiten zu erstellen.:lol:

Danke und Gruß
Geli

 

[black-hat]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Ich hab mir das jetzt nicht alles durchgelesen, sondern ich beziehe mich jetzt einfach mal auf deinen post... aber allgemein, ist das mit css möglich, also das, mit bestimmten browsern ansprechen....

 

[Myhar]

AW: einige css elemente nur in bestimmten browsern anzeigen?

Entschuldige, da hab ich mich tatsächlich falsch ausgedrückt. Es müsste heißen:

Das Problem ist ja, dass sie (der fliegende Ballon, die Fische) auch in anderen Browsern angezeigt werden, zwar losfliegen, aber dann an Stellen stehen bleiben, wo Sie teilweise Text oder Links überdecken.

Der Weg, je nach Browser unterschiedliche Elemente darzustellen ist trotzdem der falsche.
Die Animationen sollten so gewählt werden, dass diese Probleme nicht auftreten können. Sprich, fliegt der Ballon los und bleibt dann irgendwo (zB über dem Text) stehen, dann kann das eventuell daran liegen, dass die Animation nicht wiederholt abgespielt werden kann. Oder dass die Animation einen Richtungswechsel vorgibt, der nicht interpretiert werden kann. Dann muss der Richtungswechsel/Endpunkt der Animation eben so gewählt werden, dass er keinen Text überdeckt.