pixxma: Abwärtskompatibilität von linear-gradient

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

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

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

    1. 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

      1. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kai und Kaiman.

    2. @@Mitleser:

      nuqneH

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

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

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@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

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. 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

      1. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mond und Mondrian.

        1. @@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'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. @@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'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. 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

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Ata und Atari.

              1. Danke zusammen:-)

                MfG

                pixxma

      2. @@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'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)