Hoi BazzyTK e.a.,
in de meeste browsers werkt ook het volgende: ... enz.
Wat is "de meeste"?
- "Prior to version 9.0, Internet Explorer offered no support for background-size.
- "Mozilla Firefox 4.0+"; en "From FF 3.6 to version 4.0, -moz-background-size; no longer support from 4.0 onward".
- "Opera 10.0+" en "-o-background-size in Opera 9.5; discrepancies with CSS3 specification."
- "Safari 4.1+ and Chrome 3.0+" en "Safari 3.0+ and Chrome 1.0+: -webkit-background-size, however without support for the contain and cover keywords".
- Bron: www.css3.info/preview/background-size/
En de stand van zaken van de laatste maand in NL:
Ergo:
- De {background-size: cover} wordt voor (28,1/50=) 56% van de IE-gebruikers niet ondersteund (o.a. het legioen XP-ers die geen IE9 kunnen gebruiken).
- In totaal: zo'n 30% van alle NL surfers niet (incl. FF3.6, maar excl. "other" die niet gespecificeerd zijn in de statistiek).
Die 30% van het publiek zit dus bv. (
testpagina-a) dit:
cover in ie7 en ff3.6 (a)
.. in plaats van dit:
cover in Chrome (a en b)
Met een beetje goede wil (no-repeat, 50% 50%, bg-color erbij;
testpagina-b) valt er nog dit van te maken:
cover in ie7 en ff3.6 (b)
... maar dan houdt het ook op.
Verder moet je ook altijd erg uitkijken met gemiddeldes: daar zitten ook de diehards in die altijd het nieuwste van het nieuwste moeten hebben, of andere browsers dan IE gebruiken (bv. designers, webontwikkelaars, bèta-testers, computerspel-spelers e.a. "geavanceerde" gebruikers). Die zullen de laatste versies wel hebben, of voor de muziek uitlopen.
Maar neem je een doelgroep als de doorsnee Hema-koopjesjager, dan zal het percentage surfers zonder
cover-ondersteuning een stuk hoger liggen dan die 30%.
Conclusie:
Hoewel inderdaad "de meeste browsers" (70%) de cover-eigenschap ondersteunen, valt die 30% toch ook niet uit te vlakken.
Ik zou daarom voorlopig afraden om deze css3-eigenschap te gaan gebruiken als je iedereen een mooi geschaalde background wilt laten zien.
- De schalende "voorgrond-achtergrond afbeelding" van reactie nr. #2 is cross-browser, daar hoef je het niet voor te laten.
Met vriendelijke groet,
CSShunter