zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Firefox vs. Webkit: unterschiedliche Gradient-Interpretationen!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.01.2012, 15:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.07.2007
Beiträge: 17
icecream befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Firefox vs. Webkit: unterschiedliche Gradient-Interpretationen!

Liebes xhtmlforum,


ich arbeite zur Zeit an der Umsetzung eines Design, das ich in Adobe Fireworks 5.1 entworfen habe.

Zum ersten mal setze ich dabei auf fast ausschließlich CSS3, um Farbverläufe und Schatten darzustellen. Um die Farbverläufe aus meinem Fireworks-Entwurf zu exportieren, habe ich das geniale Tool namens "CSS Properties / CSS3 Mobile" verwendet.

Ich war begeistert, wie gut es funktioniert, denn im Firefox werden die Verläufe fast exakt so dargestellt, wie im Fireworks-Entwurf:

Fireworks-Entwurf: http://six-strings.de/v2/entwurf.jpg
HTML-Umsetzung: Home ? six strings


Öffne ich dieselbe Seite allerdings in einem Webkit-Browser (Safari/Chrome), werden die Verläufe komplett falsch dargestellt.

So generiere ich bspw. den grauen Button ("Erstmal im Blog stöbern!") mit CSS. Die Verläufe werden mir dabei vom obengenannten Plugin für Fireworks ausgespuckt:

Code:
.buttonblue, .buttonred, .buttongrey {
	height: 25px;
	line-height: normal;
	width: 175px;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	padding-top: 10px;
	background-color:#efefef;
	/* Firefox v1.0+ */
	-moz-border-radius:18px ;
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-border-radius:18px ;
	/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
	border-radius:18px;
	position: relative;
	/* Firefox v3.5+ */
	-moz-text-shadow:0px -1px 0px rgb(0,0,0);
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-text-shadow:0px -1px 0px rgb(0,0,0);
	/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+  and by Opera v10.5+ */
	text-shadow:0px -1px 0px rgb(0,0,0);
	
	zoom:1;
	
	filter:
		progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #ff000000,Positive = true);
	
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #ff000000,Positive = true)";
}

