background-size in background shorthand

[molily]

Hallo,

einige Browser kennen background-size, aber Opera scheint der einzige zu sein, der background-size in der Shorthand-Eigenschaft background erlaubt:

http://jsfiddle.net/HaTc8/

background: url('https://graph.facebook.com/140216402663925/picture?type=small') center no-repeat;  
background: url('https://graph.facebook.com/140216402663925/picture?type=large') center / cover no-repeat;

Die Syntax ist gemäß
http://www.w3.org/TR/css3-background/#the-background

Ich will ein anderes (größeres) Bild laden, wenn der Browser background-size: cover unterstützt.

Das funktioniert leider nur im Opera. Kann ich das irgendwie anders notieren, sodass ich »Progressive Enhancement« machen kann?

Ich habe mir jetzt mit einer JavaScript-Feature-Detection der background-size-Eigenschaft weiter geholfen. Finde ich aber äußerst unschön.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

background: url('https://graph.facebook.com/140216402663925/picture?type=small') center no-repeat;

background: url('https://graph.facebook.com/140216402663925/picture?type=large') center / cover no-repeat;

  

> Das funktioniert leider nur im Opera. Kann ich das irgendwie anders notieren, sodass ich »Progressive Enhancement« machen kann?  
  
Da war ich auch schon mal: <http://forum.de.selfhtml.org/archiv/2011/4/t204664/#m1386787> ff. Multiple Hintergründe sind bei dir keine Option, oder?  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[molily]

Multiple Hintergründe sind bei dir keine Option, oder?

Wie würde mir das weiterhelfen?

http://jsfiddle.net/ffmPz/3/

Das Problem bei der ganzen Angelegenheit ist der IE < 9. Der stellt in diesem Fall gar kein Hintergrundbild dar. Die letzte background-image-Angabe scheint die erste zu überschreiben, anstatt dass er sie einfach ignoriert.

Und alle anderen Browser laden beide Bilder, was das Laden aller Bilder natürlich halb so schnell macht (dieses Pattern kommt mehrfach vor). Was unschön ist, denn diese Abfrage des Facebook-Graphs ist ohnehin saulahm.

Ich habe schon Tests mit dem AlphaImageLoader gemacht, aber dann habe ich ein ähnliches Problem: Es wird das Hintergrundbild *und* das mit AlphaImageLoader geladene Bild angezeigt. Ich brauche also irgendeine Art Feature-Weiche, um im IE < 9 das background-image auszuschalten. Geht auch nur in JavaScript. Die Regeln können nicht in einem zentralen Stylesheet stehen, sondern sind Inline-Styles. Außerdem kann der AlphaImageLoader nicht zentrieren.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Multiple Hintergründe sind bei dir keine Option, oder?
Wie würde mir das weiterhelfen?

Vielleicht nicht. War nur laut gedacht.

Oder vielleicht doch. Wenn die Browser, die multiple Hintergründe unterstützen, mit denen übereinstimmen, die skalierte Hintergründe unterstützen:

#foo  
{  
  background: url('https://graph.facebook.com/140216402663925/picture?type=small') center no-repeat;  
  background: url('https://graph.facebook.com/140216402663925/picture?type=large') center no-repeat, none;  
  background-size: cover;  
}

Auch nur laut gedacht, nicht getestet.

Qapla'

[molily]

Wenn die Browser, die multiple Hintergründe unterstützen, mit denen übereinstimmen, die skalierte Hintergründe unterstützen:

Offenbar weitesgehend. IE 9 und Firefox 3.6 haben bspw. beides gleichzeitig implementiert. Die Webkits können beides schon seit Äonen.

Opera implementiert sie nicht gleichzeitig, aber das kann ich wohl vernachlässigen, da alle Operas, die background-size können, auch mehrere Hintergrundbilder unterstützen:
http://www.opera.com/docs/specs/presto24/#css (multiple backgrounds)
http://www.opera.com/docs/specs/presto26/#changes (background-size)

Ich glaube, dann nutze ich das eine Feature, um das andere zu erkennen. (Asche auf mein Haupt.) Technisch gesehen ist die Erkennung mit JavaScript natürlich korrekter, denn ich kann direkt auf background-size prüfen. Allerdings mache ich mir dadurch mein Separation of Concerns kaputt.

#foo

{
  background: url('https://graph.facebook.com/140216402663925/picture?type=small') center no-repeat;
  background: url('https://graph.facebook.com/140216402663925/picture?type=large') center no-repeat, none;
  background-size: cover;
}

  
Danke, auf die none-Idee bin ich nicht gekommen. Scheint ganz gut zu funktionieren. IE < 9 lädt das kleine Bild und ignoriert die zweite Angabe.  
  
<http://jsfiddle.net/ffmPz/4/>  
  
Mathias