Abwärtskompatibilität von linear-gradient

[pixxma]

Hello,

der aktuelle CSS3-Standard für Farbverläufe (hier: Hintergrund einer Seite) scheint ja dieser zu sein:

html { background-image: linear-gradient(to bottom, black 0%, white 20%); }

Versuche ich, eine Kompatibilität mit älteren Browsern herzustellen, bereitet mir das etwas Kopfzerbrechen, weil ich im Internet auf verschiedene Notationen stoße besonders beim webkit-Präfix und bei MS-Filtern. Wäre denn das folgende Komplettpaket o.k.?

html {  
	background-image: -moz-linear-gradient(top, black 0%, white 20%);  
	background-image: -webkit-linear-gradient(top, black 0%, white 20%);  
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, black), color-stop(0.2, white));  
	background-image: -o-linear-gradient(top, black 0%, white 20%);  
	background-image: -ms-linear-gradient(top, black 0%, white 20%);  
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='black', EndColorStr='white');  
	background-image: linear-gradient(to bottom, black 0%, white 20%);  
}

MfG

pixxma

[Mitleser]

http://www.colorzilla.com/gradient-editor/

Gunnar wird Dir sagen, welche Notationen Du weglassen sollst ;-)

[pixxma]

Hallo,

http://www.colorzilla.com/gradient-editor/

Sieht so aus, als ob ich keine Fehler gemacht hätte - oder?

Kann man das -image denn einfach weglassen?

MfG

pixxma

[Matthias Apsel]

Om nah hoo pez nyeetz, pixxma!

Kann man das -image denn einfach weglassen?

Ja aber es bedeutet etwas anderes. http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background Fehlende Angaben werden mit default-Werten initialisiert.

Matthias

[Gunnar Bittersmann]

@@Mitleser:

nuqneH

Gunnar wird Dir sagen, welche Notationen Du weglassen sollst ;-)

„Wird“? Ich hatte das schon längst getan.

Qapla'

[Gunnar Bittersmann]

@@pixxma:

nuqneH

Versuche ich, eine Kompatibilität mit älteren Browsern herzustellen,

Welche sollen das sein? Firefox und Chrome werden automatisch aktualisiert. Safari mehr oder weniger auch.

bereitet mir das etwas Kopfzerbrechen, weil ich im Internet auf verschiedene Notationen stoße besonders beim webkit-Präfix

Die veraltete WebKit-Syntax für Android 2? Lohnt das noch?

und bei MS-Filtern.

Für IE 8 und älter noch Extrawürste braten? Wirklich?

background-image: -moz-linear-gradient(top, black 0%, white 20%);

Schon lange nicht mehr.

background-image: -o-linear-gradient(top, black 0%, white 20%);

Presto ist tot.

background-image: -ms-linear-gradient(top, black 0%, white 20%);

Hat es nie gegeben.*

Qapla'

* außer vielleicht Vorab-Testversionen des IE 10

[pixxma]

Danke für das up-to-date-Bringen,

ich werde dann einfach den aktuellen Standard verwenden und für ältere Browser eine einfache Hintergrundfarbe ohne Verlauf hinzufügen:

html {  
	background-color: yellow;  
	background-image: linear-gradient(to bottom, yellow 0%, green 20%);  
}

MfG

pixxma

[Matthias Apsel]

Om nah hoo pez nyeetz, pixxma!

html {

background-color: yellow;
background-image: linear-gradient(to bottom, yellow 0%, green 20%);
}

  
~~~css
html {  
	background: linear-gradient(to bottom, yellow, green 20%) yellow;  
}

Siehe auch wiki/Linear-gradient()

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

html {

background-color: yellow;  
background-image: linear-gradient(to bottom, yellow 0%, green 20%);  

}

  
Das ist schon gut so.  
  

> ~~~css

html {  

> 	background: linear-gradient(to bottom, yellow, green 20%) yellow;  
> }

Nein, keinesfalls.

Browser, die linear-gradient() kennen, ignorieren die gesamte Deklaration und setzen die Hintergrundfarbe nicht.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Browser, die linear-gradient() kennen, …

Grmpf. Browser, die linear-gradient() nicht kennen, ignorieren die gesamte Deklaration und setzen die Hintergrundfarbe nicht.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Grmpf. Browser, die linear-gradient() nicht kennen, ignorieren die gesamte Deklaration und setzen die Hintergrundfarbe nicht.

Stimmt. Das „0%“ lässt sich aber dennoch sparen ;)

Matthias

[pixxma]

Danke zusammen:-)

MfG

pixxma

[Gunnar Bittersmann]

@@pixxma:

nuqneH

ich werde dann einfach den aktuellen Standard verwenden und für ältere Browser eine einfache Hintergrundfarbe ohne Verlauf hinzufügen:

Progressive enhancement ist immer gut.

Hier würde ich aber für die vielen noch im Umlauf befindlichen WebKits, die den aktuellen Standard noch nicht verwenden (iPhone/iPad, Android), doch noch zusätzlich 'background-image: -webkit-linear-gradient(top, yellow 0%, green 20%);' spendieren.

Qapla'