.buttongrey {
	/* Firefox v3.6+ */
	background-image:
	-moz-linear-gradient(49% -213% -90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%); 
	
	/* safari v4.0+ and by Chrome v3.0+ */
	background-image:
	-webkit-gradient(linear,
	49% -213%,
	49% 97%,
	color-stop(0, rgb(239,239,239)),
	color-stop(1, rgb(102,108,115)));
	
	/* Chrome v10.0+ and by safari nightly build*/
	background-image:
	-webkit-linear-gradient(-90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%);
	
	/* Opera v11.10+ */
	background-image:
	-o-linear-gradient(-90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%);
	
	background-image:
	linear-gradient(-90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%);
	
	
	
	filter:
		progid:DXImageTransform.Microsoft.gradient(startColorstr = #ffefefef,endColorstr = #ff666c73,GradientType = 0);
	
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ffefefef,endColorstr = #ff666c73,GradientType = 0)";
}
Hat jemand eine Ahnung, wie es zu diesen enorm unterschiedlichen Interpretationen kommt? Ist der Code falsch, habe ich etwas vergessen?

Ich freue mich über jede Antwort. Vielen Dank im Voraus!


Liebe Grüße

Macks
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.01.2012, 15:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Für aktuelle Webkit-Browser gelten die zweiten -webkit-Verlaufs-Angaben (Da steht was von "Nightly Build", das stimmt nicht mehr).
Wenn man diese Syntax mit der für Firefox vergleicht, fällt auf, dass Werte fehlen. Das dürfte wohl die unterschiedliche Darstellung hervorrufen.
Leider erklärst du nicht, was du mit "komplett falsch" meinst. Und die Angabe der Browser-Version wäre ebenfalls hilfreich.
Ob für alte Webkit-Versionen mit der alten Verlauf-Syntax dein Wunschverlauf möglich ist, weiß ich nicht. Ich würde im Zweifel für diese Browser auf den Verlauf verzichten.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.01.2012, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.07.2007
Beiträge: 17
icecream befindet sich auf einem aufstrebenden Ast
Standard

Hi Corina,


vielen Dank für die schnelle Antwort!

Ich verwende die jeweils aktuellen Versionen der beiden Browser für Mac. Wenn ich den Verlaufscode für die aktuellen Browser bei "[…] Nightly Build […]" einfüge, wird der Verlauf richtig dargestellt, danke.

Sollte ich deiner Einschätzung nach den kompletten Nightly-Absatz rausnehmen oder einfach den Code mit dem der modernen Browser (wie eben beschrieben) ersetzen?


Liebe Grüße

Macks
Mit Zitat antworten
  #4 (permalink)  
Alt 10.01.2012, 16:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich habe gerade nochmal einen genaueren Blick auf diese Verläufe geworfen. Diese Syntax irritiert mich, ich frage mich gerade, ob die so gültig ist (oder es jemals war).
Da steht:
Zitat:
Code:
    -moz-linear-gradient(49% -213% -90deg,
     rgb(239,239,239) 0%,
     rgb(102,108,115) 100%);
Wenn ich das richtig sehe, sollte das folgendem entsprechen:
Code:
    -moz-linear-gradient(
     rgb(239,239,239) -213%,
     rgb(102,108,115));
(Identisch für die anderen Prefixe; -ms- würde ich auch dazunehmen. IE10 freut sich.)
Überflüssige Angaben sind weggelassen (von oben nach unten ist initial).
Ich weiß nicht, auf welche Fassung der Spec sich dein Generator stützt. Die aktuelle ist es aber nicht. Von daher wäre meine Empfehlung: Die Gradients selber schreiben.
Derzeit ist noch das Problem, dass die Spec und die Implementierungen voneinander abweichen (Verlaufsrichtung). Deshalb würde ich auf die Gradzahl verzichten, wenn es sowieso der Initialwert ist. Der ändert sich hoffentlich nicht mehr.

Zitat:
Zitat von icecream Beitrag anzeigen
Sollte ich deiner Einschätzung nach den kompletten Nightly-Absatz rausnehmen oder einfach den Code mit dem der modernen Browser (wie eben beschrieben) ersetzen?
Nein, nein, nicht rausnehmen. Das ist doch das, was aktuell ist. Nicht aktuell ist der Kommentar, der behauptet, das gelte nur für Safari nightly build. Safari 5.1 unterstützt die aktuelle Syntax.

Wenn du etwas weglassen willst, dann die alte Webkit-Syntax. Ich persönlich habe keine Lust, die auch noch zu pflegen. Außerdem würde ich die Filter weglassen.
Wie bei vielem in CSS3 muss man zukünftig ein Auge darauf haben, ob und was sich noch ändert. Gradients sind diesbezüglich eher heikel.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.01.2012, 16:48
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.384
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Hier ein kleiner Link der aktuell bei mir in allen Browsern (IE ausgenommen) das macht was ich will: Ultimate CSS Gradient Generator - ColorZilla.com
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #6 (permalink)  
Alt 10.01.2012, 16:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Auch bei diesem Generator entspricht die allgemeine Syntax nicht dem derzeitigen Stand der Spezifikation.
Das Problem dabei ist, dass man das heute noch in keinem Browser sehen kann.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.01.2012, 17:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.07.2007
Beiträge: 17
icecream befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für eure Antworten.

Den ColorZilla-Generator habe ich auch schon benutzt, aber da ich diesmal spezifische Vorgaben für Verläufeaus meiner Vorlage hatte, die auch noch außerhalb der Container anfangen, dachte ich, ich importier direkt aus Fireworks. (so genau ließen sich die Verläufe mit ColorZilla nämlich nicht rekonstruieren, leider)

Corina, wie sieht es denn aus, wenn ich mich auf die aktuelle Syntax beschränke, gibt es dann mehr Probleme mit älteren Browsern?

Ich bin zwar auch nicht mehr bereit für den IE 6/7 zu fixen, aber ich möchte schon, dass meine Seite im Großteil der Browser passabel aussieht.


Liebe Grüße

Macks
Mit Zitat antworten
  #8 (permalink)  
Alt 10.01.2012, 17:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von icecream Beitrag anzeigen
Corina, wie sieht es denn aus, wenn ich mich auf die aktuelle Syntax beschränke, gibt es dann mehr Probleme mit älteren Browsern?
Du brauchst halt eine Fallback-Lösung. Eine reine Farbe wenn's einfach sein soll, ein Verlaufsbild, wenn es "möglichst gleich" sein soll.
Für "passabel" reicht wohl ersteres.
Mit Zitat antworten
Antwort

Stichwörter
css3, gradient, html5, linear-gradient, verläufe

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Unterschiedliche Darstellung in Firefox / IE memphis2k CSS 16 30.08.2011 17:40
unterschiedliche Größen auf Safari, Firefox Htmlcoder Site- und Layoutcheck 9 05.07.2011 10:51
Unterschiedliche Anzeige im Firefox und IE!??!!? Schengo CSS 5 26.10.2007 12:14
unterschiedliche <p> interpretation von IE und firefox simon2001 CSS 4 27.01.2006 16:31
Unterschiedliche darstellung IE6 und Firefox kruegge CSS 1 20.10.2005 17:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:27 Uhr.